/* =====================================================================
LA MAISON VISUELLE : la feuille de style
Inspirée de la page Apple Vision Pro. Toute la palette vient de la
photo d'accueil : la nuit bleu ardoise, la neige au clair de lune,
le gris froid des rochers. Le site entier prolonge la photo.
Contrastes (sur le fond #1B1D22) :
- neige #EEF1F6 : 14,9:1
- glacier #B4C2D8 : 9,4:1
- gris #9BA4B4 : 6,7:1 (5,9:1 sur les tuiles #242830)
===================================================================== */
:root {
/* Les noms restent, les teintes viennent de la photo. */
--noir: #1b1d22; /* le bas de la photo, où elle se fond dans la page */
--tuile: #242830; /* le ciel près du sol */
--tuile-haute: #2b3039;
--blanc: #eef1f6; /* la neige, un blanc un peu froid */
--glacier: #b4c2d8; /* la neige éclairée par la lune */
--gris: #9ba4b4; /* le gris bleuté des rochers */
--texte-doux: #cfd5df;
--filet: rgba(180, 194, 216, 0.16);
/* La touche chaude : l'ambre du café de la vitrine, en très petites
doses (lueurs, filets, sélection) pour réchauffer la nuit bleue. */
--ambre: 200, 137, 74;
/* Satoshi pour le texte, Clash Display pour les titres : deux polices
du même fondeur (Indian Type Foundry), hébergées sur le site. */
--police: "Satoshi", "Helvetica Neue", Arial, sans-serif;
--police-titre: "Clash Display", "Satoshi", "Helvetica Neue", Arial, sans-serif;
--cadre: 1024px;
--marge: clamp(20px, 5vw, 44px);
--courbe: cubic-bezier(0.25, 0.1, 0.25, 1);
}
*, *::before, *::after { box-sizing: border-box; }
::selection { background: rgba(var(--ambre), 0.35); color: var(--blanc); }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
margin: 0;
background: var(--noir);
color: var(--blanc);
font-family: var(--police);
font-size: 17px;
line-height: 1.47;
letter-spacing: -0.022em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ---------------------------------------------------------------------
La texture du fond
Une couche fixe, qui ne bouge pas avec la page : des nappes de
lumière lunaire très douces. Le bleu nuit n'est plus un aplat, il a
la profondeur du ciel de la photo. Pas de grain : le fond reste net.
--------------------------------------------------------------------- */
body::before {
content: "";
position: fixed; inset: 0; z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 60% 45% at 78% 12%, rgba(150, 165, 195, 0.07), transparent 70%),
radial-gradient(ellipse 50% 40% at 12% 58%, rgba(120, 135, 165, 0.05), transparent 70%),
radial-gradient(ellipse 55% 40% at 8% 92%, rgba(var(--ambre), 0.05), transparent 70%),
radial-gradient(ellipse 45% 35% at 95% 45%, rgba(var(--ambre), 0.035), transparent 70%),
radial-gradient(ellipse 70% 35% at 50% 105%, rgba(var(--ambre), 0.06), transparent 70%),
radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(10, 11, 14, 0.35) 100%);
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; border-radius: 6px; }
.cadre { width: min(100% - 2 * var(--marge), var(--cadre)); margin-inline: auto; }
.visuellement-cache {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
position: fixed; top: 8px; left: 8px; z-index: 100;
padding: 10px 16px; border-radius: 980px;
background: var(--blanc); color: var(--noir);
transform: translateY(-150%);
}
.evitement:focus { transform: none; }
/* ---------------------------------------------------------------------
L'écran d'ouverture
Le logo se dessine sur la nuit : le monogramme monte de bas en haut,
puis le nom et la signature sortent du flou. Le logo s'efface et le
rideau se lève sur le site.
Les proportions reprennent le fichier du logo : le nom mesure 1251 px
de large, tout le reste est calculé à partir de lui.
Le nom et la signature viennent du logo (des masques PNG) : on les
colorie avec les teintes du site.
--------------------------------------------------------------------- */
.ouverture { display: none; }
.js:not(.ouverture-vue) .ouverture {
display: grid;
place-items: center;
position: fixed; inset: 0; z-index: 89;
background: var(--noir);
animation: ouverture-rideau 0.8s cubic-bezier(0.76, 0, 0.24, 1) 1.2s forwards;
}
.ouverture-logo {
display: flex; flex-direction: column; align-items: center;
width: min(100vw - 2 * var(--marge), 440px);
animation: ouverture-efface 0.45s cubic-bezier(0.55, 0, 0.75, 0) 1.05s forwards;
}
.ouverture-monogramme {
width: 23.2%; height: auto;
margin-bottom: 8.9%;
color: var(--blanc);
clip-path: inset(100% 0 0 0);
animation: ouverture-monte 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.ouverture-nom,
.ouverture-signature {
display: block;
-webkit-mask: var(--masque) center / contain no-repeat;
mask: var(--masque) center / contain no-repeat;
opacity: 0;
animation: ouverture-net 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ouverture-nom {
--masque: url("../img/ouverture-nom.png");
width: 100%; aspect-ratio: 1251 / 63;
background: var(--blanc);
animation-delay: 0.35s;
}
.ouverture-signature {
--masque: url("../img/ouverture-signature.png");
width: 42%; aspect-ratio: 525 / 35;
margin-top: 3.8%;
background: var(--gris);
animation-delay: 0.5s;
}
@keyframes ouverture-monte {
from { clip-path: inset(100% 0 0 0); transform: translateY(12%); }
to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes ouverture-net {
from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
to { opacity: 1; filter: none; transform: none; }
}
@keyframes ouverture-efface {
to { opacity: 0; transform: translateY(-28px); }
}
@keyframes ouverture-rideau {
to { transform: translateY(-100%); visibility: hidden; }
}
/* Moins d'animations demandées : le logo est là d'emblée, puis l'écran
s'efface en fondu, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
.ouverture *, .ouverture-nom, .ouverture-signature { animation: none; clip-path: none; opacity: 1; }
.js:not(.ouverture-vue) .ouverture { animation: ouverture-fondu 0.4s ease 0.8s forwards; }
}
@keyframes ouverture-fondu { to { opacity: 0; visibility: hidden; } }
/* ---------------------------------------------------------------------
Les éléments communs
--------------------------------------------------------------------- */
/* Le petit titre gris au-dessus des grands titres. */
.surtitre {
font-size: 21px;
font-weight: 600;
line-height: 1.19;
letter-spacing: 0.011em;
color: var(--glacier);
margin-bottom: 14px;
}
.titre-section {
font-size: clamp(40px, 6.4vw, 80px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.015em;
max-width: 16ch;
margin-bottom: clamp(32px, 4.5vw, 60px);
}
/* Le titre des offres en deux lignes décalées : la seconde glisse vers
la droite, comme une mise en page de magazine. */
.titre-decale { max-width: none; }
.titre-decale br + .mot-masque { margin-left: clamp(1.2em, 28vw, 4.4em); }
@media (max-width: 760px) { .titre-decale br + .mot-masque { margin-left: 1em; } }
/* Les titres du comparatif et de la méthode tiennent sur deux lignes,
coupés à la ponctuation (un peu plus petits que les autres titres, pour
que la ligne la plus longue tienne dans le cadre). Sur téléphone, la coupure s'efface et le titre
revient à la ligne seul. */
#comparatif-titre, #methode-titre { max-width: none; font-size: clamp(40px, 6vw, 72px); }
@media (max-width: 760px) {
#comparatif-titre, #methode-titre { max-width: 16ch; }
#comparatif-titre br, #methode-titre br { display: none; }
}
/* Le paragraphe à la Apple : tout en gris, sauf les mots-clés en blanc. */
.texte-accent {
font-size: 19px;
font-weight: 600;
line-height: 1.42;
letter-spacing: 0.012em;
color: var(--gris);
}
.texte-accent strong { color: var(--blanc); font-weight: 600; }
/* ---------------------------------------------------------------------
Les boutons
Tous les boutons du site sont taillés dans le même verre épais, comme
une lentille posée sur la page :
- un rebord fin et brillant tout autour, cerné d'un trait sombre ;
- une ombre à l'intérieur, sous le bord du haut, et une lueur en bas :
la surface paraît bombée, remplie de lumière ;
- le libellé laisse un reflet flou juste en dessous de lui.
Deux teintes seulement, de même taille (Apple : distinguer par le
style, pas par la taille) :
- la pastille « givre » : l'action principale, une seule par écran ;
- la pastille « verre fumé » : l'action secondaire, qui laisse voir
la photo à travers. Les flèches et le sélecteur la reprennent.
Contrastes : texte #2B2F36 sur le givre 11,8:1 (10,4:1 enfoncé),
texte neige sur le verre fumé 12,2:1.
--------------------------------------------------------------------- */
:root {
/* Le verre givré, clair. */
--givre-fond: linear-gradient(180deg, #dfe3e9 0%, #eaedf1 42%, #f5f7fa 100%);
--givre-relief:
inset 0 0 0 1px rgba(255, 255, 255, 0.95),
inset 0 7px 10px -5px rgba(27, 29, 34, 0.26),
inset 0 -5px 9px -3px rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(12, 13, 16, 0.55);
--givre-reflet: 0 5px 5px rgba(27, 29, 34, 0.24);
/* Le verre fumé, sombre et translucide. */
--fume-fond: linear-gradient(180deg, rgba(238, 241, 246, 0.04) 0%, rgba(238, 241, 246, 0.09) 100%);
--fume-relief:
inset 0 0 0 1px rgba(238, 241, 246, 0.26),
inset 0 7px 10px -5px rgba(0, 0, 0, 0.55),
inset 0 -5px 9px -3px rgba(238, 241, 246, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.45);
--fume-reflet: 0 5px 6px rgba(0, 0, 0, 0.5);
--verre-ombre: 0 2px 3px rgba(0, 0, 0, 0.35), 0 12px 26px -10px rgba(0, 0, 0, 0.6);
--verre-ombre-haute: 0 3px 5px rgba(0, 0, 0, 0.35), 0 18px 34px -12px rgba(0, 0, 0, 0.7);
}
.pastille {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px;
padding: 12px 26px;
border: 0;
border-radius: 980px;
background: var(--givre-fond);
color: #2b2f36;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.022em;
white-space: nowrap;
text-shadow: var(--givre-reflet);
cursor: pointer;
box-shadow: var(--givre-relief), var(--verre-ombre);
transition: box-shadow 0.3s var(--courbe), transform 0.2s var(--courbe), background 0.3s var(--courbe);
}
.pastille:hover {
transform: translateY(-1px);
box-shadow: var(--givre-relief), var(--verre-ombre-haute);
}
/* L'état enfoncé : le verre s'aplatit, l'ombre du haut se creuse. */
.pastille:active {
transform: scale(0.97);
background: linear-gradient(180deg, #d3d8e0 0%, #e2e6ec 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.8),
inset 0 9px 12px -5px rgba(27, 29, 34, 0.34),
0 0 0 1px rgba(12, 13, 16, 0.55),
0 1px 2px rgba(0, 0, 0, 0.35);
transition-duration: 0.08s;
}
.pastille:focus-visible { outline: 2px solid var(--glacier); outline-offset: 4px; }
/* Le petit bouton de la barre : 32 px à l'œil, mais une zone
cliquable de 44 px (le minimum d'Apple) grâce à un débord invisible.
Le relief est plus fin, à l'échelle du bouton. */
.pastille-petite {
min-height: 32px;
padding: 6px 15px;
font-size: 14px;
--givre-relief:
inset 0 0 0 1px rgba(255, 255, 255, 0.95),
inset 0 5px 7px -4px rgba(27, 29, 34, 0.26),
inset 0 -3px 6px -2px rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(12, 13, 16, 0.55);
--givre-reflet: 0 3px 3px rgba(27, 29, 34, 0.22);
}
.pastille-petite::before { content: ""; position: absolute; inset: -6px -2px; }
/* La pastille « verre fumé » : l'action secondaire, qui laisse voir la photo. */
.pastille-verre {
gap: 6px;
background: var(--fume-fond);
color: var(--blanc);
text-shadow: var(--fume-reflet);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
box-shadow: var(--fume-relief), var(--verre-ombre);
}
.pastille-verre:hover {
background: linear-gradient(180deg, rgba(238, 241, 246, 0.07) 0%, rgba(238, 241, 246, 0.14) 100%);
box-shadow: var(--fume-relief), var(--verre-ombre-haute);
}
.pastille-verre:active {
background: rgba(238, 241, 246, 0.05);
box-shadow:
inset 0 0 0 1px rgba(238, 241, 246, 0.2),
inset 0 9px 12px -5px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(0, 0, 0, 0.45);
}
/* Le chevron « › » qui glisse au survol : on va quelque part. */
.pastille-verre::after {
content: "›";
content: "›" / ""; /* décoratif : les lecteurs d'écran ne le lisent pas */
font-size: 1.25em;
line-height: 1;
transform: translateY(-1px);
transition: transform 0.25s var(--courbe);
}
.pastille-verre:hover::after { transform: translate(3px, -1px); }
.appels { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
/* Sur téléphone, les deux boutons s'empilent à la même largeur : une paire nette. */
@media (max-width: 520px) { .appels .pastille { width: min(100%, 320px); } }
/* ---------------------------------------------------------------------
La barre du haut
--------------------------------------------------------------------- */
/* Une bande de verre sur toute la largeur, à la manière du Liquid Glass
d'Apple : la couche des commandes est distincte du contenu, qui
défile et transparaît dessous.
- Sur la photo d'accueil, le verre est « clair » : très translucide,
il laisse la montagne visible (Apple : le verre clair seulement sur
les images riches).
- Une fois l'accueil quitté, il devient « normal » : plus flou et plus
dense, pour que les liens restent lisibles par-dessus le texte.
- Un fondu sous la bande (l'effet de bord de défilement d'Apple)
estompe le contenu qui remonte.
La barre occupe toujours 52 px en haut de l'écran : le reste du site
se cale sur cette hauteur. */
.barre {
position: fixed; inset: 0 0 auto 0; z-index: 50;
height: 52px;
pointer-events: none; /* seule la bande reçoit les clics */
}
/* Le fondu de bord : la page s'efface doucement sous la bande. */
.barre::before {
content: "";
position: absolute; inset: 52px 0 -28px 0;
background: linear-gradient(180deg, rgba(27, 29, 34, 0.45) 0%, rgba(27, 29, 34, 0) 100%);
opacity: 0;
transition: opacity 0.5s var(--courbe);
}
.barre.decollee::before { opacity: 1; }
.barre-interieur {
position: relative;
display: flex; align-items: center; gap: 24px;
height: 52px;
padding: 0 var(--marge);
pointer-events: auto;
/* Verre clair, sur la photo. */
background: linear-gradient(180deg, rgba(238, 241, 246, 0.07), rgba(238, 241, 246, 0.03));
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
box-shadow: inset 0 -1px 0 rgba(238, 241, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: background 0.5s var(--courbe), box-shadow 0.5s var(--courbe),
-webkit-backdrop-filter 0.5s var(--courbe), backdrop-filter 0.5s var(--courbe);
}
/* Verre normal, sur le contenu. */
.barre.decollee .barre-interieur {
background: linear-gradient(180deg, rgba(36, 40, 48, 0.72), rgba(27, 29, 34, 0.64));
-webkit-backdrop-filter: blur(24px) saturate(140%);
backdrop-filter: blur(24px) saturate(140%);
box-shadow:
inset 0 -1px 0 rgba(238, 241, 246, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 30px -18px rgba(0, 0, 0, 0.7);
}
.marque { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.monogramme { flex: none; width: 18px; height: auto; }
.barre-liens { display: flex; gap: 2px; margin-left: auto; }
.barre-liens a {
display: inline-flex; align-items: center;
min-height: 32px; padding: 0 14px;
border-radius: 980px;
font-size: 14px; color: var(--gris);
letter-spacing: -0.01em;
transition: color 0.25s var(--courbe), background-color 0.25s var(--courbe), box-shadow 0.25s var(--courbe);
}
.barre-liens a:hover { color: var(--blanc); background-color: rgba(238, 241, 246, 0.06); }
.barre-liens a:focus-visible { outline-offset: 0; border-radius: 980px; }
.barre-interieur .pastille-petite { margin-left: 10px; }
@media (max-width: 760px) {
.barre-liens { display: none; }
.barre .pastille { margin-left: auto; }
.marque span { font-size: 17px; }
}
@media (max-width: 400px) {
.barre-interieur { gap: 12px; }
.marque { gap: 8px; }
.marque span { font-size: 16px; }
}
/* Sur les plus petits téléphones, le bouton de la barre dit juste « Réserver ». */
@media (max-width: 350px) { .barre-plus { display: none; } }
/* ---------------------------------------------------------------------
L'accueil
--------------------------------------------------------------------- */
.accueil {
position: relative;
height: 100svh;
min-height: 640px;
overflow: hidden;
display: grid;
place-items: start center;
}
/* Les deux calques photo, superposés au pixel près (même taille, même
cadrage). Le ciel est au fond, les sommets détourés passent devant le
titre. */
.accueil-ciel, .accueil-sommets { position: absolute; inset: 0; }
.accueil-ciel img, .accueil-sommets img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 39% 60%;
}
.accueil-sommets {
z-index: 3;
pointer-events: none; /* les clics passent jusqu'aux boutons */
translate: 0 var(--sommets-bas, 0px); /* réglé par le script */
}
.accueil-sommets img { will-change: transform; backface-visibility: hidden; }
/* La photo des sommets est plus haute que celle du ciel : le pied de la
chaîne continue sous le cadre. Sa partie haute (2688 × 1520) est cadrée
exactement comme le ciel (même « cover », même point 39 % 60 %) ; le
pied déborde en bas, caché, et apparaît quand les sommets montent. */
.accueil-sommets { container-type: size; }
.accueil-sommets img {
--l: max(100cqw, 100cqh * 1.76842); /* largeur « cover » de la partie haute */
position: absolute;
width: var(--l); height: auto; max-width: none;
left: calc((100cqw - var(--l)) * 0.39);
top: calc((100cqh - var(--l) / 1.76842) * 0.6);
object-fit: fill;
}
.accueil-ciel img { will-change: transform; backface-visibility: hidden; }
/* Le bas des sommets se fond dans le fond de la page. */
.accueil-sommets::after {
content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 32%;
pointer-events: none;
background: linear-gradient(to bottom, transparent, var(--noir));
}
.accueil-texte {
position: relative;
z-index: 2; /* au-dessus du voile de la photo, sinon les boutons ne se cliquent pas */
padding: calc(52px + clamp(40px, 9vh, 96px)) var(--marge) 0;
text-align: center;
max-width: 1080px;
}
.accueil-texte .surtitre { margin-bottom: 10px; color: var(--blanc); opacity: 0.8; }
/* Le titre en Clash Display : une police géométrique et affirmée, qui
accroche l'œil comme une signature d'agence haut de gamme. */
.accueil-titre {
font-family: "Clash Display", var(--police);
font-size: clamp(34px, 5vw + 18px, 92px);
font-weight: 600;
line-height: 1;
letter-spacing: -0.015em;
margin-bottom: 22px;
text-wrap: balance;
}
/* Sur téléphone, le titre reprend les trois lignes de l'ordinateur, de
plus en plus courtes : un triangle qui pointe vers le bas. Les coupures
(
) n'existent que sur téléphone ; ailleurs, le
titre se coupe tout seul aux mêmes endroits. La taille suit la largeur
de l'écran pour que la plus longue ligne, « Construisons quelque »
(environ 10,6 fois la taille du texte), tienne toujours dans le cadre. */
@media (min-width: 761px) { .coupe-mobile { display: none; } }
@media (max-width: 760px) {
.accueil-titre { font-size: min(clamp(34px, 5vw + 18px, 92px), calc((100vw - 2 * var(--marge)) / 11)); }
}
.accueil-sous {
max-width: 34em;
margin: 0 auto 28px;
font-size: clamp(19px, 2vw, 21px);
line-height: 1.38;
color: var(--texte-doux);
text-wrap: balance;
}
/* Un voile sombre discret derrière le texte, pour qu'il reste lisible
même s'il déborde sur la neige. */
.accueil-ciel::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: radial-gradient(ellipse 70% 55% at 50% 22%, rgba(20, 22, 27, 0.45), transparent 70%);
}
/* ---------------------------------------------------------------------
Les sections
--------------------------------------------------------------------- */
/* Des sections bien séparées par un grand espace (sans filet). */
.section { position: relative; padding: clamp(96px, 11vw, 168px) 0; }
.trois-colonnes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media (max-width: 760px) { .trois-colonnes { grid-template-columns: 1fr; gap: 28px; } }
/* ---------------------------------------------------------------------
Le carton-titre du « Problème » : « Chaque jour. » a sa propre ligne,
en Clash Display, soulignée d'un trait de lumière (animé par main.js).
--------------------------------------------------------------------- */
.titre-cinema { max-width: 17ch; }
/* Sur ordinateur, le titre tient en deux lignes : la phrase entière sur
la première (réduite juste assez pour tenir dans la colonne : elle
mesure environ 18,6 fois sa taille), « Chaque jour. » en grand dessous. */
@media (min-width: 761px) {
.titre-cinema { max-width: none; }
.titre-cinema [data-cinema-phrase] { font-size: clamp(26px, 4.5vw, 54px); white-space: nowrap; }
}
.titre-coup {
position: relative;
display: table; /* sa propre ligne, large comme son texte */
margin-top: 0.12em;
font-family: "Clash Display", var(--police);
letter-spacing: -0.01em;
}
.cinema-mot, .cinema-lettre { display: inline-block; will-change: transform, opacity, filter; }
.cinema-lettre { transform-origin: 50% 60%; }
.cinema-espace { display: inline-block; width: 0.26em; }
/* ---------------------------------------------------------------------
Les trois maux : le constat et son explication
--------------------------------------------------------------------- */
.mal-titre {
margin: 8px 0 12px;
font-family: "Clash Display", var(--police);
font-size: clamp(24px, 2vw + 6px, 30px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.005em;
text-wrap: balance;
}
.mal-texte {
font-size: 17px;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--gris);
}
/* ---------------------------------------------------------------------
La vitrine Cofe : « le banc de montage »
Le plan est présenté comme un film en cours de montage : une ligne
technique au-dessus (le nom, un timecode qui défile avec la molette),
l'image au milieu, une ligne de temps dessous avec un repère par
chapitre. Les trois chapitres sont à gauche : celui en cours s'allume.
Rien n'est posé sur l'image.
Signature : la lumière ambrée du café déborde du cadre, et grandit à
mesure que la tasse se remplit (--progres, de 0 à 1, voir main.js).
La section est haute (--vitrine-hauteur) ; la scène, collée en haut de
l'écran, reste en place pendant qu'on la parcourt, puis la page reprend.
Sans script ou avec « moins d'animations » : une image fixe, et les
trois chapitres dessous.
--------------------------------------------------------------------- */
/* Vitesse de la scène : la course vaut la hauteur moins un écran.
Ordinateur : 233vh de course (3 % plus rapide que les 240vh d'origine).
Téléphone : 228,4vh (encore 2 % plus rapide). */
.vitrine { --vitrine-hauteur: 333vh; --ambre: 200, 137, 74; margin-bottom: clamp(56px, 8vw, 96px); }
/* Téléphone : la vidéo avance 5 % plus vite (trajet 278,4vh / 1,05 = 265,1vh). */
@media (max-width: 760px) { .vitrine { --vitrine-hauteur: 315.1vh; } }
.vitrine-scene {
display: flex; flex-direction: column; gap: 28px;
width: min(100% - 2 * var(--marge), var(--cadre));
margin-inline: auto;
}
/* Le plan */
.vitrine-media { position: relative; isolation: isolate; }
.vitrine-meta {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
margin-bottom: 12px;
font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gris);
}
.vitrine-temps { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--glacier); }
.vitrine-cadre {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 14px;
background: #0c0d10;
/* La lueur du café déborde du cadre et grandit avec --progres. */
box-shadow:
inset 0 0 0 1px rgba(238, 241, 246, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 20px 0 rgba(var(--ambre), calc(0.08 + var(--progres, 1) * 0.28)),
0 30px 100px 0 rgba(var(--ambre), calc(0.16 + var(--progres, 1) * 0.4)),
0 0 220px 24px rgba(var(--ambre), calc(0.06 + var(--progres, 1) * 0.24)),
0 50px 100px -40px rgba(0, 0, 0, 0.8);
}
/* Le halo : une grande nappe de lumière ambrée derrière la vidéo, qui
s'étend et s'intensifie à mesure que la tasse se remplit. */
.vitrine-media::before {
content: "";
position: absolute; inset: -18% -12%;
z-index: -1;
background: radial-gradient(ellipse 60% 60% at 50% 55%,
rgba(var(--ambre), 0.55) 0%, rgba(var(--ambre), 0.18) 45%, transparent 75%);
filter: blur(40px);
opacity: calc(0.25 + var(--progres, 1) * 0.75);
transform: scale(calc(0.85 + var(--progres, 1) * 0.2));
pointer-events: none;
}
.vitrine-affiche, .vitrine-toile {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 58% 50%;
}
.vitrine-toile { display: none; }
/* Un léger vignettage : l'image se fond dans son cadre, comme à l'écran. */
.vitrine-voile {
position: absolute; inset: 0;
background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 60%, rgba(12, 13, 16, 0.5) 100%);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.08);
border-radius: inherit;
pointer-events: none;
}
/* La ligne de temps, sous l'image. */
.vitrine-progression {
position: relative;
height: 1px; margin-top: 16px;
background: rgba(238, 241, 246, 0.14);
}
.vitrine-progression span {
position: absolute; inset: 0;
background: var(--glacier);
transform-origin: 0 50%;
transform: scaleX(var(--progres, 1));
}
.vitrine-progression i {
position: absolute; top: -3px; left: calc(var(--repere) * 100%);
width: 1px; height: 7px;
background: var(--gris);
}
/* Les chapitres */
.vitrine-etiquette {
margin-bottom: 28px;
font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
color: var(--glacier);
}
.vitrine-chapitres { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vitrine-texte {
max-width: 20ch;
font-family: "Clash Display", var(--police);
font-size: clamp(20px, 1.3vw + 12px, 30px);
font-weight: 600;
line-height: 1.08;
text-wrap: balance;
}
.chapitre-num {
font-family: var(--police);
font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: var(--glacier);
}
/* Avec le script : la scène tient tout l'écran et se déroule. */
.js .vitrine.active { height: var(--vitrine-hauteur); }
.js .vitrine.active .vitrine-scene {
position: sticky; top: 0;
height: 100svh;
width: min(100% - 2 * var(--marge), 1440px);
display: grid;
/* Sur ordinateur, le plan s'étire en largeur, comme un écran de cinéma ;
les chapitres gardent une colonne étroite à gauche. */
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 2.5fr);
align-items: center;
gap: clamp(32px, 5vw, 80px);
padding-top: 52px; /* la barre du haut */
}
.js .vitrine.active .vitrine-textes { order: 0; }
.js .vitrine.active .vitrine-cadre { aspect-ratio: auto; height: min(62svh, 580px); }
.js .vitrine.active .vitrine-toile { display: block; }
/* Le chapitre en cours s'allume ; les autres restent en retrait. */
.js .vitrine.active .vitrine-texte {
opacity: 0.32;
transition: opacity 0.6s var(--courbe), transform 0.6s var(--courbe);
}
.js .vitrine.active .vitrine-texte.visible { opacity: 1; transform: translateX(6px); }
/* Sur ordinateur, un plan plus petit, posé dans la page comme un écran de
projection ; les textes suivent la même échelle réduite, pour que la
colonne des chapitres et le cadre restent en proportion. */
@media (min-width: 761px) {
.js .vitrine.active .vitrine-scene {
width: min(100% - 2 * var(--marge), 1060px);
grid-template-columns: minmax(230px, 1fr) minmax(0, 1.7fr);
gap: clamp(32px, 4vw, 64px);
}
.js .vitrine.active .vitrine-cadre { height: min(46svh, 420px); }
.js .vitrine.active .vitrine-texte { font-size: clamp(18px, 0.6vw + 12px, 23px); }
.js .vitrine.active .vitrine-chapitres { gap: 16px; }
.js .vitrine.active .vitrine-etiquette { margin-bottom: 20px; font-size: 12px; }
.js .vitrine.active .chapitre-num { font-size: 12px; }
.js .vitrine.active .vitrine-meta { margin-bottom: 10px; font-size: 11px; }
.js .vitrine.active .vitrine-progression { margin-top: 12px; }
}
/* Sur téléphone : l'image en haut, le chapitre en cours dessous. */
@media (max-width: 760px) {
.js .vitrine.active .vitrine-scene {
grid-template-columns: 1fr;
align-content: center;
gap: 22px;
}
.js .vitrine.active .vitrine-textes { order: 2; min-height: 3.3em; }
.js .vitrine.active .vitrine-etiquette { display: none; }
/* Sur téléphone, le plan s'étire en hauteur : il prend l'écran. */
.js .vitrine.active .vitrine-cadre { height: 62svh; }
.js .vitrine.active .vitrine-texte:not(.visible) { display: none; }
.js .vitrine.active .vitrine-texte.visible { transform: none; }
.vitrine-texte { font-size: clamp(22px, 6vw, 28px); max-width: none; }
}
/* ---------------------------------------------------------------------
La galerie des réalisations
--------------------------------------------------------------------- */
.galerie-piste {
display: flex;
gap: 20px;
margin: 0;
padding: 0 max(var(--marge), (100% - var(--cadre)) / 2);
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: max(var(--marge), (100% - var(--cadre)) / 2);
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.galerie-piste::-webkit-scrollbar { display: none; }
.galerie-carte {
flex: 0 0 min(78vw, 400px);
scroll-snap-align: start;
}
/* Chaque carte prend la couleur de son projet : la capture, très floutée,
devient un halo derrière le téléphone. Le reste du site garde
la palette de la photo ; la couleur vive, ce sont les projets. */
.galerie-visuel {
position: relative;
isolation: isolate;
display: grid; place-items: center;
aspect-ratio: 4 / 5;
margin-bottom: 20px;
padding: 40px 0 0;
overflow: hidden;
border-radius: 28px;
background: linear-gradient(180deg, var(--tuile-haute), #1f232a);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.galerie-visuel .galerie-halo {
position: absolute; inset: 0; z-index: -1;
width: 100%; height: 100%;
object-fit: cover;
border: 0; border-radius: 0; box-shadow: none;
filter: blur(50px) saturate(1.5);
opacity: 0.4;
transform: scale(1.4);
-webkit-mask-image: none; mask-image: none;
transition: opacity 0.6s var(--courbe);
}
/* Une lumière douce qui suit la souris (position donnée par le script). */
.galerie-visuel::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle 260px at var(--x, 50%) var(--y, 30%), rgba(255, 255, 255, 0.1), transparent 70%);
opacity: 0;
transition: opacity 0.4s var(--courbe);
pointer-events: none;
}
/* Le téléphone : un contour noir, un liseré de lumière, et le bas qui
se fond dans la carte. */
.galerie-visuel img {
width: 58%;
height: auto;
align-self: start;
border: 6px solid #15171b;
border-radius: 34px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 40px 80px rgba(0, 0, 0, 0.7);
-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
transition: transform 0.7s var(--courbe);
}
.galerie-carte:hover .galerie-visuel img:not(.galerie-halo) { transform: translateY(-12px) scale(1.02); }
.galerie-carte:hover .galerie-halo { opacity: 0.65; }
.galerie-carte:hover .galerie-visuel::after { opacity: 1; }
.galerie-carte .texte-accent { font-size: 17px; padding-right: 12px; }
.galerie-commandes { display: flex; justify-content: flex-end; gap: 14px; margin-top: 32px; }
.rond {
display: grid; place-items: center;
width: 44px; height: 44px;
border: 0; border-radius: 50%;
background: var(--fume-fond), var(--tuile-haute);
color: var(--blanc);
box-shadow: var(--fume-relief), var(--verre-ombre);
cursor: pointer;
transition: box-shadow 0.25s var(--courbe), opacity 0.2s var(--courbe), transform 0.2s var(--courbe);
}
.rond svg { width: 20px; height: 20px; }
.rond svg { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.rond:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--fume-relief), var(--verre-ombre-haute); }
.rond:active:not(:disabled) {
transform: scale(0.92);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.2), inset 0 9px 12px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.45);
transition-duration: 0.08s;
}
.rond:disabled { opacity: 0.36; cursor: default; }
/* ---------------------------------------------------------------------
Les offres, en tuiles
--------------------------------------------------------------------- */
.tuiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.tuile {
display: flex; flex-direction: column; gap: 20px;
padding: clamp(32px, 4vw, 48px);
border-radius: 28px;
background: var(--tuile);
/* Un reflet chaud à peine perceptible en haut de la tuile. */
box-shadow: inset 0 1px 0 rgba(var(--ambre), 0.14);
}
.tuile h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.tuile-vedette { grid-column: 1 / -1; }
/* La scène 3D de l'offre « Site cinématique » (assets/js/offres-3d.js).
Sur grand écran, elle remplit la tuile et le texte se pose à gauche,
sur un voile qui garde la lecture nette. Sur téléphone, elle devient
un bandeau en haut de la tuile. Le ciel est en CSS : sans WebGL, il
reste un beau fond. */
.tuile-vedette {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 560px;
}
.tuile-vedette > :not(.scene-3d) { position: relative; z-index: 1; max-width: 540px; }
.scene-3d {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 45% 40% at 68% 62%, rgba(150, 165, 195, 0.22), transparent 70%),
linear-gradient(180deg, #23262d 0%, #2f3541 58%, #3a3d44 100%);
}
.scene-3d canvas {
display: block; width: 100%; height: 100%;
opacity: 0;
transition: opacity 1.6s var(--courbe);
}
.scene-3d.scene-prete canvas { opacity: 1; }
/* Le voile : la couleur de la tuile à gauche, la montagne à droite. */
.scene-3d::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, var(--tuile) 0%, rgba(36, 40, 48, 0.92) 30%, rgba(36, 40, 48, 0.35) 52%, transparent 70%),
linear-gradient(0deg, var(--tuile) 0%, transparent 22%),
radial-gradient(ellipse at 60% 50%, transparent 55%, rgba(20, 22, 27, 0.55) 100%);
}
@media (max-width: 760px) {
.tuile-vedette { min-height: 0; }
.tuile-vedette > :not(.scene-3d) { max-width: none; }
.scene-3d {
position: relative; inset: auto;
height: 260px;
margin: calc(-1 * clamp(32px, 4vw, 48px)) calc(-1 * clamp(32px, 4vw, 48px)) 0;
}
.scene-3d::after {
background:
linear-gradient(0deg, var(--tuile) 0%, transparent 40%),
radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(20, 22, 27, 0.5) 100%);
}
}
.tuile-vedette h3 { font-size: clamp(40px, 5.6vw, 64px); }
.tuile-vedette .texte-accent { max-width: 25em; font-size: 21px; }
.tuile-surtitre { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--gris); }
.liste {
display: grid; gap: 0;
margin-top: auto;
padding: 0;
list-style: none;
font-size: 15px;
}
.tuile-vedette .liste { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
/* La photo d'une tuile d'offre (Site vitrine) : un bandeau en haut, qui
déborde jusqu'aux bords de la tuile et se fond dans sa couleur. */
.tuile-avec-photo { overflow: hidden; }
.tuile-photo {
width: calc(100% + 2 * clamp(32px, 4vw, 48px));
max-width: none;
height: auto; flex: none; /* sinon la hauteur écrite dans le HTML l'emporte */
aspect-ratio: 16 / 10;
margin: calc(-1 * clamp(32px, 4vw, 48px)) calc(-1 * clamp(32px, 4vw, 48px)) -12px;
object-fit: cover;
object-position: 45% 55%;
-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.liste li { padding: 12px 0; border-top: 1px solid var(--filet); }
/* Le lien au bas de chaque offre : l'action secondaire (verre fumé), qui
mène au formulaire avec l'offre déjà cochée. Les listes étant poussées
vers le bas, les liens des tuiles d'une même rangée restent alignés. */
.tuile-lien { align-self: flex-start; margin-top: 8px; }
/* Au survol d'une offre (souris seulement), la photo s'approche très
lentement et le reflet chaud du haut de la carte s'avive. Rien ne
bouge ni ne se soulève : la carte n'est pas un lien, seul son bouton
l'est, et il garde son propre survol. */
@media (hover: hover) and (pointer: fine) {
.tuile { transition: box-shadow 0.6s var(--courbe); }
.tuile:hover { box-shadow: inset 0 1px 0 rgba(var(--ambre), 0.3), inset 0 0 0 1px rgba(238, 241, 246, 0.05); }
.tuile-photo { transform-origin: 50% 40%; transition: transform 1.4s var(--courbe); }
.tuile:hover .tuile-photo { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .tuile:hover .tuile-photo { transform: none; } }
@media (max-width: 760px) {
.tuiles { grid-template-columns: 1fr; }
.tuile-vedette .liste { grid-template-columns: 1fr; }
.tuile-lien { align-self: stretch; }
}
/* ---------------------------------------------------------------------
Le comparatif
--------------------------------------------------------------------- */
/* Le tableau, épuré : cinq critères, une icône par réponse. Les icônes
se distinguent par leur forme (pas seulement leur couleur), le mot
reste lu par les lecteurs d'écran, et une légende les explique.
Notre colonne est éclairée comme par la lune. */
.comparatif { overflow-x: auto; margin-inline: calc(-1 * var(--marge)); padding-inline: var(--marge); }
/* Sur grand écran, le tableau tient en entier : pas de zone de défilement
(sinon les lignes qui montent à l'apparition font surgir une barre). */
@media (min-width: 761px) { .comparatif { overflow: visible; margin-inline: 0; padding-inline: 0; } }
.comparatif table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.comparatif th, .comparatif td {
padding: 22px 14px;
border-bottom: 1px solid var(--filet);
text-align: center;
vertical-align: middle;
transition: background-color 0.25s var(--courbe), color 0.25s var(--courbe);
}
.comparatif thead th { vertical-align: bottom; padding-top: 28px; font-size: 17px; font-weight: 600; color: var(--gris); }
.comparatif thead th.nous { color: var(--blanc); }
.comparatif tbody th { text-align: left; font-weight: 400; color: var(--gris); width: 34%; padding-left: 0; }
/* Notre colonne : un voile de lumière, un liseré froid, une lueur en haut. */
.comparatif .nous {
background-color: rgba(180, 194, 216, 0.06);
box-shadow: inset 1px 0 0 rgba(180, 194, 216, 0.22), inset -1px 0 0 rgba(180, 194, 216, 0.22);
}
.comparatif tbody tr:last-child td.nous {
border-radius: 0 0 20px 20px;
box-shadow: inset 1px 0 0 rgba(180, 194, 216, 0.22), inset -1px 0 0 rgba(180, 194, 216, 0.22), inset 0 -1px 0 rgba(180, 194, 216, 0.22);
}
.comparatif thead th.nous {
border-radius: 20px 20px 0 0;
background:
radial-gradient(ellipse 80% 90% at 50% 0%, rgba(180, 194, 216, 0.2), transparent 70%),
rgba(180, 194, 216, 0.06);
box-shadow: inset 1px 0 0 rgba(180, 194, 216, 0.22), inset -1px 0 0 rgba(180, 194, 216, 0.22), inset 0 1px 0 rgba(238, 241, 246, 0.35);
}
/* Les réponses : une icône devant chaque mot. */
.oui, .non, .partiel { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.oui::before, .non::before, .partiel::before {
content: ""; flex: none; width: 18px; height: 18px;
background: center / contain no-repeat;
}
.oui { font-weight: 600; color: var(--blanc); }
.oui::before { background-image: url("data:image/svg+xml;utf8,"); }
.nous .oui::before { background-image: url("data:image/svg+xml;utf8,");}
.oui::before { width: 22px; height: 22px; }
.partiel { color: var(--gris); }
.partiel::before { background-image: url("data:image/svg+xml;utf8,"); }
.non { color: var(--gris); }
.non::before { background-image: url("data:image/svg+xml;utf8,"); }
/* La légende, discrète, sous le tableau. */
.legende {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px;
margin-top: 20px;
font-size: 13px; color: var(--gris);
}
.legende .oui, .legende .non, .legende .partiel { position: static; }
.legende .oui::before, .legende .non::before, .legende .partiel::before { width: 16px; height: 16px; }
.legende .oui ~ .partiel, .legende .partiel ~ .non { margin-left: 8px; }
/* Au survol, toute la ligne s'éclaire, et notre case un peu plus. */
@media (hover: hover) {
.comparatif tbody tr:hover > * { background-color: rgba(238, 241, 246, 0.035); }
.comparatif tbody tr:hover > th { color: var(--blanc); }
.comparatif tbody tr:hover > .nous { background-color: rgba(180, 194, 216, 0.13); }
}
/* Le sélecteur « Comparer avec », pour le téléphone seulement. */
.comparer-avec { display: none; }
.segments {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
padding: 4px;
border-radius: 980px;
background: var(--tuile);
box-shadow: inset 0 0 0 1px var(--filet), inset 0 2px 6px rgba(0, 0, 0, 0.45);
}
.segment {
min-height: 44px;
padding: 8px 12px;
border: 0; border-radius: 980px;
background: transparent;
color: var(--gris);
font-size: 15px; font-weight: 500;
cursor: pointer;
transition: background-color 0.25s var(--courbe), color 0.25s var(--courbe), box-shadow 0.25s var(--courbe);
}
.segment[aria-pressed="true"] {
background: var(--fume-fond), var(--tuile-haute);
color: var(--blanc);
text-shadow: var(--fume-reflet);
box-shadow: var(--fume-relief), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.segment:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; border-radius: 980px; }
@media (max-width: 760px) {
.js .comparer-avec { display: grid; gap: 10px; margin-bottom: 28px; }
.comparer-avec-titre { font-size: 14px; font-weight: 600; color: var(--gris); }
/* Deux colonnes seulement : nous, et le concurrent choisi. */
.js .comparatif { overflow: visible; margin-inline: 0; padding-inline: 0; }
.js .comparatif table { min-width: 0; table-layout: fixed; }
.js .comparatif[data-rival="soi"] .agence,
.js .comparatif[data-rival="agence"] .soi { display: none; }
.js .comparatif tr > :first-child { width: 54%; }
.js .comparatif tbody th { font-size: 15px; padding-right: 10px; }
.js .comparatif th, .js .comparatif td { padding-inline: 8px; }
.js .comparatif thead th { font-size: 13px; line-height: 1.4; }
}
/* ---------------------------------------------------------------------
La méthode
--------------------------------------------------------------------- */
.etapes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 0;
list-style: none;
counter-reset: etape;
}
.etapes li { counter-increment: etape; padding-top: 24px; border-top: 1px solid var(--filet); }
/* Quand le défilement anime la page, le trait de chaque étape se trace
de gauche à droite (--trait va de 0 à 1, voir main.js). */
@property --trait { syntax: ""; inherits: false; initial-value: 1; }
.scene-animee .etapes li { position: relative; border-top-color: transparent; }
.scene-animee .etapes li::after {
content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
background: var(--glacier);
opacity: 0.45;
transform: scaleX(var(--trait, 1));
transform-origin: left;
}
.etapes li::before {
content: counter(etape);
display: block;
margin-bottom: 28px;
font-size: 56px;
font-weight: 600;
line-height: 1;
color: rgb(var(--ambre)); /* les chiffres de la méthode, en ambre */
}
.etapes h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.etapes p { color: var(--gris); font-size: 17px; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .etapes { grid-template-columns: 1fr; } }
/* Le formulaire, sous les trois étapes : une carte posée sur la nuit,
bordée d'un fin rebord de verre. Les champs sont de vrais cadres,
visibles avant même qu'on écrive dedans ; le focus les éclaire d'un
halo froid (la couleur de focus du site).
Formes : la carte 24 px, les champs 12 px, les pastilles et le bouton
en arrondi complet, comme partout ailleurs sur le site. */
.formulaire {
margin-top: clamp(64px, 8vw, 112px);
padding: clamp(28px, 4.5vw, 56px);
border-radius: 24px;
background: linear-gradient(180deg, rgba(43, 48, 57, 0.72), rgba(36, 40, 48, 0.72));
box-shadow:
inset 0 0 0 1px rgba(238, 241, 246, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.formulaire-entete { display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 44px); }
.formulaire-titre { font-family: var(--police-titre); font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.formulaire-intro { color: var(--gris); font-size: 16px; }
.formulaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-large { grid-column: 1 / -1; }
.champ-nom { font-size: 14px; font-weight: 500; color: var(--texte-doux); padding: 0; }
.champ-nom em { font-style: normal; font-weight: 400; color: var(--gris); }
.champ input, .champ textarea {
width: 100%;
min-height: 52px;
padding: 13px 16px;
border: 0;
border-radius: 12px;
background: rgba(15, 17, 21, 0.45);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.1);
color: var(--blanc);
font: inherit;
font-size: 17px;
transition: box-shadow 0.25s var(--courbe), background-color 0.25s var(--courbe);
}
.champ input::placeholder, .champ textarea::placeholder { color: rgba(155, 164, 180, 0.8); }
.champ input:hover, .champ textarea:hover { box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.18); }
.champ textarea { resize: vertical; min-height: 148px; line-height: 1.5; }
.champ input:focus, .champ textarea:focus {
outline: none;
background: rgba(15, 17, 21, 0.6);
box-shadow: inset 0 0 0 1px var(--glacier), 0 0 0 4px rgba(180, 194, 216, 0.14);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1px #e0806a, 0 0 0 4px rgba(224, 128, 106, 0.14); }
/* Le formulaire et ses champs s'arrêtent sous la barre du haut (52 px)
quand on y arrive par un lien ou quand une erreur y ramène. */
.formulaire, .champ input, .champ textarea { scroll-margin-top: 96px; }
/* Ce qui manque, dit juste sous le champ concerné. */
.champ-erreur { font-size: 14px; line-height: 1.4; color: #e0806a; }
.champ-erreur:empty { display: none; }
/* Le choix du site : des pastilles à cocher. Le choix retenu s'éclaire en
blanc, sans couleur d'accent. */
.choix { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.choix legend { width: 100%; margin-bottom: 10px; }
.choix-pastille { position: relative; cursor: pointer; }
.choix-pastille input { position: absolute; opacity: 0; pointer-events: none; }
.choix-pastille span {
display: inline-flex; align-items: center; min-height: 44px;
padding: 10px 18px;
border-radius: 980px;
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.12);
color: var(--texte-doux);
font-size: 15px;
transition: box-shadow 0.25s var(--courbe), background-color 0.25s var(--courbe), color 0.25s var(--courbe);
}
.choix-pastille:hover span { box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.26); }
.choix-pastille input:checked + span {
background: rgba(238, 241, 246, 0.1);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
color: var(--blanc);
}
.choix-pastille input:focus-visible + span { outline: 2px solid var(--glacier); outline-offset: 3px; }
/* Arrivé depuis une offre : le choix déjà coché s'éclaire un instant,
pour montrer qu'il a été fait à la place du visiteur. */
.choix-pastille.choix-signale input:checked + span { animation: choix-signale 1.6s var(--courbe); }
@keyframes choix-signale {
0%, 100% { background: rgba(238, 241, 246, 0.1); }
30% { background: rgba(238, 241, 246, 0.28); }
}
@media (prefers-reduced-motion: reduce) { .choix-pastille.choix-signale input:checked + span { animation: none; } }
.formulaire-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Le bas de la carte, séparé par un filet : le bouton à gauche, l'avis
de confidentialité à droite. */
.formulaire-bas {
display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
margin-top: clamp(28px, 3.5vw, 40px);
padding-top: clamp(24px, 3vw, 32px);
border-top: 1px solid var(--filet);
}
.formulaire-bas .pastille:disabled { opacity: 0.6; cursor: progress; }
.formulaire-etat { font-size: 16px; color: var(--glacier); }
.formulaire-etat:empty { display: none; }
.formulaire-etat.succes { color: var(--blanc); }
.formulaire-etat.erreur { color: #e0806a; }
.formulaire-avis { margin-left: auto; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--gris); text-align: right; }
.formulaire-avis a { color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
.formulaire-avis { margin-left: 0; text-align: left; }
.formulaire-bas .pastille { width: 100%; }
}
@media (max-width: 700px) { .formulaire-grille { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------------
Les questions
--------------------------------------------------------------------- */
/* Une entrevue : la question en grand (la police des titres), la
réponse à droite, calée sur la première ligne de la question. Un
filet sépare chaque échange ; quand le défilement anime la page, il
se trace de gauche à droite comme ceux de la méthode (--trait). */
.entretien { margin: 0; }
/* Une section plus compacte : un titre moins grand, et moins d'air. */
#questions { padding-block: clamp(64px, 7vw, 104px); }
#questions .titre-section { font-size: clamp(32px, 4vw, 52px); margin-bottom: clamp(24px, 3vw, 36px); }
.entretien-ligne {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 10px clamp(28px, 5vw, 72px);
align-items: baseline;
padding: clamp(16px, 2vw, 22px) 0;
border-top: 1px solid var(--filet);
}
.entretien-ligne:last-child { border-bottom: 1px solid var(--filet); }
.entretien dt {
font-family: var(--police-titre);
font-size: clamp(19px, 1.2vw + 10px, 24px);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--blanc);
text-wrap: balance;
}
.entretien dd {
margin: 0;
max-width: 30em;
font-size: 16px;
line-height: 1.55;
color: var(--gris);
transition: color 0.35s var(--courbe);
}
/* Le survol éclaire la réponse : on lit l'échange qu'on regarde. */
.entretien-ligne:hover dd { color: var(--texte-doux); }
.scene-animee .entretien-ligne { border-top-color: transparent; }
.scene-animee .entretien-ligne::before {
content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
background: var(--glacier);
opacity: 0.45;
transform: scaleX(var(--trait, 1));
transform-origin: left;
}
@media (max-width: 760px) {
.entretien-ligne { grid-template-columns: 1fr; gap: 6px; }
.entretien dd { font-size: 15px; }
}
/* ---------------------------------------------------------------------
L'appel final
--------------------------------------------------------------------- */
.final {
position: relative;
display: grid;
align-items: center;
min-height: 72svh;
padding: clamp(96px, 12vh, 140px) 0 clamp(48px, 7vh, 80px);
overflow: hidden;
}
.final-image {
position: absolute; inset: -10% 0 auto; /* plus haute que la section : de la marge pour la parallaxe */
width: 100%; height: 120%;
object-fit: cover;
object-position: 39% 70%;
opacity: 0.7;
}
/* La photo se fond dans la nuit de la page par un masque (pas de bande
de couleur, qui ferait une couture sur le ciel étoilé). */
.final-image {
-webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.5) 62%, transparent 82%);
mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, 0.5) 62%, transparent 82%);
}
/* Le générique de fin : un bloc resserré, centré. */
.final-texte {
position: relative; z-index: 2;
width: min(100% - 2 * var(--marge), 760px);
margin-inline: auto;
text-align: center;
}
.final-surtitre { margin-bottom: 18px; color: var(--glacier); }
.final h2, .final h1 {
max-width: 16ch;
margin-inline: auto;
font-size: clamp(36px, 5.2vw, 68px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.025em;
margin-bottom: 20px;
text-wrap: balance;
}
/* L'invitation, puis les boutons, empilés et centrés. */
.final-bas {
display: flex; flex-direction: column; align-items: center;
gap: 28px;
}
.final-intro { margin: 0; font-size: clamp(18px, 1vw + 10px, 21px); line-height: 1.4; color: var(--texte-doux); }
.final .appels { justify-content: center; }
/* Trois faits, séparés par un filet, comme les crédits d'un film. */
.final-faits {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px;
margin: 0; padding: 28px 0 0; list-style: none;
border-top: 1px solid var(--filet);
}
.final-faits li { font-size: 15px; line-height: 1.45; color: var(--gris); }
.final-faits span { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; color: var(--blanc); }
.final .final-avis { max-width: none; margin: 28px 0 0; text-align: center; }
@media (max-width: 760px) {
.final-bas { align-items: stretch; }
.final .appels { flex-direction: column; align-items: stretch; }
.final .appels .pastille { width: 100%; }
.final-faits { grid-template-columns: 1fr; gap: 18px; }
}
/* ---------------------------------------------------------------------
Le pied de page
--------------------------------------------------------------------- */
.pied { padding: clamp(48px, 6vw, 72px) 0 40px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.pied-note { padding-bottom: 8px; } /* pas de filet : le pied reste dans la même nuit */
/* La ligne du haut : la marque à gauche, les sections et le courriel à
droite. Un filet la sépare des mentions (le pied lui-même n'a pas de
filet au-dessus : il reste dans la nuit de l'appel final). */
.pied-haut {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 8px 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--filet);
}
.pied-marque { color: var(--blanc); font-size: 17px; }
.pied-marque .monogramme { width: 16px; }
.pied-nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 15px; }
.pied-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-doux); transition: color 0.25s var(--courbe); }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; }
.pied-liens { display: flex; gap: 20px; }
.pied a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }
.pied .pied-marque:hover { text-decoration: none; }
/* ---------------------------------------------------------------------
Les apparitions au défilement (seulement si le script tourne)
--------------------------------------------------------------------- */
.js [data-apparait] {
opacity: 0;
transform: translateY(32px);
transition: opacity 1s var(--courbe), transform 1s var(--courbe);
transition-delay: calc(var(--rang, 0) * 110ms);
}
.js [data-apparait].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
.js [data-apparait] { opacity: 1; transform: none; }
}
@media (prefers-contrast: more) {
.barre-interieur, .barre.decollee .barre-interieur { background: var(--noir); box-shadow: inset 0 0 0 1px var(--glacier); }
}
@media (prefers-reduced-transparency: reduce) {
.barre-interieur, .barre.decollee .barre-interieur { background: var(--tuile); -webkit-backdrop-filter: none; backdrop-filter: none; }
.barre::before { display: none; }
}
/* ---------------------------------------------------------------------
La transition entre l'accueil et la 2e scène
1. Une brume couleur de page monte du bas et noie les montagnes.
2. La section « Le problème » remonte par-dessus, comme un rideau
(seulement quand la scène animée tourne : classe posée par le script).
3. Son titre se révèle mot par mot, chaque mot sortant d'un masque
avec un léger flou.
--------------------------------------------------------------------- */
.accueil-brume {
position: absolute; inset: 0; z-index: 5;
pointer-events: none;
background: linear-gradient(to top, var(--noir) 45%, rgba(27, 29, 34, 0.85) 62%, transparent 100%);
visibility: hidden; /* le script la place sous l'accueil puis la rend visible */
}
html:not(.scene-animee) .accueil-brume { display: none; }
/* Le rideau : la section qui suit l'accueil (classe .rideau) remonte
par-dessus la brume à la fin de la scène d'accueil. */
.scene-animee .rideau {
position: relative;
z-index: 6;
margin-top: -70svh;
}
.mot-masque { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mot-interieur { display: inline-block; will-change: transform, opacity, filter; }
/* ---------------------------------------------------------------------
Une seule page, une seule nuit
Le ciel étoilé reste derrière tout le site, très atténué (contraste
du gris #9BA4B4 sur le fond obtenu : 5,8:1 au plus clair).
--------------------------------------------------------------------- */
.nuit {
position: fixed; inset: 0; z-index: -1;
pointer-events: none;
overflow: hidden;
}
.nuit img {
width: 100%; height: 115%;
object-fit: cover;
opacity: 0.35;
}
/* Quand la scène d'accueil tourne, la nuit n'apparaît qu'après la brume. */
.scene-animee .nuit { visibility: hidden; }
/* Le lien de la section où l'on se trouve. */
.barre-liens a[aria-current="true"] {
color: var(--blanc);
background-color: rgba(238, 241, 246, 0.1);
box-shadow: inset 0 0 0 1px rgba(238, 241, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ---------------------------------------------------------------------
Le bouton « Réserver » interactif
Le script (section 6) ajoute ses pièces dans chaque [data-cta] :
- .cta-texte : deux copies du libellé ; au survol, les lettres
basculent une à une et la copie du dessous prend place ;
- .cta-fleche : une flèche qui se glisse à droite au survol ;
- .cta-lumiere : une tache de lumière qui suit le curseur ;
- .cta-faisceau (grands boutons) : un faisceau qui fait le tour de la
bordure, lent au repos, vif au survol ;
- .cta-onde : l'onde qui part du point de clic.
Les grands boutons sont aussi aimantés par le curseur (propriété
translate, qui s'ajoute au transform des états survol et enfoncé).
--------------------------------------------------------------------- */
@property --cta-angle { syntax: ""; inherits: false; initial-value: 0deg; }
.cta { translate: var(--cta-x, 0px) var(--cta-y, 0px); isolation: isolate; overflow: visible; }
/* Le libellé en deux copies superposées. */
.cta-texte {
position: relative; z-index: 2;
display: inline-grid;
overflow: hidden;
line-height: 1.25;
/* Le cadre descend sous le libellé pour que son reflet flou ne soit
pas coupé net ; la copie cachée attend donc plus bas (160 %). */
padding-bottom: 0.5em; margin-bottom: -0.5em;
pointer-events: none;
translate: calc(var(--cta-x, 0px) * 0.35) calc(var(--cta-y, 0px) * 0.35);
}
.cta-ligne { grid-area: 1 / 1; white-space: nowrap; }
.cta-ligne span { display: inline-block; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 14ms); }
.cta-ligne span span { transition: none; }
.cta-ligne + .cta-ligne > span { transform: translateY(160%); }
.cta:hover .cta-ligne:first-child > span,
.cta:focus-visible .cta-ligne:first-child > span { transform: translateY(-160%); }
.cta:hover .cta-ligne + .cta-ligne > span,
.cta:focus-visible .cta-ligne + .cta-ligne > span { transform: none; }
/* La flèche qui se glisse. */
.cta-fleche {
position: relative; z-index: 2;
display: inline-grid; place-items: center;
width: 0; margin-left: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s;
}
.cta-fleche svg { width: 16px; height: 16px; flex: none; transform: translateX(-8px); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cta:hover .cta-fleche, .cta:focus-visible .cta-fleche { width: 16px; margin-left: 8px; opacity: 1; }
.cta:hover .cta-fleche svg, .cta:focus-visible .cta-fleche svg { transform: none; }
/* La lumière qui suit le curseur. */
.cta-lumiere {
position: absolute; inset: 0; z-index: 1;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background: radial-gradient(90px circle at var(--cta-mx, 50%) var(--cta-my, 50%), rgba(255, 255, 255, 0.95), transparent 70%);
transition: opacity 0.35s var(--courbe);
}
.cta:hover .cta-lumiere { opacity: 0.55; }
/* Le faisceau : un anneau fin découpé dans un dégradé conique qui tourne. */
.cta-faisceau {
position: absolute; inset: -3px; z-index: 0;
border-radius: inherit;
padding: 1.5px;
pointer-events: none;
background: conic-gradient(from var(--cta-angle), transparent 0 62%, rgba(180, 194, 216, 0.55) 78%, #ffffff 90%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0.55;
animation: cta-tour 5s linear infinite;
transition: opacity 0.5s var(--courbe);
}
.cta:hover .cta-faisceau, .cta:focus-visible .cta-faisceau { opacity: 1; }
@keyframes cta-tour { to { --cta-angle: 360deg; } }
/* Le halo qui respire autour du grand bouton pendant le survol. */
.cta[data-cta="grand"]:hover { animation: cta-souffle 2.4s ease-in-out infinite; }
@keyframes cta-souffle {
0%, 100% { box-shadow: var(--givre-relief), var(--verre-ombre-haute); }
50% { box-shadow: var(--givre-relief), 0 4px 6px rgba(0, 0, 0, 0.3), 0 24px 40px -12px rgba(0, 0, 0, 0.75); }
}
/* L'onde du clic, dans un cadre qui la garde à l'intérieur du bouton. */
.cta-onde-cadre { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cta-onde {
position: absolute;
width: 12px; height: 12px; margin: -6px 0 0 -6px;
border-radius: 50%;
background: rgba(20, 22, 26, 0.22);
animation: cta-onde 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes cta-onde { from { transform: scale(0); opacity: 1; } to { transform: scale(28); opacity: 0; } }
/* Moins d'animations : on garde les états (anneau fixe, flèche), sans
mouvement. */
@media (prefers-reduced-motion: reduce) {
.cta, .cta-texte { translate: none; }
.cta-faisceau { animation: none; background: rgba(180, 194, 216, 0.5); }
.cta[data-cta="grand"]:hover { animation: none; }
.cta-ligne span, .cta-fleche, .cta-fleche svg { transition: none; }
}
/* Les éléments qui entrent par le côté (questions, cartes…) ne
doivent jamais créer de défilement horizontal sur téléphone.
« clip » coupe le débord sans créer de zone de défilement, donc sans
gêner l'épinglage de l'accueil. */
main { overflow-x: clip; }
/* ---------------------------------------------------------------------
Une seule page (suite)
1. (La scène Cofe est désormais un cadre posé dans la page, voir plus haut.)
2. Le fil de lumière sous la barre se remplit du haut au bas du site.
--------------------------------------------------------------------- */
.barre-fil {
position: absolute; inset: auto 0 -1px 0;
height: 1px;
pointer-events: none;
}
.barre-fil span {
display: block;
height: 100%;
background: linear-gradient(90deg, rgba(180, 194, 216, 0), var(--glacier) 70%, #ffffff);
transform: scaleX(var(--fil, 0));
transform-origin: left;
}
/* ---------------------------------------------------------------------
Offres et réalisations : l'offre signature mène à sa démonstration
(la scène Cofe), puis viennent les deux autres offres.
--------------------------------------------------------------------- */
.offre-demo {
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
min-height: 44px;
margin-top: 4px;
font-size: 17px; font-weight: 500;
color: var(--blanc);
}
.offre-demo span { transition: transform 0.3s var(--courbe); }
.offre-demo:hover { text-decoration: underline; text-underline-offset: 4px; }
.offre-demo:hover span { transform: translateY(3px); }
#offres .vitrine { margin-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); }
/* ---------------------------------------------------------------------
Les pages légales (confidentialité, mentions légales) : une colonne
de lecture confortable, dans la même nuit que le site.
--------------------------------------------------------------------- */
.page-legale main { padding: 120px 0 72px; max-width: 720px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 10px; }
.legal-date { color: var(--gris); font-size: 15px; margin-bottom: 36px; }
.legal-intro { font-size: 19px; line-height: 1.5; color: var(--texte-doux); margin-bottom: 12px; }
.legal h2 { font-size: 22px; font-weight: 600; margin: 40px 0 12px; }
.legal h3 { font-size: 17px; font-weight: 600; color: var(--blanc); margin: 22px 0 6px; }
.legal p, .legal li { color: var(--texte-doux); line-height: 1.6; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { display: grid; gap: 10px; margin: 12px 0 0; padding-left: 20px; }
.legal strong { color: var(--blanc); }
.legal a, .final-avis a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }
/* Les emplacements à remplir restent repérables tant qu'ils existent. */
.legal [data-a-remplir] { border-bottom: 1px dashed var(--glacier); }
.final-avis { max-width: 34em; margin: 20px auto 0; font-size: 13px; line-height: 1.5; color: var(--gris); }
.pied-liens { flex-wrap: wrap; }
/* Téléphone : un pied plus lisible, et des liens assez hauts pour le doigt. */
@media (max-width: 760px) {
.pied { font-size: 14px; }
.pied-haut { flex-direction: column; align-items: flex-start; gap: 4px; }
.pied-nav { gap: 0 22px; }
.pied-liens { gap: 0 20px; }
.pied-liens a { display: inline-block; padding: 12px 0; }
}
.page-legale .barre .pastille { margin-left: auto; }
/* La page introuvable (404.html) : l'appel final du site, seul à l'écran. */
.page-404 .final { min-height: 100svh; padding-top: calc(52px + clamp(48px, 10vh, 96px)); }
.page-404-code { margin-bottom: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--glacier); }
/* ---------------------------------------------------------------------
La scène Cofe et la carte « Site cinématique », côte à côte
(placé en fin de feuille : a le dernier mot sur la mise en page).
- La vidéo garde TOUJOURS son rapport 16:9 : rien n'est recadré.
- Ordinateur : la carte part de la même verticale que tous les titres
(bord gauche du cadre de 1024 px) ; la vidéo prend le reste, jusqu'à
la marge droite de l'écran. Les deux restent en place pendant tout le
défilement de la scène, centrées dans l'espace sous la barre.
- Les trois chapitres passent sous la vidéo, en légende : seul celui en
cours est affiché.
- Téléphone : la carte d'abord, puis la vidéo d'un bord à l'autre.
--------------------------------------------------------------------- */
.vitrine-cadre { aspect-ratio: 16 / 9; }
.vitrine-affiche, .vitrine-toile { object-position: 50% 50%; }
/* La carte à côté : la version compacte de la tuile vedette. */
/* Compacte : elle doit tenir, montagne comprise, sous la barre d'un
écran d'ordinateur portable de 768 px de haut. */
.tuile-a-cote { --tuile-pad: 28px; min-height: 0; gap: 12px; padding: var(--tuile-pad); }
.tuile-a-cote > * { max-width: none; }
.tuile-a-cote h3 { font-size: clamp(26px, 2.1vw, 31px); }
.tuile-a-cote .texte-accent { font-size: 16px; line-height: 1.45; max-width: none; }
.tuile-a-cote .liste { grid-template-columns: 1fr; margin-top: 4px; font-size: 14px; }
.tuile-a-cote .liste li { padding: 9px 0; }
/* La montagne reste en fond, comme dans la grande tuile. La carte étant
étroite, le texte passe devant la neige : le voile est un peu plus
couvrant à gauche pour garder la lecture nette, la montagne reste
pleinement visible sur le bord droit. */
@media (min-width: 761px) {
.tuile-a-cote .scene-3d::after {
background:
linear-gradient(90deg, var(--tuile) 0%, rgba(36, 40, 48, 0.9) 38%, rgba(36, 40, 48, 0.55) 68%, rgba(36, 40, 48, 0.1) 100%),
linear-gradient(0deg, var(--tuile) 0%, transparent 22%),
radial-gradient(ellipse at 60% 50%, transparent 55%, rgba(20, 22, 27, 0.55) 100%);
}
}
/* Les chapitres en légende sous la vidéo. */
.js .vitrine.active .vitrine-scene .vitrine-textes { order: 2; min-height: 2.6em; padding: 0; }
.js .vitrine.active .vitrine-etiquette { margin-bottom: 8px; }
.js .vitrine.active .vitrine-texte { font-size: clamp(18px, 1vw + 10px, 24px); max-width: 28ch; }
/* Les trois légendes occupent la même place (la plus haute donne la
hauteur) : la vidéo ne saute plus quand on change de chapitre. */
.js .vitrine.active .vitrine-chapitres { display: grid; }
.js .vitrine.active .vitrine-texte { grid-area: 1 / 1; display: block; }
.js .vitrine.active .vitrine-texte:not(.visible) { visibility: hidden; opacity: 0; }
.js .vitrine.active .vitrine-texte.visible { visibility: visible; transform: none; opacity: 1; }
.js .vitrine.active { height: auto; }
.js .vitrine.active .vitrine-piste { height: var(--vitrine-hauteur); }
.js .vitrine.active .vitrine-scene {
position: sticky; top: 0;
width: 100%; max-width: none; height: 100svh;
margin: 0; padding: 52px 0 0;
display: grid; grid-template-columns: 1fr;
align-content: center;
gap: 18px;
}
.js .vitrine.active .vitrine-media { width: 100%; }
/* L'arrivée : la vidéo grandit légèrement en approchant (--arrivee, de 0
à 1, voir main.js) et se pose au moment où la scène se fige. */
.js .vitrine.active .vitrine-cadre {
transform: scale(calc(0.93 + var(--arrivee, 1) * 0.07));
transform-origin: 50% 0;
will-change: transform;
}
.js .vitrine.active .vitrine-cadre { width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (min-width: 761px) {
/* Seulement quand une carte est posée à côté de la vidéo. */
.js .vitrine.active:has(> .vitrine-offre) {
display: grid;
grid-template-columns: minmax(290px, 340px) minmax(0, 1fr);
column-gap: clamp(36px, 4vw, 64px);
padding: 0 var(--marge) 0 max(var(--marge), calc((100% - var(--cadre)) / 2));
}
/* La carte reste en place, centrée sous la barre, le temps de la scène. */
/* Le haut de la carte et le haut de la vidéo sur la même ligne
(--vitrine-haut, calculé par le script pour centrer l'ensemble le plus
haut des deux sous la barre). */
.js .vitrine.active .vitrine-offre {
position: sticky; top: 0;
align-self: start;
height: 100svh;
padding-top: var(--vitrine-haut, 120px);
display: flex; align-items: flex-start;
}
.js .vitrine.active .vitrine-scene { align-content: start; padding-top: var(--vitrine-haut, 120px); }
.js .vitrine.active .vitrine-offre .tuile { width: 100%; }
/* La vidéo : plafonnée pour tenir, avec sa légende, sous la barre. */
.js .vitrine.active .vitrine-media { width: min(100%, calc((100svh - 52px - 210px) * 16 / 9)); }
.js .vitrine.active .vitrine-scene .vitrine-textes { width: min(100%, calc((100svh - 52px - 210px) * 16 / 9)); }
}
@media (max-width: 760px) {
.vitrine-offre { padding: 0 var(--marge); margin-bottom: 8px; }
.js .vitrine.active .vitrine-cadre { border-radius: 0; }
.js .vitrine.active .vitrine-progression { margin-inline: var(--marge); }
.js .vitrine.active .vitrine-scene .vitrine-textes { padding-inline: var(--marge); }
}
/* La démonstration seule (sans carte à côté) : centrée dans la largeur
de la page, la légende alignée sous la vidéo. */
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene {
width: min(100% - 2 * var(--marge), var(--cadre));
margin-inline: auto;
justify-items: center;
}
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene .vitrine-textes { justify-self: center; }
@media (max-width: 760px) {
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene { width: 100%; }
}
/* Les trois chapitres, répartis tout au long de la carte : une colonne
chacun, sous la vidéo et sur toute sa largeur. Le chapitre en cours
s'allume, les deux autres restent en retrait. */
.js .vitrine.active .vitrine-chapitres {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(16px, 3vw, 40px);
}
.js .vitrine.active .vitrine-chapitres .vitrine-texte {
grid-area: auto;
display: block;
max-width: none;
visibility: visible;
opacity: 0.3;
transform: none;
font-size: clamp(15px, 0.8vw + 10px, 22px);
line-height: 1.15;
transition: opacity 0.6s var(--courbe);
}
.js .vitrine.active .vitrine-chapitres .vitrine-texte.visible { opacity: 1; }
.js .vitrine.active .vitrine-scene .vitrine-textes { width: 100%; }
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene .vitrine-media,
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene .vitrine-textes {
width: min(100%, calc((100svh - 52px - 190px) * 16 / 9));
}
@media (max-width: 760px) {
.js .vitrine.active .vitrine-chapitres { column-gap: 12px; }
/* Sur téléphone, la police de titre serre trop les mots à cette taille :
les légendes passent dans la police du texte. */
.js .vitrine.active .vitrine-chapitres .vitrine-texte {
font-family: var(--police); font-weight: 600; letter-spacing: 0;
font-size: clamp(13px, 3.6vw, 15px); line-height: 1.3; overflow-wrap: break-word;
}
/* La vidéo, carrée : elle remplit l'écran au lieu d'un mince bandeau. */
.js .vitrine.active .vitrine-cadre { aspect-ratio: 1 / 1; }
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene .vitrine-media,
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene .vitrine-textes { width: 100%; }
}
/* ---------------------------------------------------------------------
La scène du café, sur téléphone seulement (ordinateur inchangé)
- La vidéo redevient une carte : 16 px d'air de chaque côté, coins
arrondis, format portrait 4:5 qui occupe la hauteur de l'écran. La
lueur ambrée a de nouveau de la place pour se voir.
- Une seule légende à la fois, grande et lisible, qui passe la main à
la suivante en fondu (les trois côte à côte étaient illisibles).
--------------------------------------------------------------------- */
@media (max-width: 760px) {
.js .vitrine.active:not(:has(> .vitrine-offre)) .vitrine-scene {
width: calc(100% - 32px);
align-content: center;
gap: 22px;
}
.js .vitrine.active .vitrine-cadre {
aspect-ratio: 4 / 5;
/* jamais plus haute que l'écran moins la barre et la légende */
max-height: calc(100svh - 52px - 150px);
margin-inline: auto;
border-radius: 22px;
}
.js .vitrine.active .vitrine-scene .vitrine-textes {
position: relative;
padding: 4px 4px 0;
min-height: 0;
}
/* une légende à la fois, toutes superposées dans la même case */
.js .vitrine.active .vitrine-chapitres { grid-template-columns: 1fr; }
.js .vitrine.active .vitrine-chapitres .vitrine-texte {
grid-area: 1 / 1;
/* la police du texte : à cette taille, celle des titres colle les mots */
font-family: var(--police);
font-weight: 600;
font-size: clamp(20px, 5.6vw, 24px);
line-height: 1.25;
letter-spacing: -0.01em;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--courbe), transform 0.5s var(--courbe);
}
.js .vitrine.active .vitrine-chapitres .vitrine-texte.visible { opacity: 1; transform: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
.js .vitrine.active .vitrine-chapitres .vitrine-texte { transition: none; transform: none; }
}
/* ---------------------------------------------------------------------
Nettoyage anti-IA
- Tous les grands titres en Clash Display, comme la phrase d'accueil.
- Les maux face à leurs réponses : voir « Le renversement ».
--------------------------------------------------------------------- */
.titre-section, .final h2, .final h1 { font-family: var(--police-titre); letter-spacing: -0.01em; }
/* ---------------------------------------------------------------------
Le renversement : chaque mal face à sa réponse
Une grille à deux colonnes, la même pour l'en-tête et pour chaque
paire : le mal à gauche (5 parts, en retrait), la réponse à droite
(7 parts, en pleine lumière). L'axe entre les deux est un filet qui
s'allume en ambre (--allume, de 0 à 1) ; le trait qui barre le mal
se dessine de gauche à droite (--barre, de 0 à 1). Les deux valent 1
par défaut : sans script ou avec « moins d'animations », la section
s'affiche dans son état final.
--------------------------------------------------------------------- */
@property --barre { syntax: ""; inherits: true; initial-value: 1; }
@property --allume { syntax: ""; inherits: true; initial-value: 1; }
.bascule {
--ecart: clamp(40px, 7vw, 112px);
margin-top: clamp(56px, 7vw, 96px);
}
.bascule-tete,
.bascule-paire {
display: grid;
/* Deux colonnes égales : l'axe ambré tombe au centre, sous la phrase. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--ecart);
}
.bascule-titre {
grid-column: 1 / -1; /* centré sur toute la largeur */
text-align: center;
font-family: var(--police-titre);
font-size: clamp(22px, 1.2vw + 12px, 28px);
font-weight: 600;
line-height: 1.2;
color: rgb(var(--ambre));
/* De l'air entre la phrase et le haut de l'axe ambré. */
margin-bottom: clamp(20px, 2.4vw, 36px);
}
.bascule-liste { margin: 0; padding: 0; list-style: none; }
.bascule-paire { padding: clamp(28px, 3.6vw, 48px) 0; }
/* Le mal : gris, en retrait, barré. */
/* En retrait, mais lisible : à 80 %, le gris garde un contraste de
4,8:1 sur la nuit (il tombait à 3,6:1 à 65 %). */
.bascule-avant { display: grid; align-content: start; gap: 10px; opacity: calc(1 - var(--barre) * 0.2); }
.bascule-mal {
font-size: clamp(19px, 0.8vw + 13px, 24px);
font-weight: 600;
line-height: 1.25;
color: var(--gris);
text-wrap: balance;
}
/* Le trait suit chaque ligne du titre, même sur deux lignes. */
.bascule-trait {
background: linear-gradient(currentColor, currentColor) 0 58% / calc(var(--barre) * 100%) 2px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.bascule-avant p { max-width: 32ch; font-size: 16px; line-height: 1.55; color: var(--gris); }
/* La réponse : grande, blanche, avec l'axe ambré sur sa gauche. */
.bascule-apres { position: relative; display: grid; align-content: start; gap: 12px; }
.bascule-apres::before,
.bascule-apres::after {
content: "";
position: absolute;
top: calc(clamp(28px, 3.6vw, 48px) * -1); bottom: calc(clamp(28px, 3.6vw, 48px) * -1);
left: calc(var(--ecart) / -2);
width: 1px;
}
.bascule-apres::before { background: var(--filet); }
/* Plus d'axe ambré : seul le filet gris sépare le mal de sa réponse. */
.bascule-apres::after { display: none; }
.bascule-remede {
font-family: var(--police-titre);
font-size: clamp(26px, 1.8vw + 14px, 40px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--blanc);
text-wrap: balance;
}
.bascule-apres p { max-width: 38ch; font-size: clamp(16px, 0.2vw + 15px, 18px); line-height: 1.55; color: var(--texte-doux); }
/* Sur téléphone : le mal, puis sa réponse juste dessous, l'axe ambré
passant sur la gauche de la réponse. */
@media (max-width: 760px) {
.bascule-tete, .bascule-paire { grid-template-columns: 1fr; row-gap: 20px; }
.bascule-titre { grid-column: 1; }
.bascule-paire { padding: 28px 0; }
.bascule-apres { padding-left: 20px; }
.bascule-apres::before, .bascule-apres::after { top: 0; bottom: 0; left: 0; }
}
/* ---------------------------------------------------------------------
La fenêtre de réservation (Cal.com)
Le site se déclare en thème sombre (), la
page du calendrier en thème clair. Quand les deux ne s'accordent pas,
le navigateur peint un fond blanc opaque derrière la fenêtre intégrée :
c'était la bande blanche. On annonce donc le même thème que la page
du calendrier ; son fond redevient transparent et laisse voir le voile
presque noir posé par main.js (section 7).
--------------------------------------------------------------------- */
/* Prioritaire et plus précise : le script de Cal.com impose
« .cal-embed { color-scheme: unset !important } », qu'il faut battre. */
cal-modal-box iframe.cal-embed { color-scheme: light !important; }
/* =====================================================================
Téléphone seulement (sous 760 px) : lecture plus compacte
L'ordinateur n'est pas touché. Tout ce bloc est dans la même requête.
===================================================================== */
@media (max-width: 760px) {
/* Les grands titres de section : 3 lignes au lieu de 4. Le titre de
« Chaque jour. » a sa propre mise en scène et n'est pas concerné. */
.titre-section:not(.titre-cinema),
#comparatif-titre, #methode-titre {
font-size: clamp(28px, 7.9vw, 34px);
line-height: 1.08;
}
/* Les cartes d'offres : un texte à taille de lecture, moins d'air.
La carte « Site cinématique » passait de ~900 px de haut. */
.tuile { gap: 16px; }
.tuile h3 { font-size: 30px; }
.tuile-vedette h3 { font-size: 36px; }
.texte-accent,
.tuile-vedette .texte-accent {
font-size: 17px;
line-height: 1.5;
letter-spacing: 0;
}
.liste { font-size: 15px; }
.liste li { padding: 10px 0; }
/* Les trois étapes : le chiffre à gauche du titre, plus au-dessus. */
.etapes { gap: 0; }
.etapes li {
display: grid;
grid-template-columns: 34px 1fr;
column-gap: 12px;
align-items: baseline;
padding: 22px 0 24px;
}
.etapes li::before {
grid-row: 1 / span 2;
margin: 0;
font-size: 34px;
}
.etapes h3 { margin-bottom: 6px; font-size: 20px; }
.etapes p { font-size: 16px; line-height: 1.5; }
}
/* Téléphone : la lueur ambrée et la carte ne changent plus pendant le
défilement. Une grande ombre floue qui grandit avec --progres devait
être repeinte à chaque image, ce qui fait accrocher un téléphone. La
lueur reste, à son intensité de milieu de scène. */
@media (max-width: 760px) {
.js .vitrine.active .vitrine-cadre {
transform: none;
will-change: auto;
box-shadow:
inset 0 0 0 1px rgba(238, 241, 246, 0.12),
0 0 0 1px rgba(0, 0, 0, 0.4),
0 0 18px 0 rgba(var(--ambre), 0.25),
0 24px 70px 0 rgba(var(--ambre), 0.4),
0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.vitrine-media::before {
opacity: 0.75;
transform: none;
}
}
/* Téléphone : le bouton de l'accueil, un peu plus petit (320 → 250 px de
large). Il garde 44 px de haut pour rester facile à toucher. */
@media (max-width: 760px) {
.accueil-texte .appels .pastille {
width: auto;
min-width: 250px;
min-height: 44px;
padding: 10px 22px;
font-size: 16px;
}
}
/* ---------------------------------------------------------------------
L'avis « Adresse copiée »
Un clic sur l'adresse courriel ouvre la messagerie ET copie l'adresse :
sur un ordinateur sans logiciel de courriel, le clic n'est plus perdu.
Une pastille de verre fumé, en bas au centre, qui s'efface seule.
--------------------------------------------------------------------- */
.avis-copie {
position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60;
padding: 12px 22px;
border-radius: 980px;
background: linear-gradient(180deg, rgba(36, 40, 48, 0.86), rgba(27, 29, 34, 0.86));
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
box-shadow: var(--fume-relief), var(--verre-ombre);
color: var(--blanc);
font-size: 15px;
width: max-content; max-width: calc(100vw - 32px);
text-align: center;
pointer-events: none;
opacity: 0;
transform: translate(-50%, 12px);
transition: opacity 0.3s var(--courbe), transform 0.3s var(--courbe);
}
.avis-copie.visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
.avis-copie, .avis-copie.visible { transform: translate(-50%, 0); }
}