/* Sens de lecture — redéclaré ici comme dans landing_v10.css : 12 des 25 layouts
* ne chargent pas tokens/design_tokens.css, dont tous les layouts de landing.
* Deux lignes idempotentes valent mieux qu'une dépendance de chargement. */
:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }
/* =============================================================================
FLOWAYZ — LANDING v11 (« Marre de l'Admin ? » — la visite de l'hôtel)
=============================================================================
Servi par `app/views/layouts/landing_v11.html.erb` UNIQUEMENT.
Îlot visuel isolé, comme les v8/v9/v10 : ni tokens de l'app, ni Tailwind.
La charte est celle de la v10 — papier chaud, serif d'affichage, accent HSL,
CTA à dégradé, élévations — appliquée à une page qui change de registre :
quatorze photographies d'hôtel incarnent les fonctions, et la page montre
des humains réels (fondateur, avis).
⚠️ Les jetons sont RECOPIÉS de `landing_v10.css` (elle-même recopiée de
`tokens/design_tokens.css`). Si la charte de l'app change, répercuter à la
main, dans les deux fichiers.
CONTRAINTES FERMES (héritées de la v10) :
· JAMAIS `color: #fff` sur un fond accent — `--accent-contrast` est sombre.
· JAMAIS de `scale` au survol (directive Nelwep) : halo, ombre, glissement.
Le `scale` de PRESSION est admis.
· QUATRE familles, et pas une de plus — display, corps, serif d'accent,
manuscrite. Chacune a UN emploi nommé, écrit en tête du bloc @font-face.
Une cinquième famille, ou une famille employée hors de son emploi, se
refuse : c'est la contrainte qui remplace l'ancienne (« deux familles,
pas trois »), qui datait d'avant la reprise de la charte de Dylan.
· Aucune flèche dans les libellés de CTA.
· Breakpoints : 640 / 768 / 1024 uniquement (767.98 pour la borne haute
mobile) — `responsive:audit` est un job CI bloquant.
L'ACCENT reste rare : les CTA, l'eyebrow, le panneau de l'offre, les filets.
Sa rareté est ce qui fait le luxe.
============================================================================= */
/* ===== Polices auto-hébergées =================================================
LA CHARTE DU PARTENAIRE (Dylan), reprise le 2026-08-30. Sa maquette —
`flowayz.gatakavotresite.fr` — tient sur quatre familles, chacune à un emploi
NOMMÉ. C'est ce qui remplace les deux familles des v8/v9/v10 sur cette page,
et cette page seule : le layout `landing_v11.html.erb` ne charge que cette
feuille, les autres landings déclarent leurs propres faces.
Bricolage Grotesque → titres (h1 800, le reste 700)
Hanken Grotesk → corps, boutons, étiquettes
Fraunces italique → la SECONDE ligne du h1, et rien d'autre
Caveat → le nom du fondateur, et rien d'autre
Jamais de @import Google Fonts (supprimé du projet, commit 7377aa6a).
⚠️ Ces woff2 NE SONT PAS ceux de Google : chacun est instancié (axes figés,
graisses restreintes) puis sous-ensemblé, sans quoi Bricolage seule pèserait
75 Ko contre 100 Ko de budget critique pour la page entière. La recette
exacte, les compromis et le script de fabrication :
`docs/design/landing_v11_fonts.md`. Ne jamais remplacer un de ces fichiers
par un téléchargement direct depuis Google Fonts.
── Les blocs `latinext` ne sont pas optionnels ─────────────────────────────
Sans eux la police change EN PLEIN MOT sur /pl et /lt : les fichiers `-latin`
s'arrêtent à U+00FF, or `ł` vit en U+0142 et `ė` en U+0117. L'`unicode-range`
fait le travail de performance : seuls le polonais et le lituanien les
téléchargent, c'est pourquoi ils ne sont PAS préchargés dans le layout. */
/* Bricolage en DEUX fichiers d'une graisse chacun, jamais un seul fichier
variable de 700 à 800. La raison est mesurée : les deltas de variation
coûtent le même prix quelle que soit l'étendue de la plage — 30,1 Ko pour
700..800, contre 18,5 Ko pour une graisse figée. Scinder rend 11,6 Ko au
chemin critique, un huitième du budget de la page. Seul le 800 y reste : il
porte le h1 ; le 700 ne sert que des titres situés SOUS la ligne de
flottaison, et n'est donc pas préchargé. */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/bricolage-grotesque-800-latin-1ea537b6.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/bricolage-grotesque-800-latinext-a2f62b18.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/bricolage-grotesque-700-latin-d14ce4a5.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/bricolage-grotesque-700-latinext-3b24518a.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/assets/hanken-grotesk-latin-68d3ad03.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/assets/hanken-grotesk-latinext-b8c30bab.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces ITALIQUE. ⚠️ Ne pas confondre avec `fraunces-latin.woff2`, déjà dans
le dépôt (base/fonts.css) : celui-là est le ROMAIN. Un faux italique
synthétique sur un serif d'affichage se voit immédiatement — d'où un fichier
à part, et `font-style: italic` déclaré ici. */
@font-face {
font-family: 'Fraunces Italic';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fraunces-italic-latin-e7828682.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces Italic';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fraunces-italic-latinext-d6059f16.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/caveat-latin-12c76d68.woff2") format('woff2');
unicode-range: U+0020, U+0027, U+002D, U+002E, U+0041-005A, U+0061-007A,
U+00C0-00FF, U+2019;
}
/* ===== Jetons ================================================================
Palette « Bento » de l'application. Règle fondatrice : plus jamais de blanc
pur en fond — le fond est un off-white chaud, seules les cartes sont
blanches. */
:root {
--paper: #EFECE7;
--paper-2: #E7E3DC;
--surface: #FFFFFF;
--surface-2: #F4F1EC;
--ink: #191B20;
--ink-2: #3B3F47;
--ink-3: #71767F;
--line: rgba(23, 24, 29, 0.09);
--line-faint: rgba(23, 24, 29, 0.05);
--line-strong:rgba(23, 24, 29, 0.18);
/* Orange — RÉALIGNÉ le 2026-08-29 sur la maquette de Dylan, échantillonnée
à la pipette : son CTA vaut #F0531C, soit hsl(16, 88%, 53%). La teinte et
la saturation étaient DÉJÀ les siennes ; seule la clarté descend de 59 %
à 53 %. Ce n'est donc pas un changement de couleur, c'est le même orange
posé six points plus bas.
⚠️ Sa maquette met du texte BLANC sur ce bouton. Nous gardons le texte
sombre (`--accent-contrast`), et ce n'est pas un caprice : blanc sur
#F0531C donne 3,52:1, sous le seuil AA de 4,5:1 pour du texte courant ;
le texte sombre donne 4,63:1 et passe. La règle du dépôt — ne jamais
écrire `text-white` sur un fond accent — existe exactement pour ça. */
--accent-h: 16;
--accent-s: 88%;
--accent-l: 53%;
--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%));
--accent-edge: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 16%));
--accent-deep: hsl(var(--accent-h), var(--accent-s), 26%);
--accent-contrast: #1A202C;
--accent-5: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.05);
--accent-10: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.10);
--accent-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.20);
--accent-30: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.30);
--accent-gradient: linear-gradient(
180deg,
hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 7%)) 0%,
var(--accent) 52%,
hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%)) 100%);
--accent-gradient-hover: linear-gradient(
180deg,
hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 9%)) 0%,
var(--accent) 50%,
hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 11%)) 100%);
--elevation-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
--elevation-2: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.08);
--elevation-3: 0 4px 8px rgba(15, 23, 42, 0.05), 0 12px 24px rgba(15, 23, 42, 0.10);
--ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-snappy: cubic-bezier(0.19, 1, 0.22, 1);
--r-btn: 12px;
--r-tile: 20px;
--r-sm: 8px;
/* Quatre familles, quatre emplois nommés — la charte de Dylan. Les replis
sont choisis pour leurs métriques : Georgia est le serif le plus proche de
Fraunces, `ui-sans-serif` évite le Times de secours sur les titres. */
--font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Fraunces Italic', Georgia, 'Times New Roman', serif;
--font-hand: 'Caveat', 'Segoe Script', cursive;
--maxw: 1120px;
--maxw-prose: 62ch;
--gutter: 32px;
/* --- Bleu partenaire ------------------------------------------------------
Échantillonné sur flowayz.gatakavotresite.fr (2026-08-27) : #325FE5 (hero),
#4E71E6 (bloc offre). Décision Nelwep : le bleu habille les FONDS et les
BLOCS ; l'accent orange reste celui des CTA, coches, filets et liens —
c'est le couple de contraste du site du partenaire. */
/* Réaligné le 2026-08-29 sur le nouvel état de la maquette : ses aplats
valent aujourd'hui #2955E2 / #2A60E6, soit hsl(226, 76%, 52%) — un cran
plus profond que l'échantillon du 27/08. Gain au passage : le blanc sur
ce bleu monte de 4,99:1 à 6,01:1. */
--bleu-h: 226;
--bleu-s: 76%;
--bleu-l: 52%;
--bleu: hsl(var(--bleu-h), var(--bleu-s), var(--bleu-l));
--bleu-deep: hsl(var(--bleu-h), var(--bleu-s), 38%);
--bleu-grad: linear-gradient(160deg,
hsl(var(--bleu-h), 80%, 52%) 0%,
hsl(var(--bleu-h), 76%, 61%) 100%);
--bleu-5: hsla(var(--bleu-h), var(--bleu-s), var(--bleu-l), 0.05);
--bleu-10: hsla(var(--bleu-h), var(--bleu-s), var(--bleu-l), 0.10);
/* Encre claire posée sur le bleu — jamais du blanc pur. */
--bleu-contrast: #F5F8FF;
--bleu-contrast-2: rgba(245, 248, 255, 0.78);
}
/* ===== Thème sombre ==========================================================
Trois sélecteurs, pas deux : le script d'initialisation pose `data-theme`,
`data-mode` ET `.dark`, et l'app cible les trois. */
html[data-theme="dark"],
html[data-mode="dark"],
html.dark {
--paper: #0B0C0F;
--paper-2: #101216;
--surface: #15181E;
--surface-2: #1C2027;
--ink: #F4F5F7;
--ink-2: #C9CFD8;
--ink-3: #8A909B;
--line: rgba(255, 255, 255, 0.07);
--line-faint: rgba(255, 255, 255, 0.04);
--line-strong: rgba(255, 255, 255, 0.16);
--accent-l: 72%;
--accent-deep: hsl(var(--accent-h), var(--accent-s), 22%);
/* Le bleu s'éclaircit en sombre, comme l'accent — même règle de contraste. */
--bleu-l: 64%;
--bleu-deep: hsl(var(--bleu-h), var(--bleu-s), 30%);
--elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
--elevation-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 8px rgba(0, 0, 0, 0.40);
--elevation-3: 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.50);
color-scheme: dark;
}
/* ===== Base ================================================================== */
* { box-sizing: border-box; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
margin: 0;
/* `clip` et non `hidden` : les bandes pleine largeur (.lv11-bleed) font
100vw, qui déborde de la largeur utile quand la barre de défilement est
visible — clip coupe sans créer de piège de défilement horizontal. */
overflow-x: clip;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
/* ⚠️ Le 400 d'avant n'était pas un choix : DM Serif Display n'a QUE le 400.
Bricolage porte le 700, et le h1 le 800 — c'est l'échelle de Dylan, et c'est
le changement de présence le plus visible de la page après l'italique. */
h1, h2, h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.025em;
}
p { margin: 0; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent-20); }
:where(a, button, summary, [tabindex]):focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--paper),
0 0 0 4px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.55);
border-radius: var(--r-sm);
}
.lv11-wrap {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* La pilule collante recouvrirait les titres à l'arrivée d'une ancre : chaque
cible de défilement réserve sa marge. */
main section[id],
#contenu { scroll-margin-top: 96px; }
.lv11-prose { max-width: var(--maxw-prose); }
.lv11-skip {
position: absolute;
inset-inline-start: -9999px;
top: 0;
z-index: 100;
padding: 12px 20px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
}
.lv11-skip:focus { inset-inline-start: 16px; top: 16px; }
.lv11-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== Boutons ===============================================================
La signature de l'application (`flowayz_override.css`), portée telle quelle
depuis la v10 : dégradé vertical, arête, triple ombre, reflet au survol. */
.lv11-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 14px 28px;
white-space: nowrap;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
border-radius: var(--r-btn);
cursor: pointer;
overflow: hidden;
transition: box-shadow 0.22s var(--ease-premium),
transform 0.22s var(--ease-premium),
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.lv11-btn--primary {
background: var(--accent-gradient);
color: var(--accent-contrast);
border-color: var(--accent-edge);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 8px 22px -8px var(--accent),
0 2px 6px -2px rgba(15, 23, 42, 0.18);
}
.lv11-btn--primary:hover {
background: var(--accent-gradient-hover);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 12px 30px -8px var(--accent),
0 3px 10px -2px rgba(15, 23, 42, 0.22);
}
.lv11-btn--primary:active {
transform: translateY(0);
box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.20),
0 4px 12px -6px var(--accent);
}
.lv11-btn > * { position: relative; z-index: 1; }
.lv11-btn--primary::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(105deg,
transparent 35%,
rgba(255, 255, 255, 0.45) 50%,
transparent 65%);
transform: translateX(calc(var(--dir, 1) * -130%));
}
@media (prefers-reduced-motion: no-preference) {
.lv11-btn--primary::before { transition: transform 0.75s var(--ease-premium); }
.lv11-btn--primary:hover::before { transform: translateX(calc(var(--dir, 1) * 130%)); }
}
.lv11-btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--line-strong);
}
.lv11-btn--ghost:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-5);
}
/* Bouton secondaire BLEU (« Démarrer gratuit », « Ouvrir mon espace ») —
demande Nelwep du 2026-08-27 : le couple orange/bleu du partenaire, jusque
dans la paire de boutons. Plein et non fantôme : sur le hero voilé comme sur
la photo de fin, un contour se noierait. */
.lv11-btn--bleu {
background: var(--bleu);
color: var(--bleu-contrast);
border-color: var(--bleu-deep);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 6px 18px -8px var(--bleu);
}
.lv11-btn--bleu:hover {
background: hsl(var(--bleu-h), var(--bleu-s), calc(var(--bleu-l) - 7%));
color: var(--bleu-contrast);
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 10px 24px -8px var(--bleu);
}
.lv11-btn--bleu:active {
transform: translateY(0);
box-shadow: inset 0 2px 5px rgba(9, 15, 36, 0.28);
}
/* ===== Sections ============================================================== */
.lv11-section { border-top: 1px solid var(--line-faint); }
.lv11-pad { padding: 80px 0; }
.lv11-sunk { background: var(--paper-2); }
/* Lavis bleu — l'alternance de sections du site partenaire, en discret. */
.lv11-sunk--bleu { background: var(--bleu-5); }
.lv11-eyebrow {
display: block;
margin-bottom: 14px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.lv11-h2 {
font-size: clamp(34px, 5.4vw, 64px);
line-height: 1.06;
letter-spacing: -0.025em;
}
.lv11-rule {
height: 1px;
width: 0;
margin-top: 22px;
background: var(--accent);
transition: width 0.9s var(--ease-premium);
}
.lv11-rule.is-visible { width: 72px; }
.lv11-lines {
margin-top: 30px;
display: grid;
gap: 20px;
max-width: var(--maxw-prose);
}
.lv11-lines p {
font-size: clamp(17px, 2.1vw, 19px);
color: var(--ink-2);
}
.lv11-lines p:last-child { color: var(--ink); }
/* ===== Révélation au défilement ==============================================
État initial posé SOUS `prefers-reduced-motion: no-preference` : sans JS ou
avec moins de mouvement demandé, le contenu est simplement là. */
@media (prefers-reduced-motion: no-preference) {
/* Le PLIAGE : chaque bloc arrive comme une feuille qu'on déplie (bascule 3D
depuis son bord haut). Il ne se replie PAS : l'observer du layout cesse de
surveiller le noeud dès qu'il l'a déplié, donc `is-visible` ne retombe
jamais et la bascule ne se joue qu'une fois. */
.lv11-reveal {
opacity: 0;
transform: perspective(900px) rotateX(10deg) translateY(24px);
transform-origin: 50% 0;
transition: opacity 0.55s var(--ease-premium),
transform 0.55s var(--ease-premium);
}
.lv11-reveal.is-visible {
opacity: 1;
transform: none;
}
/* Les photographies « se posent » : un très léger excès d'échelle qui se
résout pendant la révélation, plus lentement que le fondu — l'image
continue de s'installer après l'arrivée du bloc. Cadres en `overflow:
hidden`, l'excès ne sort jamais. RÉSERVÉ aux cartes de la grille, au
fondateur et aux avis : les images des duos et du hall sont pilotées par
le script de parallax, qui écrit son propre `transform` inline — les deux
mécanismes sur un même nœud se voleraient la propriété. */
.lv11-tour__card img,
.lv11-founder__photo img,
.lv11-avis img {
transform: scale(1.05);
transition: transform 1.2s var(--ease-premium);
}
.lv11-tour__card.is-visible img,
.lv11-founder__photo.is-visible img,
.lv11-avis .is-visible img {
transform: scale(1);
}
}
/* ===== Barre de navigation — la PILULE ========================================
Barre flottante arrondie (le header du site partenaire) : le conteneur
`.lv11-nav` est transparent et ne sert qu'au positionnement ; la pilule est
`.lv11-nav__in`. Statique sous 768px, collante au-delà — la contrainte du
hero reste que ses boutons soient visibles sans défiler sur un iPhone SE. */
/* FIXE, par-dessus le ciel (demande Nelwep 27/08) : le conteneur est
transparent, seule la pilule existe visuellement — le hero commence à y=0
et coule dessous. Au défilement, la pilule flotte sur les sections, son
verre dépoli fait le raccord. */
.lv11-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 30;
padding: 12px 0;
background: transparent;
}
.lv11-nav__in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 6px 10px 6px 18px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: var(--elevation-2);
transition: min-height 0.35s var(--ease-premium),
padding 0.35s var(--ease-premium),
box-shadow 0.35s var(--ease-premium);
}
.lv11-brand img {
transition: height 0.35s var(--ease-premium);
}
/* La pilule RÉDUITE — posée par le script au premier défilement, retirée au
retour en haut. Tout se joue en trois propriétés qui transitionnent : la
pilule respire, elle ne saute pas. Les cibles tactiles restent ≥ 40px. */
.lv11-nav.is-compact .lv11-nav__in {
min-height: 44px;
padding: 3px 8px 3px 14px;
box-shadow: var(--elevation-1);
}
.lv11-nav.is-compact .lv11-brand img { height: 26px; }
.lv11-nav.is-compact .lv11-nav__links a { min-height: 40px; font-size: 13.5px; }
.lv11-nav.is-compact .lv11-theme,
.lv11-nav.is-compact .lv11-lang__current { min-height: 40px; }
/* Les ancres — desktop seulement : sous 1024px la pilule porte déjà logo,
langue, thème et connexion, cinq liens la feraient déborder. */
.lv11-nav__links {
display: none;
align-items: center;
gap: 4px;
}
.lv11-nav__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 999px;
font-size: 14.5px;
font-weight: 600;
color: var(--ink-2);
transition: color 0.18s var(--ease-snappy), background-color 0.18s var(--ease-snappy);
}
.lv11-nav__links a:hover { color: var(--ink); background: var(--line-faint); }
.lv11-brand { display: inline-flex; align-items: center; min-height: 44px; }
.lv11-brand img { height: 32px; width: auto; }
/* `flowayz_logo_tag` rend DEUX images alternées par des classes Tailwind.
Tailwind n'est pas chargé ici : sans ces règles, les deux logos s'affichent
côte à côte (défaut déjà livré une fois en v9). */
.lv11-brand img[class*="dark:block"] { display: none; }
html[data-theme="dark"] .lv11-brand img[class*="dark:block"],
html[data-mode="dark"] .lv11-brand img[class*="dark:block"],
html.dark .lv11-brand img[class*="dark:block"] { display: block; }
html[data-theme="dark"] .lv11-brand img[class*="dark:hidden"],
html[data-mode="dark"] .lv11-brand img[class*="dark:hidden"],
html.dark .lv11-brand img[class*="dark:hidden"] { display: none; }
.lv11-nav__cta {
display: flex;
align-items: center;
gap: 12px;
}
.lv11-nav__login {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 6px;
font-size: 15px;
color: var(--ink-2);
}
.lv11-nav__login:hover { color: var(--ink); }
.lv11-theme {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0;
background: none;
border: 0;
border-radius: var(--r-sm);
color: var(--ink-2);
cursor: pointer;
transition: color 0.18s var(--ease-snappy), background-color 0.18s var(--ease-snappy);
}
.lv11-theme:hover { color: var(--ink); background: var(--line-faint); }
.lv11-theme svg { width: 19px; height: 19px; }
.lv11-theme__moon { display: none; }
html[data-theme="dark"] .lv11-theme__sun,
html[data-mode="dark"] .lv11-theme__sun,
html.dark .lv11-theme__sun { display: none; }
html[data-theme="dark"] .lv11-theme__moon,
html[data-mode="dark"] .lv11-theme__moon,
html.dark .lv11-theme__moon { display: block; }
/* ===== Hero ==================================================================
Centré, sur le ciel de nuages. Le titre fait deux lignes de MÊME taille —
deux clés de copy, deux spans en bloc — et les deux CTA tiennent côte à côte
dès que la largeur le permet, empilés sous 640px.
⚠️ Le `../` des chemins est indispensable : Propshaft résout par rapport au
chemin LOGIQUE de la feuille (`pages/landing_v11.css`) — sans lui, 404
silencieux.
LE VOILE EST D'ENCRE, dans les deux thèmes : le ciel est crépusculaire, le
texte du hero est clair sur lui, et c'est le voile qui garantit ce contraste
— pas l'image, qui peut manquer. Le fond de repli sous l'image est sombre
pour la même raison. */
.lv11-hero {
position: relative;
isolation: isolate;
/* Le haut absorbe la pilule FIXE (~80px) : le ciel commence à y=0 et passe
derrière elle, le contenu du hero reste dégagé dessous. */
padding: 150px 0 84px;
background-color: var(--paper-2); /* repli sans image, accordé au voile */
overflow: hidden; /* la couche parallax déborde, jamais la page */
}
html[data-theme="dark"] .lv11-hero,
html[data-mode="dark"] .lv11-hero,
html.dark .lv11-hero { background-color: #14161f; }
/* La couche d'image, séparée de la section : c'est ELLE que le script de
parallax translate au défilement. Le débord vertical (-22 %) est la course
de la translation — sans lui, le bord du ciel apparaîtrait. Sans JS, la
couche est simplement plus grande et `cover` la remplit : rien ne change. */
.lv11-hero__bg {
position: absolute;
inset: -22% 0;
z-index: -2;
background-image: -webkit-image-set(
url("/assets/landing/v11/hero-nuages-768-9fc31f19.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-768-b7eea409.webp") type("image/webp"));
background-image: image-set(
url("/assets/landing/v11/hero-nuages-768-9fc31f19.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-768-b7eea409.webp") type("image/webp"));
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
will-change: transform;
}
/* VOILE BLANC en clair, VOILE D'ENCRE en sombre (demande Nelwep 27/08) : en
mode clair, le ciel passe sous un lait de papier et le titre est à l'encre
SOMBRE ; en mode sombre, l'inverse. Dans les deux cas, c'est l'opacité du
voile qui garantit le contraste, jamais l'image. */
.lv11-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
rgba(246, 244, 240, 0.80) 0%,
rgba(246, 244, 240, 0.62) 45%,
rgba(246, 244, 240, 0.86) 100%);
}
html[data-theme="dark"] .lv11-hero::before,
html[data-mode="dark"] .lv11-hero::before,
html.dark .lv11-hero::before {
background: linear-gradient(180deg,
rgba(10, 14, 26, 0.66) 0%,
rgba(10, 14, 26, 0.52) 45%,
rgba(10, 14, 26, 0.76) 100%);
}
/* Le fondu vers la section suivante : le ciel se dissout dans le papier.
Les variables retournent avec le thème — le mode sombre fond vers son propre
papier sombre, sans règle de plus.
⚠️ INVARIANT : **la section qui suit immédiatement le hero doit être sur
`--paper-2`.** Ce fondu atterrit sur cette couleur ; une section suivante sur
`--paper` produit une MARCHE nette de 8 valeurs, visible comme un trait, à
l'endroit exact où le ciel doit disparaître. C'est arrivé le 2026-09-14 en
insérant la section `video` entre le hero et `douleur` — mesuré à
`#E3E1DC → #EFECE7`. Si une nouvelle section prend cette place, lui donner
`--paper-2` ET lui retirer le filet de `.lv11-section`.
LA FORME DU DÉGRADÉ compte autant que sa couleur d'arrivée. Deux arrêts
(`transparent → couleur`) donnent une rampe LINÉAIRE : sa dérivée casse net
au départ et à l'arrivée, et l'œil lit ces deux ruptures comme des lisières
floues — c'est le défaut de bande de Mach. Les sept arrêts ci-dessous
dessinent une sigmoïde : départ presque plat (aucune lisière au sommet),
travail au milieu, pose douce à l'arrivée. Ils portent TOUS le même rvb,
seule l'alpha varie — aucune dérive de teinte n'est possible en chemin. */
.lv11-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
z-index: -1;
pointer-events: none;
/* Repli deux arrêts pour un navigateur sans `color-mix` : la déclaration
suivante est alors ignorée en bloc, et le fondu reste correct. */
background: linear-gradient(180deg, transparent, var(--paper-2));
background: linear-gradient(180deg,
color-mix(in srgb, var(--paper-2) 0%, transparent) 0%,
color-mix(in srgb, var(--paper-2) 4%, transparent) 20%,
color-mix(in srgb, var(--paper-2) 18%, transparent) 40%,
color-mix(in srgb, var(--paper-2) 42%, transparent) 58%,
color-mix(in srgb, var(--paper-2) 68%, transparent) 74%,
color-mix(in srgb, var(--paper-2) 90%, transparent) 88%,
var(--paper-2) 100%);
}
.lv11-hero__in {
display: grid;
justify-items: center;
text-align: center;
}
.lv11-hero__in > * { min-width: 0; }
.lv11-hero h1 {
/* ⚠️ RECALÉ POUR LA COPY v2 (2026-09-15). L'ancien titre faisait treize
caractères sur sa plus longue ligne (« La paperasse. ») ; le nouveau en
fait vingt-neuf en français et trente-cinq en allemand. Aux anciennes
valeurs (84px sur 12em) la première ligne cassait en deux et « part. »
restait seul — vu à l'écran, invisible aux tests.
Le corps baisse et la boîte s'élargit : chaque clé de copy doit tenir sur
UNE ligne, c'est toute la construction du titre. À revérifier à l'œil,
jamais au calcul, à la prochaine réécriture — l'allemand commande. */
font-size: clamp(30px, 5vw, 58px);
line-height: 1.06;
letter-spacing: -0.03em;
font-weight: 800;
color: var(--ink);
max-width: 19em;
}
html[data-theme="dark"] .lv11-hero h1,
html[data-mode="dark"] .lv11-hero h1,
html.dark .lv11-hero h1 { color: #F7F6F3; }
/* Deux lignes de même taille : `display: block` sur des spans, jamais de
dans la copy. */
.lv11-hero__line { display: block; }
/* LA SIGNATURE DU TITRE. Chez Dylan la seconde ligne bascule dans un serif
italique — c'est ce contraste, et lui seul, qui fait qu'on voit le titre
changer. Sans lui les deux lignes ont la même police, la même graisse et la
même inclinaison : il ne se passe rien à l'œil.
Le modificateur porte sur la LIGNE, pas sur un texte : les variantes servies
par `?h1=` en héritent, dans les six langues, sans une clé de plus.
Pas de ici, contrairement à sa maquette : porte une emphase VOCALE
pour un lecteur d'écran, or l'italique est ici purement décoratif. */
.lv11-hero__line--serif {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
margin-top: 0.06em;
}
.lv11-hero__sub {
margin-top: 24px;
max-width: 32em;
font-size: clamp(18px, 2.6vw, 22px);
line-height: 1.5;
color: var(--ink-2);
}
html[data-theme="dark"] .lv11-hero__sub,
html[data-mode="dark"] .lv11-hero__sub,
html.dark .lv11-hero__sub { color: rgba(247, 246, 243, 0.88); }
.lv11-hero__actions {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.lv11-hero__note {
margin-top: 14px;
font-size: 14px;
color: var(--ink-3);
}
html[data-theme="dark"] .lv11-hero__note,
html[data-mode="dark"] .lv11-hero__note,
html.dark .lv11-hero__note { color: rgba(247, 246, 243, 0.72); }
/* ----- Entrée du hero — pur CSS, au chargement ------------------------------
Le titre se lève ligne après ligne, puis le sous-titre, les boutons, la
note. Une cascade courte (moins d'une seconde au total) : le luxe est dans
la retenue. TOUT est sous `prefers-reduced-motion: no-preference` — sans
préférence pour le mouvement, le hero est simplement là. */
@media (prefers-reduced-motion: no-preference) {
.lv11-hero__line,
.lv11-hero__sub,
.lv11-hero__actions,
.lv11-hero__note {
opacity: 0;
transform: translateY(18px);
animation: lv11-rise 0.9s var(--ease-premium) forwards;
}
.lv11-hero__line:nth-child(2) { animation-delay: 0.12s; }
.lv11-hero__sub { animation-delay: 0.26s; }
.lv11-hero__actions { animation-delay: 0.4s; }
.lv11-hero__note { animation-delay: 0.52s; }
@keyframes lv11-rise {
to { opacity: 1; transform: none; }
}
}
/* ===== La vidéo — la place réservée sous le titre ============================
Le cadre existe AVANT le film : `aspect-ratio` réserve la hauteur, donc la
page ne saute pas le jour où `LANDING_VIDEO_URL` est posée. Le cadre
d'attente et le lecteur partagent exactement la même boîte.
Largeur plafonnée à 880px : plus large, la vidéo mange la douleur qui suit
et le visiteur ne voit plus que du média. */
/* ⚠️ `--paper-2` n'est pas décoratif ici : c'est la couleur d'arrivée du fondu
du hero (cf. `.lv11-hero::after`). Cette bande reçoit le ciel qui se dissout,
elle doit donc être exactement sur cette couleur — et SANS le filet de
`.lv11-section`, qui tracerait une ligne à l'endroit à rendre invisible.
La bande `douleur` qui suit est sur la même couleur : les deux ne forment
qu'un seul champ, et le grand titre de `douleur` suffit à ouvrir la section
suivante sans qu'un changement de fond ait à le faire. */
.lv11-video-band {
padding: 56px 0 72px;
background: var(--paper-2);
}
.lv11-video__eyebrow { text-align: center; }
.lv11-video {
max-width: 880px;
margin: 0 auto;
border-radius: var(--r-tile);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--elevation-3);
background: var(--paper-2);
}
.lv11-video__player {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background: #000;
}
/* Le cadre d'attente — un aplat d'encre, un disque, une phrase. Assumé comme
une place réservée, jamais déguisé en lecteur qui ne lit rien. */
.lv11-video__wait {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
aspect-ratio: 16 / 9;
background:
radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
linear-gradient(160deg, #1D2027, #111319);
color: rgba(247, 246, 243, 0.86);
text-align: center;
padding: 0 24px;
}
.lv11-video__disc {
display: grid;
place-items: center;
width: 72px;
height: 72px;
border-radius: 999px;
border: 1px solid var(--accent-30);
background: var(--accent-10);
color: var(--accent);
}
/* « Vidéo à venir » — une étiquette, pas une phrase : la place est assumée
comme réservée, elle ne s'excuse pas. */
.lv11-video__hint {
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(247, 246, 243, 0.78);
}
.lv11-video__legend {
max-width: 880px;
margin: 16px auto 0;
text-align: center;
font-size: 15px;
line-height: 1.5;
color: var(--ink-3);
}
@media (max-width: 767.98px) {
.lv11-video-band { padding: 40px 0 56px; }
.lv11-video__disc { width: 58px; height: 58px; }
}
/* ===== Bandeaux douleur / soulagement ======================================== */
.lv11-band__in { padding: 84px 0; }
.lv11-band--douleur { background: var(--paper-2); }
.lv11-band--calme { background: var(--bleu-5); }
.lv11-band--douleur .lv11-lines p { color: var(--ink-2); }
.lv11-band--douleur .lv11-lines p:last-child { color: var(--ink); }
/* Le miroir : mêmes lignes, l'ordre du soulagement. La dernière ligne — la
seule promesse non fonctionnelle de la page — se détache en serif. */
.lv11-band--calme .lv11-lines p:last-child {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
line-height: 1.2;
color: var(--ink);
}
/* La photo du hall, sous les lignes : l'arrivée à l'hôtel. */
.lv11-band__media { margin-top: 44px; }
/* ===== Une photographie encadrée =============================================
Le traitement commun de toutes les images de premier plan : cadre net, ombre
qui décolle du papier, coins de tuile. `aspect-ratio` réserve la place avant
l'arrivée du fichier. Les sources Midjourney font toutes 1456×816 (16:9). */
.lv11-shot {
display: block;
border-radius: var(--r-tile);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--elevation-3);
background: var(--surface-2);
}
.lv11-shot img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ===== Douleur : la descente =================================================
Plus d'image ici (03/09) : les lignes portent seules. Chacune s'assombrit
un peu plus que la précédente — le regard descend, et la dernière, celle
qui chiffre ce que ça coûte vraiment, arrive en pleine encre. */
/* ⚠️ RÉGLÉ SUR SIX LIGNES (copy v2, 2026-09-15 ; huit avant, cinq avant ça).
La coloration est POSITIONNELLE : ajouter ou retirer une ligne de copy sans
repasser ici aplatit le dégradé au milieu, et le défaut est invisible à la
relecture du YAML. */
.lv11-lines--descente p:nth-child(1) { color: var(--ink-3); }
.lv11-lines--descente p:nth-child(2),
.lv11-lines--descente p:nth-child(3) { color: var(--ink-2); }
/* Les deux dernières arrivent en pleine encre : l'argent qui dort, puis
l'affaire signée par un autre. La toute dernière seule prend la graisse. */
.lv11-lines--descente p:nth-last-child(2) { color: var(--ink); }
.lv11-lines--descente p:last-child {
color: var(--ink);
font-weight: 600;
}
/* ===== L'essai — sélecteur de métier =========================================
La démo elle-même arrive avec sa propre feuille, chargée au clic. Ici on ne
style que ce qui part avec la page : la question et les treize réponses. */
/* ── La démonstration ───────────────────────────────────────────────────────
Formulaire écrit à la main, sans Tailwind ni Stimulus : ce layout n'en charge
aucun, et c'est ce qui tient son chemin critique sous les 100 Ko. Même recette
que le calendrier de la section rendez-vous. */
.lv11-essai { margin-top: 32px; }
.lv11-essai__form {
display: grid;
gap: 18px;
padding: 24px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-tile);
}
.lv11-essai__consigne {
margin: 0 0 12px;
padding: 0;
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.lv11-essai__docs { border: 0; margin: 0; padding: 0; }
.lv11-essai__doc {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 10px 10px 0;
padding: 10px 16px;
min-height: 44px; /* cible tactile — WCAG 2.5.5 */
border: 1px solid var(--line);
border-radius: 999px;
font-size: 15px;
cursor: pointer;
transition: border-color 140ms ease, background-color 140ms ease;
}
/* Pas de zoom ni de scale au survol : la charte s'en tient au trait et au fond. */
.lv11-essai__doc:hover { border-color: var(--accent); background: var(--accent-5); }
.lv11-essai__doc:has(input:checked) {
border-color: var(--accent);
background: var(--accent-10);
font-weight: 600;
}
.lv11-essai__doc:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lv11-essai__champ { display: grid; gap: 6px; }
.lv11-essai__label {
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
}
.lv11-essai__aide { font-size: 12.5px; color: var(--ink-3); }
.lv11-essai__form textarea,
.lv11-essai__form input[type="email"],
.lv11-essai__form select {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--ink);
font: inherit;
font-size: 16px; /* ≥ 16px : en deçà, iOS zoome à la saisie */
}
.lv11-essai__form textarea { resize: vertical; min-height: 104px; }
.lv11-essai__form textarea:focus,
.lv11-essai__form input[type="email"]:focus,
.lv11-essai__form select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-10);
}
.lv11-essai__ligne { display: grid; gap: 18px; }
.lv11-essai__go { justify-self: start; }
.lv11-essai__erreur { margin: 0; font-size: 14px; color: #e53e3e; }
.lv11-essai__erreur[hidden] { display: none; }
.lv11-essai__note {
margin: 14px 0 0;
font-size: 13.5px;
color: var(--ink-3);
}
/* `hidden` a besoin de sa propre règle : une feuille AUTEUR qui pose un
`display` bat le `[hidden] { display: none }` du navigateur. C'est ce qui
affichait le formulaire de réservation avant tout choix de créneau. */
.lv11-essai__sortie { margin-top: 28px; display: grid; gap: 20px; }
.lv11-essai__sortie[hidden] { display: none; }
.lv11-essai__doc-rendu {
padding: 24px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-tile);
font-size: 15.5px;
line-height: 1.6;
color: var(--ink);
}
.lv11-essai__doc-rendu h3 {
margin: 22px 0 8px;
font-size: 18px;
font-weight: 700;
color: var(--ink);
}
.lv11-essai__doc-rendu h3:first-child { margin-top: 0; }
.lv11-essai__doc-rendu h4 { margin: 16px 0 6px; font-size: 15.5px; font-weight: 600; }
.lv11-essai__doc-rendu p { margin: 0 0 10px; }
.lv11-essai__doc-rendu ul { margin: 0 0 12px; padding-left: 20px; }
.lv11-essai__doc-rendu li { margin-bottom: 4px; }
/* LE CURSEUR D'ÉCRITURE. Posé au bout du texte tant que le document s'écrit —
c'est lui qui dit « ça travaille » pendant les secondes où rien n'est encore
arrivé, là où la page restait figée sur un cadre vide. Il s'insère DANS le
dernier bloc rendu, donc suit la ligne en cours.
Barre à l'accent, pas un caractère « | » : un glyphe prendrait la graisse et
la couleur du titre qu'il suit, et changerait de hauteur à chaque saut de
bloc. `em` pour qu'il reste à la taille du texte, titre ou paragraphe. */
.lv11-essai__curseur {
display: inline-block;
width: 0.14em;
height: 1.05em;
margin-inline-start: 2px;
vertical-align: text-bottom;
border-radius: 1px;
background: var(--accent);
}
/* Le clignotement est un mouvement : seul qui n'a rien demandé le reçoit. Sans
lui, le curseur reste fixe — il signale toujours l'écriture, sans s'agiter. */
@media (prefers-reduced-motion: no-preference) {
.lv11-essai__curseur { animation: lv11-curseur 1s steps(1, end) infinite; }
@keyframes lv11-curseur { 50% { opacity: 0; } }
}
.lv11-essai__mur {
padding: 22px 24px;
background: var(--accent-5);
border: 1px solid var(--accent);
border-radius: var(--r-tile);
}
.lv11-essai__mur[hidden] { display: none; }
.lv11-essai__mur-titre { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.lv11-essai__mur-texte { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
.lv11-essai__zone { margin-top: 28px; }
.lv11-essai__chargement { font-size: 14px; color: var(--ink-3); }
/* ===== Le fil du projet / Pour qui =========================================== */
.lv11-fil__body {
margin-top: 26px;
max-width: var(--maxw-prose);
font-size: clamp(17px, 2.1vw, 19px);
color: var(--ink-2);
line-height: 1.6;
}
/* Les métiers, en toutes lettres. Une pastille par métier : c'est le MOT qui
fait se reconnaître, pas le portrait d'une personne qui n'existe pas. */
.lv11-metiers {
margin: 32px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.lv11-metiers__item {
padding: 9px 16px;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--ink-2);
background: var(--surface);
}
.lv11-galerie__outro {
margin-top: 30px;
color: var(--ink-2);
}
/* ===== La bande pleine largeur ===============================================
Une photographie bord à bord, fondue dans le papier en haut et en bas — le
geste magazine des images « full width » (demande Nelwep 27/08). Les fondus
utilisent les variables : le mode sombre fond vers son propre papier. */
.lv11-bleed {
position: relative;
width: 100vw;
margin: 44px calc(50% - 50vw) 0;
height: clamp(260px, 42vw, 460px);
overflow: hidden;
}
.lv11-bleed img,
.lv11-bleed picture {
display: block;
width: 100%;
height: 100%;
}
.lv11-bleed img { object-fit: cover; will-change: transform; }
/* Le voile de la bande — BLANC en clair, ENCRE en sombre (demande Nelwep
27/08) : la photographie reste une matière, pas une image qui dispute
l'attention. Sous les fondus (::after), au-dessus de l'image. */
.lv11-bleed::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: rgba(246, 244, 240, 0.34);
}
html[data-theme="dark"] .lv11-bleed::before,
html[data-mode="dark"] .lv11-bleed::before,
html.dark .lv11-bleed::before {
background: rgba(10, 12, 18, 0.46);
}
.lv11-bleed::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
var(--paper) 0%,
transparent 26%,
transparent 74%,
var(--paper) 100%);
}
/* ----- La bande-TITRE : le texte vit SUR l'image ----------------------------
Variante de la bande où l'en-tête de section (eyebrow, H2, filet, lead) se
pose par-dessus l'escalier, qui glisse en parallax dessous. Le voile est
RENFORCÉ — c'est lui qui porte le contraste du texte, dans les deux thèmes.
Le texte est au-dessus des fondus (z2 > z1). */
.lv11-bleed--titre {
height: clamp(400px, 50vw, 560px);
margin-bottom: 0;
}
.lv11-bleed--titre::before {
background: rgba(246, 244, 240, 0.58);
}
html[data-theme="dark"] .lv11-bleed--titre::before,
html[data-mode="dark"] .lv11-bleed--titre::before,
html.dark .lv11-bleed--titre::before {
background: rgba(10, 12, 18, 0.62);
}
.lv11-bleed__texte {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
}
.lv11-bleed__texte .lv11-wrap { width: 100%; }
/* Les duos qui suivent une bande-titre : la bande fournit déjà la
respiration, on ne l'empile pas. */
.lv11-duos--flush { margin-top: 0; }
/* ===== Blocs alternés (« temps » et « vie ») =================================
Un duo = une photographie et un texte. Empilés sous 1024px (photo d'abord),
côte à côte au-delà, le côté de la photo alternant d'un duo à l'autre. */
.lv11-duos {
margin-top: 48px;
display: grid;
gap: 56px;
}
.lv11-duo { display: grid; gap: 26px; }
.lv11-duo > * { min-width: 0; }
.lv11-duo__kicker {
display: block;
margin-bottom: 8px;
font-family: var(--font-display);
font-size: 15px;
font-style: italic;
color: var(--accent);
}
.lv11-duo__title {
font-family: var(--font-display);
font-size: clamp(24px, 3.4vw, 34px);
line-height: 1.12;
color: var(--ink);
}
.lv11-duo__body {
margin-top: 14px;
max-width: 34em;
color: var(--ink-2);
line-height: 1.6;
}
/* ===== La grille « visite » ==================================================
Six cartes : une pièce, une fonction, une ligne. La photo coiffe la carte,
les coins sont ceux de la tuile. */
.lv11-tour {
margin-top: 44px;
display: grid;
gap: 20px;
}
.lv11-tour__card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-tile);
overflow: hidden;
transition: box-shadow 0.26s var(--ease-premium),
border-color 0.26s var(--ease-premium),
transform 0.26s var(--ease-premium);
}
.lv11-tour__card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--line-faint);
}
.lv11-tour__text { padding: 20px 22px 24px; }
.lv11-tour__room {
display: block;
margin-bottom: 8px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.lv11-tour__title {
font-family: var(--font-display);
font-size: clamp(20px, 2.6vw, 24px);
line-height: 1.15;
color: var(--ink);
}
.lv11-tour__body {
margin-top: 8px;
font-size: 15.5px;
color: var(--ink-2);
line-height: 1.55;
}
/* La carte LARGE de la grille — la cuisine ouvre la visite en pleine rangée :
c'est ce qui évite la rangée orpheline d'une grille de sept. */
@media (min-width: 640px) {
.lv11-tour__card--large {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.lv11-tour__card--large img {
height: 100%;
aspect-ratio: auto;
border-bottom: 0;
border-inline-end: 1px solid var(--line-faint);
}
.lv11-tour__card--large .lv11-tour__text { padding: 26px 30px; }
}
/* ===== Le rendez-vous intégré ================================================
Calendrier + créneaux + mini-formulaire — la mise en route sans quitter la
page. Charte : cadres du papier, jours choisis en BLEU, bouton final orange. */
.lv11-rdv {
margin-top: 36px;
display: grid;
gap: 24px;
}
.lv11-rdv > * { min-width: 0; }
.lv11-rdv__cal,
.lv11-rdv__side {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-tile);
padding: 22px;
}
.lv11-rdv__step {
font-weight: 600;
color: var(--ink);
margin-bottom: 14px;
}
.lv11-rdv__monthbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.lv11-rdv__month { font-weight: 600; color: var(--ink); }
.lv11-rdv__nav {
min-width: 44px;
min-height: 44px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: transparent;
color: var(--ink-2);
font-size: 20px;
cursor: pointer;
transition: color 0.18s var(--ease-snappy), border-color 0.18s var(--ease-snappy);
}
.lv11-rdv__nav:hover { color: var(--bleu); border-color: var(--bleu); }
.lv11-rdv__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.lv11-rdv__dow {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
text-align: center;
padding: 6px 0;
}
.lv11-rdv__day {
min-height: 40px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--ink);
font-size: 14.5px;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 0.15s var(--ease-snappy),
border-color 0.15s var(--ease-snappy),
color 0.15s var(--ease-snappy);
}
.lv11-rdv__day:disabled { color: var(--ink-3); opacity: 0.35; cursor: default; }
.lv11-rdv__day:not(:disabled):hover { border-color: var(--bleu); color: var(--bleu); }
.lv11-rdv__day.is-choisi {
background: var(--bleu);
color: var(--bleu-contrast);
border-color: var(--bleu-deep);
}
/* La garantie de FORMAT (ce qui se passe / ce qui ne se passe pas). Posée avant
le calendrier : elle lève le frein, elle ne le commente pas après coup. */
.lv11-rdv__garantie {
margin-top: 10px;
max-width: 46em;
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
}
/* Diagnostic de DÉVELOPPEMENT uniquement (voir `_s10b_rdv.html.erb`) : signale
pourquoi le calendrier est absent, plutôt que de laisser un repli muet passer
pour le produit. Jamais rendu en production. */
.lv11-rdv__diag {
margin-top: 12px;
padding: 10px 14px;
border-left: 3px solid var(--bleu);
background: var(--bleu-10, rgba(37, 99, 235, 0.08));
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-2);
}
.lv11-rdv__diag code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
}
.lv11-rdv__tz {
margin-top: 14px;
font-size: 12.5px;
color: var(--ink-3);
}
/* Le conteneur empile désormais des BLOCS (grille de pastilles, en-tête de
demi-journée, lien « plus d'horaires ») et non plus les pastilles elles-mêmes :
une liste courte tient sur deux lignes, une liste longue reste structurée. */
.lv11-rdv__slots {
display: grid;
gap: 12px;
justify-items: start;
}
/* Colonnes régulières plutôt qu'un flex-wrap : les heures s'alignent
verticalement, l'œil les balaie en colonne au lieu de les relire une à une. */
.lv11-rdv__slotgrid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 8px;
}
.lv11-rdv__slotgroup {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
margin: 4px 0 -4px;
}
/* Lien, pas bouton d'action : il ne rivalise pas avec les créneaux eux-mêmes. */
.lv11-rdv__more {
min-height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--ink-2);
font-size: 14px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color 0.15s var(--ease-snappy);
}
.lv11-rdv__more:hover { color: var(--bleu); }
.lv11-rdv__slot {
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: transparent;
color: var(--ink);
font-size: 14.5px;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: background-color 0.15s var(--ease-snappy),
border-color 0.15s var(--ease-snappy),
color 0.15s var(--ease-snappy);
}
.lv11-rdv__slot:hover { border-color: var(--bleu); color: var(--bleu); }
.lv11-rdv__slot.is-choisi {
background: var(--bleu);
color: var(--bleu-contrast);
border-color: var(--bleu-deep);
}
.lv11-rdv__hint { color: var(--ink-3); font-size: 14.5px; }
.lv11-rdv__form {
margin-top: 20px;
display: grid;
gap: 14px;
}
/* `display: grid` d'une feuille AUTEUR bat la règle `[hidden] { display: none }`
de la feuille du navigateur : sans cette ligne, le formulaire s'affiche en
permanence et le visiteur voit le bouton « Réserver ce créneau » avant même
d'avoir choisi une heure. L'attribut était bien posé — c'est le CSS qui
l'annulait. */
.lv11-rdv__form[hidden] { display: none; }
.lv11-rdv__form label { display: grid; gap: 6px; }
.lv11-rdv__form label span {
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
}
/* ≥ 16px : sous cette taille, iOS zoome le champ au focus. */
.lv11-rdv__form input {
min-height: 46px;
padding: 0 14px;
font-size: 16px;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
}
.lv11-rdv__form input:focus {
outline: none;
border-color: var(--bleu);
box-shadow: 0 0 0 3px var(--bleu-10);
}
.lv11-rdv__error {
color: #e53e3e;
font-size: 14px;
}
/* ===== L'offre ===============================================================
La pièce maîtresse BLEUE de la page — la carte « Tout est en place » du site
du partenaire : dégradé bleu, encre claire, et le CTA orange qui claque
par-dessus. C'est le seul grand aplat bleu ; sa rareté le fait exister. */
.lv11-offer {
margin-top: 40px;
padding: 44px 28px;
background: var(--bleu-grad);
border: 1px solid var(--bleu-deep);
border-radius: var(--r-tile);
box-shadow: var(--elevation-2);
text-align: center;
}
.lv11-offer__lead {
margin: 0 auto;
max-width: 24em;
font-family: var(--font-display);
font-size: clamp(22px, 3.2vw, 30px);
line-height: 1.2;
color: var(--bleu-contrast);
}
.lv11-offer__items {
margin: 30px auto 0;
padding: 0;
max-width: 640px;
list-style: none;
display: grid;
gap: 12px 28px;
text-align: start;
}
.lv11-offer__items li {
position: relative;
padding-inline-start: 26px;
color: var(--bleu-contrast-2);
line-height: 1.5;
}
/* La coche, dessinée : deux traits, aucun glyphe, aucun fichier. Claire sur
le bleu — l'orange s'y noierait. */
.lv11-offer__items li::before,
.lv11-offer__items li::after {
content: "";
position: absolute;
background: var(--bleu-contrast);
border-radius: 1px;
}
.lv11-offer__items li::before {
inset-inline-start: 2px;
top: 13px;
width: 6px;
height: 2px;
transform: rotate(45deg);
}
.lv11-offer__items li::after {
inset-inline-start: 5px;
top: 11px;
width: 11px;
height: 2px;
transform: rotate(-50deg);
}
/* ===== Les deux formules, côte à côte (2026-09-15) ===========================
Deux colonnes sur large, empilées sous 768px. Le panneau bleu reste UN seul
bloc : ce sont deux colonnes DANS le panneau, pas deux cartes concurrentes —
la page vend une installation, pas un comparatif de formules.
Le bloc payant se distingue par un filet, jamais par une couleur d'accent :
l'accent est rare sur cette page, et le CTA qui suit doit rester le seul
point chaud du panneau. */
.lv11-offer__plans {
display: grid;
gap: 32px;
margin-top: 34px;
text-align: start;
}
@media (min-width: 768px) {
.lv11-offer__plans {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
/* Le filet ne sépare qu'en deux colonnes : empilé, il couperait la lecture. */
.lv11-offer__plan--paid {
padding-inline-start: 40px;
border-inline-start: 1px solid rgba(245, 248, 255, 0.16);
}
}
/* Dans les colonnes, les listes ne sont plus centrées ni plafonnées — et
surtout elles restent sur UNE seule colonne.
⚠️ `.lv11-offer__items` passe en deux colonnes au-delà de 768px (règle
héritée de la liste unique d'avant le 2026-09-15). Laissée en place ici,
elle scindait chaque formule en deux sous-colonnes : quatre colonnes à
l'écran, et un ordre de lecture qui saute une ligne sur deux. Vu à l'écran,
invisible aux tests. */
.lv11-offer__plans .lv11-offer__items {
margin-inline: 0;
max-width: none;
grid-template-columns: 1fr;
}
/* Le « 0 € » ouvre sa colonne : plus de marge haute héritée du panneau. */
.lv11-offer__plans .lv11-offer__price { margin-top: 0; }
/* Le prix payant s'aligne sur la hauteur du « 0 € » sans en prendre le corps :
c'est une phrase, pas un nombre d'affiche. */
.lv11-offer__plans .lv11-offer__starter {
margin-top: 0;
min-height: 3.2em;
font-size: 17px;
color: var(--bleu-contrast);
}
.lv11-offer__price {
margin-top: 34px;
font-family: var(--font-display);
font-size: clamp(40px, 6vw, 56px);
line-height: 1;
color: var(--bleu-contrast);
}
.lv11-offer__price-note {
margin-top: 8px;
color: var(--bleu-contrast-2);
}
.lv11-offer__starter {
margin-top: 18px;
font-size: 15.5px;
color: var(--bleu-contrast-2);
}
.lv11-offer__clarif {
margin: 14px auto 0;
max-width: 38em;
font-size: 14px;
color: rgba(245, 248, 255, 0.62);
}
/* La remise de rentrée — une date, jamais un montant. Lisible sans crier :
c'est une information de fenêtre, pas une pastille promotionnelle. */
.lv11-offer__rentree {
margin: 18px auto 0;
max-width: 38em;
padding-top: 16px;
border-top: 1px solid rgba(245, 248, 255, 0.16);
font-size: 14px;
color: rgba(245, 248, 255, 0.82);
}
.lv11-offer__actions { margin-top: 30px; }
/* ===== Les trois étapes ====================================================== */
.lv11-steps {
position: relative;
margin: 40px 0 0;
padding: 0 0 0 42px;
list-style: none;
display: grid;
gap: 30px;
max-width: var(--maxw-prose);
}
.lv11-steps::before {
content: "";
position: absolute;
inset-inline-start: 12px;
top: 8px;
bottom: 8px;
width: 1px;
background: var(--line);
}
.lv11-step { position: relative; }
.lv11-step__n {
position: absolute;
inset-inline-start: -42px;
top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 999px;
background: var(--paper);
border: 1px solid var(--line-strong);
font-size: 12px;
font-weight: 600;
color: var(--ink-3);
}
.lv11-step__label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.lv11-step__title {
font-family: var(--font-display);
font-size: clamp(20px, 2.8vw, 25px);
line-height: 1.15;
color: var(--ink);
}
.lv11-step__body {
margin-top: 8px;
color: var(--ink-2);
line-height: 1.55;
}
/* ===== Le fondateur ==========================================================
La photo est une VRAIE photo — la seule personne de la page avec les avis.
Tant qu'elle n'est pas déposée, la colonne n'existe pas et le texte prend
toute la largeur : la section est écrite pour tenir sans elle. */
.lv11-founder {
margin-top: 40px;
display: grid;
gap: 32px;
align-items: start;
}
.lv11-founder > * { min-width: 0; }
.lv11-founder__photo img {
display: block;
width: 100%;
max-width: 320px;
height: auto;
border-radius: var(--r-tile);
border: 1px solid var(--line);
box-shadow: var(--elevation-2);
}
.lv11-founder__lines {
display: grid;
gap: 16px;
max-width: var(--maxw-prose);
}
.lv11-founder__lines p { color: var(--ink-2); line-height: 1.6; }
.lv11-founder__closing {
margin-top: 22px;
font-family: var(--font-display);
font-size: clamp(20px, 2.6vw, 24px);
color: var(--ink);
}
/* La signature. Caveat n'apparaît QUE là, sur ce seul nom propre — c'est son
emploi nommé, et le fichier est coupé pour lui (voir l'en-tête). 30px et non
15 : la cursive a une hauteur d'x très basse, à taille égale elle disparaît
à côté du corps de texte. */
.lv11-founder__name {
margin-top: 22px;
font-family: var(--font-hand);
font-weight: 600;
font-size: 30px;
line-height: 1.1;
color: var(--ink);
}
.lv11-founder__meta {
margin-top: 4px;
font-size: 15px;
color: var(--ink-3);
}
/* ===== Les avis ==============================================================
Des captures publiées telles quelles. La section entière disparaît du gabarit
quand il n'y a encore aucune capture — un bloc de retours vide serait une
fausse preuve. */
.lv11-avis {
margin-top: 40px;
display: grid;
gap: 20px;
}
.lv11-avis img {
display: block;
width: 100%;
height: auto;
border-radius: var(--r-tile);
border: 1px solid var(--line);
box-shadow: var(--elevation-1);
background: var(--surface);
}
.lv11-avis__note {
margin-top: 18px;
font-size: 14px;
color: var(--ink-3);
}
/* ===== Les réserves ==========================================================
« Franchement » — les cinq freins qu'on ne dit pas, posés entre le prix et la
FAQ. Traitement DÉLIBÉRÉMENT différent de `.lv11-faq` juste en dessous : la
FAQ se replie et s'ouvre au clic, ces réserves-là sont ouvertes en
permanence. Deux blocs qui se ressembleraient se liraient comme un doublon.
D'où le filet VERTICAL (la FAQ a des filets horizontaux) : le texte paraît
cité, comme une objection rapportée, puis une réponse. */
.lv11-reserves__intro {
margin-top: 22px;
max-width: var(--maxw-prose);
font-size: clamp(16px, 2vw, 17.5px);
line-height: 1.6;
color: var(--ink-2);
}
.lv11-reserves {
margin-top: 34px;
max-width: var(--maxw-prose);
display: grid;
gap: 30px;
}
.lv11-reserves__item {
padding-inline-start: 20px;
border-inline-start: 2px solid var(--line);
}
/* La question porte la voix du lecteur : c'est LUI qui parle, d'où l'italique.
`h3` et non `p` — la hiérarchie des titres de la page est vérifiée en
recette, et sauter de h2 à un paragraphe perdrait le plan du document. */
.lv11-reserves__q {
margin: 0;
font-size: clamp(17px, 2.2vw, 19px);
font-weight: 600;
font-style: italic;
line-height: 1.45;
color: var(--ink);
}
.lv11-reserves__a {
margin-top: 10px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-2);
}
@media (min-width: 768px) {
.lv11-reserves__item { padding-inline-start: 26px; }
/* Adresse e-mail et métier côte à côte dès qu'il y a la place : empilés, ils
donnent au formulaire une longueur qui décourage avant d'avoir commencé. */
.lv11-essai__ligne { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
/* ===== Micro-lignes anti-objection ===========================================
Une ligne posée DANS la section où le frein naît, plutôt qu'une réponse
groupée en fin de page. Volontairement discrète : elle rassure celui qui
doutait, elle ne réveille pas le doute chez celui qui ne l'avait pas. */
.lv11-note {
margin-top: 26px;
max-width: 44em;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-3);
}
.lv11-note--rdv { margin-top: 8px; }
/* ===== Les questions =========================================================
`` natifs : zéro JavaScript, accessible par construction. */
.lv11-faq {
margin-top: 38px;
max-width: var(--maxw-prose);
border-top: 1px solid var(--line-faint);
}
.lv11-faq__item { border-bottom: 1px solid var(--line-faint); }
.lv11-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 44px;
padding: 20px 0;
cursor: pointer;
list-style: none;
font-size: clamp(17px, 2.2vw, 19px);
font-weight: 600;
color: var(--ink);
line-height: 1.45;
transition: color 0.18s var(--ease-snappy);
}
.lv11-faq__q::-webkit-details-marker { display: none; }
.lv11-faq__q:hover { color: var(--accent); }
.lv11-faq__sign {
position: relative;
flex: 0 0 auto;
width: 18px;
height: 18px;
}
.lv11-faq__sign::before,
.lv11-faq__sign::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 100%;
height: 1.5px;
background: var(--ink-3);
transition: transform 0.28s var(--ease-premium);
}
.lv11-faq__sign::after { transform: rotate(90deg); }
.lv11-faq__item[open] .lv11-faq__sign::after { transform: rotate(0deg); }
.lv11-faq__item[open] .lv11-faq__q { color: var(--accent); }
.lv11-faq__a {
padding: 0 0 22px;
max-width: 46em;
color: var(--ink-2);
line-height: 1.6;
}
/* ===== Liens de texte ======================================================== */
.lv11-link {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 600;
}
.lv11-link:hover { color: var(--accent-hover); }
/* ===== La fin ================================================================
Le ciel du hero, revu plus bas — le même lieu, cadré autrement, comme la v10
faisait l'aller-retour de sa rivière. L'image est réutilisée : le navigateur
l'a déjà, la section ne coûte aucun octet d'image de plus. */
.lv11-end {
position: relative;
isolation: isolate;
background: var(--paper-2);
overflow: hidden;
}
html[data-theme="dark"] .lv11-end,
html[data-mode="dark"] .lv11-end,
html.dark .lv11-end { background: #14161f; }
.lv11-end__media { position: absolute; inset: 0; z-index: -2; }
.lv11-end__media img,
.lv11-end__media picture {
display: block;
width: 100%;
height: 100%;
}
.lv11-end__media img {
object-fit: cover;
object-position: 50% 72%;
}
/* Voile BLANC en clair, encre en sombre — même règle que le hero. */
.lv11-end::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
rgba(246, 244, 240, 0.86) 0%,
rgba(246, 244, 240, 0.68) 52%,
rgba(246, 244, 240, 0.88) 100%);
}
html[data-theme="dark"] .lv11-end::before,
html[data-mode="dark"] .lv11-end::before,
html.dark .lv11-end::before {
background: linear-gradient(180deg,
rgba(11, 12, 15, 0.84) 0%,
rgba(11, 12, 15, 0.66) 52%,
rgba(11, 12, 15, 0.88) 100%);
}
/* Les coutures de la section finale : en haut, le ciel émerge du lavis bleu de
la section rendez-vous (couleur composée exacte via color-mix) ; en bas, il
se repose sur le papier du pied de page. Variables → le sombre suit seul. */
.lv11-end::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(180deg,
color-mix(in srgb, var(--bleu) 5%, var(--paper)) 0%,
transparent 16%,
transparent 84%,
var(--paper) 100%);
}
.lv11-end__inner { padding: 104px 0; }
.lv11-end h2 {
max-width: 14em;
font-size: clamp(30px, 5.4vw, 54px);
color: var(--ink);
}
.lv11-end .lv11-lines p { color: var(--ink-2); }
.lv11-end .lv11-lines p:last-child { color: var(--ink); }
.lv11-end .lv11-eyebrow { color: var(--ink-3); }
html[data-theme="dark"] .lv11-end h2,
html[data-mode="dark"] .lv11-end h2,
html.dark .lv11-end h2 { color: #F4F5F7; }
html[data-theme="dark"] .lv11-end .lv11-lines p,
html[data-mode="dark"] .lv11-end .lv11-lines p,
html.dark .lv11-end .lv11-lines p { color: rgba(244, 245, 247, 0.74); }
html[data-theme="dark"] .lv11-end .lv11-lines p:last-child,
html[data-mode="dark"] .lv11-end .lv11-lines p:last-child,
html.dark .lv11-end .lv11-lines p:last-child { color: #F4F5F7; }
html[data-theme="dark"] .lv11-end .lv11-eyebrow,
html[data-mode="dark"] .lv11-end .lv11-eyebrow,
html.dark .lv11-end .lv11-eyebrow { color: rgba(244, 245, 247, 0.55); }
.lv11-end__actions {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.lv11-end__note {
margin-top: 14px;
font-size: 14px;
color: rgba(244, 245, 247, 0.6);
}
/* ===== Pied de page ========================================================== */
.lv11-footer {
border-top: 1px solid var(--line);
padding: 44px 0 52px;
}
.lv11-footer__links {
display: flex;
flex-wrap: wrap;
gap: 4px 24px;
}
.lv11-footer__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 14.5px;
color: var(--ink-2);
}
.lv11-footer__links a:hover { color: var(--ink); }
.lv11-footer__signature {
margin-top: 14px;
font-size: 14px;
color: var(--ink-3);
}
/* =============================================================================
Responsive — mobile-first. Seuls 640/768/1024 sont employés ici (767.98 pour
la borne haute mobile), tous autorisés par `responsive:audit`.
============================================================================= */
@media (min-width: 640px) {
.lv11-tour { grid-template-columns: repeat(2, 1fr); }
.lv11-offer__items { grid-template-columns: repeat(2, 1fr); }
.lv11-avis { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
.lv11-nav__in { min-height: 62px; }
.lv11-brand img { height: 38px; }
/* Verre dépoli sur la PILULE — seulement là où le navigateur sait le faire :
sans backdrop-filter, elle reste opaque et parfaitement lisible. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.lv11-nav__in {
background: color-mix(in srgb, var(--surface) 82%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
}
}
.lv11-hero { padding: 190px 0 120px; }
.lv11-pad { padding: 112px 0; }
.lv11-band__in { padding: 120px 0; }
.lv11-end__inner { padding: 148px 0; }
.lv11-offer { padding: 56px 48px; }
/* La largeur de la source suit celle de l'écran. */
.lv11-hero__bg {
background-image: -webkit-image-set(
url("/assets/landing/v11/hero-nuages-1280-c69f6eff.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-1280-7d396dd2.webp") type("image/webp"));
background-image: image-set(
url("/assets/landing/v11/hero-nuages-1280-c69f6eff.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-1280-7d396dd2.webp") type("image/webp"));
}
.lv11-founder { grid-template-columns: 320px 1fr; gap: 44px; }
}
@media (min-width: 1024px) {
.lv11-nav__links { display: flex; }
.lv11-hero__bg {
background-image: -webkit-image-set(
url("/assets/landing/v11/hero-nuages-1456-629bf15a.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-1456-bacee303.webp") type("image/webp"));
background-image: image-set(
url("/assets/landing/v11/hero-nuages-1456-629bf15a.avif") type("image/avif"),
url("/assets/landing/v11/hero-nuages-1456-bacee303.webp") type("image/webp"));
}
/* Fenêtres de profondeur : au défilement, les photographies des duos et du
hall glissent doucement dans leur cadre (script du layout, desktop et
pointeur fin uniquement). `will-change` prépare la couche. */
.lv11-duo__media img,
.lv11-band__media img,
.lv11-end__media img { will-change: transform; }
/* Les duos passent côte à côte, la photo alternant de bord. `--flip` inverse
l'ordre des colonnes par `order`, jamais par le DOM : l'ordre de lecture
(titre puis image) reste le même pour un lecteur d'écran. */
.lv11-duo {
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.lv11-duo--flip .lv11-duo__media { order: 2; }
.lv11-tour { grid-template-columns: repeat(3, 1fr); }
.lv11-rdv { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
/* Sous 768px : gouttières resserrées, barre complète en nowrap. */
@media (max-width: 767.98px) {
.lv11-wrap { padding: 0 20px; }
.lv11-nav__cta { gap: 6px; }
.lv11-nav__cta .lv11-btn {
padding: 11px 15px;
font-size: 14px;
min-height: 44px;
}
.lv11-offer { padding: 32px 22px; }
/* Les deux CTA du hero s'empilent pleine largeur : côte à côte, l'allemand
(« Termin vereinbaren » + « Kostenlos starten ») déborde à 375px. */
.lv11-hero__actions { flex-direction: column; align-items: stretch; }
.lv11-hero__actions .lv11-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* =============================================================================
Sélecteur de langue — repris de la v10 (mis au point en v9), classes lv11.
Uniquement `transform` et `opacity` en animation ; aucun `scale` au survol
des lignes, le `scale(0.96)` de pression sur le globe est admis.
============================================================================= */
.lv11-lang {
position: relative;
display: inline-block;
--lv11-stagger: 45ms;
}
.lv11-lang__current {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 44px;
min-height: 44px;
padding: 0 6px;
border-radius: var(--r-sm);
cursor: pointer;
list-style: none;
color: var(--ink-2);
transition: color 0.18s var(--ease-snappy),
background-color 0.18s var(--ease-snappy),
transform 0.12s var(--ease-snappy);
}
.lv11-lang__current::-webkit-details-marker { display: none; }
.lv11-lang__current:hover { color: var(--ink); background: var(--line-faint); }
.lv11-lang__current:active { transform: scale(0.96); }
.lv11-lang__globe {
width: 19px;
height: 19px;
transition: transform 0.42s var(--ease-spring);
}
.lv11-lang[open] .lv11-lang__globe { transform: rotate(90deg); }
.lv11-lang__chip {
display: block;
width: 20px;
height: 14px;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 3px;
}
.lv11-lang__chip svg,
.lv11-lang__flag svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lv11-lang__menu {
position: absolute;
top: calc(100% + 6px);
inset-inline-end: 0;
z-index: 30;
min-width: 148px;
max-width: calc(100vw - 16px);
margin: 0;
padding: 5px;
list-style: none;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-btn);
box-shadow: var(--elevation-3);
transform-origin: top right;
animation: lv11-lang-in 0.28s var(--ease-spring) both;
}
@keyframes lv11-lang-in {
from { opacity: 0; transform: translateY(-6px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.lv11-lang__menu li {
animation: lv11-lang-item-in 0.3s var(--ease-snappy) both;
animation-delay: calc(60ms + var(--i) * var(--lv11-stagger));
}
@keyframes lv11-lang-item-in {
from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 6px)); }
to { opacity: 1; transform: translateX(0); }
}
.lv11-lang__opt {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 10px;
border-radius: var(--r-sm);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--ink-2);
transition: color 0.18s var(--ease-snappy), transform 0.18s var(--ease-snappy);
}
.lv11-lang__opt::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--accent-10);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.24s var(--ease-snappy);
}
.lv11-lang__opt:hover {
color: var(--ink);
transform: translateX(calc(var(--dir, 1) * 2px));
}
.lv11-lang__opt:hover::before { transform: scaleX(1); }
.lv11-lang__flag {
display: block;
flex: 0 0 auto;
width: 20px;
height: 14px;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: 3px;
}
.lv11-lang__name { flex: 1 1 auto; }
.lv11-lang__opt.is-active { color: var(--ink); font-weight: 600; }
.lv11-lang__tick { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); }
/* ===== Barre d'action mobile ================================================
Sous 768px la navigation est statique : passé le hero, plus aucun bouton
d'inscription à portée de pouce. Une barre fixe, un seul bouton, jamais
sur ordinateur. */
.lv11-sticky {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 40;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
backdrop-filter: blur(8px);
border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08));
}
.lv11-sticky__btn { width: 100%; justify-content: center; }
@media (min-width: 768px) { .lv11-sticky { display: none; } }