/* ==========================================================================
ia.skanlia — Démonstrateur IA & transaction immobilière
Style premium : sombre, sobre, immobilier-conseil
========================================================================== */
/* -------- 1. Variables -------- */
:root {
--bg-deep: #06111F;
--bg: #07111F;
--bg-soft: #0B1B2B;
--bg-elev: #10243A;
--line: rgba(214, 179, 106, 0.18);
--line-soft: rgba(255, 255, 255, 0.07);
--text: #F8FAFC;
--text-mute: #CBD5E1;
--text-dim: #94A3B8;
--gold: #D6B36A;
--gold-soft: #E6CB94;
--sky: #38BDF8;
--green: #34D399;
--red: #F87171;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
--shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.55);
--shadow-gold: 0 18px 60px -28px rgba(214, 179, 106, 0.45);
--font-sans: "Inter", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t-fast: 180ms;
--t-base: 280ms;
--t-slow: 480ms;
--header-h: 96px; /* hauteur STABLE du header fixe (jamais modifiée au scroll) */
}
/* -------- 2. Reset & base -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Cibles d'ancres : décalées sous le header fixe (specificity 0, n'écrase rien) */
:where(section, [id]) { scroll-margin-top: calc(var(--header-h) + 24px); }
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
color: var(--text);
background: var(--bg);
background-image:
radial-gradient(1200px 600px at 90% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(214, 179, 106, 0.10), transparent 60%),
linear-gradient(180deg, #06111F 0%, #07111F 100%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* repli navigateurs anciens */
overflow-x: clip; /* n'établit pas de conteneur de défilement -> position: sticky fonctionne */
/* Le header est fixed (hors flux) : on réserve sa hauteur en haut du contenu.
Les paddings des pages (.hero / .demo-page) sont réduits d'autant -> aucun double espace. */
padding-top: var(--header-h);
}
h1, h2, h3, h4 { color: var(--text); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h1 { font-size: clamp(38px, 5.5vw, 68px); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; }
h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.35; }
.h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0 0 1em; color: var(--text-mute); }
a { color: var(--gold); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--gold-soft); }
::selection { background: rgba(214, 179, 106, 0.35); color: #fff; }
/* -------- 3. Layout -------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--bleed { padding: 120px 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
.section { padding: 72px 0; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* -------- 4. Header -------- */
/* Header VRAIMENT fixe (collé au viewport), glassmorphism sombre toujours visible,
hauteur STABLE. !important pour qu'aucune règle/MQ ne puisse le repasser en
static/relative/absolute. Enfant direct de (aucun ancêtre transformé). */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
height: var(--header-h); /* hauteur stable et déterministe */
display: flex; align-items: center; /* centre la barre dans la hauteur fixe */
background: rgba(6, 17, 31, 0.88);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
/* Transition douce sur l'aspect uniquement (jamais la taille) */
transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* Léger renforcement au scroll : aspect seulement, pas de changement de hauteur. */
.site-header.is-scrolled {
background: rgba(6, 17, 31, 0.92);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
display: flex; align-items: center; gap: 12px;
color: var(--text); font-weight: 600; letter-spacing: -0.01em; font-size: 17px;
}
.brand__mark {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
display: grid; place-items: center; color: #06111F; font-weight: 700;
box-shadow: 0 8px 24px -10px rgba(214, 179, 106, 0.6);
}
.brand__label small {
display: block; font-size: 11px; font-weight: 500;
color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase;
}
.nav {
display: flex; align-items: center; gap: 6px;
}
.nav a {
color: var(--text-mute); padding: 8px 14px; border-radius: 8px;
font-size: 14.5px; font-weight: 500; letter-spacing: 0.005em;
transition: all var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav a.is-active { color: var(--gold-soft); background: rgba(214, 179, 106, 0.08); }
.nav-toggle {
display: none; background: none; border: 1px solid var(--line-soft);
color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
@media (max-width: 960px) {
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: rgba(7, 17, 31, 0.96); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line-soft); padding: 16px 24px; }
.nav.is-open { display: flex; }
.nav a { padding: 12px 14px; }
.nav-toggle { display: inline-flex; }
.btn--header-cta { display: none; }
}
/* -------- 5. Buttons -------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: 12px;
font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.005em;
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: all var(--t-base) var(--ease);
position: relative; isolation: isolate;
}
.btn--primary {
color: #06111F;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
box-shadow: 0 12px 32px -12px rgba(214, 179, 106, 0.55);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px rgba(214, 179, 106, 0.7);
color: #06111F;
}
.btn--ghost {
color: var(--text); background: transparent;
border-color: rgba(255, 255, 255, 0.16);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.04);
border-color: var(--gold);
color: var(--gold-soft);
transform: translateY(-2px);
}
.btn--small { padding: 9px 16px; font-size: 13.5px; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
/* -------- 6. Badges & utilities -------- */
.badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
background: rgba(214, 179, 106, 0.08); color: var(--gold-soft);
border: 1px solid rgba(214, 179, 106, 0.22);
}
.badge--blue { background: rgba(56, 189, 248, 0.08); color: #7DD3FC; border-color: rgba(56, 189, 248, 0.22); }
.badge--green { background: rgba(52, 211, 153, 0.08); color: #6EE7B7; border-color: rgba(52, 211, 153, 0.22); }
.badge--red { background: rgba(248, 113, 113, 0.08); color: #FCA5A5; border-color: rgba(248, 113, 113, 0.22); }
.badge--neutral { background: rgba(255, 255, 255, 0.05); color: var(--text-mute); border-color: var(--line-soft); }
.eyebrow {
display: inline-block;
font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold); font-weight: 600;
margin-bottom: 16px;
}
.lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--text-mute); line-height: 1.65; max-width: 64ch; }
.muted { color: var(--text-dim); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* -------- 7. Cards -------- */
.card {
position: relative;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 28px;
transition: all var(--t-base) var(--ease);
backdrop-filter: blur(6px);
overflow: hidden;
}
.card::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(135deg, rgba(214, 179, 106, 0.0) 0%, rgba(214, 179, 106, 0.06) 100%);
opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(214, 179, 106, 0.35);
box-shadow: var(--shadow);
}
.card:hover::before { opacity: 1; }
.card__icon {
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: rgba(214, 179, 106, 0.10);
border: 1px solid rgba(214, 179, 106, 0.25);
color: var(--gold-soft);
margin-bottom: 18px; font-size: 20px;
}
.card__title { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.card__text { color: var(--text-mute); font-size: 15px; line-height: 1.6; margin: 0; }
.card--solution {
display: flex; flex-direction: column; padding: 32px;
min-height: 100%;
}
.card--solution .num {
font-family: var(--font-display); font-size: 50px;
color: rgba(214, 179, 106, 0.5); line-height: 1; margin-bottom: 16px;
}
.card--solution h3 { font-size: 22px; margin-bottom: 12px; }
.card--solution ul { list-style: none; padding: 0; margin: 16px 0 24px; }
.card--solution ul li {
position: relative; padding-left: 22px; margin-bottom: 8px;
font-size: 14.5px; color: var(--text-mute);
}
.card--solution ul li::before {
content: ""; position: absolute; left: 0; top: 9px;
width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.card--solution .card__footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.card--risk { border-color: rgba(248, 113, 113, 0.20); }
.card--risk:hover { border-color: rgba(248, 113, 113, 0.50); }
.card--risk .card__icon { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.25); color: #FCA5A5; }
.card--good { border-color: rgba(52, 211, 153, 0.18); }
.card--good .card__icon { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.25); color: #6EE7B7; }
/* -------- 8. Hero -------- */
.hero {
/* total visuel inchangé : body réserve var(--header-h), le hero ajoute le reste */
position: relative; padding: calc(180px - var(--header-h)) 0 100px;
overflow: hidden;
}
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 1080px) {
.hero__inner { grid-template-columns: 1fr; }
.hero__visual { order: 2; }
}
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; font-family: var(--font-display); color: var(--gold-soft); font-weight: 500; }
.hero__sub { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-mute); max-width: 60ch; margin-bottom: 36px; line-height: 1.65; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__visual {
position: relative; min-height: 480px;
display: grid; place-items: center;
}
.hero__halo {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(360px 360px at 60% 40%, rgba(214, 179, 106, 0.18), transparent 70%),
radial-gradient(420px 420px at 30% 70%, rgba(56, 189, 248, 0.14), transparent 70%);
filter: blur(8px);
animation: halo 18s ease-in-out infinite alternate;
}
@keyframes halo {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(-2%, -3%, 0) scale(1.05); }
}
.float-card {
position: absolute; padding: 18px 20px; border-radius: 16px;
background: linear-gradient(180deg, rgba(16, 36, 58, 0.85) 0%, rgba(11, 27, 43, 0.85) 100%);
border: 1px solid rgba(214, 179, 106, 0.28);
box-shadow: var(--shadow);
backdrop-filter: blur(10px);
min-width: 220px;
animation: floaty 6s ease-in-out infinite alternate;
}
.float-card__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; }
.float-card__title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.float-card__text { font-size: 13px; color: var(--text-dim); margin: 0; }
.float-card--1 { top: 6%; left: 4%; animation-delay: 0s; }
.float-card--2 { top: 38%; right: 0%; animation-delay: -2s; }
.float-card--3 { bottom: 6%; left: 16%; animation-delay: -4s; }
@keyframes floaty {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
.hero__grid {
position: absolute; inset: 0; z-index: 0; opacity: 0.35; pointer-events: none;
background-image:
linear-gradient(rgba(214, 179, 106, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(214, 179, 106, 0.07) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);
}
/* -------- 9. Stats strip -------- */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
padding: 28px; margin-top: 56px;
border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}
.stat { text-align: center; padding: 8px 6px; }
.stat__num { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--gold-soft); margin-bottom: 6px; }
.stat__label { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* -------- 10. Section header -------- */
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head--left { margin-left: 0; text-align: left; }
.sec-head p { color: var(--text-mute); margin-top: 12px; font-size: 17px; }
/* -------- 11. Pillars (humain) -------- */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pillar {
text-align: center; padding: 24px 16px;
background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line-soft);
border-radius: var(--radius);
transition: all var(--t-base) var(--ease);
}
.pillar:hover { border-color: rgba(214, 179, 106, 0.35); transform: translateY(-3px); }
.pillar__icon { font-size: 26px; margin-bottom: 12px; }
.pillar__title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.pillar__text { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0; }
@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
/* -------- 12. Footer -------- */
.site-footer {
margin-top: 80px; padding: 56px 0 32px;
border-top: 1px solid var(--line-soft);
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-col h4 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: var(--text-mute); font-size: 14.5px; }
.footer-col ul li a:hover { color: var(--gold-soft); }
.footer-baseline { padding-top: 28px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
/* -------- 13. Demo pages (forms + results) -------- */
.demo-page { padding-top: calc(140px - var(--header-h)); } /* body réserve déjà var(--header-h) */
.demo-head { max-width: 880px; margin-bottom: 48px; }
.demo-head h1 { font-size: clamp(34px, 4vw, 50px); margin-bottom: 18px; }
.demo-layout { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 32px; align-items: start; }
@media (max-width: 1080px) { .demo-layout { grid-template-columns: 1fr; } }
.panel {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 28px;
backdrop-filter: blur(6px);
}
.panel + .panel { margin-top: 20px; }
.panel__title {
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold); font-weight: 600; margin-bottom: 18px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.field { display: block; margin-bottom: 16px; }
.field__label {
display: block; font-size: 13px; font-weight: 500;
color: var(--text-mute); margin-bottom: 8px; letter-spacing: 0.01em;
}
.field__hint { display: block; font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.input, .select, .textarea {
width: 100%; padding: 11px 14px;
background: rgba(7, 17, 31, 0.65); color: var(--text);
border: 1px solid var(--line-soft); border-radius: 10px;
font-family: inherit; font-size: 14.5px; line-height: 1.5;
transition: all var(--t-fast) var(--ease);
}
.textarea { min-height: 90px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: rgba(214, 179, 106, 0.55);
background: rgba(11, 27, 43, 0.9);
box-shadow: 0 0 0 3px rgba(214, 179, 106, 0.10);
}
.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
.field-row, .field-row--3 { grid-template-columns: 1fr; }
}
.fieldset { border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.015); }
.fieldset legend { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding: 0 8px; font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px;
background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft);
font-size: 13px; color: var(--text-mute); cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.check input { display: none; }
.check:has(input:checked) { background: rgba(214, 179, 106, 0.12); border-color: var(--gold); color: var(--gold-soft); }
.result-block { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed var(--line-soft); }
.result-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.result-block h4 {
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold); margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.result-text {
white-space: pre-wrap; word-wrap: break-word;
background: rgba(7, 17, 31, 0.55); padding: 14px 16px;
border: 1px solid var(--line-soft); border-radius: 10px;
font-size: 14.5px; color: var(--text); line-height: 1.65;
}
.copy-btn {
background: transparent; border: 1px solid var(--line-soft); color: var(--text-mute);
font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.copy-btn:hover { color: var(--gold-soft); border-color: var(--gold); }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi {
padding: 14px; border-radius: 10px;
background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(56, 189, 248, 0.18);
}
.kpi__name { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.kpi__val { font-weight: 600; color: var(--text); font-size: 14px; }
.kpi__delta { font-size: 12px; color: #6EE7B7; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
position: relative; padding: 8px 0 8px 28px;
font-size: 14px; color: var(--text-mute); border-bottom: 1px dashed var(--line-soft);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
content: "✓"; position: absolute; left: 0; top: 8px;
width: 18px; height: 18px; border-radius: 50%;
background: rgba(52, 211, 153, 0.15); color: #6EE7B7;
display: grid; place-items: center; font-size: 11px;
}
.score {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px; font-size: 12px;
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.score--faible { background: rgba(52, 211, 153, 0.12); color: #6EE7B7; border: 1px solid rgba(52, 211, 153, 0.3); }
.score--moyen { background: rgba(214, 179, 106, 0.12); color: var(--gold-soft); border: 1px solid rgba(214, 179, 106, 0.3); }
.score--eleve { background: rgba(248, 113, 113, 0.12); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.3); }
.empty-state {
text-align: center; padding: 48px 24px;
border: 1px dashed var(--line-soft); border-radius: var(--radius);
color: var(--text-dim);
}
.empty-state svg { opacity: 0.4; margin-bottom: 14px; }
.spinner {
display: inline-block; width: 14px; height: 14px;
border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--gold);
border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.notice {
padding: 14px 16px; border-radius: 12px;
background: rgba(56, 189, 248, 0.06); border: 1px solid rgba(56, 189, 248, 0.20);
font-size: 13.5px; color: #BAE6FD; margin-bottom: 20px;
}
.notice--warn { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.20); color: #FECACA; }
.notice--ok { background: rgba(52, 211, 153, 0.06); border-color: rgba(52, 211, 153, 0.20); color: #BBF7D0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
font-size: 12px; padding: 4px 10px; border-radius: 999px;
background: rgba(255, 255, 255, 0.04); color: var(--text-mute);
border: 1px solid var(--line-soft);
}
/* -------- 14. Risk table -------- */
.risk-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.risk-table th, .risk-table td {
padding: 14px 16px; text-align: left; font-size: 14px;
border-bottom: 1px solid var(--line-soft);
}
.risk-table th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.risk-table tr:last-child td { border-bottom: 0; }
.risk-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
/* -------- 15. Animations on scroll -------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
/* -------- 16. Before/after (projection) -------- */
.ba {
position: relative; border-radius: var(--radius-lg); overflow: hidden;
background: linear-gradient(135deg, rgba(11, 27, 43, 0.8), rgba(16, 36, 58, 0.8));
border: 1px solid var(--line-soft); min-height: 360px;
}
.ba__panel { padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 360px; }
.ba__side {
position: relative; display: grid; place-items: center;
padding: 20px; text-align: center;
background: linear-gradient(135deg, rgba(7, 17, 31, 0.6), rgba(11, 27, 43, 0.6));
}
.ba__side + .ba__side { border-left: 1px solid var(--line-soft); }
.ba__label {
position: absolute; top: 14px; left: 14px;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); color: var(--gold-soft);
}
.ba__placeholder {
font-family: var(--font-display); font-size: 48px; color: rgba(214, 179, 106, 0.4);
}
.ba__caption {
padding: 16px 24px; font-size: 12px; color: var(--text-dim);
border-top: 1px solid var(--line-soft); background: rgba(7, 17, 31, 0.6); text-align: center;
}
/* -------- 17. Steps (synthese) -------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); }
.step__num { font-family: var(--font-display); font-size: 32px; color: var(--gold-soft); margin-bottom: 8px; }
.step h4 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 14px; margin: 0; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr 1fr; } }
/* -------- 18. Pitch -------- */
.pitch {
padding: 36px; border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(214, 179, 106, 0.08), rgba(56, 189, 248, 0.05));
border: 1px solid rgba(214, 179, 106, 0.25);
position: relative;
}
.pitch::before {
content: "“"; position: absolute; top: -10px; left: 18px;
font-family: var(--font-display); font-size: 100px; color: var(--gold);
line-height: 1; opacity: 0.6;
}
.pitch p { font-size: 17px; line-height: 1.7; color: var(--text); }
/* -------- 19. Scroll bar -------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(214, 179, 106, 0.2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(214, 179, 106, 0.4); }
/* -------- 20. Misc -------- */
.divider { height: 1px; background: var(--line-soft); margin: 32px 0; border: 0; }
/* ==========================================================================
V1.1 — Amélioration visuelle accueil premium
Ajouts uniquement, ne casse pas l'existant
========================================================================== */
/* -------- 21. Background scenography (body grain + blobs) -------- */
.bg-stage {
position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.bg-stage::before {
content: ""; position: absolute; inset: -20%;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.18; mix-blend-mode: overlay;
}
.blob {
position: absolute; border-radius: 50%;
filter: blur(80px); opacity: 0.55; will-change: transform;
}
.blob--gold { width: 540px; height: 540px; background: radial-gradient(circle, rgba(214,179,106,0.55), transparent 60%); top: -120px; right: -120px; animation: blobA 22s ease-in-out infinite alternate; }
.blob--sky { width: 620px; height: 620px; background: radial-gradient(circle, rgba(56,189,248,0.40), transparent 60%); top: 35%; left: -180px; animation: blobB 28s ease-in-out infinite alternate; }
.blob--deep { width: 700px; height: 700px; background: radial-gradient(circle, rgba(56,189,248,0.18), transparent 60%); bottom: -240px; right: 10%; animation: blobC 36s ease-in-out infinite alternate; }
@keyframes blobA { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-40px,60px,0) scale(1.08); } }
@keyframes blobB { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(60px,-40px,0) scale(1.10); } }
@keyframes blobC { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-30px,-50px,0) scale(0.95); } }
/* -------- 22. Hero v2 -------- */
.hero { padding-bottom: 60px; }
.hero h1 { font-weight: 600; }
.hero h1 em {
background: linear-gradient(115deg, var(--gold) 0%, #F4DBA1 45%, var(--gold-soft) 70%, var(--gold) 100%);
background-size: 220% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 7s linear infinite;
font-style: normal; font-family: var(--font-display); font-weight: 600;
letter-spacing: -0.012em;
}
@keyframes shine { to { background-position: 220% center; } }
.hero__cta .btn { position: relative; }
.btn--primary::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
background-size: 220% 100%; background-position: 220% 0;
transition: background-position 700ms var(--ease);
mix-blend-mode: overlay; opacity: 0.7;
}
.btn--primary:hover::after { background-position: -20% 0; }
.btn--magnetic { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); will-change: transform; }
/* -------- 23. Hero mockup (dashboard IA crédible) -------- */
.mockup {
position: relative; width: 100%; max-width: 540px;
border-radius: 20px;
background: linear-gradient(180deg, rgba(16,36,58,0.92) 0%, rgba(11,27,43,0.92) 100%);
border: 1px solid rgba(214,179,106,0.28);
box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
padding: 22px; backdrop-filter: blur(10px);
z-index: 1;
}
.mockup::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(214,179,106,0.6), rgba(214,179,106,0) 40%, rgba(56,189,248,0.4) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none; opacity: 0.7;
}
.mockup__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 4px 6px 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px;
}
.mockup__dots { display: flex; gap: 6px; }
.mockup__dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.mockup__title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.mockup__pill { font-size: 11px; padding: 3px 10px; border-radius: 999px;
background: rgba(52,211,153,0.10); color: #6EE7B7; border: 1px solid rgba(52,211,153,0.25);
display: inline-flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: 0.04em;
}
.mockup__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px rgba(52,211,153,0.7); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.mockup__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; margin-bottom: 12px; }
.mockup__tile {
padding: 14px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line-soft);
}
.mockup__tile-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.mockup__tile-val { font-size: 22px; font-weight: 600; color: var(--text); font-family: var(--font-display); line-height: 1.1; }
.mockup__tile-delta { font-size: 12px; color: #6EE7B7; margin-top: 2px; }
.mockup__tile-delta.is-warn { color: #FCA5A5; }
.mockup__lines { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line-soft);
}
.mockup__line {
height: 8px; border-radius: 4px;
background: linear-gradient(90deg, rgba(214,179,106,0.18), rgba(214,179,106,0.05));
position: relative; overflow: hidden;
}
.mockup__line::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
animation: typing 2.4s ease-in-out infinite;
}
.mockup__line:nth-child(1) { width: 92%; }
.mockup__line:nth-child(2) { width: 76%; }
.mockup__line:nth-child(3) { width: 64%; }
.mockup__line:nth-child(4) { width: 84%; }
.mockup__line:nth-child(2)::after { animation-delay: 0.3s; }
.mockup__line:nth-child(3)::after { animation-delay: 0.6s; }
.mockup__line:nth-child(4)::after { animation-delay: 0.9s; }
@keyframes typing { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }
.spark { width: 100%; height: 56px; }
.spark path.line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawSpark 2.6s 200ms var(--ease) forwards; }
.spark path.area { fill: url(#sparkGrad); opacity: 0.35; }
@keyframes drawSpark { to { stroke-dashoffset: 0; } }
.mockup__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-dim); }
.mockup__footer strong { color: var(--gold-soft); font-weight: 600; }
/* small chips floating around mockup */
.chip-float {
position: absolute; display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 999px;
background: rgba(7,17,31,0.85); backdrop-filter: blur(12px);
border: 1px solid rgba(214,179,106,0.28);
font-size: 12.5px; font-weight: 500; color: var(--text);
box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6);
z-index: 2;
}
.chip-float::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(214,179,106,0.8); }
.chip-float--green::before { background: #34D399; box-shadow: 0 0 10px rgba(52,211,153,0.8); }
.chip-float--blue::before { background: var(--sky); box-shadow: 0 0 10px rgba(56,189,248,0.8); }
.chip-float--1 { top: -14px; left: -30px; animation: chipFloat 6s ease-in-out infinite alternate; }
.chip-float--2 { top: 38%; right: -50px; animation: chipFloat 6s 1.5s ease-in-out infinite alternate; }
.chip-float--3 { bottom: -10px; left: 12%; animation: chipFloat 6s 3s ease-in-out infinite alternate; }
@keyframes chipFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
@media (max-width: 1080px) {
.chip-float--1 { left: 6%; }
.chip-float--2 { right: 6%; }
}
/* -------- 24. Marquee techniques IA -------- */
.marquee {
position: relative; overflow: hidden;
padding: 28px 0; margin: 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.15));
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
display: flex; gap: 56px; width: max-content;
animation: marquee 38s linear infinite;
align-items: center;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
display: inline-flex; align-items: center; gap: 12px;
color: var(--text-mute); font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
white-space: nowrap;
}
.marquee__item::before {
content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
display: inline-block;
}
.marquee__dot { color: var(--gold); font-size: 18px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* -------- 25. Section dividers (between sections) -------- */
.section-rule {
height: 1px; border: 0; margin: 0;
background: linear-gradient(90deg, transparent, rgba(214,179,106,0.35), transparent);
}
/* -------- 26. Cards v2 — gradient border on hover -------- */
.card { transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease); }
.card::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, rgba(214,179,106,0.55), rgba(56,189,248,0.30) 60%, rgba(214,179,106,0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity 320ms var(--ease); pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card--risk:hover::after { background: linear-gradient(135deg, rgba(248,113,113,0.55), rgba(248,113,113,0.1) 60%, transparent); }
.card--good:hover::after { background: linear-gradient(135deg, rgba(52,211,153,0.55), rgba(52,211,153,0.1) 60%, transparent); }
.card--solution { padding: 36px; }
.card--solution .num {
display: inline-block; font-family: var(--font-display); font-size: 56px;
color: rgba(214,179,106,0.45);
background: linear-gradient(180deg, rgba(214,179,106,0.85), rgba(214,179,106,0.15));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
line-height: 1; margin-bottom: 14px;
}
/* -------- 27. Stats v2 -------- */
.stats {
background:
linear-gradient(180deg, rgba(214,179,106,0.04), rgba(255,255,255,0)),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
border-color: rgba(214,179,106,0.18);
box-shadow: 0 20px 60px -30px rgba(214,179,106,0.20);
}
.stat__num {
background: linear-gradient(180deg, #F4DBA1 0%, #D6B36A 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
/* -------- 28. Pillars v2 -------- */
.pillar {
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
position: relative; overflow: hidden;
}
.pillar::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: linear-gradient(180deg, rgba(214,179,106,0.45), rgba(214,179,106,0));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity 280ms var(--ease); pointer-events: none;
}
.pillar:hover::before { opacity: 1; }
.pillar__icon {
display: inline-grid; place-items: center;
width: 44px; height: 44px; margin: 0 auto 14px;
border-radius: 12px;
background: rgba(214,179,106,0.10);
border: 1px solid rgba(214,179,106,0.20);
font-size: 20px; color: var(--gold-soft);
}
/* -------- 29. Pipeline section -------- */
.pipeline {
position: relative; padding: 32px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
border: 1px solid var(--line-soft);
}
.pipeline__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch; }
.pipeline__step {
position: relative; padding: 18px;
border: 1px solid var(--line-soft); border-radius: 14px;
background: rgba(7,17,31,0.55);
transition: transform 240ms var(--ease), border-color 240ms var(--ease);
}
.pipeline__step:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.35); }
.pipeline__step h4 { font-size: 14px; margin-bottom: 6px; }
.pipeline__step p { font-size: 12.5px; color: var(--text-dim); margin: 0; line-height: 1.5; }
.pipeline__step .num {
display: inline-block; font-family: var(--font-display); color: var(--gold-soft);
font-size: 14px; letter-spacing: 0.04em; margin-bottom: 8px;
}
.pipeline__arrow {
position: absolute; top: 50%; right: -10px; width: 18px; height: 18px;
transform: translateY(-50%); display: grid; place-items: center;
color: var(--gold); opacity: 0.55; pointer-events: none;
}
@media (max-width: 960px) {
.pipeline__row { grid-template-columns: 1fr 1fr; }
.pipeline__arrow { display: none; }
}
/* -------- 30. Footer v2 -------- */
.site-footer {
position: relative; overflow: hidden;
}
.site-footer::before {
content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(214,179,106,0.45), transparent);
}
.footer-brand {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
font-weight: 600; color: var(--text); font-size: 16px;
}
.footer-brand .brand__mark { width: 32px; height: 32px; font-size: 13px; border-radius: 8px; }
/* -------- 31. Reduced motion respect -------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
.reveal { opacity: 1; transform: none; }
}
.skip-link {
position: fixed; top: -100px; left: 12px; padding: 10px 14px;
background: var(--gold); color: #06111F; border-radius: 8px; z-index: 10000; font-weight: 600;
transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; }
/* ==========================================================================
V1.2 — Démonstrations premium : aperçus visuels réalistes
========================================================================== */
/* -------- 40. En-tête de génération + badge fournisseur -------- */
.gen-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.prov-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
letter-spacing: 0.02em; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.04);
color: var(--text-mute);
}
.prov-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.prov-badge--gemini { color: var(--gold-soft); background: rgba(214,179,106,0.10); border-color: rgba(214,179,106,0.30); }
.prov-badge--groq { color: #7DD3FC; background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.30); }
.prov-badge--demo { color: #FCA5A5; background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); }
.gen-head__time { font-size: 12px; color: var(--text-dim); }
/* -------- 41. Bloc preview générique -------- */
.preview { margin-bottom: 22px; }
.preview__cap {
font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold); font-weight: 600; margin-bottom: 10px;
display: flex; align-items: center; gap: 10px;
}
.preview__cap .copy-btn { margin-left: auto; }
.preview__cap svg { width: 15px; height: 15px; opacity: 0.8; }
/* -------- 42. Image principale du bien -------- */
.pv-hero {
position: relative; border-radius: 16px; overflow: hidden;
border: 1px solid var(--line-soft); background: var(--bg-soft);
aspect-ratio: 16 / 10; box-shadow: var(--shadow-sm);
}
.pv-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-hero__tag {
position: absolute; top: 12px; left: 12px;
background: rgba(6,17,31,0.78); color: #fff; backdrop-filter: blur(6px);
font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12);
}
.pv-hero__price {
position: absolute; bottom: 12px; right: 12px;
background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F;
font-size: 16px; font-weight: 700; padding: 8px 14px; border-radius: 10px;
box-shadow: 0 10px 24px -10px rgba(214,179,106,0.6);
}
/* Cartes claires réalistes (mimétisme plateformes) */
.light-card { background: #fff; color: #1f2933; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); }
/* -------- 43. Snippet Google (SERP) -------- */
.serp {
background: #fff; color: #202124; border-radius: 12px; padding: 16px 18px;
font-family: arial, sans-serif; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7);
}
.serp__url { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.serp__fav {
width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
background: #e8eaed; display: grid; place-items: center; font-size: 12px; color: #5f6368; font-weight: 700;
}
.serp__site { line-height: 1.1; }
.serp__site b { display: block; font-size: 14px; color: #202124; font-weight: 400; }
.serp__site span { font-size: 12px; color: #5f6368; }
.serp__title { color: #1a0dab; font-size: 20px; line-height: 1.3; margin: 4px 0 3px; font-weight: 400; }
.serp__desc { color: #4d5156; font-size: 14px; line-height: 1.58; margin: 0; }
.serp__desc b { color: #4d5156; font-weight: 700; }
/* -------- 44. Annonce portail immobilier -------- */
.listing { background: #fff; color: #1f2933; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); }
.listing__media { position: relative; aspect-ratio: 16 / 9; background: #e5e7eb; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__price { position: absolute; left: 12px; bottom: 12px; background: rgba(17,24,39,0.92); color: #fff; font-weight: 700; font-size: 17px; padding: 7px 13px; border-radius: 8px; }
.listing__fav { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: #ef4444; font-size: 16px; }
.listing__body { padding: 16px 18px; }
.listing__title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.listing__loc { font-size: 13.5px; color: #6b7280; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.listing__feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.listing__feat { font-size: 12.5px; color: #374151; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; }
.listing__desc { font-size: 13.5px; color: #4b5563; line-height: 1.6; margin: 0 0 14px; }
.listing__footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid #eef0f2; padding-top: 12px; }
.listing__logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.listing__agency { font-size: 13px; color: #374151; font-weight: 600; }
.listing__agency small { display: block; font-weight: 400; color: #9ca3af; font-size: 11.5px; }
.listing__dpe { margin-left: auto; font-weight: 700; font-size: 12px; color: #166534; background: #dcfce7; border-radius: 6px; padding: 4px 9px; }
/* -------- 45. Cartes réseaux sociaux -------- */
.social { background: #fff; color: #1c1e21; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); }
.social__head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.social__avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.social__id { line-height: 1.25; }
.social__name { font-size: 14.5px; font-weight: 700; color: #050505; }
.social__name svg { width: 14px; height: 14px; vertical-align: -2px; margin-left: 4px; }
.social__meta { font-size: 12px; color: #65676b; display: flex; align-items: center; gap: 5px; }
.social__net { margin-left: auto; font-weight: 700; font-size: 13px; }
.social__body { padding: 0 15px 12px; font-size: 14px; line-height: 1.55; color: #1c1e21; white-space: pre-wrap; word-wrap: break-word; }
.social__media { aspect-ratio: 1.91 / 1; background: #e4e6eb; }
.social__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social__actions { display: flex; border-top: 1px solid #eceef0; }
.social__action { flex: 1; text-align: center; padding: 10px; font-size: 13px; color: #65676b; font-weight: 600; }
.social--linkedin .social__net { color: #0a66c2; }
.social--facebook .social__net { color: #1877f2; }
/* Instagram (photo-first) */
.ig { background: #fff; color: #262626; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); }
.ig__head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; }
.ig__avatar { width: 34px; height: 34px; border-radius: 50%; padding: 2px; background: linear-gradient(45deg, #feda75, #d62976, #962fbf); }
.ig__avatar span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #262626; font-weight: 700; font-size: 12px; }
.ig__name { font-size: 13.5px; font-weight: 700; color: #262626; }
.ig__media { aspect-ratio: 1 / 1; background: #efefef; }
.ig__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig__icons { display: flex; gap: 16px; padding: 10px 13px 4px; font-size: 19px; color: #262626; }
.ig__icons .heart { color: #ed4956; }
.ig__caption { padding: 0 13px 13px; font-size: 13.5px; line-height: 1.5; color: #262626; white-space: pre-wrap; }
.ig__caption b { font-weight: 700; }
/* -------- 46. Fiche Google Business Profile -------- */
.gbp { background: #fff; color: #202124; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); padding: 16px 18px; }
.gbp__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gbp__logo { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; display: grid; place-items: center; font-weight: 700; }
.gbp__name { font-size: 17px; font-weight: 600; color: #202124; }
.gbp__rating { font-size: 13px; color: #5f6368; display: flex; align-items: center; gap: 6px; }
.gbp__stars { color: #fbbc04; letter-spacing: 1px; }
.gbp__cat { font-size: 12.5px; color: #5f6368; }
.gbp__post { font-size: 13.5px; color: #3c4043; line-height: 1.6; border-top: 1px solid #ecedef; padding-top: 12px; margin: 4px 0 0; white-space: pre-wrap; }
.gbp__cta { display: inline-block; margin-top: 12px; color: #1a73e8; font-weight: 600; font-size: 13.5px; }
/* -------- 47. Carrousel -------- */
.carousel { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; }
.carousel::-webkit-scrollbar { height: 8px; }
.carousel__slide {
scroll-snap-align: start; flex: 0 0 auto; width: 190px; aspect-ratio: 4 / 5;
border-radius: 16px; padding: 18px; display: flex; flex-direction: column;
background: linear-gradient(160deg, rgba(214,179,106,0.18), rgba(56,189,248,0.10)), var(--bg-elev);
border: 1px solid rgba(214,179,106,0.25); color: var(--text);
}
.carousel__num { font-family: var(--font-display); font-size: 30px; color: var(--gold-soft); line-height: 1; margin-bottom: 10px; }
.carousel__t { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.carousel__x { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; margin: 0; }
.carousel__slide:nth-child(even) { background: linear-gradient(160deg, rgba(56,189,248,0.14), rgba(214,179,106,0.10)), var(--bg-elev); }
/* -------- 48. Storyboard vidéo (reel) -------- */
.reel { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
@media (max-width: 520px) { .reel { grid-template-columns: 1fr; } }
.reel__phone {
position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft)); border: 2px solid rgba(255,255,255,0.10);
display: grid; place-items: center;
}
.reel__phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 50px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.18); }
.reel__play { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: #06111F; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6); }
.reel__play::after { content: ""; border-left: 16px solid #06111F; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.reel__dur { position: absolute; bottom: 10px; right: 10px; font-size: 11px; background: rgba(0,0,0,0.6); color: #fff; padding: 3px 8px; border-radius: 6px; }
.reel__script { display: flex; flex-direction: column; gap: 10px; }
.reel__seg { background: rgba(7,17,31,0.55); border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 13px; }
.reel__seg b { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.reel__seg p { font-size: 13.5px; color: var(--text-mute); margin: 0; line-height: 1.5; }
/* -------- 49. Planning de diffusion (timeline) -------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), transparent); }
.timeline__row { position: relative; padding: 0 0 16px 14px; }
.timeline__row::before { content: ""; position: absolute; left: -20px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.timeline__when { font-size: 12px; color: var(--gold-soft); font-weight: 600; letter-spacing: 0.04em; }
.timeline__what { font-size: 13.5px; color: var(--text); margin-top: 2px; }
.timeline__chan { font-size: 12px; color: var(--text-dim); }
/* -------- 50. Kit grid -------- */
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .kit-grid { grid-template-columns: 1fr; } }
.kit-grid .preview { margin-bottom: 0; }
/* -------- 51. Galerie d'images (projection) -------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.gallery__item {
position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
border: 1px solid var(--line-soft); cursor: pointer; padding: 0; background: var(--bg-soft);
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.4); }
.gallery__item.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(214,179,106,0.5); }
.gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 4px 8px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); text-align: left; }
.gallery__credit { font-size: 11px; color: var(--text-dim); margin-top: 8px; }
/* -------- 52. Uploader -------- */
.uploader {
display: flex; align-items: center; gap: 12px; padding: 14px;
border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,0.015);
cursor: pointer; transition: border-color var(--t-fast) var(--ease);
}
.uploader:hover { border-color: var(--gold); }
.uploader input { display: none; }
.uploader__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(214,179,106,0.12); border: 1px solid rgba(214,179,106,0.25); display: grid; place-items: center; color: var(--gold-soft); }
.uploader__text { font-size: 13px; color: var(--text-mute); }
.uploader__text b { color: var(--text); display: block; font-size: 13.5px; }
/* -------- 53. Before/after avec vraies images -------- */
.ba__side { overflow: hidden; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ba__side .ba__label, .ba__side .ba__placeholder, .ba__side p { position: relative; z-index: 1; }
.ba__side.has-img .ba__placeholder, .ba__side.has-img p { display: none; }
.ba__side.has-img .ba__label { background: rgba(6,17,31,0.82); }
.ba__side--after.is-loading::after {
content: ""; position: absolute; inset: 0; z-index: 2;
background: rgba(6,17,31,0.55) url("data:image/svg+xml;utf8,") center / 40px no-repeat;
}
.ba__badge {
position: absolute; top: 14px; right: 14px; z-index: 2;
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
}
.ba__badge--ia { background: rgba(56,189,248,0.18); color: #7DD3FC; border: 1px solid rgba(56,189,248,0.4); }
.ba__badge--demo { background: rgba(248,113,113,0.14); color: #FCA5A5; border: 1px solid rgba(248,113,113,0.35); }
/* -------- 54. Mention obligatoire mise en avant -------- */
.mention-ia {
display: flex; align-items: flex-start; gap: 10px;
font-size: 12.5px; color: var(--gold-soft); background: rgba(214,179,106,0.07);
border: 1px solid rgba(214,179,106,0.22); border-radius: 10px; padding: 10px 13px; margin-top: 14px;
}
.mention-ia svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
/* -------- 55. Toolbar (boutons d'action résultat) -------- */
.gen-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; }
/* ==========================================================================
V1.3 — Module Annonces SEO/GEO : scores, onglets, FAQ, schema
========================================================================== */
/* -------- 60. Anneaux de score -------- */
.score-rings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 680px) { .score-rings { grid-template-columns: repeat(2, 1fr); } }
.ring {
text-align: center; padding: 14px 6px 12px; border: 1px solid var(--line-soft);
border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}
.ring__svg { width: 84px; height: 84px; display: block; margin: 0 auto 8px; }
.ring__track { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 8; }
.ring__bar { fill: none; stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s var(--ease); }
.ring__num { font-family: var(--font-display); font-size: 21px; font-weight: 600; fill: var(--text); }
.ring__den { font-size: 9px; fill: var(--text-dim); }
.ring__label { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.ring__hint { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.ring--good .ring__bar { stroke: #34D399; }
.ring--mid .ring__bar { stroke: var(--gold); }
.ring--low .ring__bar { stroke: #F87171; }
/* -------- 61. Onglets -------- */
.tabs {
display: flex; gap: 4px; flex-wrap: wrap;
border-bottom: 1px solid var(--line-soft); margin-bottom: 20px;
}
.tab {
background: none; border: 0; border-bottom: 2px solid transparent;
color: var(--text-mute); padding: 10px 14px; font-family: inherit;
font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0;
transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.tab.is-active { color: var(--gold-soft); border-bottom-color: var(--gold); background: rgba(214,179,106,0.06); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tabIn 0.3s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* -------- 62. Hero fiche bien (site agence) -------- */
.agency-hero { background: #fff; color: #1f2933; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px -22px rgba(0,0,0,0.7); }
.agency-hero__media { aspect-ratio: 16 / 7; background: #e5e7eb; position: relative; }
.agency-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agency-hero__price { position: absolute; right: 14px; bottom: 14px; background: rgba(17,24,39,0.92); color: #fff; font-weight: 700; padding: 7px 13px; border-radius: 8px; }
.agency-hero__body { padding: 18px 20px; }
.agency-hero__h1 { font-size: 21px; font-weight: 700; color: #111827; margin: 0 0 6px; }
.agency-hero__intro { color: #4b5563; font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.agency-hero__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.agency-hero__list li { position: relative; padding-left: 22px; font-size: 13.5px; color: #374151; }
.agency-hero__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 700; }
@media (max-width: 520px) { .agency-hero__list { grid-template-columns: 1fr; } }
/* -------- 63. FAQ acquéreur -------- */
.faq__item { border-bottom: 1px dashed var(--line-soft); padding: 11px 0; }
.faq__item:last-child { border-bottom: 0; }
.faq__q { font-weight: 600; color: var(--text); font-size: 14px; margin: 0 0 4px; display: flex; gap: 8px; }
.faq__q::before { content: "Q"; color: var(--gold); font-weight: 700; }
.faq__a { color: var(--text-mute); font-size: 13.5px; line-height: 1.55; margin: 0; padding-left: 18px; }
/* -------- 64. Liste de faits GEO -------- */
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { position: relative; padding: 7px 0 7px 26px; font-size: 14px; color: var(--text-mute); border-bottom: 1px dashed var(--line-soft); }
.facts li:last-child { border-bottom: 0; }
.facts li::before { content: "›"; position: absolute; left: 6px; top: 6px; color: var(--gold); font-weight: 700; }
/* -------- 65. Analyse (colonnes) -------- */
.analysis-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .analysis-cols { grid-template-columns: 1fr; } }
.analysis-box { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,0.015); }
.analysis-box h5 { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.analysis-box--good h5 { color: #6EE7B7; }
.analysis-box--warn h5 { color: #FCA5A5; }
.analysis-box--miss h5 { color: var(--gold-soft); }
.analysis-box--reco h5 { color: #7DD3FC; }
.analysis-box ul { list-style: none; padding: 0; margin: 0; }
.analysis-box li { font-size: 13.5px; color: var(--text-mute); padding: 5px 0 5px 18px; position: relative; line-height: 1.45; }
.analysis-box li::before { content: "•"; position: absolute; left: 2px; color: currentColor; opacity: 0.6; }
/* -------- 66. Bloc code (JSON-LD) -------- */
.code-block { position: relative; background: #0b1320; border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; overflow: auto; max-height: 460px; }
.code-block pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: #cbd5e1; white-space: pre; line-height: 1.55; }
.code-disclaimer { font-size: 12px; color: var(--text-dim); margin: 10px 0 0; }
/* ==========================================================================
V1.4 — Annonces : biens multi-photos, carrousels, fiche vitrine
========================================================================== */
/* -------- 70. Sélecteur de biens de démonstration -------- */
.prop-picker { display: grid; grid-template-columns: 1fr; gap: 10px; }
.prop-card { display: flex; gap: 12px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.prop-card:hover { border-color: rgba(214,179,106,0.45); transform: translateY(-2px); }
.prop-card.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(214,179,106,0.4); }
.prop-card__media { width: 88px; height: 62px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: var(--bg-soft); }
.prop-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-card__body { display: flex; flex-direction: column; min-width: 0; }
.prop-card__body strong { font-size: 14px; color: var(--text); }
.prop-card__body span { font-size: 12.5px; color: var(--text-dim); }
/* -------- 71. Banque d'images -------- */
.img-bank { margin-top: 16px; }
.img-bank__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gallery__badge { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; z-index: 1; }
.placeholder-note { font-size: 12px; color: var(--gold-soft); background: rgba(214,179,106,0.07); border: 1px solid rgba(214,179,106,0.22); border-radius: 8px; padding: 8px 11px; margin: 0 0 14px; }
/* -------- 72. Bandeau miniatures (portail / vitrine) -------- */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumb { width: 70px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* -------- 73. Carrousel Instagram (mockup) -------- */
.ig-carousel { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.ig-slide { scroll-snap-align: center; flex: 0 0 auto; width: 76%; max-width: 300px; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; position: relative; background: var(--bg-elev); border: 1px solid var(--line-soft); }
.ig-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-slide__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
.ig-slide__num { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; }
.ig-slide--synth { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 22px; background: linear-gradient(160deg, rgba(214,179,106,0.22), rgba(56,189,248,0.12)), var(--bg-elev); }
.ig-slide--synth h5 { margin: 0 0 12px; font-size: 15px; color: var(--text); }
.ig-slide--synth .stat-line { font-size: 14px; color: var(--text-mute); margin: 3px 0; }
.ig-slide--synth .stat-line b { color: var(--gold-soft); }
.carousel-hint { font-size: 12px; color: var(--text-dim); margin: 2px 0 0; }
/* -------- 74. Carrousel Facebook -------- */
.fb-carousel { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.fb-carousel__item { flex: 0 0 auto; width: 44%; max-width: 200px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; position: relative; background: #e4e6eb; }
.fb-carousel__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-carousel__item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); }
/* -------- 75. Fiche vitrine (page bien complète) -------- */
.vitrine { background: #fff; color: #1f2933; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px -24px rgba(0,0,0,0.75); }
.vitrine__hero { position: relative; aspect-ratio: 16 / 8; background: #e5e7eb; }
.vitrine__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine__price { position: absolute; right: 16px; bottom: 16px; background: rgba(17,24,39,0.92); color: #fff; font-weight: 700; font-size: 20px; padding: 9px 16px; border-radius: 10px; }
.vitrine__tag { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,0.92); color: #111827; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 8px; }
.vitrine__body { padding: 20px 22px; }
.vitrine__h1 { font-size: 24px; font-weight: 700; color: #111827; margin: 0 0 6px; }
.vitrine__loc { font-size: 14px; color: #6b7280; margin: 0 0 16px; display: flex; align-items: center; gap: 6px; }
.vitrine__specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 560px) { .vitrine__specs { grid-template-columns: repeat(2, 1fr); } }
.spec { border: 1px solid #eef0f2; border-radius: 10px; padding: 10px 12px; text-align: center; background: #fafbfc; }
.spec__v { font-size: 17px; font-weight: 700; color: #111827; }
.spec__k { font-size: 11.5px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.vitrine__h2 { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #9a7b3a; margin: 18px 0 8px; }
.vitrine__desc { font-size: 14px; color: #374151; line-height: 1.65; white-space: pre-wrap; margin: 0 0 8px; }
.vitrine__points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.vitrine__points li { position: relative; padding-left: 22px; font-size: 13.5px; color: #374151; }
.vitrine__points li::before { content: "✓"; position: absolute; left: 0; color: #16a34a; font-weight: 700; }
@media (max-width: 560px) { .vitrine__points { grid-template-columns: 1fr; } }
.vitrine__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef0f2; flex-wrap: wrap; }
.vitrine__dpe { font-weight: 700; font-size: 13px; color: #166534; background: #dcfce7; border-radius: 6px; padding: 6px 11px; }
.vitrine__cta { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 10px; border: 0; }
/* ==========================================================================
V1.5 — Barre de prévisualisation premium (Annonces SEO)
========================================================================== */
.pnav-head { margin: 8px 0 4px; }
.pnav-title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.15; margin: 0 0 6px; color: var(--text); }
.pnav-sub { color: var(--text-mute); font-size: 14.5px; margin: 0; }
.pnav-note { font-size: 13px; color: #BAE6FD; background: rgba(56,189,248,0.07); border: 1px solid rgba(56,189,248,0.20); border-radius: 10px; padding: 11px 14px; margin: 14px 0; line-height: 1.55; }
.pnav-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pnav-chip { font-size: 12px; font-weight: 600; color: var(--text-mute); background: rgba(214,179,106,0.07); border: 1px solid rgba(214,179,106,0.20); border-radius: 999px; padding: 6px 12px; }
.pnav-chip b { color: var(--gold-soft); }
/* Barre de prévisualisation : sticky simple, hauteur TOUJOURS stable.
Aucun changement de taille au scroll -> aucun layout shift possible.
(mode compact supprimé volontairement) */
.pnav {
/* Bloc complet en haut des résultats, NON sticky : c'est le dock fixe
(.preview-fixed-dock) qui assure la navigation permanente au scroll. */
display: flex; flex-direction: column; gap: 10px;
padding: 12px; margin: 0 0 18px; border-radius: 16px;
background: rgba(7,17,31,0.82); border: 1px solid var(--line);
backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
box-shadow: 0 18px 50px -28px rgba(0,0,0,0.75);
/* Transitions sur l'aspect uniquement, jamais sur la taille */
transition: background 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
}
.pnav__meta { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.pnav__count { font-size: 12.5px; font-weight: 700; color: var(--gold-soft); }
.pnav__hint { font-size: 12px; color: var(--text-dim); }
.pnav__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 980px) { .pnav__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
.pnav__grid { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
}
.pnav__grid::-webkit-scrollbar { height: 6px; }
.pnav__btn {
position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left;
padding: 13px 14px 12px; border-radius: 13px; cursor: pointer;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--line-soft); color: var(--text-mute);
transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), padding 180ms var(--ease);
}
@media (max-width: 760px) { .pnav__btn { flex: 0 0 auto; width: 168px; scroll-snap-align: start; } }
.pnav__btn:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.45); }
.pnav__top { display: flex; align-items: center; gap: 8px; }
.pnav__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
background: rgba(214,179,106,0.10); border: 1px solid rgba(214,179,106,0.22); color: var(--gold-soft); transition: width 180ms var(--ease), height 180ms var(--ease); }
.pnav__icon svg { width: 17px; height: 17px; }
.pnav__icon .gl { font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }
.pnav__badge { margin-left: auto; font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; padding: 3px 7px; border-radius: 6px; white-space: nowrap;
background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid var(--line-soft); }
.pnav__badge--seo { color: #7DD3FC; background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.25); }
.pnav__badge--gold { color: var(--gold-soft); background: rgba(214,179,106,0.10); border-color: rgba(214,179,106,0.25); }
.pnav__badge--social { color: #C4B5FD; background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.28); }
.pnav__badge--human { color: #6EE7B7; background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.25); }
.pnav__badge--tech { color: var(--text-dim); background: rgba(255,255,255,0.05); border-color: var(--line-soft); }
.pnav__title { font-size: 14px; font-weight: 700; color: var(--text-mute); line-height: 1.2; }
.pnav__sub { font-size: 11.5px; color: var(--text-dim); line-height: 1.2; }
.pnav__active { display: none; position: absolute; top: -9px; right: 10px; align-items: center; gap: 4px;
font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em; color: #06111F;
background: linear-gradient(135deg, var(--gold), var(--gold-soft)); padding: 3px 9px; border-radius: 999px;
box-shadow: 0 6px 16px -6px rgba(214,179,106,0.7); }
.pnav__btn.is-active {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(214,179,106,0.16), rgba(56,189,248,0.06));
box-shadow: 0 0 0 1px rgba(214,179,106,0.55), 0 14px 36px -14px rgba(214,179,106,0.6);
}
.pnav__btn.is-active .pnav__icon { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; border-color: transparent; }
.pnav__btn.is-active .pnav__title { color: var(--text); }
.pnav__btn.is-active .pnav__sub { color: var(--text-mute); }
.pnav__btn.is-active .pnav__active { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .pnav, .pnav__btn { transition: none; } }
/* Bandeau de vue active */
.view-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
background: linear-gradient(135deg, rgba(214,179,106,0.10), rgba(56,189,248,0.05));
border: 1px solid rgba(214,179,106,0.22); font-size: 13.5px; color: var(--text-mute); }
.view-banner b { color: var(--text); }
.view-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(214,179,106,0.8); flex: 0 0 auto; }
/* Mini-barre flottante secondaire (changer d'aperçu sans remonter) */
.pmini { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(16px); z-index: 80;
display: flex; gap: 4px; padding: 6px; border-radius: 999px;
background: rgba(7,17,31,0.85); border: 1px solid var(--line);
backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
box-shadow: 0 16px 44px -16px rgba(0,0,0,0.85);
opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.pmini.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.pmini__btn { position: relative; width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
background: transparent; border: 0; color: var(--text-mute); transition: background 150ms var(--ease), color 150ms var(--ease); }
.pmini__btn svg { width: 18px; height: 18px; }
.pmini__btn .gl { font-weight: 800; font-size: 13px; }
.pmini__btn:hover { background: rgba(255,255,255,0.07); color: var(--gold-soft); }
.pmini__btn.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; }
.pmini__tip { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: rgba(6,17,31,0.96); color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 6px;
border: 1px solid var(--line-soft); opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease); }
.pmini__btn:hover .pmini__tip { opacity: 1; }
@media (max-width: 520px) { .pmini { bottom: 12px; } .pmini__btn { width: 38px; height: 38px; } }
/* ==========================================================================
Dock de prévisualisation FIXE (Annonces SEO) — vraie position: fixed,
enfant direct de (aucun ancêtre transformé), toujours visible dès
qu'il y a des résultats. Hors flux -> aucun layout shift, aucun saut.
========================================================================== */
.preview-fixed-dock {
position: fixed !important;
top: calc(var(--header-h) + 16px); /* sous le header fixe (96 + 16 = 112px) */
left: 50%;
transform: translateX(-50%);
width: min(1180px, calc(100vw - 32px));
z-index: 9500; /* sous le header (9999), au-dessus du contenu */
background: rgba(6, 17, 31, 0.92);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 18px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
padding: 8px 10px;
opacity: 0; visibility: hidden; pointer-events: none; /* caché tant qu'aucun résultat */
transition: opacity 200ms var(--ease);
}
.preview-fixed-dock.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.pdock__inner { display: flex; align-items: center; gap: 10px; }
.pdock__title { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--gold-soft); padding-left: 4px; white-space: nowrap; }
.pdock__scroll { flex: 1 1 auto; min-width: 0; /* permet au défilement horizontal de s'activer */
display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pdock__scroll::-webkit-scrollbar { height: 5px; }
.pdock__scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
.pdock__btn {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
padding: 8px 12px; border-radius: 11px; cursor: pointer; scroll-snap-align: start;
background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft); color: var(--text-mute);
font-family: inherit; font-size: 13px; font-weight: 600;
transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.pdock__btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); border-color: rgba(214,179,106,0.4); }
.pdock__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; color: var(--gold-soft); }
.pdock__icon svg { width: 16px; height: 16px; }
.pdock__icon .gl { font-weight: 800; font-size: 12px; letter-spacing: -0.02em; }
.pdock__label { line-height: 1; }
.pdock__btn.is-active {
background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; border-color: transparent;
box-shadow: 0 6px 16px -6px rgba(214, 179, 106, 0.7);
}
.pdock__btn.is-active .pdock__icon { color: #06111F; }
@media (max-width: 760px) {
.preview-fixed-dock {
top: calc(var(--header-h) + 8px);
left: 12px; right: 12px; transform: none; width: auto;
padding: 6px 8px;
}
.pdock__title { display: none; } /* gagner de la place ; les boutons scrollent */
.pdock__btn { padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) { .preview-fixed-dock { transition: none; } }
/* ============================================================
ANNONCES SEO/GEO — explication, entrée naturelle, dictée, dossier
============================================================ */
/* -- Explication SEO / GEO sous le titre -- */
.seo-geo-explain {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px;
}
.seo-geo-explain__item {
display: flex; gap: 10px; align-items: flex-start;
background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line-soft);
border-radius: var(--radius-sm); padding: 12px 14px;
}
.seo-geo-explain__item p { margin: 0; font-size: 13.5px; color: var(--text-mute); }
.seo-geo-explain__tag {
flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
padding: 4px 8px; border-radius: 6px; text-transform: uppercase;
}
.seo-geo-explain__tag--seo { background: rgba(56, 189, 248, 0.12); color: var(--sky); border: 1px solid rgba(56, 189, 248, 0.3); }
.seo-geo-explain__tag--geo { background: rgba(167, 139, 250, 0.12); color: #C4B5FD; border: 1px solid rgba(167, 139, 250, 0.3); }
.seo-geo-explain__tag--rule { background: rgba(214, 179, 106, 0.12); color: var(--gold-soft); border: 1px solid rgba(214, 179, 106, 0.3); }
@media (max-width: 720px) { .seo-geo-explain { grid-template-columns: 1fr; } }
/* -- Panneau premium (entrée naturelle) -- */
.panel--premium {
border-color: rgba(214, 179, 106, 0.32);
background:
linear-gradient(180deg, rgba(214, 179, 106, 0.06), rgba(214, 179, 106, 0) 60%),
var(--bg-elev);
box-shadow: var(--shadow-gold);
}
.textarea--lg { min-height: 130px; font-size: 15px; line-height: 1.55; }
/* -- Boutons & état d'écoute -- */
.nl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nl-dictate__icon { color: var(--red); font-size: 11px; vertical-align: middle; }
.btn.is-recording { border-color: var(--red); color: #FECACA; }
.nl-listening {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: #FECACA; font-weight: 600;
}
.nl-listening__dot {
width: 10px; height: 10px; border-radius: 50%; background: var(--red);
animation: nlPulse 1.1s ease-in-out infinite;
}
@keyframes nlPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
.nl-status:not(:empty) { margin-top: 14px; }
.nl-loading { display: flex; align-items: center; gap: 10px; color: var(--text-mute); font-size: 14px; margin-top: 14px; }
/* -- Résumé de l'analyse -- */
.nl-summary:not(:empty) {
margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-soft);
}
.nl-sum-head { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.nl-sum-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 600px) { .nl-sum-grid { grid-template-columns: 1fr; } }
.nl-sum {
border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
padding: 12px 14px; background: rgba(255, 255, 255, 0.02);
}
.nl-sum h5 { margin: 0 0 8px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.nl-sum ul { margin: 0; padding-left: 18px; }
.nl-sum li { font-size: 13px; color: var(--text-mute); margin-bottom: 4px; }
.nl-sum--ok { border-left: 3px solid var(--green); }
.nl-sum--ok h5 { color: #6EE7B7; }
.nl-sum--miss { border-left: 3px solid var(--red); }
.nl-sum--miss h5 { color: #FCA5A5; }
.nl-sum--unc { border-left: 3px solid var(--gold); }
.nl-sum--unc h5 { color: var(--gold-soft); }
.nl-sum--warn { border-left: 3px solid var(--sky); }
.nl-sum--warn h5 { color: #7DD3FC; }
.nl-sum-foot { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
/* -- Dossier : score de complétude + anti-invention + questions -- */
.dossier {
margin: 18px 0 20px; padding: 16px 18px;
border: 1px solid var(--line-soft); border-radius: var(--radius);
background: rgba(255, 255, 255, 0.02);
}
.dossier__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dossier__title { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.dossier__pct { font-family: var(--font-display); font-size: 22px; color: var(--gold-soft); }
.dossier__bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); margin: 10px 0 8px; overflow: hidden; }
.dossier__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width var(--t-base) var(--ease); }
.dossier__state { margin: 0; font-size: 13px; color: var(--text-mute); }
.dossier--ok .dossier__fill { background: linear-gradient(90deg, var(--green), #6EE7B7); }
.dossier--ok .dossier__pct { color: #6EE7B7; }
.dossier--crit .dossier__fill { background: linear-gradient(90deg, var(--red), #FCA5A5); }
.dossier--crit .dossier__pct { color: #FCA5A5; }
.dossier__block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.dossier__h4 { font-size: 13px; margin: 0 0 6px; color: var(--text); }
.dossier__hint { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.tag--warn { background: rgba(248, 113, 113, 0.08); color: #FCA5A5; border-color: rgba(248, 113, 113, 0.24); }
/* ============================================================
ANNONCES SEO/GEO — Finitions UX : notice, actions, badges, print
============================================================ */
/* -- Notice d'aide (accordéon 3 niveaux) -- */
.nl-guide { display: grid; gap: 8px; margin: 0 0 14px; }
.nl-guide__sec {
border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.02); overflow: hidden;
}
.nl-guide__sec > summary {
list-style: none; cursor: pointer; padding: 11px 14px;
font-size: 13.5px; font-weight: 600; color: var(--text);
display: flex; align-items: center; gap: 9px; user-select: none;
}
.nl-guide__sec > summary::-webkit-details-marker { display: none; }
.nl-guide__sec > summary::after {
content: '+'; margin-left: auto; font-size: 18px; line-height: 1; color: var(--text-dim);
transition: transform var(--t-fast) var(--ease);
}
.nl-guide__sec[open] > summary::after { content: '−'; }
.nl-guide__ico {
flex: none; width: 22px; height: 22px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.nl-guide__sec--req .nl-guide__ico { background: rgba(52, 211, 153, 0.14); color: #6EE7B7; }
.nl-guide__sec--reco .nl-guide__ico { background: rgba(214, 179, 106, 0.14); color: var(--gold-soft); }
.nl-guide__sec--never .nl-guide__ico { background: rgba(248, 113, 113, 0.14); color: #FCA5A5; }
.nl-guide__sec--req { border-left: 3px solid var(--green); }
.nl-guide__sec--reco { border-left: 3px solid var(--gold); }
.nl-guide__sec--never { border-left: 3px solid var(--red); }
.nl-guide__body { padding: 0 14px 14px; }
.nl-guide__intro { margin: 0 0 10px; font-size: 13px; color: var(--text-mute); }
.nl-guide__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-chip {
font-size: 12px; padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03); color: var(--text-mute);
}
.nl-chip--req { border-color: rgba(52, 211, 153, 0.3); color: #BBF7D0; background: rgba(52, 211, 153, 0.06); }
.nl-chip--reco { border-color: rgba(214, 179, 106, 0.3); color: var(--gold-soft); background: rgba(214, 179, 106, 0.06); }
.nl-chip--never { border-color: rgba(248, 113, 113, 0.3); color: #FCA5A5; background: rgba(248, 113, 113, 0.06); }
.nl-guide__why { margin: 11px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.nl-guide__why b { color: var(--text-mute); }
/* -- Boutons exemple/effacer + réinitialiser -- */
.nl-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gen-actions-row { display: grid; gap: 10px; }
/* -- Barre d'actions résultat (copier tout / export PDF) -- */
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
/* -- Toast de confirmation -- */
.ann-toast {
position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
background: var(--bg-elev); color: var(--text); border: 1px solid var(--gold);
box-shadow: var(--shadow); border-radius: 999px; padding: 11px 20px;
font-size: 14px; font-weight: 600; z-index: 1200; opacity: 0; pointer-events: none;
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.ann-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* -- Badge « Optimisé SEO/GEO » dans les aperçus -- */
.sg-badge {
display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
padding: 3px 9px; border-radius: 999px; cursor: help;
background: linear-gradient(135deg, rgba(214, 179, 106, 0.16), rgba(56, 189, 248, 0.16));
border: 1px solid rgba(214, 179, 106, 0.4); color: var(--gold-soft);
}
.sg-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); flex: none; }
.sg-badge--sm { font-size: 10px; padding: 2px 7px; }
.sg-badge--hero {
position: absolute; top: 12px; right: 12px; z-index: 2;
background: rgba(7, 17, 31, 0.78); backdrop-filter: blur(4px);
border-color: rgba(230, 203, 148, 0.5); color: var(--gold-soft);
}
/* -- Encart « Pourquoi SEO/GEO ? » dans l'analyse -- */
.why-seogeo {
margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
border: 1px solid rgba(56, 189, 248, 0.22);
background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(214, 179, 106, 0.04));
}
.why-seogeo__title { margin: 0 0 10px; font-size: 14px; color: var(--gold-soft); }
.why-seogeo__list { margin: 0; padding-left: 18px; }
.why-seogeo__list li { font-size: 13px; color: var(--text-mute); margin-bottom: 5px; }
/* -- Fiche imprimable (cachée à l'écran, visible à l'impression) -- */
#ann-print-report { display: none; }
@media print {
/* Mode « fiche seule » : activé uniquement via le bouton Exporter (classe sur ). */
body.printing-report > *:not(#ann-print-report) { display: none !important; }
body.printing-report #ann-print-report { display: block !important; }
body.printing-report { background: #fff !important; color: #000 !important; }
@page { size: A4; margin: 14mm; }
.plr { color: #000; font-size: 12px; line-height: 1.5; }
.plr__head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #c9a24a; padding-bottom: 8px; margin-bottom: 12px; }
.plr__brand { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.plr__sub { font-size: 11px; color: #555; }
.plr__price { font-size: 18px; font-weight: 700; color: #1a1a1a; white-space: nowrap; }
.plr__title { font-size: 19px; margin: 0 0 10px; color: #111; }
.plr__cover { width: 100%; max-height: 78mm; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 8px; page-break-inside: avoid; }
.plr__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; page-break-inside: avoid; }
.plr__gallery img { width: 100%; height: 34mm; object-fit: cover; border-radius: 4px; }
.plr__h2 { font-size: 13px; color: #1a1a1a; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin: 14px 0 8px; page-break-after: avoid; }
.plr__specs { width: 100%; border-collapse: collapse; page-break-inside: avoid; }
.plr__specs th, .plr__specs td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; font-size: 12px; vertical-align: top; }
.plr__specs th { width: 38%; color: #555; font-weight: 600; }
.plr__p { margin: 0 0 8px; white-space: pre-line; color: #222; }
.plr__scores { display: flex; gap: 10px; page-break-inside: avoid; }
.plr__score { flex: 1; text-align: center; border: 1px solid #ddd; border-radius: 6px; padding: 8px 4px; }
.plr__score b { display: block; font-size: 18px; color: #111; }
.plr__score span { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }
.plr__list { margin: 0; padding-left: 18px; }
.plr__list li { font-size: 12px; margin-bottom: 3px; page-break-inside: avoid; }
.plr__disclaimer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #ccc; font-size: 11px; font-style: italic; color: #444; }
}
/* ============================================================
PROJECTION VISUELLE IA RESPONSABLE
============================================================ */
/* -- Points responsables sous le titre -- */
.resp-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.resp-point {
display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-mute);
background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 12px;
}
.resp-point__ico { font-size: 14px; }
/* -- Cartes éthiques (acceptable / interdit) -- */
.ethics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ethics__card { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; background: rgba(255,255,255,0.02); }
.ethics__card--ok { border-left: 3px solid var(--green); }
.ethics__card--no { border-left: 3px solid var(--red); }
.ethics__title { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.ethics__ico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.ethics__card--ok .ethics__ico { background: rgba(52,211,153,0.16); color: #6EE7B7; }
.ethics__card--no .ethics__ico { background: rgba(248,113,113,0.16); color: #FCA5A5; }
.ethics__list { margin: 0; padding-left: 18px; }
.ethics__list li { font-size: 13.5px; color: var(--text-mute); margin-bottom: 5px; }
@media (max-width: 720px) { .ethics { grid-template-columns: 1fr; } }
/* -- En-tête d'étape -- */
.vstep__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.vstep__num {
flex: none; width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F;
}
/* -- Aperçu de la photo choisie (étape 1) -- */
.vis-preview { position: relative; margin-top: 12px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-soft); }
.vis-preview img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
/* -- Badge « Photo réelle » -- */
.ba__badge--real { background: rgba(52,211,153,0.16); color: #6EE7B7; border: 1px solid rgba(52,211,153,0.4); }
/* -- Score rings : 4 jauges -- */
.score-rings--4 { flex-wrap: wrap; }
/* -- Comparateur avant / après (dans le résultat) -- */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba-col { margin: 0; }
.ba-col__media { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line-soft); background: #06111F; }
.ba-col__media img { display: block; width: 100%; height: 220px; object-fit: cover; }
.ba-col figcaption { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
.ba-col__media--sim img { filter: grayscale(0.25) brightness(0.78); }
.ba-sim__overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; background: linear-gradient(180deg, rgba(6,17,31,0.35), rgba(6,17,31,0.62)); }
.ba-sim__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-soft); border: 1px solid rgba(214,179,106,0.5); border-radius: 999px; padding: 3px 12px; }
.ba-sim__style { font-size: 13px; color: #fff; font-weight: 600; }
.ba-sim__note { font-size: 11.5px; color: rgba(255,255,255,0.82); max-width: 88%; }
@media (max-width: 560px) { .ba-grid { grid-template-columns: 1fr; } }
/* -- Onglets de la projection -- */
.vtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 14px; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px; }
.vtab {
font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer;
background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); color: var(--text-mute); transition: all var(--t-fast) var(--ease);
}
.vtab:hover { color: var(--text); border-color: rgba(214,179,106,0.4); }
.vtab.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; border-color: transparent; }
.vtab-panel { display: none; }
.vtab-panel.is-active { display: block; animation: vtabIn var(--t-base) var(--ease); }
@keyframes vtabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* -- Fiche imprimable : galerie avant/après (2 colonnes) -- */
@media print {
.plr__gallery--2 { grid-template-columns: 1fr 1fr !important; }
.plr__gallery--2 figure { margin: 0; }
.plr__gallery--2 img { height: 62mm !important; }
.plr__gallery--2 figcaption { font-size: 10px; color: #555; text-align: center; margin-top: 3px; }
}
/* ============================================================
PROJECTION : comparateur slider, hero, badges, « pourquoi »
============================================================ */
/* -- Hero résultat (image agrandie, élément principal) -- */
.vis-hero { margin-bottom: 18px; }
/* -- Grand comparateur avant/après (slider) -- */
.cmp { margin: 0 0 4px; }
.cmp__stage {
position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius);
overflow: hidden; border: 1px solid var(--line); background: #06111F;
touch-action: none; cursor: ew-resize; user-select: none; box-shadow: var(--shadow);
}
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.cmp__before .cmp__img { z-index: 1; }
.cmp__handle {
position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px);
background: rgba(255,255,255,0.9); z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(6,17,31,0.35);
}
.cmp__grip {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; font-size: 16px; font-weight: 700;
box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.cmp__tag {
position: absolute; top: 12px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: rgba(6,17,31,0.72); color: #fff;
backdrop-filter: blur(4px);
}
.cmp__tag--b { left: 12px; }
.cmp__tag--a { right: 12px; }
.cmp__controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.cmp--sim .cmp__stage--sim { cursor: default; }
.cmp__stage--sim .ba-sim__overlay { position: absolute; inset: 0; }
/* -- Badges de transparence -- */
.vis-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 6px; }
.sg-badge--real { background: rgba(52,211,153,0.12); color: #6EE7B7; border-color: rgba(52,211,153,0.4); }
.sg-badge--real .sg-badge__dot { background: var(--green); }
.sg-badge--struct { background: rgba(56,189,248,0.12); color: #7DD3FC; border-color: rgba(56,189,248,0.4); }
.sg-badge--struct .sg-badge__dot { background: var(--sky); }
.sg-badge--furn { background: rgba(167,139,250,0.12); color: #C4B5FD; border-color: rgba(167,139,250,0.4); }
.sg-badge--furn .sg-badge__dot { background: #A78BFA; }
/* -- « Pourquoi cette projection ? » -- */
.why-proj {
margin: 18px 0; padding: 16px 18px; border-radius: var(--radius);
border: 1px solid rgba(56,189,248,0.22);
background: linear-gradient(180deg, rgba(56,189,248,0.06), rgba(214,179,106,0.04));
}
.why-proj__title { margin: 0 0 12px; font-size: 15px; color: var(--gold-soft); }
.why__row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.why__row:first-of-type { border-top: 0; }
.why__k { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding-top: 3px; }
.why__use { font-size: 14px; color: var(--text); font-weight: 600; }
.why__list { margin: 0; padding-left: 16px; }
.why__list li { font-size: 13px; color: var(--text-mute); margin-bottom: 3px; }
@media (max-width: 600px) { .why__row { grid-template-columns: 1fr; gap: 4px; } }
/* ============================================================
PROJECTION : démo guidée, plan, audit qualité, régénération
============================================================ */
/* -- Barre démo guidée -- */
.guided-bar {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
border: 1px dashed rgba(214,179,106,0.4); background: rgba(214,179,106,0.05);
border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px;
}
.guided-bar__txt { font-size: 13px; color: var(--text-mute); flex: 1; min-width: 220px; }
.guided-bar__txt b { color: var(--gold-soft); }
/* ============================================================
BLOC « Démo guidée » — point d'entrée visible dans chaque app
Toujours présent (même hors mode présentation). Masqué quand la
démo guidée tourne déjà (?demo=prepared) : la barre guidée prend le relais.
============================================================ */
.demo-cta {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
margin: 0 0 28px; padding: 18px 22px;
border: 1px solid rgba(214,179,106,0.34); border-radius: var(--radius-lg, 18px);
background: linear-gradient(135deg, rgba(214,179,106,0.12), rgba(214,179,106,0.03));
box-shadow: 0 22px 60px -34px rgba(214,179,106,0.55);
}
.demo-cta__ico {
flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
font-size: 22px; color: #06111F;
background: linear-gradient(135deg, var(--gold), var(--gold-soft));
box-shadow: 0 10px 26px -10px rgba(214,179,106,0.7);
}
.demo-cta__txt { flex: 1 1 280px; min-width: 240px; }
.demo-cta__title { font-size: clamp(17px, 1.9vw, 21px); margin: 0 0 4px; color: var(--text); }
.demo-cta__sub { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-mute); }
.demo-cta__btn { flex: 0 0 auto; white-space: nowrap; }
/* display:flex (auteur) l'emporte sur le [hidden] du navigateur : on force le masquage. */
.demo-cta[hidden] { display: none; }
@media (max-width: 620px) {
.demo-cta { padding: 16px 18px; }
.demo-cta__btn { width: 100%; text-align: center; }
}
/* -- « Ce que l'IA va ajouter » -- */
.plan { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); padding: 14px 16px; margin-bottom: 14px; }
.plan__title { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.plan__row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.plan__row:first-of-type { border-top: 0; }
.plan__k { font-size: 12px; color: var(--text-dim); padding-top: 3px; }
@media (max-width: 560px) { .plan__row { grid-template-columns: 1fr; gap: 4px; } }
/* -- 6 jauges de fidélité -- */
.score-rings--6 { flex-wrap: wrap; gap: 14px; }
/* -- Contrôle qualité de la projection (audit) -- */
.qc { margin: 16px 0; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255,255,255,0.02); padding: 16px 18px; }
.qc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qc__title { margin: 0; font-size: 15px; color: var(--text); }
.qstatus { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid; }
.qstatus--ok { background: rgba(52,211,153,0.12); color: #6EE7B7; border-color: rgba(52,211,153,0.4); }
.qstatus--warn { background: rgba(214,179,106,0.12); color: var(--gold-soft); border-color: rgba(214,179,106,0.4); }
.qstatus--no { background: rgba(248,113,113,0.12); color: #FCA5A5; border-color: rgba(248,113,113,0.4); }
.qc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 600px) { .qc__list { grid-template-columns: 1fr; } }
.qc__item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm); }
.qc__item.qc--ok { background: rgba(52,211,153,0.05); }
.qc__item.qc--warn { background: rgba(214,179,106,0.06); }
.qc__item.qc--no { background: rgba(248,113,113,0.07); }
.qc__ico { flex: none; }
.qc__lbl { color: var(--text-mute); font-weight: 600; }
.qc__note { color: var(--text-dim); font-size: 12px; }
.qc__src { margin: 12px 0 0; font-size: 12px; color: var(--text-dim); }
/* -- Régénération intelligente -- */
.regen { margin: 16px 0; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(56,189,248,0.04); padding: 14px 16px; }
.regen__title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky); font-weight: 600; margin-bottom: 10px; }
.regen__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.regen__warn { margin: 10px 0 0; font-size: 12px; color: var(--gold-soft); }
/* -- Fiche imprimable : audit (impression) -- */
@media print { .plr__list li { page-break-inside: avoid; } }
/* ============================================================
MARKETING IMMOBILIER AUTOMATISÉ
============================================================ */
/* Message central */
.mkt-central { margin-top: 18px; font-family: var(--font-display); font-size: 18px; color: var(--gold-soft); font-style: italic; }
/* Switch de mode */
.mkt-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: rgba(255,255,255,0.02); }
.mkt-mode__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.mswitch { display: inline-flex; background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px; }
.mswitch__btn { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; cursor: pointer; background: transparent; border: 0; color: var(--text-mute); transition: all var(--t-fast) var(--ease); }
.mswitch__btn.is-active { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; }
.mkt-mode__desc { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--text-mute); }
/* Source agence : cartes événements */
.mkt-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mkt-ev { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mkt-ev:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.4); }
.mkt-ev--high { border-left: 3px solid var(--red); }
.mkt-ev--mid { border-left: 3px solid var(--gold); }
.mkt-ev--low { border-left: 3px solid var(--green); }
.mkt-ev__media { height: 130px; background: #06111F; }
.mkt-ev__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-ev__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mkt-ev__type { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.mkt-ev__title { font-size: 15px; margin: 0; }
.mkt-ev__data { font-size: 13px; color: var(--text-mute); margin: 0; flex: 1; }
.mkt-ev__risk { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.mkt-ev__risk--low { background: rgba(52,211,153,0.1); color: #6EE7B7; border-color: rgba(52,211,153,0.35); }
.mkt-ev__risk--mid { background: rgba(214,179,106,0.1); color: var(--gold-soft); border-color: rgba(214,179,106,0.35); }
.mkt-ev__risk--high { background: rgba(248,113,113,0.1); color: #FCA5A5; border-color: rgba(248,113,113,0.35); }
.mkt-ev__btn { margin-top: 4px; width: 100%; justify-content: center; }
/* Onglets marketing (réutilise .vtab pour la nav) */
.mtab-panel { display: none; }
.mtab-panel.is-active { display: block; animation: vtabIn var(--t-base) var(--ease); }
/* Badges de statut de validation */
.mkt-st { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.mkt-st--draft { background: rgba(255,255,255,0.05); color: var(--text-mute); border-color: var(--line-soft); }
.mkt-st--wait { background: rgba(214,179,106,0.12); color: var(--gold-soft); border-color: rgba(214,179,106,0.4); }
.mkt-st--edit { background: rgba(56,189,248,0.12); color: #7DD3FC; border-color: rgba(56,189,248,0.4); }
.mkt-st--no { background: rgba(248,113,113,0.12); color: #FCA5A5; border-color: rgba(248,113,113,0.4); }
.mkt-st--ok { background: rgba(52,211,153,0.12); color: #6EE7B7; border-color: rgba(52,211,153,0.4); }
.mkt-st--sim { background: rgba(167,139,250,0.12); color: #C4B5FD; border-color: rgba(167,139,250,0.4); }
/* Bloc validation */
.mkt-valid__status { margin: 12px 0; font-size: 13px; color: var(--text-mute); display: flex; align-items: center; gap: 8px; }
/* ============================================================
MARKETING — studio : sections, dock groupé, aperçus, ajustements
============================================================ */
/* Note de source agence (discrète, non anxiogène) */
.mkt-src-note { font-size: 12.5px; color: var(--text-dim); margin: 0 0 12px; }
/* Label « Image de démonstration » sur les cartes événement */
.mkt-ev__media { position: relative; }
.mkt-ev__demo { position: absolute; bottom: 6px; left: 6px; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: rgba(6,17,31,0.72); color: #fff; backdrop-filter: blur(3px); }
/* Sections résultat (A publications / B pilotage) */
.msec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.msec__head { margin-bottom: 10px; }
.msec__title { font-size: 18px; margin: 0 0 4px; color: var(--gold-soft); }
.msec__sub { font-size: 13px; color: var(--text-mute); margin: 0; }
.mdock__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin: 6px 0 6px; }
.mtabs { margin-top: 0; }
/* Carte d'aperçu de publication */
.mpub { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px; background: rgba(255,255,255,0.015); }
.mpub__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.mpub__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mpub__cta { font-size: 13px; font-weight: 600; color: var(--gold-soft); }
/* Ajustements rapides */
.mkt-adjust { margin: 16px 0; border: 1px solid rgba(56,189,248,0.22); border-radius: var(--radius); background: rgba(56,189,248,0.04); padding: 14px 16px; }
.mkt-adjust__title { font-size: 14px; margin: 0 0 4px; color: var(--sky); }
.mkt-adjust__txt { font-size: 13px; color: var(--text-mute); margin: 0 0 12px; }
.mkt-adjust__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.mkt-adjust__note { font-size: 12px; color: var(--text-dim); margin: 12px 0 0; }
/* Message système de validation (mode manuel) */
.mkt-sysmsg { border: 1px solid rgba(214,179,106,0.32); border-radius: var(--radius); background: rgba(214,179,106,0.05); padding: 16px; }
.mkt-sysmsg__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mkt-sysmsg__head h4 { margin: 0; font-size: 15px; }
.mkt-sysmsg__ico { font-size: 18px; }
.mkt-valid__status { margin: 12px 0; font-size: 13px; color: var(--text-mute); display: flex; align-items: center; gap: 8px; }
/* Panneau mode automatique encadré */
.mkt-auto { border: 1px solid rgba(167,139,250,0.3); border-radius: var(--radius); background: rgba(167,139,250,0.06); padding: 16px; margin-bottom: 12px; }
.mkt-auto__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mkt-auto__head h4 { margin: 0; font-size: 15px; color: #C4B5FD; }
.mkt-auto__ico { font-size: 18px; }
/* Carrousel grandes slides */
.carousel--lg .carousel__slide { min-width: 200px; }
/* ==========================================================================
MENU GLOBAL — dropdown premium « Les solutions »
Couche ajoutée : n'altère pas .nav a existant, réutilise les tokens.
========================================================================== */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__trigger {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; cursor: pointer;
color: var(--text-mute); padding: 8px 14px; border-radius: 8px;
font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0.005em;
transition: all var(--t-fast) var(--ease);
}
.nav__trigger:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.nav__trigger.is-active { color: var(--gold-soft); background: rgba(214, 179, 106, 0.08); }
.nav__caret { font-size: 11px; transition: transform var(--t-fast) var(--ease); }
.nav__group.is-open .nav__caret { transform: rotate(180deg); }
.nav__dropdown {
position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
width: min(560px, calc(100vw - 32px));
display: grid; gap: 8px; padding: 12px;
background: rgba(8, 19, 33, 0.96);
backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px;
box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.7);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
z-index: 50;
}
/* Zone tampon invisible : comble l'espace bouton ↔ panneau pour que le survol ne se coupe pas. */
.nav__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav__group.is-open .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__card {
display: block; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.015);
transition: all var(--t-fast) var(--ease);
}
.nav__card:hover { border-color: rgba(214, 179, 106, 0.35); background: rgba(214, 179, 106, 0.06); transform: translateY(-1px); }
.nav__card-title { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.nav__card-desc { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 960px) {
.nav__group { display: block; }
.nav__trigger { width: 100%; justify-content: space-between; padding: 12px 14px; }
.nav__dropdown {
position: static; transform: none; width: 100%; opacity: 1; visibility: visible;
pointer-events: auto; box-shadow: none; background: transparent; border: 0;
padding: 4px 0 8px; display: none;
}
/* Pas de gap à franchir en mobile : la zone tampon est inutile et ne doit pas gêner le tap. */
.nav__dropdown::before { display: none; }
.nav__group.is-open .nav__dropdown { display: grid; transform: none; }
}
/* ==========================================================================
BOUTON « Retour à la présentation » — visible UNIQUEMENT si ?presentation=1
Injecté par main.js. Coin bas-gauche pour ne croiser aucun dock centré.
========================================================================== */
.presentation-return-btn {
position: fixed; left: 18px; bottom: 18px; z-index: 9600;
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em;
color: #06111F;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
border: 1px solid rgba(214, 179, 106, 0.6);
box-shadow: 0 16px 40px -16px rgba(214, 179, 106, 0.7), 0 4px 14px rgba(0,0,0,0.4);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.presentation-return-btn:hover { color: #06111F; transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(214, 179, 106, 0.85); }
.presentation-return-btn .prb__ico { font-size: 15px; line-height: 1; }
@media (max-width: 600px) {
.presentation-return-btn { left: 12px; bottom: 12px; padding: 10px 14px; font-size: 12.5px; }
}
/* ==========================================================================
MODE PRÉSENTATION — diaporama interactif 2.0 (/presentation)
========================================================================== */
body.presentation-mode { padding-top: 0; overflow: hidden; }
.presentation-shell {
position: fixed; inset: 0; z-index: 1;
display: flex; flex-direction: column;
height: 100vh; height: 100dvh; width: 100%;
background:
radial-gradient(1100px 600px at 85% -8%, rgba(56, 189, 248, 0.12), transparent 60%),
radial-gradient(900px 520px at -8% 18%, rgba(214, 179, 106, 0.12), transparent 60%),
linear-gradient(180deg, #050E1A 0%, #07111F 60%, #050B14 100%);
}
.presentation-shell::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
/* ---- Top bar ---- */
.presentation-topbar {
position: relative; z-index: 4; flex: 0 0 auto;
display: flex; align-items: center; gap: 18px;
padding: 14px clamp(16px, 3vw, 34px);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(6, 14, 26, 0.6); backdrop-filter: blur(14px);
}
.ptop__brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.ptop__brand .brand__mark { width: 30px; height: 30px; font-size: 12px; }
.ptop__brand-label { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.1; }
.ptop__brand-label small { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.ptop__counter { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--gold-soft); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.presentation-progress { flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; min-width: 60px; }
.presentation-progress__bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width var(--t-base) var(--ease); }
.ptop__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.ptool {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 13px; border-radius: 10px; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em;
color: var(--text-mute); background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line-soft); transition: all var(--t-fast) var(--ease);
}
.ptool:hover { color: var(--text); border-color: rgba(214, 179, 106, 0.4); background: rgba(214, 179, 106, 0.06); }
.ptool.is-on { color: #06111F; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: transparent; }
.ptool--ghost { background: none; }
.presentation-timer { font-variant-numeric: tabular-nums; }
.presentation-timer .ptimer__val { color: var(--gold-soft); }
.presentation-timer.is-over .ptimer__val { color: var(--red); }
@media (max-width: 900px) {
.ptool .ptool__txt { display: none; }
.ptool { padding: 8px 10px; }
.ptop__brand-label, .ptop__brand small { display: none; }
}
/* ---- Stage + slides ---- */
.presentation-stage { position: relative; z-index: 2; flex: 1 1 auto; overflow: hidden; }
.presentation-slide {
position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(24px, 4vh, 56px) clamp(20px, 5vw, 72px);
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(22px) scale(0.992);
transition: opacity 420ms var(--ease), transform 480ms var(--ease), visibility 420ms;
}
.presentation-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.presentation-slide__inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.presentation-slide.is-soutenance-hidden { /* annexe : reste accessible mais signalée */ }
/* Animation cascade des éléments d'une slide active */
.presentation-slide.is-active [data-anim] { opacity: 0; transform: translateY(16px); animation: pSlideIn 560ms var(--ease) forwards; }
.presentation-slide.is-active [data-anim="1"] { animation-delay: 80ms; }
.presentation-slide.is-active [data-anim="2"] { animation-delay: 170ms; }
.presentation-slide.is-active [data-anim="3"] { animation-delay: 260ms; }
.presentation-slide.is-active [data-anim="4"] { animation-delay: 350ms; }
.presentation-slide.is-active [data-anim="5"] { animation-delay: 440ms; }
.presentation-slide.is-active [data-anim="6"] { animation-delay: 530ms; }
@keyframes pSlideIn { to { opacity: 1; transform: none; } }
/* Typo de slide */
.pslide__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 14px; }
.pslide__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: 0.7; }
.pslide__title { font-size: clamp(26px, 3.6vw, 46px); line-height: 1.12; margin: 0 0 14px; }
.pslide__title em { font-style: normal; color: var(--gold-soft); }
.pslide__lead { font-size: clamp(15px, 1.5vw, 19px); color: var(--text-mute); max-width: 72ch; margin: 0 0 8px; }
.pslide__note { margin-top: 18px; font-size: 13px; color: var(--text-dim); font-style: italic; border-left: 2px solid rgba(214,179,106,0.4); padding-left: 12px; }
.pslide__quote { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.3; color: var(--text); margin: 8px 0; }
.pslide__big { font-family: var(--font-display); font-size: clamp(26px, 4.2vw, 52px); line-height: 1.18; color: var(--text); }
.pslide__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.pslide__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Actions média slide 1 : vidéo de synthèse + dossier PDF */
.pslide__media { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.pmedia-card {
display: inline-flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
padding: 10px 16px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.035);
color: var(--text); font-family: inherit;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pmedia-card:hover { transform: translateY(-2px); border-color: rgba(214,179,106,0.45); background: rgba(214,179,106,0.07); color: var(--text); box-shadow: 0 16px 38px -22px rgba(214,179,106,0.6); }
.pmedia-card:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.pmedia-card__ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 9px; font-size: 14px;
color: var(--gold-soft); background: rgba(214,179,106,0.12); border: 1px solid rgba(214,179,106,0.28);
}
.pmedia-card__txt { display: flex; flex-direction: column; line-height: 1.25; }
.pmedia-card__title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pmedia-card__sub { font-size: 11.5px; color: var(--text-dim); }
.pmedia-dl { font-size: 12px; font-weight: 600; color: var(--text-dim); padding: 6px 6px; border-radius: 8px; }
.pmedia-dl:hover { color: var(--gold-soft); }
.pmedia-dl:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
@media (max-width: 560px) {
.pslide__media { gap: 10px; }
.pmedia-card { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.pmedia-card { transition: none; }
.pmedia-card:hover { transform: none; }
}
/* Grilles de cartes premium */
.pgrid { display: grid; gap: 16px; margin-top: 8px; }
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .pgrid--3, .pgrid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .pgrid--2, .pgrid--3, .pgrid--4 { grid-template-columns: 1fr; } }
.presentation-solution-card, .pcard {
border: 1px solid var(--line-soft); border-radius: 16px;
background: rgba(255, 255, 255, 0.02); padding: 18px 20px;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pcard:hover, .presentation-solution-card:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.32); background: rgba(214,179,106,0.05); }
.pcard__ico { font-size: 22px; margin-bottom: 8px; display: block; }
.pcard__num { font-family: var(--font-display); font-size: 26px; color: var(--gold-soft); margin-bottom: 4px; }
.pcard h3, .pcard h4 { margin: 0 0 6px; font-size: 17px; }
.pcard p { margin: 0 0 6px; font-size: 13.5px; color: var(--text-mute); line-height: 1.55; }
.pcard__tag { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold-soft); text-transform: uppercase; }
.pcard ul { margin: 6px 0 0; padding-left: 18px; }
.pcard li { font-size: 13px; color: var(--text-mute); margin-bottom: 3px; }
.pcard--good { border-color: rgba(52,211,153,0.25); }
.pcard--risk { border-color: rgba(248,113,113,0.25); }
.pcard--good .pcard__ico { color: var(--green); }
.pcard--risk .pcard__ico { color: var(--red); }
/* KPI */
.presentation-kpi-card {
border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px;
background: linear-gradient(160deg, rgba(214,179,106,0.07), rgba(255,255,255,0.01));
text-align: left;
}
.pkpi__num { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); line-height: 1; color: var(--gold-soft); }
.pkpi__num small { font-size: 0.45em; color: var(--text-dim); font-family: var(--font-sans); }
.pkpi__label { font-size: 12.5px; color: var(--text-mute); margin-top: 6px; line-height: 1.4; }
.pkpi--accent { background: linear-gradient(160deg, rgba(52,211,153,0.12), rgba(255,255,255,0.01)); border-color: rgba(52,211,153,0.3); }
.pkpi--accent .pkpi__num { color: var(--green); }
/* Coût */
.presentation-cost-card {
border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px;
background: rgba(255,255,255,0.02);
}
.pcost__name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.pcost__row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--text-mute); padding: 3px 0; border-bottom: 1px dashed var(--line-soft); }
.pcost__row:last-child { border-bottom: 0; }
.pcost__row strong { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
/* Flux sécurité / schéma */
.presentation-security-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 8px 0 18px; }
.pflow__step {
flex: 1 1 150px; border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px;
background: rgba(255,255,255,0.02); font-size: 13px; color: var(--text-mute); position: relative;
}
.pflow__step strong { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 2px; }
.pflow__step--ai { border-color: rgba(56,189,248,0.35); background: rgba(56,189,248,0.06); }
.pflow__step--human { border-color: rgba(52,211,153,0.35); background: rgba(52,211,153,0.06); }
.pflow__arrow { align-self: center; color: var(--gold); font-size: 18px; flex: 0 0 auto; }
@media (max-width: 760px) { .pflow__arrow { transform: rotate(90deg); } .presentation-security-flow { flex-direction: column; } }
/* Tableau IA */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable th, .ptable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ptable th { color: var(--gold-soft); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.ptable td strong { color: var(--text); }
.ptable tr:hover td { background: rgba(255,255,255,0.02); }
/* Colonnes RGPD avoid / allow */
.pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 680px) { .pcols { grid-template-columns: 1fr; } }
.pcol { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; }
.pcol--avoid { border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.04); }
.pcol--allow { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.04); }
.pcol h4 { margin: 0 0 10px; font-size: 14px; }
.pcol ul { margin: 0; padding-left: 18px; }
.pcol li { font-size: 13px; color: var(--text-mute); margin-bottom: 3px; }
/* Bloc avant/après prompt */
.pprompt { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; background: rgba(255,255,255,0.02); }
.pprompt h4 { margin: 0 0 8px; font-size: 15px; }
.pprompt__bad, .pprompt__good { font-size: 12.5px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; margin: 8px 0; }
.pprompt__bad { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); color: #FECACA; }
.pprompt__good { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25); color: #BBF7D0; }
.pprompt__k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.pprompt__guard { font-size: 12px; color: var(--gold-soft); margin-top: 6px; }
/* Piliers / pills inline */
.ppillars { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.ppill { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(214,179,106,0.35); background: rgba(214,179,106,0.06); font-size: 14px; font-weight: 600; color: var(--gold-soft); }
/* Slide titre — cartes flottantes */
.phero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .phero { grid-template-columns: 1fr; } .phero__art { display: none; } }
.phero__art { position: relative; height: 320px; }
.phero__float {
position: absolute; border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px;
background: rgba(8,19,33,0.85); backdrop-filter: blur(10px); box-shadow: var(--shadow);
font-size: 13px; color: var(--text); animation: pFloat 6s ease-in-out infinite;
}
.phero__float strong { display: block; color: var(--gold-soft); font-size: 13.5px; }
.phero__float small { color: var(--text-dim); font-size: 11.5px; }
.phero__float--1 { top: 6%; left: 4%; animation-delay: 0s; }
.phero__float--2 { top: 40%; right: 2%; animation-delay: 1.2s; }
.phero__float--3 { bottom: 6%; left: 18%; animation-delay: 2.4s; }
@keyframes pFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* ---- Bottom nav ---- */
.presentation-nav {
position: relative; z-index: 4; flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px clamp(16px, 3vw, 34px);
border-top: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(6, 14, 26, 0.6); backdrop-filter: blur(14px);
}
.pnav__btn {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
font-family: inherit; font-size: 13.5px; font-weight: 600;
color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
transition: all var(--t-fast) var(--ease);
}
.pnav__btn:hover:not(:disabled) { border-color: rgba(214,179,106,0.45); background: rgba(214,179,106,0.07); }
.pnav__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pnav__btn--next { color: #06111F; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: transparent; }
.pdots { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; }
.pdot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,0.16); transition: all var(--t-fast) var(--ease); }
.pdot:hover { background: rgba(214,179,106,0.5); transform: scale(1.2); }
.pdot.is-active { background: var(--gold-soft); box-shadow: 0 0 0 4px rgba(214,179,106,0.18); }
.pdot.is-essential::after { content: ""; }
.pdot.is-annex { background: rgba(56,189,248,0.3); }
@media (max-width: 680px) { .pdots { display: none; } }
/* ---- Soutenance hint (timing) ---- */
.presentation-speaker-notes, .psout {
position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
z-index: 5; max-width: min(680px, calc(100vw - 32px));
border: 1px solid rgba(214,179,106,0.3); border-radius: 12px;
background: rgba(8,19,33,0.94); backdrop-filter: blur(14px); box-shadow: var(--shadow);
padding: 12px 16px; font-size: 12.5px; color: var(--text-mute);
display: none;
}
.presentation-shell.is-soutenance .psout { display: block; }
.psout strong { color: var(--gold-soft); }
.psout__times { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.psout__times span { color: var(--text-dim); }
.psout__times b { color: var(--text); font-variant-numeric: tabular-nums; }
/* Badge soutenance (injecté par JS) : Essentiel / Approfondissement */
.pslide__sout-badge {
display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px; vertical-align: middle;
}
.pslide__sout-badge--essential { color: #06111F; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border: 1px solid transparent; }
.pslide__sout-badge--deep { color: var(--sky); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3); }
/* ---- Overlays : démo live + annexes ---- */
.presentation-overlay {
position: fixed; inset: 0; z-index: 20; display: none;
align-items: center; justify-content: center; padding: 24px;
background: rgba(3, 8, 15, 0.72); backdrop-filter: blur(8px);
}
.presentation-overlay.is-open { display: flex; }
.presentation-overlay__panel {
width: min(860px, 100%); max-height: 86vh; overflow-y: auto;
border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
background: rgba(8, 19, 33, 0.98); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8);
padding: clamp(20px, 3vw, 34px);
}
.poverlay__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.poverlay__head h3 { margin: 0 0 4px; font-size: 22px; }
.poverlay__head p { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.poverlay__close { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.04); color: var(--text); font-size: 18px; }
.poverlay__close:hover { border-color: rgba(214,179,106,0.45); color: var(--gold-soft); }
/* Modale vidéo de synthèse */
.presentation-video-panel { width: min(960px, 100%); }
.presentation-video-frame {
position: relative; width: 100%; border-radius: 14px; overflow: hidden;
background: #000; border: 1px solid rgba(255,255,255,0.1);
}
.presentation-video { display: block; width: 100%; max-height: 72vh; background: #000; }
.presentation-video:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 2px; }
/* Modale export / impression */
.presentation-export-panel { width: min(560px, 100%); }
.pexport-list { display: grid; gap: 10px; }
.pexport-item {
display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
padding: 13px 16px; border-radius: 12px;
border: 1px solid var(--line-soft); background: rgba(255,255,255,0.035);
color: var(--text); font-family: inherit;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pexport-item:hover { transform: translateY(-1px); border-color: rgba(214,179,106,0.45); background: rgba(214,179,106,0.07); color: var(--text); }
.pexport-item:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.pexport-item__ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; font-size: 16px;
color: var(--gold-soft); background: rgba(214,179,106,0.12); border: 1px solid rgba(214,179,106,0.28);
}
.pexport-item__txt { display: flex; flex-direction: column; line-height: 1.3; }
.pexport-item__title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.pexport-item__sub { font-size: 12.5px; color: var(--text-dim); }
.pexport-help { margin: 16px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.55; border-left: 2px solid rgba(214,179,106,0.4); padding-left: 12px; }
.pexport-help strong { color: var(--gold-soft); font-weight: 600; }
.presentation-live-demo-panel { display: grid; gap: 12px; }
.plive__card {
display: flex; align-items: center; gap: 14px; padding: 16px;
border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,0.02);
transition: all var(--t-fast) var(--ease);
}
.plive__card:hover { border-color: rgba(214,179,106,0.4); background: rgba(214,179,106,0.05); transform: translateY(-2px); }
.plive__num { font-family: var(--font-display); font-size: 28px; color: var(--gold-soft); flex: 0 0 auto; width: 42px; }
.plive__body { flex: 1 1 auto; }
.plive__body strong { display: block; font-size: 15px; color: var(--text); }
.plive__body span { font-size: 12.5px; color: var(--text-dim); }
.plive__go { flex: 0 0 auto; color: var(--gold-soft); font-size: 20px; }
/* Annexes */
.presentation-annex .pannex-section { margin-bottom: 22px; }
.presentation-annex h4 { margin: 0 0 8px; font-size: 15px; color: var(--gold-soft); }
.presentation-annex ul { margin: 0 0 4px; padding-left: 18px; }
.presentation-annex li { font-size: 13px; color: var(--text-mute); margin-bottom: 4px; }
.pannex-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pannex-tab { padding: 8px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600;
color: var(--text-mute); background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); }
.pannex-tab.is-active { color: #06111F; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); border-color: transparent; }
.pannex-pane { display: none; }
.pannex-pane.is-active { display: block; }
.pannex-vo { font-size: 13px; color: var(--text-mute); font-style: italic; border-left: 2px solid rgba(214,179,106,0.4); padding-left: 12px; margin: 10px 0; }
/* ==========================================================================
PASSE FINALE — effets visuels premium du mode présentation
========================================================================== */
/* Transition de slide plus marquée (fade + translate + scale) */
.presentation-slide { transform: translateY(26px) scale(0.985); }
/* Halo lumineux subtil derrière les grandes cartes */
.presentation-glow { position: relative; }
.presentation-glow::before {
content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
background: radial-gradient(120% 120% at 50% 0%, rgba(214,179,106,0.16), transparent 60%);
opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.presentation-slide.is-active .presentation-glow::before { opacity: 1; }
/* Hover premium générique sur les cartes de présentation */
.pcard, .presentation-solution-card, .presentation-kpi-card, .presentation-cost-card,
.presentation-cost-simple, .presentation-pilot-kpi, .presentation-human-core,
.pgp-card, .prgpd, .plive__card {
will-change: transform;
}
.presentation-kpi-card { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.presentation-kpi-card:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.4); box-shadow: 0 16px 40px -22px rgba(214,179,106,0.6); }
/* Count-up : léger flou de départ retiré une fois figé */
.presentation-countup.is-counting { color: var(--gold); }
/* Spotlight discret sur les mots importants */
.presentation-spotlight {
position: relative; color: var(--gold-soft); font-weight: 700; white-space: nowrap;
background: linear-gradient(180deg, transparent 62%, rgba(214,179,106,0.28) 62%);
background-size: 100% 100%;
}
.presentation-slide.is-active .presentation-spotlight { animation: pSpot 1600ms var(--ease) 200ms both; }
@keyframes pSpot {
0% { background-size: 0% 100%; }
100% { background-size: 100% 100%; }
}
/* Barre de progression plus vivante (shimmer) */
.presentation-progress__bar { position: relative; overflow: hidden; }
.presentation-progress__bar::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
transform: translateX(-100%); animation: pShimmer 2.4s var(--ease) infinite;
}
@keyframes pShimmer { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(220%); } }
/* Micro-interaction boutons principaux */
.pnav__btn { transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.pnav__btn--next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 38px -16px rgba(214,179,106,0.75); }
.pnav__btn.is-press { transform: scale(0.95); }
/* Parallax léger sur les cartes flottantes (slide 1) */
.presentation-parallax-card { transition: transform 220ms var(--ease); }
/* Transition de sortie vers une démo */
.presentation-shell.is-leaving { transition: opacity 200ms var(--ease), filter 200ms var(--ease); opacity: 0.15; filter: blur(3px); }
/* ---- Slide 12 : coût en 3 niveaux simples ---- */
.presentation-cost-simple {
border: 1px solid var(--line-soft); border-radius: 16px; padding: 18px 20px;
background: rgba(255,255,255,0.02); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.presentation-cost-simple:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.32); background: rgba(214,179,106,0.05); }
.pcs__head { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); line-height: 1.1; color: var(--gold-soft); }
.pcs__sub { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin: 4px 0 10px; }
.pcs__list { margin: 0 0 10px; padding-left: 18px; }
.pcs__list li { font-size: 13px; color: var(--text-mute); margin-bottom: 2px; }
.pcs__msg { font-size: 12.5px; color: var(--text); border-top: 1px dashed var(--line-soft); padding-top: 8px; margin: 0; }
.presentation-cost-simple--good { border-color: rgba(52,211,153,0.3); } .presentation-cost-simple--good .pcs__head { color: var(--green); }
.presentation-cost-simple--img { border-color: rgba(56,189,248,0.3); } .presentation-cost-simple--img .pcs__head { color: var(--sky); }
/* Accordéon coûts détaillés */
.pcost-details { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,0.015); overflow: hidden; }
.pcost-details > summary {
cursor: pointer; list-style: none; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--gold-soft);
display: flex; align-items: center; gap: 8px;
}
.pcost-details > summary::-webkit-details-marker { display: none; }
.pcost-details > summary::before { content: "▸"; transition: transform var(--t-fast) var(--ease); }
.pcost-details[open] > summary::before { transform: rotate(90deg); }
.pcost-details__body { padding: 4px 16px 16px; }
/* ---- Pilotage des performances (KPI pilote) ---- */
.presentation-pilot-kpi {
border: 1px solid rgba(56,189,248,0.28); border-radius: 14px; padding: 16px;
background: rgba(56,189,248,0.05);
}
.presentation-pilot-kpi h4 { margin: 0 0 8px; font-size: 15px; }
.presentation-pilot-kpi ul { margin: 0 0 8px; padding-left: 18px; }
.presentation-pilot-kpi li { font-size: 12.5px; color: var(--text-mute); margin-bottom: 2px; }
.ppilot__goal { font-size: 12.5px; color: var(--sky); border-top: 1px dashed rgba(56,189,248,0.3); padding-top: 8px; margin: 0; }
.ppilot__note { font-size: 12px; color: var(--text-dim); font-style: italic; margin-top: 12px; }
/* ---- Cœur de métier humain ---- */
.presentation-human-core {
border: 1px solid rgba(52,211,153,0.3); border-radius: 14px; padding: 16px;
background: rgba(52,211,153,0.05); transition: transform var(--t-fast) var(--ease);
}
.presentation-human-core:hover { transform: translateY(-3px); }
.phc__ico { font-size: 22px; color: var(--green); }
.presentation-human-core h4 { margin: 6px 0 4px; font-size: 16px; }
.presentation-human-core p { margin: 0; font-size: 13px; color: var(--text-mute); }
/* ---- Grille bon prompt immobilier ---- */
.pgp-card {
border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px;
background: rgba(255,255,255,0.02); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pgp-card:hover { transform: translateY(-2px); border-color: rgba(214,179,106,0.35); }
.pgp-card__n { font-family: var(--font-display); font-size: 20px; color: var(--gold-soft); }
.pgp-card h4 { margin: 2px 0 4px; font-size: 14.5px; }
.pgp-card p { margin: 0; font-size: 12.5px; color: var(--text-dim); }
/* ---- RGPD par cas ---- */
.prgpd { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; background: rgba(255,255,255,0.02); }
.prgpd h4 { margin: 0 0 6px; font-size: 15px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.prgpd__lvl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.prgpd__lvl--low { color: var(--green); background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.3); }
.prgpd__lvl--mid { color: var(--gold-soft); background: rgba(214,179,106,0.12); border: 1px solid rgba(214,179,106,0.32); }
.prgpd__lvl--high { color: var(--red); background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); }
.prgpd p { margin: 4px 0; font-size: 12.5px; color: var(--text-mute); }
.prgpd p strong { color: var(--text); }
/* ---- Pills "fil rouge" ---- */
.pthread { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0; }
.pthread__pill { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(214,179,106,0.32); background: rgba(214,179,106,0.06); font-weight: 600; color: var(--gold-soft); font-size: 14px; }
.pthread__sep { color: var(--gold); font-weight: 700; }
/* ---- Plan / sommaire overlay ---- */
.pplan-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 600px) { .pplan-list { grid-template-columns: 1fr; } }
.pplan-item {
display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
padding: 9px 12px; border-radius: 10px; font-family: inherit; font-size: 13px; color: var(--text-mute);
background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); transition: all var(--t-fast) var(--ease);
}
.pplan-item:hover { border-color: rgba(214,179,106,0.4); color: var(--text); background: rgba(214,179,106,0.05); }
.pplan-item.is-current { border-color: var(--gold-soft); color: var(--text); background: rgba(214,179,106,0.08); }
.pplan-item__n { flex: 0 0 auto; width: 26px; font-variant-numeric: tabular-nums; color: var(--gold-soft); font-weight: 700; }
.pplan-item__tag { flex: 0 0 auto; margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.pplan-item__tag--ess { color: #06111F; background: var(--gold-soft); }
.pplan-item__tag--deep { color: var(--sky); background: rgba(56,189,248,0.16); }
.pkbd-help { font-size: 12.5px; color: var(--text-dim); border-top: 1px solid var(--line-soft); padding-top: 12px; }
.pkbd-help kbd {
display: inline-block; padding: 1px 7px; border-radius: 6px; font-family: var(--font-sans); font-size: 11.5px;
background: rgba(255,255,255,0.06); border: 1px solid var(--line-soft); color: var(--text); margin: 0 2px;
}
/* Note plive : retour auto */
.plive__return { display: block; font-size: 11px; color: var(--gold-soft); margin-top: 3px; }
.pslide__demo-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
/* Réduction d'animations */
@media (prefers-reduced-motion: reduce) {
.presentation-slide { transition: opacity 200ms linear; transform: none !important; }
.presentation-slide.is-active [data-anim] { animation: none; opacity: 1; transform: none; }
.phero__float { animation: none; }
.presentation-progress__bar::after { animation: none; display: none; }
.presentation-slide.is-active .presentation-spotlight { animation: none; background-size: 100% 100%; }
.presentation-parallax-card { transition: none; transform: none !important; }
.pnav__btn--next:hover:not(:disabled) { transform: none; }
}
/* ==========================================================================
ÉQUIPE PROJET (avatars + cartes) — présentation & accueil
========================================================================== */
.pteam-avatar {
position: relative; display: grid; place-items: center; overflow: hidden;
flex: 0 0 auto; border-radius: 16px;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
color: #06111F; font-family: var(--font-display); font-weight: 700;
box-shadow: 0 10px 28px -14px rgba(214,179,106,0.6);
}
.pteam-avatar--round { border-radius: 50%; }
.pteam-avatar__ini { line-height: 1; letter-spacing: 0.02em; }
.pteam-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cartes équipe (annexe / slide) */
.pteam-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 880px) { .pteam-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .pteam-grid { grid-template-columns: 1fr; } }
.pteam-card {
border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px; text-align: center;
background: rgba(255,255,255,0.02); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pteam-card:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.32); background: rgba(214,179,106,0.05); }
.pteam-card .pteam-avatar { width: 92px; height: 92px; margin: 0 auto 12px; font-size: 30px; }
.pteam-card__name { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 2px; }
.pteam-card__role { font-size: 12px; color: var(--gold-soft); font-weight: 600; margin: 0 0 6px; }
.pteam-card__part { font-size: 12px; color: var(--text-mute); margin: 0; line-height: 1.5; }
.pteam-card__badge {
display: inline-block; margin-top: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--sky); background: rgba(56,189,248,0.12);
border: 1px solid rgba(56,189,248,0.3); padding: 2px 8px; border-radius: 999px;
}
/* Ligne « répartition de la parole » avec photo */
.pspeak { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.pspeak:last-child { border-bottom: 0; }
.pspeak .pteam-avatar { width: 46px; height: 46px; font-size: 16px; }
.pspeak__body { flex: 1 1 auto; min-width: 0; }
.pspeak__name { font-size: 14px; font-weight: 600; color: var(--text); }
.pspeak__part { font-size: 12.5px; color: var(--text-mute); }
.pspeak__meta { flex: 0 0 auto; text-align: right; font-size: 11.5px; color: var(--text-dim); }
.pspeak__meta b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pspeak__meta { display: none; } }
/* Accueil — « Projet réalisé par » (mini-cartes) */
.team-mini-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.team-mini {
display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px;
border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(255,255,255,0.02);
transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.team-mini:hover { border-color: rgba(214,179,106,0.32); transform: translateY(-2px); }
.team-mini .pteam-avatar { width: 40px; height: 40px; font-size: 14px; }
.team-mini__name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.15; }
.team-mini__role { display: block; font-size: 11px; color: var(--text-dim); }
/* ==========================================================================
ANNEXE — Pilotage des performances (KPI à mesurer)
========================================================================== */
.ppilot-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 820px) { .ppilot-grid { grid-template-columns: 1fr; } }
.ppilot-note {
margin-top: 14px; font-size: 12.5px; color: var(--gold-soft);
border: 1px solid rgba(214,179,106,0.3); background: rgba(214,179,106,0.06);
border-radius: 10px; padding: 10px 14px;
}
/* ==========================================================================
PASSE FINALE PRO — composants ajoutés, micro-interactions, thème clair/sombre
========================================================================== */
/* ---- Bouton thème (header site + barre présentation) ---- */
.theme-toggle { cursor: pointer; }
.theme-toggle__ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.theme-toggle__ico::before { content: "\263E"; font-size: 15px; } /* ☾ lune (sombre) */
[data-theme="light"] .theme-toggle__ico::before { content: "\2600"; } /* ☀ soleil (clair) */
.site-header .theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
background: rgba(255,255,255,0.04); border: 1px solid var(--line-soft);
color: var(--text); transition: all var(--t-fast) var(--ease);
}
.site-header .theme-toggle:hover { border-color: rgba(214,179,106,0.45); color: var(--gold-soft); background: rgba(214,179,106,0.07); }
/* ---- Badge présentateur (toujours visible, bas de scène) ---- */
.presentation-speaker-badge {
position: absolute; bottom: 14px; right: clamp(16px, 3vw, 34px); z-index: 6;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-mute);
padding: 5px 12px; border-radius: 999px; pointer-events: none;
background: rgba(8,19,33,0.72); border: 1px solid var(--line-soft);
backdrop-filter: blur(10px); box-shadow: 0 8px 22px -14px rgba(0,0,0,0.6);
}
.presentation-speaker-badge b { color: var(--gold-soft); font-weight: 700; }
@media (max-width: 680px) { .presentation-speaker-badge { bottom: 10px; right: 12px; font-size: 10.5px; padding: 4px 9px; } }
/* ---- Transformation du flux (slide approche) ---- */
.ptransform { margin: 18px 0 4px; }
.ptransform__title { font-size: 15px; color: var(--gold-soft); margin: 0 0 10px; }
.pcol--before { border-color: rgba(248,113,113,0.28); background: rgba(248,113,113,0.04); }
.pcol--after { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.05); }
.pcol--after h4 { color: var(--green); }
.ptransform__msg { margin: 12px 0 0; font-size: 13px; font-style: italic; color: var(--gold-soft); }
/* ---- Logique coût (slide coût) ---- */
.pcost-logic-title { font-size: 15px; color: var(--gold-soft); margin: 0 0 10px; }
.pcost-strong { font-family: var(--font-display); font-size: clamp(16px, 1.9vw, 22px); line-height: 1.3; color: var(--text); margin: 14px 0 0; }
.presentation-cost-simple--cache { border-color: rgba(214,179,106,0.32); }
.presentation-cost-simple--cache .pcs__head { color: var(--gold-soft); }
/* ---- Synthèse opérationnelle (grille 5) ---- */
.pgrid--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1080px) { .pgrid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 680px) { .pgrid--5 { grid-template-columns: 1fr; } }
.psynth-title { font-size: 15px; color: var(--gold-soft); margin: 6px 0 8px; }
.psynth-grid { margin-top: 0; }
.psynth-card {
border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px;
background: rgba(255,255,255,0.02); transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.psynth-card:hover { transform: translateY(-3px); border-color: rgba(214,179,106,0.32); }
.psynth-card__n { font-family: var(--font-display); font-size: 22px; color: var(--gold-soft); display: block; }
.psynth-card h4 { margin: 4px 0; font-size: 14px; }
.psynth-card p { margin: 0; font-size: 12px; color: var(--text-mute); }
/* ---- Matrice risque / contrôle (accordéon) ---- */
.pmatrix-details { margin-top: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,0.015); overflow: hidden; }
.pmatrix-details > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--gold-soft); display: flex; align-items: center; gap: 8px; }
.pmatrix-details > summary::-webkit-details-marker { display: none; }
.pmatrix-details > summary::before { content: "\25B8"; transition: transform var(--t-fast) var(--ease); }
.pmatrix-details[open] > summary::before { transform: rotate(90deg); }
.pmatrix-details__body { padding: 4px 16px 16px; }
.prisk--low { border-color: rgba(52,211,153,0.3); }
.prisk--mid { border-color: rgba(214,179,106,0.32); }
.prisk--high { border-color: rgba(248,113,113,0.32); }
.pmatrix-msg { margin: 12px 0 0; font-size: 13px; font-style: italic; color: var(--gold-soft); }
/* ---- Scénario de démonstration (slides démo) ---- */
.pscenario { margin: 14px 0 4px; border: 1px solid var(--line-soft); border-left: 3px solid var(--gold); border-radius: 12px; padding: 12px 16px; background: rgba(214,179,106,0.04); }
.pscenario__k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-soft); }
.pscenario__txt { margin: 4px 0 8px; font-size: 13.5px; color: var(--text); font-style: italic; }
.pscenario__steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; counter-reset: pstep; }
.pscenario__steps li { counter-increment: pstep; font-size: 12px; color: var(--text-mute); }
.pscenario__steps li::before { content: counter(pstep) ". "; color: var(--gold-soft); font-weight: 700; }
/* ---- Scénario dans le panneau Démo live ---- */
.plive__scenario { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 5px; line-height: 1.45; }
.plive__scenario b { color: var(--gold-soft); }
/* ---- Liste mesures pilote 30 jours ---- */
.ppilot-measures { columns: 2; column-gap: 28px; margin: 0 0 14px; padding-left: 18px; }
.ppilot-measures li { font-size: 12.5px; color: var(--text-mute); margin-bottom: 3px; break-inside: avoid; }
@media (max-width: 560px) { .ppilot-measures { columns: 1; } }
/* ---- Prénom présentateur dans le plan ---- */
.pplan-item__t { display: flex; flex-direction: column; gap: 1px; }
.pplan-item__who { font-size: 10.5px; font-weight: 600; color: var(--gold-soft); letter-spacing: 0.02em; }
/* ---- Phrase « règle » projection ---- */
.pslide__big--rule { font-size: clamp(18px, 2.2vw, 26px); margin: 14px 0 0; }
/* ---- Micro-interactions ---- */
.ptop__tools [data-overlay="demo"] { animation: pDemoGlow 3.4s var(--ease) infinite; }
@keyframes pDemoGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(214,179,106,0); } 50% { box-shadow: 0 0 16px -2px rgba(214,179,106,0.5); } }
.presentation-slide.is-active .pteam-card { animation: pTeamIn 560ms var(--ease) both; }
.presentation-slide.is-active .pteam-card:nth-child(1) { animation-delay: 120ms; }
.presentation-slide.is-active .pteam-card:nth-child(2) { animation-delay: 200ms; }
.presentation-slide.is-active .pteam-card:nth-child(3) { animation-delay: 280ms; }
.presentation-slide.is-active .pteam-card:nth-child(4) { animation-delay: 360ms; }
.presentation-slide.is-active .pteam-card:nth-child(5) { animation-delay: 440ms; }
@keyframes pTeamIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
.pplan-item.is-current { box-shadow: 0 0 0 1px var(--gold-soft), 0 10px 30px -18px rgba(214,179,106,0.7); }
@media (prefers-reduced-motion: reduce) {
.ptop__tools [data-overlay="demo"] { animation: none; }
.presentation-slide.is-active .pteam-card { animation: none; }
}
/* ==========================================================================
THÈME CLAIR — palette premium ivoire (pas une simple inversion)
========================================================================== */
[data-theme="light"] {
--bg-deep: #ECE4D5;
--bg: #F5EFE4;
--bg-soft: #FFFFFF;
--bg-elev: #FFFFFF;
--line: rgba(176, 133, 47, 0.30);
--line-soft: rgba(27, 36, 48, 0.12);
--text: #1B2430;
--text-mute: #45525F;
--text-dim: #6B7686;
--gold: #A9791F;
--gold-soft: #8A6314;
--sky: #0E76A8;
--green: #137A53;
--red: #C0392B;
--shadow-sm: 0 4px 14px rgba(60, 50, 20, 0.10);
--shadow: 0 24px 50px -24px rgba(60, 50, 20, 0.28);
--shadow-gold: 0 18px 60px -28px rgba(176, 133, 47, 0.40);
}
/* Fond global clair chaud */
[data-theme="light"] body {
background: var(--bg);
background-image:
radial-gradient(1200px 600px at 90% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
radial-gradient(900px 500px at -10% 20%, rgba(176, 133, 47, 0.12), transparent 60%),
linear-gradient(180deg, #F7F2E8 0%, #F1EADB 100%);
}
[data-theme="light"] ::selection { background: rgba(176, 133, 47, 0.28); color: #1B2430; }
[data-theme="light"] .bg-stage { opacity: 0.55; }
/* Header / nav */
[data-theme="light"] .site-header { background: rgba(250, 246, 238, 0.85); border-bottom-color: rgba(27,36,48,0.10); box-shadow: 0 18px 45px rgba(60, 50, 20, 0.10); }
[data-theme="light"] .site-header.is-scrolled { background: rgba(250, 246, 238, 0.94); }
[data-theme="light"] .nav a:hover { background: rgba(27,36,48,0.05); }
[data-theme="light"] .nav a.is-active { background: rgba(176, 133, 47, 0.12); }
[data-theme="light"] .nav-toggle { background: #FFFFFF; }
@media (max-width: 960px) {
[data-theme="light"] .nav { background: rgba(250,246,238,0.97); border-bottom-color: rgba(27,36,48,0.10); }
}
[data-theme="light"] .nav__dropdown,
[data-theme="light"] .nav__card { background: #FFFFFF; }
/* Cartes & surfaces translucides -> blanc */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .stats,
[data-theme="light"] .pcard,
[data-theme="light"] .presentation-solution-card,
[data-theme="light"] .presentation-cost-card,
[data-theme="light"] .presentation-cost-simple,
[data-theme="light"] .pgp-card,
[data-theme="light"] .prgpd,
[data-theme="light"] .plive__card,
[data-theme="light"] .pteam-card,
[data-theme="light"] .pcol,
[data-theme="light"] .pprompt,
[data-theme="light"] .pflow__step,
[data-theme="light"] .pillar,
[data-theme="light"] .psynth-card,
[data-theme="light"] .team-mini,
[data-theme="light"] .fieldset,
[data-theme="light"] .step,
[data-theme="light"] .analysis-box,
[data-theme="light"] .ethics__card,
[data-theme="light"] .plan,
[data-theme="light"] .qc,
[data-theme="light"] .mkt-mode,
[data-theme="light"] .mkt-ev,
[data-theme="light"] .mpub,
[data-theme="light"] .prop-card { background: #FFFFFF; }
[data-theme="light"] .presentation-kpi-card { background: linear-gradient(160deg, rgba(176,133,47,0.10), #FFFFFF); }
[data-theme="light"] .pkpi--accent { background: linear-gradient(160deg, rgba(19,122,83,0.12), #FFFFFF); }
/* Hover : le voile doré sombre devient clair */
[data-theme="light"] .pcard:hover,
[data-theme="light"] .presentation-solution-card:hover,
[data-theme="light"] .presentation-cost-simple:hover,
[data-theme="light"] .pteam-card:hover,
[data-theme="light"] .plive__card:hover { background: rgba(176,133,47,0.06); }
/* Surfaces SOMBRES pleines -> claires */
[data-theme="light"] .float-card { background: linear-gradient(180deg, #FFFFFF, #FBF7EF); }
[data-theme="light"] .phero__float { background: rgba(255,255,255,0.92); }
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea { background: #FFFFFF; color: var(--text); }
[data-theme="light"] .input:focus,
[data-theme="light"] .select:focus,
[data-theme="light"] .textarea:focus { background: #FFFDF7; }
[data-theme="light"] .result-text,
[data-theme="light"] .ba,
[data-theme="light"] .ba__side,
[data-theme="light"] .ba__caption,
[data-theme="light"] .mockup,
[data-theme="light"] .chip-float,
[data-theme="light"] .pipeline__step,
[data-theme="light"] .reel__seg,
[data-theme="light"] .pnav,
[data-theme="light"] .pmini,
[data-theme="light"] .sg-badge--hero,
[data-theme="light"] .preview-fixed-dock { background: #FFFFFF; }
[data-theme="light"] .code-block { background: #FBF7EF; color: var(--text); }
[data-theme="light"] .ba-col__media,
[data-theme="light"] .cmp__stage,
[data-theme="light"] .mkt-ev__media { background: #E7DECC; }
/* Footer */
[data-theme="light"] .site-footer { background: linear-gradient(180deg, transparent, rgba(176,133,47,0.08)); }
/* Présentation : shell + barres + dots */
[data-theme="light"] .presentation-shell {
background:
radial-gradient(1100px 600px at 85% -8%, rgba(56,189,248,0.10), transparent 60%),
radial-gradient(900px 520px at -8% 18%, rgba(176,133,47,0.12), transparent 60%),
linear-gradient(180deg, #F7F2E8 0%, #F1EADB 60%, #ECE4D5 100%);
}
[data-theme="light"] .presentation-shell::before { background-image: linear-gradient(rgba(27,36,48,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(27,36,48,0.04) 1px, transparent 1px); }
[data-theme="light"] .presentation-topbar,
[data-theme="light"] .presentation-nav { background: rgba(250,246,238,0.72); border-color: rgba(27,36,48,0.08); }
[data-theme="light"] .presentation-progress { background: rgba(27,36,48,0.12); }
[data-theme="light"] .ptool { background: rgba(27,36,48,0.03); }
[data-theme="light"] .ptool:hover { background: rgba(176,133,47,0.10); }
[data-theme="light"] .pnav__btn { background: #FFFFFF; }
[data-theme="light"] .pnav__btn:hover:not(:disabled) { background: rgba(176,133,47,0.10); }
[data-theme="light"] .pmedia-card { background: #FFFFFF; border-color: rgba(27,36,48,0.12); }
[data-theme="light"] .pmedia-card:hover { background: rgba(176,133,47,0.10); border-color: rgba(176,133,47,0.45); }
[data-theme="light"] .pmedia-card__ico { color: #8a6a1f; background: rgba(176,133,47,0.12); border-color: rgba(176,133,47,0.3); }
[data-theme="light"] .pdot { background: rgba(27,36,48,0.18); }
[data-theme="light"] .pdot.is-annex { background: rgba(14,118,168,0.45); }
/* Badge présentateur (clair) */
[data-theme="light"] .presentation-speaker-badge { background: rgba(255,255,255,0.85); color: var(--text-mute); border-color: rgba(27,36,48,0.12); }
/* Overlays + accordéons + soutenance */
[data-theme="light"] .presentation-overlay { background: rgba(40,34,18,0.32); }
[data-theme="light"] .presentation-overlay__panel { background: #FFFFFF; border-color: rgba(27,36,48,0.12); box-shadow: 0 40px 90px -30px rgba(60,50,20,0.4); }
[data-theme="light"] .poverlay__close { background: rgba(27,36,48,0.04); }
[data-theme="light"] .presentation-video-frame { border-color: rgba(27,36,48,0.16); }
[data-theme="light"] .pexport-item { background: #FFFFFF; border-color: rgba(27,36,48,0.12); }
[data-theme="light"] .pexport-item:hover { background: rgba(176,133,47,0.10); border-color: rgba(176,133,47,0.45); }
[data-theme="light"] .pexport-item__ico { color: #8a6a1f; background: rgba(176,133,47,0.12); border-color: rgba(176,133,47,0.3); }
[data-theme="light"] .pannex-tab { background: rgba(27,36,48,0.04); }
[data-theme="light"] .psout { background: rgba(255,255,255,0.96); }
[data-theme="light"] .pkbd-help kbd { background: rgba(27,36,48,0.06); }
[data-theme="light"] .pcost-details,
[data-theme="light"] .pmatrix-details { background: #FBF7EF; }
[data-theme="light"] .pscenario { background: rgba(176,133,47,0.06); }
/* Prompts : texte foncé lisible */
[data-theme="light"] .pprompt__bad { color: #9B2C2C; background: rgba(192,57,43,0.08); border-color: rgba(192,57,43,0.22); }
[data-theme="light"] .pprompt__good { color: #146A45; background: rgba(19,122,83,0.10); border-color: rgba(19,122,83,0.22); }
/* Badges colorés lisibles sur clair */
[data-theme="light"] .badge--blue { color: #0E76A8; }
[data-theme="light"] .badge--green { color: #137A53; }
[data-theme="light"] .badge--red { color: #C0392B; }
/* Divers */
[data-theme="light"] .ptable tr:hover td { background: rgba(27,36,48,0.03); }
[data-theme="light"] .presentation-glow::before { background: radial-gradient(120% 120% at 50% 0%, rgba(176,133,47,0.16), transparent 60%); }
[data-theme="light"] .pteam-avatar { color: #2A1E06; }
[data-theme="light"] .presentation-spotlight { background: linear-gradient(180deg, transparent 62%, rgba(176,133,47,0.32) 62%); }
/* ==========================================================================
ZOOM PRÉSENTATION — slides « grand écran » plus grandes et immersives
(uniquement le mode présentation ; n'affecte pas l'accueil ni les 3 apps)
========================================================================== */
/* 1. Zone de contenu plus large + marges latérales réduites + hauteur mieux exploitée */
.presentation-slide {
padding: clamp(16px, 2.6vh, 40px) clamp(20px, 2.2vw, 46px);
}
.presentation-slide__inner {
width: 100%;
max-width: clamp(1120px, 88vw, 1720px);
}
/* 2. Topbar + barre du bas plus compactes : le contenu remonte et gagne de la place */
.presentation-topbar { padding: 9px clamp(16px, 3vw, 34px); gap: 14px; }
.presentation-nav { padding: 9px clamp(16px, 3vw, 34px); }
.ptool { padding: 7px 12px; }
.pnav__btn { padding: 9px 18px; }
/* 3. Impact typographique renforcé (fluide, lisible au vidéoprojecteur) */
.pslide__eyebrow { font-size: clamp(12px, 1vw, 14px); margin-bottom: clamp(12px, 1.4vw, 18px); }
.pslide__title { font-size: clamp(30px, 4.3vw, 60px); margin: 0 0 clamp(14px, 1.4vw, 20px); }
.pslide__lead { font-size: clamp(16px, 1.7vw, 23px); max-width: 80ch; }
.pslide__quote { font-size: clamp(22px, 2.9vw, 36px); }
.pslide__big { font-size: clamp(30px, 4.8vw, 62px); }
.pslide__big--rule { font-size: clamp(20px, 2.5vw, 30px); }
.pslide__note { font-size: clamp(13px, 1.05vw, 15px); }
/* 4. Cartes & grilles plus généreuses, moins de vide interne */
.pgrid { gap: clamp(14px, 1.4vw, 24px); margin-top: clamp(10px, 1.2vw, 16px); }
.presentation-solution-card, .pcard { padding: clamp(18px, 1.6vw, 26px) clamp(20px, 1.7vw, 28px); border-radius: 18px; }
.pcard h3, .pcard h4 { font-size: clamp(16px, 1.3vw, 20px); }
.pcard p { font-size: clamp(13.5px, 1.05vw, 16px); }
.pcard li { font-size: clamp(13px, 1vw, 15.5px); }
.pcard__num { font-size: clamp(26px, 2.6vw, 36px); }
.pcard__ico { font-size: clamp(22px, 2vw, 28px); }
/* KPI plus « hero » */
.presentation-kpi-card { padding: clamp(16px, 1.5vw, 24px); }
.pkpi__num { font-size: clamp(30px, 3.6vw, 48px); }
.pkpi__label { font-size: clamp(12.5px, 1vw, 15px); }
/* Coût plus lisible */
.pcs__head { font-size: clamp(20px, 2.5vw, 30px); }
.pcs__sub { font-size: clamp(12px, 0.95vw, 14px); }
.pcs__list li, .pcs__msg { font-size: clamp(12.5px, 1vw, 15px); }
.pcost-strong { font-size: clamp(18px, 2.1vw, 26px); }
/* Flux / schéma plus présent */
.pflow__step { font-size: clamp(13px, 1.05vw, 15.5px); padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.3vw, 18px); }
.pflow__step strong { font-size: clamp(13.5px, 1.1vw, 16px); }
/* Tableau IA mobilisées */
.ptable { font-size: clamp(13px, 1.05vw, 15px); }
.ptable th, .ptable td { padding: clamp(10px, 1vw, 14px) clamp(12px, 1.1vw, 16px); }
/* Pills / fil rouge plus imposants */
.ppill, .pthread__pill { font-size: clamp(14px, 1.2vw, 17px); padding: 10px 20px; }
/* 5. Slides spécifiques */
/* Équipe : portraits plus grands */
.pteam-grid { gap: clamp(14px, 1.4vw, 22px); }
.pteam-card { padding: clamp(16px, 1.6vw, 24px); }
.pteam-card .pteam-avatar { width: clamp(92px, 8vw, 128px); height: clamp(92px, 8vw, 128px); font-size: clamp(30px, 3vw, 42px); }
.pteam-card__name { font-size: clamp(15px, 1.2vw, 18px); }
.pteam-card__role { font-size: clamp(12px, 1vw, 14px); }
/* Slide titre : hero plus ample */
.phero { gap: clamp(28px, 3vw, 52px); }
.phero__art { height: clamp(320px, 36vh, 420px); }
.phero__float { font-size: clamp(13px, 1.05vw, 15px); padding: clamp(14px, 1.3vw, 18px) clamp(16px, 1.5vw, 20px); }
/* Synthèse opérationnelle */
.psynth-card { padding: clamp(14px, 1.3vw, 20px); }
.psynth-card h4 { font-size: clamp(13.5px, 1.05vw, 16px); }
.psynth-card p { font-size: clamp(12px, 0.95vw, 14px); }
.psynth-card__n { font-size: clamp(22px, 2.2vw, 30px); }
/* Cœur de métier humain */
.presentation-human-core { padding: clamp(16px, 1.5vw, 22px); }
.presentation-human-core h4 { font-size: clamp(15px, 1.2vw, 18px); }
.presentation-human-core p { font-size: clamp(13px, 1vw, 15px); }
/* Scénarios démo & matrice */
.pscenario__txt { font-size: clamp(13.5px, 1.1vw, 16px); }
.pscenario__steps li { font-size: clamp(12px, 1vw, 14px); }
/* RGPD / colonnes avoid-allow / before-after */
.pcol h4 { font-size: clamp(14px, 1.15vw, 17px); }
.pcol li { font-size: clamp(13px, 1.05vw, 15px); }
.prgpd p { font-size: clamp(12.5px, 1vw, 14.5px); }
/* 8. Badge présentateur : reste discret même agrandi */
.presentation-speaker-badge { font-size: clamp(11px, 0.95vw, 13px); }
/* 9. Responsive : marges plus sûres sur petits écrans, plein écran intact */
@media (max-width: 900px) {
.presentation-slide { padding: 18px 16px 26px; }
.presentation-slide__inner { max-width: 100%; }
.pslide__lead { max-width: 100%; }
}
/* ==========================================================================
SLIDE 4 (friction) & SLIDE 8 (chiffres) — refonte plus narrative / hiérarchisée
========================================================================== */
/* ---- Slide 4 : 3 grandes cartes de friction + conséquences compactes ---- */
.pfric-card { display: flex; flex-direction: column; }
.pfric-card .pcard__ico { color: var(--gold-soft); }
.pfric-card h4 { font-size: clamp(17px, 1.5vw, 22px); }
.pfric-card ul { margin-top: auto; }
.pfric-card li { font-size: clamp(13.5px, 1.1vw, 16px); margin-bottom: 5px; }
.pconseq {
margin-top: clamp(14px, 1.6vw, 22px);
border: 1px solid rgba(248,113,113,0.26); border-radius: 16px;
background: rgba(248,113,113,0.05);
padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.pconseq__title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); flex: 0 0 auto; }
.pconseq__items { display: flex; flex-wrap: wrap; gap: 9px; }
.pconseq__item {
padding: 8px 16px; border-radius: 999px; font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 600;
color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft);
}
/* ---- Slide 8 : niveau 1 (3 chiffres hero) ---- */
.phero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 26px); margin-top: clamp(8px, 1.2vw, 16px); }
@media (max-width: 760px) { .phero-stats { grid-template-columns: 1fr; } }
.phero-stat {
display: flex; flex-direction: column; align-items: center; text-align: center;
border: 1px solid var(--line-soft); border-radius: 20px;
padding: clamp(18px, 2.4vw, 36px) clamp(16px, 1.6vw, 24px);
background: linear-gradient(160deg, rgba(214,179,106,0.10), rgba(255,255,255,0.01));
}
.phero-stat .pkpi__num { font-family: var(--font-display); font-size: clamp(50px, 7vw, 94px); line-height: 1; color: var(--gold-soft); }
.phero-stat__label { margin-top: 8px; font-size: clamp(13px, 1.2vw, 18px); font-weight: 600; color: var(--text-mute); }
.phero-stat--accent { background: linear-gradient(160deg, rgba(52,211,153,0.14), rgba(255,255,255,0.01)); border-color: rgba(52,211,153,0.32); }
.phero-stat--accent .pkpi__num { color: var(--green); }
/* ---- Slide 8 : niveau 2 (cartes solution avec métriques) ---- */
.pstat-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pstat-list li {
display: flex; align-items: baseline; gap: 10px;
font-size: clamp(13.5px, 1.1vw, 16px); color: var(--text-mute);
padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
}
.pstat-list li:last-child { border-bottom: 0; }
.pstat-list b { font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 27px); color: var(--gold-soft); min-width: 1.5em; text-align: right; }
/* ---- Slide 8 : niveau 3 (bande contrôle humain) ---- */
.pcontrol-band {
display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 1.6vw, 24px);
margin-top: clamp(14px, 1.6vw, 22px); padding: clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 26px);
border: 1px solid rgba(52,211,153,0.3); border-radius: 16px; background: rgba(52,211,153,0.06);
}
.pcontrol-band__head { font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); color: var(--green); flex: 0 0 auto; }
.pcontrol-band__steps { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.pcontrol-step { padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: clamp(13px, 1.1vw, 16px); border: 1px solid var(--line-soft); color: var(--text); }
.pcontrol-step--ok { color: var(--green); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.pcontrol-step--mod { color: var(--gold-soft); background: rgba(214,179,106,0.12); border-color: rgba(214,179,106,0.32); }
.pcontrol-step--no { color: var(--red); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); }
.pcontrol-band__msg { margin-left: auto; font-family: var(--font-display); font-style: italic; color: var(--text); font-size: clamp(14px, 1.3vw, 19px); flex: 1 1 220px; text-align: right; }
@media (max-width: 680px) { .pcontrol-band__msg { margin-left: 0; text-align: left; } }
/* ---- Thème clair : surfaces translucides -> blanc ---- */
[data-theme="light"] .pconseq__item,
[data-theme="light"] .pcontrol-step { background: #FFFFFF; }
[data-theme="light"] .phero-stat { background: linear-gradient(160deg, rgba(176,133,47,0.12), #FFFFFF); }
[data-theme="light"] .phero-stat--accent { background: linear-gradient(160deg, rgba(19,122,83,0.14), #FFFFFF); }
/* ==========================================================================
DÉMOS PRÉPARÉES (mode soutenance) — panneau guidé autonome, sans appel IA
========================================================================== */
.prepared-demo-panel { margin: 0 0 36px; }
.prepared-demo-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.prepared-demo-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #06111F; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; }
.prepared-demo-title { font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 6px; }
.prepared-demo-sub { color: var(--text-mute); margin: 0; font-size: clamp(14px, 1.3vw, 17px); }
.prepared-demo-head__actions { flex: 0 0 auto; }
.prepared-demo-stepper { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; }
.prepared-demo-stepper__item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(255,255,255,0.02); font-size: 13px; color: var(--text-dim); }
.prepared-demo-stepper__item .pds-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.06); color: var(--text-mute); }
.prepared-demo-stepper__item.is-current { border-color: var(--gold-soft); color: var(--text); background: rgba(214,179,106,0.08); }
.prepared-demo-stepper__item.is-current .pds-n { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; }
.prepared-demo-stepper__item.is-done .pds-n { background: rgba(52,211,153,0.18); color: var(--green); }
.prepared-demo-stage { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: rgba(255,255,255,0.02); padding: clamp(18px, 2vw, 30px); }
.prepared-demo-stage__title { font-size: clamp(18px, 1.8vw, 24px); margin: 0 0 16px; color: var(--gold-soft); }
.prepared-demo-result__lead { font-size: clamp(15px, 1.3vw, 18px); color: var(--text); margin: 0 0 12px; }
.pde-subhead { font-size: 14px; color: var(--gold-soft); margin: 18px 0 8px; }
.prepared-demo-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.prepared-demo-actions__left, .prepared-demo-actions__right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prepared-demo-done { color: var(--green); font-weight: 600; font-size: 14px; }
.prepared-demo-note { font-size: 12.5px; color: var(--text-dim); font-style: italic; border-left: 2px solid rgba(214,179,106,0.4); padding-left: 12px; margin: 12px 0 0; }
.prepared-demo-note--foot { margin-top: 14px; }
/* Email */
.prepared-demo-email { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.02); }
.pde-email__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.02); }
.pde-email__from { font-weight: 600; color: var(--text); font-size: 13.5px; }
.pde-email__subject { padding: 12px 16px 4px; font-weight: 600; color: var(--text); }
.pde-email__body { padding: 4px 16px 16px; color: var(--text-mute); font-size: 14px; line-height: 1.6; }
/* Champs extraits */
.pde-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 680px) { .pde-fields { grid-template-columns: repeat(2, 1fr); } }
.pde-field { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
.pde-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.pde-field b { color: var(--text); font-size: 15px; }
/* Chips */
.pde-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pde-chip { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-mute); background: rgba(255,255,255,0.03); border: 1px solid var(--line-soft); }
.pde-chip--ok { color: var(--green); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.pde-chip--warn { color: var(--gold-soft); background: rgba(214,179,106,0.12); border-color: rgba(214,179,106,0.32); }
/* Grille résultats + cartes */
.pde-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px) { .pde-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .pde-grid { grid-template-columns: 1fr; } }
.pde-card { border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; background: rgba(255,255,255,0.02); }
.pde-card__tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 8px; }
.pde-card h4 { margin: 0 0 6px; font-size: 15px; }
.pde-card p { margin: 0; font-size: 13px; color: var(--text-mute); line-height: 1.55; }
.pde-google__url { font-size: 12px; color: var(--green); }
.pde-google__title { color: var(--sky); font-size: 15px; margin: 2px 0; }
.pde-google__desc { font-size: 12.5px; color: var(--text-mute); }
/* Cartes réseaux sociaux */
.pde-social { border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,0.02); }
.pde-social__head { font-size: 12px; font-weight: 700; color: var(--gold-soft); margin-bottom: 6px; }
.pde-social__title { font-weight: 600; color: var(--text); font-size: 14px; margin-bottom: 4px; }
.pde-social__body { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; }
/* Scores */
.pde-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .pde-scores { grid-template-columns: repeat(2, 1fr); } }
.pde-score__top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-mute); margin-bottom: 5px; }
.pde-score__top b { color: var(--gold-soft); }
.pde-score__bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pde-score__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
/* Checklist / décisions / message système */
.pde-checklist { margin: 0; padding-left: 18px; }
.pde-checklist li { font-size: 13.5px; color: var(--text-mute); margin-bottom: 5px; }
.pde-decisions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.pde-decision { padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1px solid var(--line-soft); color: var(--text); }
.pde-decision--ok { color: var(--green); background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.pde-decision--mod { color: var(--gold-soft); background: rgba(214,179,106,0.12); border-color: rgba(214,179,106,0.32); }
.pde-decision--no { color: var(--red); background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.3); }
.pde-sysmsg { border: 1px dashed rgba(52,211,153,0.4); background: rgba(52,211,153,0.06); color: var(--green); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; }
/* Événement marketing */
.prepared-demo-event { border: 1px solid rgba(56,189,248,0.28); border-radius: 14px; background: rgba(56,189,248,0.05); padding: 16px; }
.pde-event__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pde-event__title { font-weight: 700; color: var(--sky); }
.pde-event__list { margin: 0; padding-left: 18px; }
.pde-event__list li { font-size: 13.5px; color: var(--text-mute); margin-bottom: 4px; }
/* Deux colonnes (acceptable/interdit, mode auto) + audit */
.pde-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 680px) { .pde-twocol { grid-template-columns: 1fr; } }
.pde-col { border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,0.02); }
.pde-col h4 { margin: 0 0 8px; font-size: 14px; }
.pde-col ul { margin: 0; padding-left: 18px; }
.pde-col li { font-size: 13px; color: var(--text-mute); margin-bottom: 3px; }
.pde-col--ok { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.05); }
.pde-col--ok h4 { color: var(--green); }
.pde-col--no { border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.05); }
.pde-col--no h4 { color: var(--red); }
.pde-audit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Pièces (placeholders 100 % CSS — fiables sans réseau) + comparateur avant/après */
.pde-roomcard { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); }
.pde-room { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 14px; overflow: hidden; }
.pde-room--before { background: linear-gradient(135deg, #2a3340, #3a4452); }
.pde-room--after { background: linear-gradient(135deg, #b9905a 0%, #d8c69a 100%); }
.pde-room::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(28px, 5vw, 54px); }
.pde-room--before::after { content: "🪟"; opacity: 0.45; }
.pde-room--after::after { content: "🛋️ 🪴 🖼️"; opacity: 0.9; }
.pde-room__tag { position: relative; z-index: 1; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.45); padding: 5px 12px; border-radius: 999px; }
.pde-room--after .pde-room__tag { color: #2A1E06; background: rgba(255,255,255,0.78); }
.pde-slider { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); user-select: none; }
.pde-slider .pde-room { position: absolute; inset: 0; aspect-ratio: auto; }
.pde-slider__after { position: absolute; inset: 0; }
.pde-slider__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.pde-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.pde-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: rgba(255,255,255,0.85); transform: translateX(-1px); z-index: 2; pointer-events: none; }
.pde-slider__handle::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #06111F; display: grid; place-items: center; font-size: 15px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
@media (max-width: 760px) {
.prepared-demo-actions { flex-direction: column; align-items: stretch; }
.prepared-demo-actions__left, .prepared-demo-actions__right { justify-content: center; }
}
/* Thème clair : surfaces translucides -> blanc, barres -> sombres légères */
[data-theme="light"] .prepared-demo-stage,
[data-theme="light"] .prepared-demo-email,
[data-theme="light"] .pde-email__head,
[data-theme="light"] .pde-field,
[data-theme="light"] .pde-chip,
[data-theme="light"] .pde-card,
[data-theme="light"] .pde-social,
[data-theme="light"] .pde-col,
[data-theme="light"] .pde-decision,
[data-theme="light"] .prepared-demo-stepper__item { background: #FFFFFF; }
[data-theme="light"] .pde-score__bar { background: rgba(27,36,48,0.12); }
[data-theme="light"] .prepared-demo-stepper__item .pds-n { background: rgba(27,36,48,0.08); }
/* Cartes scénario du panneau « Démo live » (présentation) */
.plive-scn { border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(255,255,255,0.02); padding: 18px 20px; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.plive-scn:hover { border-color: rgba(214,179,106,0.4); transform: translateY(-2px); }
.plive-scn__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.plive-scn__top .prepared-demo-badge { margin-bottom: 0; }
.plive-scn__num { font-family: var(--font-display); font-size: 26px; color: var(--gold-soft); }
.plive-scn__title { margin: 0 0 6px; font-size: 16px; }
.plive-scn__sum { margin: 0 0 10px; font-size: 13px; color: var(--text-mute); line-height: 1.55; }
.plive-scn__steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.plive-scn__steps .pde-chip { font-size: 11.5px; padding: 4px 10px; }
.plive-scn__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.plive-scn__actions .pnav__btn { font-size: 12.5px; padding: 8px 14px; }
.plive-scn__mention { margin: 0; font-size: 11.5px; color: var(--text-dim); }
[data-theme="light"] .plive-scn { background: #FFFFFF; }
/* ==========================================================================
DÉMOS GUIDÉES — bandeau piloté dans l'application réelle
========================================================================== */
.guided-demo-bar { position: sticky; top: var(--header-h); z-index: 60; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8,19,33,0.94); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
.guided-demo-bar__inner { padding: 14px clamp(14px, 2vw, 22px); }
.guided-demo-bar__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.guided-demo-bar__title { font-weight: 600; color: var(--text); font-size: clamp(14px, 1.3vw, 17px); margin-left: 6px; }
.guided-demo-stepper { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0; padding: 0; }
.guided-demo-stepper__item { display: flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line-soft); border-radius: 999px; font-size: 12px; color: var(--text-dim); background: rgba(255,255,255,0.02); }
.guided-demo-stepper__item .gds-n { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 11px; font-weight: 700; background: rgba(255,255,255,0.06); color: var(--text-mute); }
.guided-demo-stepper__item.is-current { border-color: var(--gold-soft); color: var(--text); background: rgba(214,179,106,0.10); }
.guided-demo-stepper__item.is-current .gds-n { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #06111F; }
.guided-demo-stepper__item.is-done .gds-n { background: rgba(52,211,153,0.18); color: var(--green); }
@media (max-width: 680px) { .guided-demo-stepper__item .gds-l { display: none; } }
.guided-demo-callout { margin: 8px 0 12px; font-size: 14px; color: var(--text); border-left: 3px solid var(--gold); padding-left: 12px; }
.guided-demo-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.guided-demo-bar__note { margin: 10px 0 0; font-size: 11.5px; color: var(--text-dim); font-style: italic; }
/* Cartes mail / source injectées dans l'app */
.guided-demo-mail, .guided-demo-source { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 12px; background: rgba(214,179,106,0.05); padding: 12px 16px; margin: 0 0 14px; }
.gdm__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gdm__head b { color: var(--text); }
.gdm__subject { font-weight: 600; color: var(--text); font-size: 13.5px; margin-bottom: 4px; }
.gdm__body { font-size: 13.5px; color: var(--text-mute); line-height: 1.55; }
/* Mise en évidence d'une vraie zone de l'app */
.guided-demo-highlight { outline: 2px solid var(--gold-soft); outline-offset: 4px; border-radius: 12px; box-shadow: 0 0 0 6px rgba(214,179,106,0.18); animation: gdPulse 1.6s var(--ease) 2; }
@keyframes gdPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(214,179,106,0.18); } 50% { box-shadow: 0 0 0 10px rgba(214,179,106,0.32); } }
/* Toast d'étape */
.guided-demo-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px); z-index: 9600; background: rgba(8,19,33,0.97); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); max-width: calc(100vw - 32px); }
.guided-demo-toast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Thème clair */
[data-theme="light"] .guided-demo-bar { background: rgba(255,255,255,0.96); }
[data-theme="light"] .guided-demo-stepper__item { background: #FFFFFF; }
[data-theme="light"] .guided-demo-stepper__item .gds-n { background: rgba(27,36,48,0.08); }
[data-theme="light"] .guided-demo-toast { background: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .guided-demo-highlight { animation: none; } }
/* ============================================================
EXPORT / IMPRESSION DE LA PRÉSENTATION
Activé via la classe body.printing-presentation (bouton Exporter).
Objectif : une slide = une page PDF, sans éléments interactifs.
NB : pas de règle @page ici, pour ne pas écraser l'@page du
rapport imprimable (body.printing-report) défini plus haut.
============================================================ */
@media print {
body.printing-presentation { background: #fff !important; overflow: visible !important; height: auto !important; padding: 0 !important; }
/* Masquer tout l'interactif : barres, navigation, modales, badges, démos */
body.printing-presentation .presentation-topbar,
body.printing-presentation .presentation-nav,
body.printing-presentation .presentation-progress,
body.printing-presentation .pdots,
body.printing-presentation .presentation-overlay,
body.printing-presentation .pnav,
body.printing-presentation .pnav__btn,
body.printing-presentation .presentation-speaker-badge,
body.printing-presentation .psout,
body.printing-presentation .presentation-speaker-notes,
body.printing-presentation .theme-toggle,
body.printing-presentation .guided-demo-bar,
body.printing-presentation .guided-demo-toast,
body.printing-presentation .pslide__cta,
body.printing-presentation .pslide__media,
body.printing-presentation .phero__art {
display: none !important;
}
/* Sortir le shell du mode fixe et passer en flux normal */
body.printing-presentation .presentation-shell {
position: static !important; inset: auto !important; display: block !important;
height: auto !important; width: 100% !important; background: #fff !important;
}
body.printing-presentation .presentation-shell::before,
body.printing-presentation .presentation-glow,
body.printing-presentation .presentation-spotlight { display: none !important; }
body.printing-presentation .presentation-stage {
position: static !important; overflow: visible !important; height: auto !important; display: block !important;
}
/* Une slide = une page */
body.printing-presentation .presentation-slide {
position: relative !important; inset: auto !important; display: block !important;
visibility: visible !important; opacity: 1 !important; transform: none !important;
pointer-events: auto !important; overflow: visible !important;
width: 100%; padding: 10mm 12mm !important;
background: #fff !important; color: #111 !important;
page-break-after: always; break-after: page; page-break-inside: auto;
}
body.printing-presentation .presentation-slide:last-child { page-break-after: avoid; break-after: auto; }
body.printing-presentation .presentation-slide__inner { max-width: 100% !important; margin: 0 !important; }
/* Forcer le rendu fidèle des couleurs (chiffres, badges, photos) */
body.printing-presentation .presentation-slide *,
body.printing-presentation .presentation-slide {
color-adjust: exact; print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
/* Lisibilité du texte sur fond blanc */
body.printing-presentation .pslide__title,
body.printing-presentation .pslide__big,
body.printing-presentation .pslide__quote { color: #111 !important; }
body.printing-presentation .pslide__title em,
body.printing-presentation .pslide__eyebrow,
body.printing-presentation .pslide__big em { color: #8a6a1f !important; }
body.printing-presentation .pslide__lead,
body.printing-presentation .pslide__note { color: #333 !important; }
/* Éviter de couper cartes, KPI et lignes au milieu d'une page */
body.printing-presentation .pteam-card,
body.printing-presentation .pkpi,
body.printing-presentation .pcard,
body.printing-presentation [class*="card"],
body.printing-presentation .pflow__step,
body.printing-presentation .plr__list li { page-break-inside: avoid; break-inside: avoid; }
/* Neutraliser animations d'entrée pour tout afficher */
body.printing-presentation [data-anim] { opacity: 1 !important; transform: none !important; animation: none !important; }
}