/* Tokens de l'app (app/public/index.html, :root ligne 190). */
:root {
--fond: #f4f1e8;
--fond-doux: #ebe7d8;
--fond-element: #faf8f0;
--texte: #2a2218;
--texte-2: #5a4f38;
--texte-3: #8a7d5a;
--texte-4: #a89e7c;
--or: #b8985a;
--or-clair: #d4b878;
--or-titre: #8a7340;
--bordure: #e0dcc8;
--bordure-2: #c4bda0;
--succes: #6b7a3a;
--erreur: #9a3c2c;
--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
--sans: -apple-system, "Segoe UI", Roboto, sans-serif;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--fond: #0a0a0d; --fond-doux: #14141a; --fond-element: #0f0f14;
--texte: #d4cfb8; --texte-2: #8a8475; --texte-3: #6b6660; --texte-4: #4a4a47;
--or: #b8985a; --or-clair: #d4b878; --or-titre: #cba968;
--bordure: #1a1a20; --bordure-2: #2a2a32; --succes: #7a8a4a; --erreur: #b85040;
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--fond: #0a0a0d; --fond-doux: #14141a; --fond-element: #0f0f14;
--texte: #d4cfb8; --texte-2: #8a8475; --texte-3: #6b6660; --texte-4: #4a4a47;
--or: #b8985a; --or-clair: #d4b878; --or-titre: #cba968;
--bordure: #1a1a20; --bordure-2: #2a2a32; --succes: #7a8a4a; --erreur: #b85040;
color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--serif); overflow-x: hidden; }
a { color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--or); outline-offset: 3px; }
.dedans { max-width: 1180px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 56px); }
.etroit { max-width: 760px; }
/* Bandeau de maquette — pas dans le vrai site */
.banc { background: var(--fond-doux); border-bottom: 1px solid var(--bordure); font-family: var(--sans); }
.banc .dedans { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; }
.banc span { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--texte-2); }
.btn-theme { font-family: var(--sans); font-size: 12px; padding: 7px 11px; border: 1px solid var(--bordure-2); border-radius: 2px; background: transparent; color: var(--or); cursor: pointer; }
/* Navigation */
.entete .dedans { display: flex; align-items: center; gap: 22px; padding-top: 20px; padding-bottom: 20px; }
.logo { font-size: 17px; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; }
.logo .k { font-size: 0.78em; letter-spacing: 1px; color: var(--or-titre); }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--texte-2); }
.nav-ouvrir { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--or); border: 1px solid var(--or); border-radius: 2px; padding: 9px 16px; }
/* ── Le haut ── */
.hero { padding: clamp(44px, 7vw, 104px) 0 clamp(50px, 7vw, 96px); }
.hero .dedans { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
/* Trois enfants, placés à la main : le haut et le bas s'empilent dans la
colonne de gauche, la rosace tient les deux rangées à droite. Sur mobile
la grille retombe sur une colonne et la rosace se glisse entre les deux. */
.hero-haut { grid-column: 1; grid-row: 1; align-self: end; }
.hero-bas { grid-column: 1; grid-row: 2; align-self: start; }
.hero-visuel { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.surtitre { margin: 0 0 18px; font-family: var(--sans); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--texte-3); }
h1 { margin: 0; font-weight: 400; font-size: clamp(38px, 6.4vw, 76px); line-height: 1; letter-spacing: clamp(6px, 1vw, 11px); text-transform: uppercase; }
h1 .k { font-size: 0.78em; letter-spacing: 1px; color: var(--or-titre); }
h1::after { content: ""; display: block; width: 72px; height: 1px; background: linear-gradient(90deg, var(--or), transparent); margin: 24px 0 0; }
.accroche { margin: 32px 0 0; font-size: clamp(29px, 4.2vw, 50px); line-height: 1.1; }
.accroche-2 { margin: 10px 0 0; font-style: italic; font-size: clamp(19px, 2.2vw, 26px); color: var(--or-titre); }
.promesse { margin: 24px 0 0; max-width: 34ch; font-size: 18px; line-height: 1.65; color: var(--texte-2); }
.l-tel { display: none; }
/* L'étape 1 de l'installation se dit autrement quand on EST sur l'iPhone :
lui demander d'ouvrir la page où il se trouve l'obligeait à remonter
toute la page pour agir. La classe est posée par vitrine.js d'après
l'appareil — jamais d'après la largeur, sinon la phrase mentirait à un
Android étroit qui consulte l'onglet iPhone. */
.etape-ici { display: none; }
html.sur-iphone .etape-ailleurs { display: none; }
html.sur-iphone .etape-ici { display: inline; }
.appel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 34px; }
.btn-ouvrir { display: inline-block; padding: 15px 34px; text-decoration: none; font-family: var(--serif); font-weight: 500; font-size: 17px; background: var(--or); color: var(--fond-element); border-radius: 2px; box-shadow: 0 4px 14px rgba(184,152,90,.32); }
.lien-installer { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--or-titre); padding: 8px 0; }
.mention { margin: 16px 0 0; font-size: 14px; font-style: italic; color: var(--texte-3); }
/* La rosace de l'app, reprise à l'identique */
.medaillon { position: relative; width: min(78vw, 400px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; border: 1px solid var(--or);
background: radial-gradient(circle at 50% 50%, rgba(184,152,90,.12), rgba(184,152,90,.03) 46%, transparent 72%), var(--fond);
box-shadow: 0 0 60px rgba(184,152,90,.18), 0 10px 30px rgba(0,0,0,.10), inset 0 0 30px rgba(184,152,90,.05); }
.rosace { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-anneau { fill: none; stroke: var(--or); stroke-width: .7; opacity: .22; }
.r-petales circle { fill: none; stroke: var(--or); stroke-width: .9; opacity: .40; }
.r-fleur circle { fill: none; stroke: var(--or-clair); stroke-width: .9; opacity: .55; }
.r-orbe-anneau { fill: var(--fond); stroke: var(--or); stroke-width: 1; }
.r-orbe-point { fill: var(--or-clair); }
@media (prefers-reduced-motion: no-preference) { .r-orbe { animation: pulse 3.8s ease-in-out infinite; } }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.lobe { position: absolute; width: 42%; height: 42%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--or); }
.lobe-h { top: 22%; left: 50%; } .lobe-b { top: 78%; left: 50%; } .lobe-g { top: 50%; left: 22%; } .lobe-d { top: 50%; left: 78%; }
.lobe svg { width: clamp(24px, 3vw, 32px); height: clamp(24px, 3vw, 32px); }
.lobe span { font-size: clamp(9px, 1vw, 11px); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.lobe-g svg, .lobe-g span { transform: translateX(-7px); } .lobe-d svg, .lobe-d span { transform: translateX(7px); }
/* ── Les quatre moments ── */
.moment { padding: clamp(64px, 10vw, 150px) 0; }
.moment .dedans { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.moment-large .dedans { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); }
.filet { width: 96px; height: 1px; background: var(--or); margin-bottom: 18px; }
.libelle { margin: 0 0 22px; font-family: var(--sans); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--texte-3); }
.phrase { margin: 0; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.15; text-wrap: balance; }
.phrase em { font-style: normal; color: var(--or-titre); }
.lecture { margin: 26px 0 0; max-width: 30em; font-size: 17px; line-height: 1.75; color: var(--texte-2); }
.murmure { margin: 18px 0 0; font-family: var(--sans); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--texte-3); }
/* La planche : l'image, sans cadre, sans ombre, sans arrondi ajouté */
.planche { display: block; width: 100%; height: auto; }
.planche-tel { max-width: 330px; margin: 0 auto; }
.planche-large { max-width: 900px; margin: 0 auto; }
/* ---- Cadre iPhone (v10) ---- */
.tel { --l: 300px; --e: calc(var(--l) - 18px);
width: var(--l); margin: 0 auto; padding: 9px;
border-radius: calc(var(--e) * 0.155 + 9px);
background: linear-gradient(158deg, #56565b, #2b2b2f 34%, #3f3f44 63%, #212124);
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.5), 0 16px 38px rgba(0,0,0,.20); }
.tel-ecran { position: relative; display: block; overflow: hidden; background: #000;
border-radius: calc(var(--e) * 0.155); }
.tel-ecran img { display: block; width: 100%; height: auto; }
.tel-ile { position: absolute; left: 50%; transform: translateX(-50%);
top: calc(var(--e) * 0.0274); width: calc(var(--e) * 0.311); height: calc(var(--e) * 0.0913);
background: #000; border-radius: 999px; }
.duo { display: flex; gap: clamp(16px, 4vw, 46px); justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.duo figure { margin: 0; }
.duo .tel { --l: 264px; }
.duo .sous-planche { max-width: 272px; margin-top: 12px; }
@media (max-width: 700px) { .duo .tel { --l: min(76vw, 300px); } .duo .sous-planche { max-width: min(76vw, 300px); } }
.sous-planche { margin: 14px auto 0; max-width: 900px; font-style: italic; font-size: 14px; color: var(--texte-3); text-align: center; }
/* ── La science ── */
.science { padding: clamp(60px, 8vw, 120px) 0; border-top: 1px solid var(--bordure); }
.science .dedans { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.courbe { display: block; width: 100%; height: auto; }
.c-axe { stroke: var(--bordure-2); stroke-width: 1; }
.c-oubli { fill: none; stroke: var(--texte-4); stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; }
.c-rappel { stroke: var(--or); stroke-width: 1; stroke-dasharray: 2 5; opacity: .45; }
.c-trait { fill: none; stroke: var(--or); stroke-width: 2.4; stroke-linecap: round; }
.c-point { fill: var(--or-clair); }
.c-mot { font-family: var(--sans); font-size: 12px; fill: var(--texte-3); }
.c-mot-or { fill: var(--or-titre); }
.legende { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-family: var(--sans); font-size: 12px; color: var(--texte-3); }
.legende span { display: inline-flex; align-items: center; gap: 10px; }
.legende i { display: inline-block; width: 28px; border-top: 2px solid var(--or); }
.legende i.pointille { border-top: 2px dashed var(--texte-4); }
/* ── Prix, installer, qui : validés, inchangés ── */
.section { padding: clamp(60px, 8vw, 120px) 0; }
.claire { background: var(--fond-doux); }
.tete { text-align: center; margin: 0 auto clamp(36px, 5vw, 60px); }
.tete .libelle { margin-bottom: 14px; }
h2 { margin: 0 auto; font-weight: 400; font-size: clamp(27px, 3.2vw, 38px); line-height: 1.25; max-width: 22ch; text-wrap: balance; }
.tarifs { max-width: 34em; margin: 0 auto; border-top: 1px solid var(--bordure); }
.tarif { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--bordure); }
.tarif-nom { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; }
.tarif-nom.or { color: var(--or-titre); }
.tarif-txt { font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.tarif-txt small { display: block; font-size: 13px; font-style: italic; color: var(--texte-3); margin-top: 2px; }
.onglets { display: flex; max-width: 34em; margin: 0 auto 22px; border: 1px solid var(--bordure-2); border-radius: 2px; overflow: hidden; }
.onglets button { flex: 1; padding: 10px 6px; border: 0; background: transparent; font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--texte-2); cursor: pointer; }
.onglets button + button { border-left: 1px solid var(--bordure-2); }
.onglets button[aria-selected="true"] { background: var(--or); color: var(--fond); }
.etapes { list-style: none; counter-reset: e; max-width: 34em; margin: 0 auto; padding: 0; display: grid; gap: 16px; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: baseline; font-size: 17px; line-height: 1.6; }
.etapes li::before { content: counter(e); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--or); border-radius: 50%; font-size: 13px; color: var(--or-titre); transform: translateY(-2px); }
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--or); }
.ico svg { width: 100%; height: 100%; display: block; }
.note-etape { display: block; font-size: 14px; font-style: italic; color: var(--texte-3); }
.btn-installer { display: inline-block; margin: 6px 0 2px; padding: 9px 18px; font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--or); border: 1px solid var(--or); border-radius: 2px; }
.resultat { display: flex; align-items: center; gap: 14px; max-width: 34em; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--bordure); font-size: 15px; font-style: italic; color: var(--texte-2); }
.resultat img { width: 48px; height: 48px; border-radius: 11px; }
.sans-store { max-width: 34em; margin: 18px auto 0; text-align: center; font-size: 14px; color: var(--texte-3); }
.lettre { max-width: 30ch; margin: 0 auto; text-align: center; font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.7; color: var(--texte-2); text-wrap: balance; }
.signature { margin: 14px 0 0; text-align: center; font-style: italic; color: var(--texte-3); }
.pied { border-top: 1px solid var(--bordure); padding: 28px 0 36px; text-align: center; font-family: var(--sans); font-size: 11px; letter-spacing: 1px; line-height: 2; color: var(--texte-3); }
.pied a { color: var(--or-titre); text-decoration: none; }
/* ── Mentions & Conditions : textes portés de l'app, mot pour mot ── */
.legal { padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--bordure); }
.legal-titre { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 3vw, 34px); }
.legal-sous { margin: 0 0 34px; font-style: italic; font-size: 17px; color: var(--texte-3); }
.legal-corps { max-width: 36em; }
.legal-corps p { margin: 0 0 16px; font-size: 16px; line-height: 1.72; color: var(--texte-2); }
.legal-corps p.legal-section { margin: 32px 0 10px; font-family: var(--sans); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--or-titre); }
.legal-corps strong { color: var(--texte); font-weight: 600; }
.legal-corps a { color: var(--or-titre); text-decoration: underline; text-underline-offset: 3px; }
.legal-retour { display: inline-block; margin-top: 26px; font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: var(--or); }
/* Notes de maquette */
.notes { background: var(--fond-doux); border-top: 1px solid var(--bordure); font-family: var(--sans); font-size: 14px; line-height: 1.55; padding: 26px 0 38px; }
.notes h3 { margin: 0 0 12px; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--or-titre); }
.notes ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; max-width: 760px; }
@media (max-width: 900px) { .science .dedans { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
.nav { display: none; }
/* Le bouton du bandeau fait doublon avec celui du hero, juste en dessous,
et il ecrase le logo sur un ecran etroit. L entete ne colle pas au defilement :
le garder n apporte rien. */
.nav-ouvrir { display: none; }
.hero .dedans { grid-template-columns: 1fr; text-align: center; }
.hero-haut, .hero-bas { display: flex; flex-direction: column; align-items: center; }
.hero-haut, .hero-bas, .hero-visuel { grid-column: 1; grid-row: auto; }
/* Dans le balisage, la rosace vient APRES les deux blocs de texte (c est ce
que veut la colonne de droite sur ordinateur). Sur mobile on la remonte
entre le slogan et la promesse, la ou elle a de la valeur. */
.hero-haut { order: 1; }
.hero-visuel { order: 2; }
.hero-bas { order: 3; }
/* La rosace est l'identité de l'app : elle mérite sa place dans le premier
écran, juste après le nom et le slogan — pas noyée sous la promesse. */
.hero-visuel { margin: 34px 0 6px; }
.hero-bas { margin-top: 4px; }
h1::after { margin: 20px auto 0; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.promesse { margin-left: auto; margin-right: auto; }
/* LES DEUX PORTES ÉCHANGENT LEUR RANG (v284).
Sur un téléphone, installer EST la destination : c'est tout ce que
cette page cherche à obtenir. Et Safari ne partage pas son stockage
avec l'app installée — prouvé sur l'iPhone d'Anthony le 13/09 : une
première connaissance écrite dans le navigateur ne suit pas sur
l'écran d'accueil. Mettre « Ouvrir » devant, c'était offrir une
impasse polie.
La porte du navigateur RESTE, en dessous : la fermer coûterait tous
ceux qui veulent voir avant de s'engager. Sur ordinateur, rien ne
change — y installer n'a pas de sens. */
.appel { flex-direction: column-reverse; align-items: center; }
.btn-ouvrir {
padding: 8px 0; background: none; box-shadow: none;
font-family: var(--sans); font-weight: 400; font-size: 11px;
letter-spacing: 2px; text-transform: uppercase; color: var(--or-titre);
}
.lien-installer {
padding: 15px 34px; background: var(--or); color: var(--fond-element);
font-family: var(--serif); font-weight: 500; font-size: 17px;
letter-spacing: 0; text-transform: none; border-radius: 2px;
box-shadow: 0 4px 14px rgba(184,152,90,.32);
}
/* Le libellé dit alors ce qu'on obtient vraiment : le navigateur. */
.l-ordi { display: none; }
.l-tel { display: inline; }
.moment .dedans { grid-template-columns: 1fr; }
.moment-texte { text-align: center; display: flex; flex-direction: column; align-items: center; }
.filet { margin-left: auto; margin-right: auto; }
.lecture { margin-left: auto; margin-right: auto; }
.tarif { grid-template-columns: 1fr; gap: 4px; }
}