/* ══════════════════════════════════════════════════════════════════ MAISONIA SOINS — système visuel « la vitrine » ────────────────────────────────────────────────────────────────── LA THÈSE. La visiteuse est une praticienne propriétaire de son cabinet. Elle évalue si elle confie le dossier de ses patientes à un inconnu. Trois questions : est-ce que ça connaît mon métier, combien ça me coûte à MOI, qu'est-ce que je risque. LA DIRECTION, sans nommer une couleur : le logiciel est le sujet — grand, réel, présenté avec la retenue d'un objet de luxe, sur un fond profond qui le fait exister comme une pièce sous vitrine. CE QU'ELLE SACRIFIE : la chaleur éditoriale du magazine, l'ornement, les paillettes. Elle est plus froide et plus frontale. C'est le prix pour qu'on voie un outil sérieux et non une brochure de spa. CE QUI CHANGE PAR RAPPORT À L'ANCIENNE : pas de serif de titrage (c'était le tic), pas de fond ivoire, pas d'accent doré ornemental. Le luxe vient de la MATIÈRE et de la LUMIÈRE, pas d'une police. ══════════════════════════════════════════════════════════════════ */ @layer socle, matiere, blocs, heritage, mouvement, adaptations; @layer socle { /* ── jetons ──────────────────────────────────────────────────── oklch : espace perceptuellement uniforme. Éclaircir de 0,04 en L donne le même écart visuel partout, ce que hsl ne garantit pas. Baseline largement disponible depuis mai 2023. */ :root{ color-scheme:dark; /* ── LE NOIR EST NEUTRE, ET C'EST LE PREMIER CHANGEMENT ────── Il portait une fonte verte (teinte 152) et l'encre une fonte chaude (teinte 85) : deux températures opposées sur la même page, c'est ce qui donnait au site son air « crème et doré ». Tout passe sur un seul axe froid, teinte 250, à chroma presque nul. Un noir qui ne veut rien dire laisse l'accent tout dire. */ --nuit: oklch(0.165 0.006 250); /* le fond */ --nuit-haut: oklch(0.212 0.008 250); /* surface soulevée */ --nuit-bas: oklch(0.128 0.005 250); /* creux, pied de page */ --vitre: oklch(0.33 0.009 250); /* filets */ --vitre-fin: oklch(0.245 0.007 250); --os: oklch(0.970 0.004 250); /* encre principale */ --os-mi: oklch(0.790 0.006 250); /* encre secondaire */ --os-bas:oklch(0.700 0.008 250); /* encre tertiaire — 0,630 mesuré à 4,10:1 sur le rendu, sous le seuil */ /* ── L'ACCENT ──────────────────────────────────────────────── Un cyan saturé, et lui seul. Les noms `--ambre*` sont CONSERVÉS volontairement : onze autres pages et neuf cents lignes de CSS les appellent. Changer la valeur ici fait basculer tout le site d'un coup, sans toucher au balisage — et les renommer se fera à froid, si on le fait un jour. */ --cyan: oklch(0.775 0.118 212); --cyan-fort: oklch(0.665 0.125 222); --ambre: var(--cyan); --ambre-fort: var(--cyan-fort); --ambre-nu: oklch(0.775 0.118 212 / .14); --alerte: oklch(0.72 0.14 35); --vert: oklch(0.74 0.10 158); /* La police de titrage a été retirée volontairement : un serif éditorial était la signature de l'ancienne version, et c'est précisément ce qui a été rejeté. Toute l'échelle tient sur une seule grotesque à caractère, plus une mono pour les données. */ --texte:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; --data: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --marge:clamp(20px,5vw,88px); --large:1360px; --r:14px; --r-g:22px; --pilule:999px; /* une seule courbe pour tout le site : la décélération d'un objet lourd et bien monté. */ --sortie:cubic-bezier(.16,1,.3,1); --lent:.7s var(--sortie); --vif:.28s var(--sortie); } /* @property permet d'ANIMER une propriété personnalisée : sans la déclaration de type, --tour serait interpolée comme une chaîne et l'animation sauterait. Baseline depuis juillet 2024. */ @property --tour{ syntax:""; inherits:false; initial-value:0deg } @property --lueur{ syntax:""; inherits:false; initial-value:0% } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } /* l'en-tête est collant : sans marge d'ancrage, une ancre amène la cible SOUS l'en-tête et l'on croit qu'il ne s'est rien passé. */ [id]{scroll-margin-top:clamp(84px,8vw,112px)} body{ margin:0;background:var(--nuit);color:var(--os-mi); font-family:var(--texte);font-size:16.5px;line-height:1.72; font-weight:350;letter-spacing:.004em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{color:var(--os);font-weight:400;margin:0; letter-spacing:-.022em;line-height:1.02; /* balance : réservé aux titres courts. L'algorithme est une recherche binaire, coûteuse — jamais en global. */ text-wrap:balance} h1{font-size:clamp(38px,4.9vw,72px)} h2{font-size:clamp(30px,4.4vw,62px)} h3{font-size:clamp(19px,1.9vw,24px);letter-spacing:-.012em;line-height:1.24} /* pretty : évite les mots orphelins en fin de paragraphe. Ciblé, pas global : l'algorithme regarde en arrière sur plusieurs lignes. */ p,li{text-wrap:pretty;margin:0} a{color:inherit} img,svg{display:block;max-width:100%;height:auto} button{font:inherit} .env{width:100%;max-width:var(--large);margin-inline:auto; padding-inline:var(--marge)} .large{max-width:1580px} /* étiquette en mono : c'est elle qui dit « logiciel » plutôt que « institut de beauté ». */ .eti{display:inline-block;font-family:var(--data);font-size:11px; font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--ambre)} .eti--pale{color:var(--os-bas)} .mot{color:var(--os)} .dit{font-size:clamp(16.5px,1.5vw,19px);line-height:1.7;color:var(--os-mi); max-width:60ch} } @layer matiere { /* ── la lumière ──────────────────────────────────────────────── Une seule source chaude, très basse, comme la fenêtre de la photographie. Elle remplace l'ornement doré de l'ancienne version. */ .jour{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .jour::before{content:"";position:absolute;inset:-30% -10% 20% -30%; background:radial-gradient(58% 46% at 22% 34%, oklch(0.775 0.118 212 / .16), transparent 68%); filter:blur(20px)} .jour::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 80% at 50% 0%, transparent 40%, oklch(0.10 0.008 152 / .55) 100%)} /* grain : la seule texture. Un fond plat en très sombre montre des bandes de quantification sur les dégradés ; le grain les casse. */ .grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,\ \ \ ")} main,header,footer{position:relative;z-index:2} /* ── la vitrine : le cadre autour des captures ───────────────── Un liseré de lumière en haut, une ombre portée très basse. C'est ce qui fait exister une capture d'écran claire sur fond noir. */ .vitrine{position:relative;border-radius:var(--r-g);overflow:hidden; background:var(--nuit-haut); box-shadow: inset 0 1px 0 oklch(0.98 0 0 / .16), 0 0 0 1px var(--vitre-fin), 0 40px 90px -50px oklch(0 0 0 / .9), 0 2px 30px -12px oklch(0.775 0.118 212 / .18)} .vitrine img{width:100%} .vitrine::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(178deg,transparent 62%,oklch(0.10 0.008 152 / .34))} /* le trait de lumière qui court sur le bord d'un élément au survol. --tour est animé grâce à @property déclaré plus haut. */ .liseré{position:relative;isolation:isolate} .liseré::before{content:"";position:absolute;inset:0;border-radius:inherit; padding:1px;opacity:0;transition:opacity var(--lent); background:conic-gradient(from var(--tour), transparent 0deg, var(--ambre) 40deg, transparent 110deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} @media (prefers-reduced-motion:no-preference){ .liseré:hover::before{opacity:.85;animation:tourne 3.4s linear infinite} } @keyframes tourne{to{--tour:360deg}} } @layer blocs { /* ── en-tête ───────────────────────────────────────────────────── */ .tete{position:sticky;top:0;z-index:40; background:oklch(0.155 0.010 152 / .72); backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid transparent;transition:border-color var(--lent)} .tete.pose{border-bottom-color:var(--vitre-fin)} .tete .env{display:flex;align-items:center;gap:clamp(18px,3vw,48px); min-height:74px} .marque{font-size:19px;letter-spacing:-.02em;color:var(--os); display:inline-flex;align-items:center;min-height:44px; text-decoration:none;white-space:nowrap;font-weight:400} .marque i{font-style:normal;color:var(--ambre);font-family:var(--data); font-size:11px;letter-spacing:.16em;text-transform:uppercase; vertical-align:2px;margin-left:7px} .tete nav{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto} .tete nav a{font-size:14.5px;color:var(--os-bas);text-decoration:none; padding:9px 0;transition:color var(--vif);white-space:nowrap} .tete nav a:hover,.tete nav a[aria-current]{color:var(--os)} .cta{display:inline-flex;align-items:center;gap:12px; padding:14px 26px;border-radius:var(--pilule);text-decoration:none; font-size:13px;letter-spacing:.09em;text-transform:uppercase; font-family:var(--data); color:oklch(0.165 0.022 240); background:linear-gradient(128deg,var(--ambre),oklch(0.885 0.085 196) 52%,var(--ambre-fort)); box-shadow:0 1px 0 oklch(1 0 0 / .3) inset, 0 12px 34px -16px oklch(0.665 0.125 222 / .7); transition:transform var(--vif),box-shadow var(--lent)} .cta:hover{transform:translateY(-1px); box-shadow:0 1px 0 oklch(1 0 0 / .3) inset, 0 18px 44px -16px oklch(0.665 0.125 222 / .9)} .cta .fl{transition:transform var(--vif)} .cta:hover .fl{transform:translateX(4px)} .cta--nu{background:none;color:var(--os); box-shadow:inset 0 0 0 1px var(--vitre)} .cta--nu:hover{box-shadow:inset 0 0 0 1px var(--ambre)} .lien{display:inline-flex;align-items:center;gap:9px;font-size:14.5px; min-height:44px; color:var(--os-mi);text-decoration:none;transition:color var(--vif)} .lien:hover{color:var(--ambre)} .lien .fl{transition:transform var(--vif)} .lien:hover .fl{transform:translateX(4px)} .burger{display:none;width:44px;height:44px;border:0;background:none; cursor:pointer;position:relative} .burger span,.burger::before,.burger::after{content:"";position:absolute; left:11px;width:22px;height:1px;background:var(--os);transition:var(--vif)} .burger::before{top:17px} .burger span{top:22px} .burger::after{top:27px} .burger[aria-expanded="true"]::before{top:22px;transform:rotate(45deg)} .burger[aria-expanded="true"] span{opacity:0} .burger[aria-expanded="true"]::after{top:22px;transform:rotate(-45deg)} .tiroir{display:none} /* ── ouverture ─────────────────────────────────────────────────── */ .ouv{padding:clamp(40px,5vw,76px) 0 clamp(32px,3.4vw,52px);position:relative} .ouv__g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(34px,5vw,74px);align-items:center} .ouv h1{margin:20px 0 24px} .ouv h1 em{font-style:normal; background:linear-gradient(100deg,var(--ambre),oklch(0.905 0.072 198) 46%,var(--ambre-fort)); -webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .ouv h1 em{color:var(--ambre);background:none} } .ouv__actes{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center; margin-top:30px} /* les trois chiffres sous l'accroche : prix, essai, hébergement. Le prix explicite est le facteur le plus lourd après la correspondance au sujet dans les citations des moteurs génératifs. */ .socle{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,52px); margin-top:clamp(34px,4vw,52px);padding-top:26px; border-top:1px solid var(--vitre-fin)} .socle div{min-width:0} .socle b{display:block;font-family:var(--data);font-size:clamp(21px,2.2vw,29px); word-spacing:-.28em; font-weight:400;color:var(--os);letter-spacing:-.01em;line-height:1.1} .socle span{display:block;margin-top:7px;font-size:13px;color:var(--os-bas); line-height:1.5} /* ── le défilé de preuves ──────────────────────────────────────── */ .preuves{padding:clamp(52px,7vw,110px) 0} .preuves__tete{display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,52px)} .rail{display:grid;grid-auto-flow:column; grid-auto-columns:min(84vw,600px);gap:clamp(16px,2vw,28px); overflow-x:auto;overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory; padding-bottom:20px; scrollbar-width:thin;scrollbar-color:var(--vitre) transparent} .rail > *{scroll-snap-align:start} .rail::-webkit-scrollbar{height:3px} .rail::-webkit-scrollbar-thumb{background:var(--vitre);border-radius:99px} /* ── LES FLÈCHES DU RAIL ─────────────────────────────────────── Elles se posent à mi-hauteur de la BANDE D'IMAGE, pas du bloc : une fiche fait image + titre + paragraphe, et une flèche centrée sur l'ensemble tomberait dans le texte. L'image occupe la largeur de colonne au rapport 5/2, donc sa moitié vaut cette largeur divisée par cinq. */ .rail-env{position:relative} .rail__fl{ position:absolute; z-index:3; top:calc(min(84vw,600px) / 5 - 24px); width:48px; height:48px; border-radius:99px; display:grid; place-items:center; color:var(--os); background:color-mix(in oklab, var(--nuit-haut) 88%, transparent); border:1px solid var(--vitre); box-shadow:0 10px 30px -14px oklch(0 0 0 / .8); cursor:pointer; transition:border-color .22s, background .22s, opacity .22s, transform .22s; } @supports (backdrop-filter:blur(8px)){ .rail__fl{backdrop-filter:blur(8px)} } .rail__fl--g{left:-8px} .rail__fl--d{right:-8px} .rail__fl:hover{border-color:var(--ambre); background:var(--nuit-haut)} .rail__fl:active{transform:scale(.94)} .rail__fl:focus-visible{outline:2px solid var(--ambre); outline-offset:3px} /* Au bout du rail, la flèche s'efface sans disparaître du flux : deux boutons qui s'escamotent feraient sauter la mise en page. */ .rail__fl:disabled{opacity:0; pointer-events:none} @media (prefers-reduced-motion:reduce){ .rail__fl{transition:none} } /* Sur un téléphone, on fait glisser du doigt : les flèches chevaucheraient la carte pour rien. */ @media (max-width:760px){ .rail__fl{display:none} } /* ── AGRANDIR UNE CAPTURE ────────────────────────────────────── Les captures du rail font 600 px de large au plus : on voit que c'est un agenda, on ne lit pas ce qu'il y a dedans. Or c'est exactement ce qu'une gérante veut faire avant d'essayer — lire les intitulés, compter les colonnes, vérifier qu'il y a bien un taux de TVA par ligne. La capture devient donc un bouton, et le curseur l'annonce avant le clic. `` plutôt qu'une surcouche maison : il apporte le piège de focus, la fermeture par Échap et le voile, sans une ligne de JavaScript pour les tenir. */ .agrandir{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:inherit; color:inherit; } .agrandir:focus-visible{ outline:2px solid var(--ambre); outline-offset:-3px } .agrandir img{ display:block; transition:transform .5s var(--sortie) } @media (prefers-reduced-motion:no-preference){ .agrandir:hover img{ transform:scale(1.014) } } .loupe{ width:min(1500px,95vw); max-width:none; max-height:92vh; margin:auto; padding:0; border:0; background:none; color:var(--os); overflow:visible; } .loupe::backdrop{ background:oklch(0.08 0.004 250 / .88) } @supports (backdrop-filter:blur(4px)){ .loupe::backdrop{ backdrop-filter:blur(7px) } } .loupe[open]{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(4px,1.4vw,18px); } @media (prefers-reduced-motion:no-preference){ .loupe[open]{ animation:loupe-entre .34s var(--sortie) both } .loupe[open]::backdrop{ animation:loupe-voile .34s var(--sortie) both } } @keyframes loupe-entre{ from{ opacity:0; transform:scale(.976) } } @keyframes loupe-voile{ from{ opacity:0 } } .loupe__f{ margin:0; min-width:0 } .loupe__f img{ display:block; width:100%; height:auto; max-height:82vh; object-fit:contain; border-radius:var(--r); background:var(--nuit-haut); box-shadow:0 0 0 1px var(--vitre-fin), 0 50px 110px -40px oklch(0 0 0 / .95); } .loupe__f figcaption{ margin-top:14px; text-align:center; font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--os-bas); } .loupe__x, .loupe__fl{ display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:var(--pilule); color:var(--os); cursor:pointer; background:color-mix(in oklab, var(--nuit-haut) 90%, transparent); border:1px solid var(--vitre); transition:border-color .22s, background .22s, opacity .22s, transform .22s; } .loupe__x:hover, .loupe__fl:hover{ border-color:var(--ambre); background:var(--nuit-haut) } .loupe__x:active, .loupe__fl:active{ transform:scale(.94) } .loupe__x:focus-visible, .loupe__fl:focus-visible{ outline:2px solid var(--ambre); outline-offset:3px } .loupe__fl:disabled{ opacity:.26; pointer-events:none } .loupe__x{ position:absolute; top:-58px; right:0; z-index:2 } @media (prefers-reduced-motion:reduce){ .loupe__x, .loupe__fl, .agrandir img{ transition:none } } /* Sur téléphone la place manque de part et d'autre : les flèches passent sous l'image, la capture prend toute la largeur, et on ferme d'une pression sur le voile. */ /* Sur téléphone, agrandir à la largeur de l'écran ne gagne rien : la capture ferait 374 px au lieu des 328 du rail, et resterait illisible. Elle est donc posée plus grande que l'écran et se tire du doigt — c'est la seule façon de lire une capture de bureau sur un téléphone. */ @media (max-width:760px){ .loupe{ width:96vw } .loupe[open]{ grid-template-columns:1fr 1fr; grid-template-areas:"f f" "g d"; gap:14px } .loupe__f{ grid-area:f; overflow-x:auto; overscroll-behavior-inline:contain; border-radius:var(--r); scrollbar-width:thin; scrollbar-color:var(--vitre) transparent } .loupe__f img{ width:auto; max-width:none; height:62vh; max-height:none; border-radius:0 } .loupe__f figcaption{ position:sticky; left:0 } .loupe__fl--g{ grid-area:g; justify-self:end } .loupe__fl--d{ grid-area:d; justify-self:start } .loupe__x{ top:-52px } } /* ── L'APERÇU EN HUIT BLOCS ──────────────────────────────────── Un filet d'un pixel entre les cellules : la grille se lit comme un tableau sans qu'on ait à dessiner de bordures. Le détail complet vit dans le `
` qui suit. */ /* Huit blocs : la grille doit tomber juste, sinon la dernière rangée laisse des cellules vides qui se voient d'autant plus que le filet les dessine. 4 × 2, 2 × 4, ou 1 × 8 — jamais autre chose. */ .apercu{display:grid; gap:1px; margin-top:clamp(26px,3vw,44px); grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--vitre-fin); border:1px solid var(--vitre-fin)} @media (min-width:900px){ .apercu{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (max-width:560px){ .apercu{grid-template-columns:minmax(0,1fr)} } .apercu article{background:var(--nuit); padding:clamp(20px,2vw,28px)} .apercu h3{font-family:var(--data); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--ambre); margin:0 0 11px} .apercu p{margin:0; font-size:14.5px; line-height:1.68; color:var(--os-bas); max-width:44ch} /* ── LE DÉTAIL REPLIÉ ────────────────────────────────────────── L'inventaire complet reste sur la page — c'est lui qui prouve que rien n'est en option — mais il ne s'impose plus à la lecture. */ .detail{margin-top:clamp(22px,2.6vw,36px)} .detail > summary{ display:inline-flex; align-items:center; gap:12px; min-height:44px; font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--os-mi); cursor:pointer; list-style:none} .detail > summary::-webkit-details-marker{display:none} .detail > summary::after{content:"+"; font-size:16px; color:var(--ambre); line-height:1} .detail[open] > summary::after{content:"\2212"} .detail > summary:hover{color:var(--os)} .detail > summary:focus-visible{outline:2px solid var(--ambre); outline-offset:4px} .detail .inv{margin-top:4px} /* container queries : la fiche s'adapte à SA largeur, pas à celle de l'écran. C'est ce qui permet au même bloc de vivre dans le rail étroit et dans une grille large sans média-requête. */ .fiche{container-type:inline-size;display:flex;flex-direction:column;gap:18px} /* toutes les captures n'ont pas le même rapport : sans cadre imposé, les titres des fiches ne s'alignent pas d'une colonne à l'autre. */ .fiche .vitrine{aspect-ratio:5/2} .fiche .vitrine img{height:100%;object-fit:cover;object-position:left top} .fiche__t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .fiche__n{font-family:var(--data);font-size:11px;color:var(--ambre); letter-spacing:.14em} .fiche p{font-size:15px;color:var(--os-bas);line-height:1.65;max-width:52ch} @container (min-width:520px){ .fiche p{font-size:16px} .fiche h3{font-size:23px} } /* ── la méthode : une image de métier contre trois refus ──────── Le seul bloc du site où une photographie et du texte se partagent la largeur. Elle est là pour dire « soin » une fois, franchement, plutôt que de saupoudrer des icônes partout. */ .methode{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(26px,4vw,72px);align-items:start} .methode__im{border-radius:var(--r-g);overflow:hidden;position:relative; aspect-ratio:3/4;background:var(--nuit-haut); box-shadow:0 40px 80px -40px oklch(0 0 0 / .8)} .methode__im img{width:100%;height:100%;object-fit:cover} .methode__im::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,oklch(0.13 0.01 152 / .5),transparent 55%); box-shadow:inset 0 1px 0 oklch(1 0 0 / .07)} .notes{margin-top:clamp(24px,3.2vw,42px)} .note{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px); padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid var(--vitre-fin)} .note:first-child{border-top:0;padding-top:0} .note > b{font-family:var(--data);font-size:11px;letter-spacing:.16em; color:var(--ambre);font-weight:400;padding-top:6px} .note h3{margin-bottom:9px} .note p{font-size:15.5px;color:var(--os-bas);line-height:1.68;max-width:56ch} /* ── le face-à-face ────────────────────────────────────────────── */ .duel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px)} .duel__c{border-radius:var(--r-g);padding:clamp(24px,3vw,40px);min-width:0} .duel__c--eux{background:oklch(0.19 0.008 152 / .5); box-shadow:inset 0 0 0 1px var(--vitre-fin)} .duel__c--nous{background:var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .07), 0 0 0 1px var(--vitre-fin), 0 30px 70px -50px oklch(0 0 0 / .9)} .duel h3{font-family:var(--data);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--os-bas);margin-bottom:22px} .duel__c--nous h3{color:var(--ambre)} .duel ul{list-style:none;margin:0;padding:0} .duel li{padding:14px 0 14px 26px;position:relative;font-size:15.5px; line-height:1.62;border-top:1px solid var(--vitre-fin);color:var(--os-bas)} .duel li:first-child{border-top:0} .duel__c--nous li{color:var(--os-mi)} .duel li::before{position:absolute;left:0;top:14px} .duel__c--eux li::before{content:"—";color:oklch(0.45 0.006 152)} .duel__c--nous li::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--ambre);top:1.5em;left:2px; box-shadow:0 0 12px var(--ambre)} .duel b{color:var(--os);font-weight:400} /* ── le calculateur ────────────────────────────────────────────── */ .calc{background:var(--nuit-haut);border-radius:var(--r-g); padding:clamp(26px,3.4vw,48px); box-shadow:inset 0 1px 0 oklch(1 0 0 / .07),0 0 0 1px var(--vitre-fin), 0 40px 90px -60px oklch(0 0 0 / .9)} .calc__n{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 clamp(26px,3vw,38px)} .calc__n button{min-width:54px;min-height:54px;padding:0 18px;border:0; border-radius:var(--pilule);cursor:pointer;font-family:var(--data); font-size:15px;color:var(--os-mi);background:oklch(0.24 0.010 152); box-shadow:inset 0 0 0 1px var(--vitre-fin); transition:color var(--vif),background var(--vif),box-shadow var(--vif)} .calc__n button:hover{color:var(--os);background:oklch(0.28 0.012 152)} .calc__n button[aria-pressed="true"]{color:oklch(0.185 0.022 240); background:linear-gradient(128deg,var(--ambre),var(--ambre-fort)); box-shadow:0 8px 24px -12px oklch(0.665 0.125 222 / .8)} .calc__r{display:grid;grid-template-columns:auto 1fr; gap:8px clamp(22px,3vw,44px);align-items:baseline; border-top:1px solid var(--vitre-fin);padding-top:clamp(22px,2.6vw,32px)} .calc__mt{font-family:var(--data);font-size:clamp(44px,6vw,80px); word-spacing:-.3em; font-weight:300;line-height:1;color:var(--os);grid-row:span 2; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .calc__d{font-size:15px;color:var(--os);align-self:end} .calc__d2{font-size:13.5px;color:var(--os-bas);line-height:1.7} /* ── la matière : la photographie plein cadre ──────────────────── */ .matiere{position:relative;min-height:clamp(420px,62vh,720px); display:grid;align-items:end;border-radius:var(--r-g);overflow:hidden; isolation:isolate} .matiere img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:-2} .matiere::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top, oklch(0.10 0.008 152 / .96) 0%, oklch(0.10 0.008 152 / .78) 42%, oklch(0.10 0.008 152 / .28) 78%, oklch(0.10 0.008 152 / .12))} .matiere__d{padding:clamp(28px,4vw,60px);max-width:62ch} /* ── appel final ───────────────────────────────────────────────── */ .fin{padding:clamp(64px,9vw,140px) 0;text-align:center;position:relative} .fin::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 60% at 50% 106%, oklch(0.775 0.118 212 / .16),transparent 70%)} .fin h2{margin:20px auto 24px;max-width:16ch} .fin .dit{margin:0 auto;text-align:center} .fin__actes{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:center; margin-top:36px} /* ── pied ──────────────────────────────────────────────────────── */ .pied{background:var(--nuit-bas);border-top:1px solid var(--vitre-fin); padding:clamp(46px,6vw,80px) 0 34px;margin-top:clamp(40px,6vw,90px)} .pied__g{display:grid;grid-template-columns:1.5fr 1fr 1fr; gap:clamp(26px,4vw,60px)} .pied h4{font-family:var(--data);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--os-bas);margin:0 0 16px;font-weight:400} .pied ul{list-style:none;margin:0;padding:0} .pied li{font-size:14.5px;color:var(--os-bas);line-height:1.55} .pied li a,.pied__bas a{color:var(--os-bas);text-decoration:none; display:inline-block;padding:8px 0;transition:color var(--vif)} .pied li a:hover,.pied__bas a:hover{color:var(--ambre)} .pied__mot{font-size:14.5px;color:var(--os-bas);max-width:44ch;margin-top:14px} .pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px; margin-top:clamp(34px,4vw,54px);padding-top:24px; border-top:1px solid var(--vitre-fin);font-size:13.5px;color:var(--os-bas)} .pied__bas p{margin:0} /* la barre d'action sur téléphone */ .quai{display:none} } @layer mouvement { /* ── transitions entre pages ─────────────────────────────────── Amélioration progressive : un navigateur sans support fait une navigation instantanée normale. Aucune reprise en JS nécessaire. */ @media (prefers-reduced-motion:no-preference){ @view-transition{ navigation:auto } ::view-transition-old(root){animation:.24s ease-in both fondu-sortie} ::view-transition-new(root){animation:.42s var(--sortie) both fondu-entree} @keyframes fondu-sortie{to{opacity:0;transform:translateY(-6px)}} @keyframes fondu-entree{from{opacity:0;transform:translateY(10px)}} } /* ── révélation au défilement ────────────────────────────────── La double garde est obligatoire : (animation-range:entry) filtre les navigateurs qui n'ont qu'un support partiel. L'effet étant décoratif, aucune reprise IntersectionObserver n'est fournie — sans support, le contenu est simplement là, ce qui est correct. */ @media (prefers-reduced-motion:no-preference){ @supports ((animation-timeline:view()) and (animation-range:entry)){ @keyframes monte{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} } .monte{animation:monte auto linear both} .monte{animation-timeline:view()} .monte{animation-range:entry 4% cover 34%} /* le rail : chaque fiche se lève en entrant sur l'axe en ligne */ @keyframes leve{ from{opacity:.25;transform:translateY(14px) scale(.985)} } .rail > *{animation:leve auto linear both} .rail > *{animation-timeline:view(inline)} .rail > *{animation-range:entry 0% entry 62%} } } } @layer adaptations { @media (max-width:1080px){ .ouv__g{grid-template-columns:1fr;gap:38px} .pied__g{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .duel{grid-template-columns:1fr} /* au doigt, un lien de pied doit faire 44 px de haut. */ .pied li a{display:inline-flex;align-items:center;min-height:44px} .pied__bas a{display:inline-flex;align-items:center;min-height:44px} .methode{grid-template-columns:1fr;gap:30px} .methode__im{aspect-ratio:16/10} .tete nav{display:none} .burger{display:block;margin-left:auto} .tete__cta{display:none} .tiroir{display:block;max-height:0;overflow:hidden; transition:max-height var(--lent);border-top:1px solid transparent} .tiroir.ouvert{max-height:420px;border-top-color:var(--vitre-fin)} .tiroir ul{list-style:none;margin:0;padding:18px 0 8px} .tiroir li a{display:block;padding:13px 0;font-size:17px;color:var(--os); text-decoration:none} .tiroir .cta{width:100%;justify-content:center;margin:10px 0 22px} } @media (max-width:760px){ .quai{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45; gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:oklch(0.155 0.010 152 / .9); backdrop-filter:blur(16px) saturate(1.4); border-top:1px solid var(--vitre-fin)} .quai a{flex:1;display:flex;align-items:center;justify-content:center; min-height:48px;border-radius:var(--pilule);text-decoration:none; font-family:var(--data);font-size:12px;letter-spacing:.09em; text-transform:uppercase} .quai .q1{color:var(--os-mi);box-shadow:inset 0 0 0 1px var(--vitre)} .quai .q2{flex:1.5;color:oklch(0.165 0.022 240); background:linear-gradient(128deg,var(--ambre),var(--ambre-fort))} body{padding-bottom:74px} .pied__g{grid-template-columns:1fr;gap:30px} .calc__r{grid-template-columns:1fr;gap:12px} .calc__mt{grid-row:auto} } /* rendu différé du contenu hors écran : le navigateur saute la mise en page et le dessin des sections non visibles. contain-intrinsic -size évite que la barre de défilement saute. */ .differe{content-visibility:auto;contain-intrinsic-size:auto 700px} } @layer heritage { /* ══════════════════════════════════════════════════════════════ LES BLOCS DES PAGES INTÉRIEURES Les onze autres pages gardent leur balisage — leur contenu est juste, il a été écrit et vérifié. Ce sont leurs BLOCS qui sont repris dans la nouvelle langue : fond profond, une seule lumière ambrée, la grotesque et la mono. Rien n'est traduit ici qui ne soit déjà dans le système au-dessus. Un seul alias de compatibilité : --doux2, écrit en dur dans un style en ligne de /tarif. ══════════════════════════════════════════════════════════════ */ :root{ --doux2:var(--os-bas) } /* ── le décor : les deux calques hérités deviennent la lumière et le grain, sans toucher au balisage des pages. ───────────────── */ .halos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden} .halos::before{content:"";position:absolute;inset:-30% -10% 20% -30%; background:radial-gradient(46% 40% at 26% 12%, oklch(0.775 0.118 212 / .16),transparent 62%)} .halos > span{display:none} .paillettes{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E")} .paillettes > span{display:none} /* ── qui est ce logiciel, dans l'en-tête ────────────────────── Nicolas : « dès que quelqu'un va sur le site, il faut directement qu'il comprenne que c'est destiné à des cabinets médico-esthétiques ». La ligne vit DANS la rangée de l'en-tête : elle ne coûte pas un pixel de hauteur, et elle est là sur toutes les pages. Elle disparaît quand la barre se resserre — à ce moment-là c'est le titre de la page qui prend le relais. */ .qui-c{font-size:13px;color:var(--os-bas);white-space:nowrap; padding-left:clamp(14px,1.4vw,22px); border-left:1px solid var(--vitre-fin);line-height:1.3} @media (max-width:1279px){ .qui-c{display:none} } /* ── fil d'Ariane ─────────────────────────────────────────────── */ .fil{display:flex;flex-wrap:wrap;align-items:center;gap:9px; padding-block:16px 0;font-size:13px;color:var(--os-bas)} .fil a{color:var(--os-bas);text-decoration:none; display:inline-flex;align-items:center;min-height:44px} .fil a:hover{color:var(--ambre)} .fil em{font-style:normal;color:var(--os-bas)} /* ── l'étiquette héritée : c'est l'ancienne .sur, devenue mono ── */ .sur{display:inline-block;font-family:var(--data);font-size:11px; font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--ambre)} .fct__t .sur,.suite .sur,.pal .sur,.jrn__q{color:var(--os-bas)} /* ── le mot mis en lumière ────────────────────────────────────── */ .feuille{font-style:normal; background:linear-gradient(100deg,var(--ambre),oklch(0.905 0.072 198) 46%,var(--ambre-fort)); -webkit-background-clip:text;background-clip:text;color:transparent} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .feuille{color:var(--ambre);background:none} } /* ── l'ouverture des pages intérieures ────────────────────────── */ /* Cette proportion est celle des pages INTÉRIEURES, qui posent un relevé étroit à droite. L'accueil, lui, met une capture large : sans cette garde, la couche heritage écrasait sa grille et laissait 700 px de vide sous l'écran. */ .ouv__g:has(.ouv__aside){grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start} .ouv__g{display:grid;gap:clamp(30px,4.4vw,68px)} .ouv__filet{height:1px;margin:26px 0; background:linear-gradient(90deg,var(--ambre-nu),transparent 62%)} .ouv__dit{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.72; color:var(--os-mi);max-width:60ch} .ouv__dit b{color:var(--os);font-weight:400} .ouv__actes{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center; margin-top:30px} /* la colonne de droite : un relevé, pas une carte de plus. */ .ouv__aside{border-radius:var(--r-g);background:var(--nuit-haut); padding:clamp(20px,2.4vw,30px); box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin)} .ouv__aside dl{margin:16px 0 0} .ouv__aside dl > div{display:flex;flex-wrap:wrap;justify-content:space-between; gap:10px;padding:12px 0;border-top:1px solid var(--vitre-fin)} .ouv__aside dl > div:first-of-type{border-top:0;padding-top:0} .ouv__aside dt{font-size:14px;color:var(--os-bas)} .ouv__aside dd{margin:0;font-family:var(--data);font-size:13.5px;color:var(--os); text-align:right} /* ── le bandeau de quatre chiffres ────────────────────────────── */ .attrs{padding:clamp(26px,3.4vw,44px) 0 0} .attrs ul{list-style:none;margin:0;padding:26px 0 0; border-top:1px solid var(--vitre-fin); display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,52px)} .attrs li{min-width:0;font-size:13px;color:var(--os-bas);line-height:1.5} .attrs li b{display:block;margin-bottom:7px;font-family:var(--data); font-size:clamp(21px,2.2vw,29px);font-weight:400;color:var(--os); letter-spacing:-.01em;line-height:1.1;word-spacing:-.28em} /* ── le filet d'ornement ──────────────────────────────────────── */ .orn{height:1px;margin:clamp(34px,5vw,72px) 0 0; background:linear-gradient(90deg,transparent,var(--vitre-fin) 18%, var(--vitre-fin) 82%,transparent)} .orn i{display:none} /* ── la section générique ─────────────────────────────────────── */ .sec{padding:clamp(52px,7vw,110px) 0} /* les titres portent déjà leurs propres retours à la ligne dans le balisage : une largeur maximale par-dessus les casse en quatre. */ /* ── la liste numérotée de fonctions ──────────────────────────── */ .fct{display:grid;gap:0} .fct__l{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(20px,3vw,56px);align-items:start; padding:clamp(26px,3.2vw,44px) 0;border-top:1px solid var(--vitre-fin)} .fct__l:first-child{border-top:0;padding-top:0} .fct__g{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start} .fct__n{font-family:var(--data);font-size:11px;letter-spacing:.14em; color:var(--ambre);padding-top:7px} .fct__t h3{margin-bottom:8px} .fct__d p{font-size:15.5px;color:var(--os-bas);line-height:1.7;max-width:58ch} .fct__d p + p{margin-top:14px} .fct__d b{color:var(--os);font-weight:400} .fct__d a{color:var(--ambre);text-underline-offset:3px} /* ── le cadre d'une capture ───────────────────────────────────── */ /* Une capture posée nue sur le fond nuit fait un rectangle clair qui flotte. On lui rend les deux choses que le recadrage lui a prises : un haut de fenêtre, qui dit que c'est un logiciel et non une image, et un bas qui se dissout au lieu d'être tranché net. */ .vue{position:relative;margin-top:22px;padding-top:37px; border-radius:var(--r-g);overflow:hidden;isolation:isolate; background:linear-gradient(oklch(1 0 0 / .05),oklch(1 0 0 / 0) 37px), var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .1),0 0 0 1px var(--vitre-fin), 0 50px 100px -60px oklch(0 0 0 / .95),0 0 90px -50px oklch(0.775 0.118 212 / .3)} /* la barre : trois pastilles, le filet, et le nom de l'écran montré. Le nom vient de l'attribut, donc il ne peut pas mentir sur l'image posée juste en dessous — les deux se modifient au même endroit. */ .vue::before{content:attr(data-ecran);position:absolute;inset:0 0 auto; height:37px;line-height:37px;padding-left:68px;padding-right:18px; pointer-events:none;white-space:nowrap;overflow:hidden; text-overflow:ellipsis; font-family:var(--data);font-size:10px;letter-spacing:.15em; text-transform:uppercase;color:var(--os-bas); background: radial-gradient(circle 3.5px at 22px 19px,var(--vitre) 96%,transparent), radial-gradient(circle 3.5px at 37px 19px,var(--vitre) 96%,transparent), radial-gradient(circle 3.5px at 52px 19px,var(--vitre) 96%,transparent), linear-gradient(to bottom,transparent calc(100% - 1px),var(--vitre-fin) 0)} /* Le fondu du bas : la capture s'éteint dans le cadre. Un pourcentage seul fondrait un tiers d'une petite image ; le min() borne la hauteur du fondu sans la figer. */ .vue img{display:block;width:100%; -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - min(96px,18%)),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - min(96px,18%)),transparent)} /* Un cadre sans fondu vaut mieux qu'un cadre cassé. */ @supports not (mask-image:linear-gradient(#000,transparent)){ .vue img{-webkit-mask-image:none;mask-image:none}} .vue::after{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px oklch(1 0 0 / .05), inset 0 0 120px -60px oklch(0 0 0 / .55)} /* ── le relevé : ticket de caisse, journal des accès ──────────── */ .ticket,.jr{margin:20px 0 0;border-radius:var(--r-g);overflow:hidden; background:var(--nuit-haut);font-family:var(--data);font-size:13px; box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin)} .ticket__t,.jr__t{display:flex;justify-content:space-between;gap:12px; padding:14px 18px;background:oklch(0.24 0.010 152); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--os-mi)} .ticket__l,.ticket__r,.ticket__tot,.jr__l{display:flex;justify-content:space-between; gap:16px;padding:13px 18px;border-top:1px solid var(--vitre-fin)} .ticket__l .q,.jr__l .q{display:block;color:var(--os);font-family:var(--texte); font-size:15px;line-height:1.4} .ticket__l .q em,.jr__l .q em{display:block;margin-top:3px;font-style:normal; font-family:var(--data);font-size:11px;letter-spacing:.06em;color:var(--os-bas)} .ticket__l .m,.jr__l .m{color:var(--os-mi);white-space:nowrap; font-variant-numeric:tabular-nums} .ticket__r{color:var(--os-bas);font-size:12.5px} .ticket__tot{background:oklch(0.24 0.010 152);color:var(--os);font-size:15px} /* ── l'agenda en miniature ────────────────────────────────────── */ .ag{margin:20px 0 0;border-radius:var(--r-g);overflow:hidden; background:var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin)} .ag__t{display:flex;justify-content:space-between;gap:12px;padding:14px 18px; background:oklch(0.24 0.010 152);font-family:var(--data);font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;color:var(--os-mi)} .ag__g{display:grid;grid-template-columns:58px repeat(3,minmax(0,1fr)); font-family:var(--data);font-size:11px} .ag__c{padding:11px 12px;color:var(--os-mi);letter-spacing:.12em; text-transform:uppercase;font-size:10px;border-bottom:1px solid var(--vitre-fin)} .ag__h{padding:12px;color:var(--os-bas);border-top:1px solid var(--vitre-fin)} /* Les demi-heures portent la géométrie mais ne se lisent pas comme des repères : elles reculent d'un cran. */ .ag__h--demi{color:var(--os-mi);font-size:10px} .ag__x{display:flex;padding:8px;border-top:1px solid var(--vitre-fin); border-left:1px solid var(--vitre-fin);min-height:44px} /* Un soin d'une heure et demie occupe une heure et demie. Sans ça, la grille dément les horaires qu'elle affiche elle-même, et la case du dessous a l'air libre alors qu'elle est prise. */ .ag__x--2{grid-row:span 2} .ag__x--3{grid-row:span 3} .rdv{flex:1;border-radius:9px;padding:8px 10px; background:oklch(0.28 0.030 152);box-shadow:inset 2px 0 0 var(--vert); font-family:var(--texte)} .rdv b{display:block;font-weight:400;font-size:13px;color:var(--os)} .rdv span{display:block;margin-top:2px;font-family:var(--data);font-size:10.5px; color:var(--os-mi)} /* Le pied : la liste des heures proposées. C'est là que la démonstration se joue — pas dans l'agenda. On ne dessine pas le créneau refusé, parce qu'un créneau dessiné est un créneau qui existe, et c'est le contraire de ce que la page affirme. */ .ag__p{padding:16px 18px 18px;border-top:1px solid var(--vitre-fin)} .ag__pt{display:block;font-family:var(--data);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--os-mi)} .ag__ph{margin:10px 0 0;font-family:var(--data); font-size:clamp(15px,1.6vw,19px);letter-spacing:.06em;color:var(--os)} .ag__p p + p{margin-top:11px;font-family:var(--texte);font-size:13.5px; letter-spacing:0;line-height:1.65;color:var(--os-bas)} .ag__p b{color:var(--os);font-weight:400} /* Le trou dans la liste des heures. Il n'est pas décoré : c'est un vide, et c'est tout l'argument. */ .ag__vide{display:inline-block;min-width:4.6ch} /* Le trou ne vaut que flanqué de ses deux voisines : si la ligne se coupe là, la démonstration disparaît. */ .ag__trou{white-space:nowrap} /* ── la grille de trois paliers ───────────────────────────────── */ .paliers{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1.6vw,22px)} .pal{border-radius:var(--r-g);padding:clamp(22px,2.6vw,34px); background:oklch(0.19 0.008 152 / .55); box-shadow:inset 0 1px 0 oklch(1 0 0 / .04),0 0 0 1px var(--vitre-fin)} .pal--phare{background:var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .09),0 0 0 1px var(--ambre-nu), 0 40px 90px -60px oklch(0 0 0 / .9)} .pal .mt{display:block;margin:14px 0 6px;font-family:var(--data); font-size:clamp(34px,3.8vw,50px);font-weight:300;line-height:1;color:var(--os); letter-spacing:-.03em;word-spacing:-.3em;font-variant-numeric:tabular-nums} .pal .par{display:block;font-size:13px;color:var(--os-bas)} .pal .an{margin-top:16px;padding-top:14px;border-top:1px solid var(--vitre-fin); font-size:13.5px;color:var(--os-bas);line-height:1.6} .pal .an b{color:var(--os);font-weight:400;font-family:var(--data)} /* ── la liste de ce qui est compris ───────────────────────────── */ .inclus{list-style:none;margin:0;padding:0} .inclus li{position:relative;padding:13px 0 13px 26px;font-size:15.5px; color:var(--os-bas);line-height:1.65;border-top:1px solid var(--vitre-fin)} .inclus li:first-child{border-top:0} .inclus li::before{content:"";position:absolute;left:0;top:22px;width:5px;height:5px; border-radius:50%;background:var(--ambre)} .inclus b{color:var(--os);font-weight:400} /* ── le calculateur : la question et l'appel ──────────────────── */ .calc__q{display:block;font-size:clamp(24px,3vw,38px);line-height:1.1; letter-spacing:-.02em;color:var(--os)} .calc__act{margin-top:clamp(20px,2.4vw,30px)} .calc__r{align-items:start} .calc__d{display:block} .calc__d2{display:block} /* ── le formulaire de /essai ──────────────────────────────────── */ .demande{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,64px);align-items:start} .demande__mot h3{margin-bottom:12px} .demande__mot p{font-size:15.5px;color:var(--os-bas);line-height:1.7;max-width:56ch} .demande__mot b{color:var(--os);font-weight:400} .demande__fin{margin-top:18px;padding-top:16px; border-top:1px solid var(--vitre-fin);font-size:14px;color:var(--os-bas)} .formulaire{border-radius:var(--r-g);background:var(--nuit-haut); padding:clamp(22px,2.8vw,38px); box-shadow:inset 0 1px 0 oklch(1 0 0 / .07),0 0 0 1px var(--vitre-fin), 0 40px 90px -60px oklch(0 0 0 / .9)} .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px} .champ{display:block;margin-bottom:14px} .champ > span{display:block;margin-bottom:7px;font-family:var(--data);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--os-bas)} .champ input,.champ textarea,.champ select{width:100%;min-height:48px; padding:12px 14px;border:0;border-radius:var(--r); background:oklch(0.24 0.010 152);color:var(--os); font:inherit;font-size:15.5px; box-shadow:inset 0 0 0 1px var(--vitre-fin); transition:box-shadow var(--vif)} .champ textarea{min-height:120px;resize:vertical;line-height:1.6} .champ input::placeholder,.champ textarea::placeholder{color:oklch(0.50 0.008 152)} .champ input:focus,.champ textarea:focus,.champ select:focus{outline:0; box-shadow:inset 0 0 0 1px var(--ambre)} .formulaire label:has(input[type=checkbox]){display:grid; grid-template-columns:auto 1fr;gap:12px;align-items:start; margin:14px 0;font-size:14px;color:var(--os-bas);line-height:1.6} .formulaire input[type=checkbox]{width:22px;height:22px;min-height:0; accent-color:var(--ambre);margin-top:2px} .formulaire button[type=submit]{width:100%;justify-content:center;margin-top:8px} .formulaire a{color:var(--ambre)} #retour{margin-top:16px;padding:14px 16px;border-radius:var(--r); background:var(--ambre-nu);font-size:14.5px;color:var(--os);line-height:1.6; box-shadow:inset 0 0 0 1px var(--ambre-nu)} /* ── le formulaire d'ouverture (6 septembre) ────────────────── Il mène chez Stripe : il porte donc une adresse à composer, un prix qui bouge avec le nombre de cabines, et deux accords. */ .champ > span em{font-style:normal;color:var(--os-bas); text-transform:none;letter-spacing:.04em;font-size:10px} .dit-champ{margin:-6px 0 16px;font-size:13px;line-height:1.6;color:var(--os-bas)} .dit-champ b{color:var(--os-mi);font-weight:400} /* l'adresse du cabinet : le champ et son suffixe forment UN objet, sinon « .maisonia.be » a l'air d'être à taper aussi. */ .adresse{display:flex;align-items:stretch;border-radius:var(--r); background:oklch(0.24 0.010 152); box-shadow:inset 0 0 0 1px var(--vitre-fin); transition:box-shadow var(--vif)} .adresse:focus-within{box-shadow:inset 0 0 0 1px var(--ambre)} .adresse input{flex:1;min-width:0;background:none;box-shadow:none;border-radius:0} .adresse input:focus{box-shadow:none} .adresse b{display:flex;align-items:center;padding-right:14px;white-space:nowrap; font-family:var(--data);font-size:14px;font-weight:400;color:var(--os-mi)} /* les deux accords */ .accord{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; margin:14px 0;font-size:14px;color:var(--os-bas);line-height:1.6} /* 24 px de case, mais la cible réelle est TOUTE l'étiquette : le libellé enveloppe la case, donc un doigt qui tombe sur le texte coche. La mesure ne voit que l'élément input. */ .accord input[type=checkbox]{width:24px;height:24px;accent-color:var(--ambre); margin-top:2px} .accord a{color:var(--ambre)} /* un champ que la visiteuse a rempli de travers, dit sans crier : :user-invalid n'agit qu'APRÈS qu'elle a quitté le champ. */ .champ input:user-invalid,.champ textarea:user-invalid{ box-shadow:inset 0 0 0 1px var(--alerte)} .adresse:has(input:user-invalid){box-shadow:inset 0 0 0 1px var(--alerte)} /* ── les quatre portes de fin de page ─────────────────────────── */ .suite{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px)} .suite a{display:block;border-radius:var(--r-g);padding:clamp(20px,2.2vw,28px); text-decoration:none;background:oklch(0.19 0.008 152 / .55); box-shadow:inset 0 1px 0 oklch(1 0 0 / .04),0 0 0 1px var(--vitre-fin); transition:background var(--vif),box-shadow var(--vif),transform var(--vif)} .suite a:hover{background:var(--nuit-haut);transform:translateY(-2px); box-shadow:inset 0 1px 0 oklch(1 0 0 / .09),0 0 0 1px var(--ambre-nu)} .suite strong{display:block;margin:12px 0 8px;font-weight:400;font-size:19px; color:var(--os);letter-spacing:-.012em;line-height:1.25} .suite p{font-size:14px;color:var(--os-bas);line-height:1.6} /* ── l'appel final hérité ─────────────────────────────────────── */ .fin__filet{height:1px;width:120px;margin:22px auto; background:linear-gradient(90deg,transparent,var(--ambre),transparent)} .fin p{max-width:58ch;margin-inline:auto;font-size:clamp(16px,1.4vw,18px); line-height:1.7;color:var(--os-mi)} /* ── le journal : la liste des articles ───────────────────────── */ .jrn{display:grid;gap:0} .jrn a{display:grid;grid-template-columns:minmax(0,1fr);gap:10px; padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--vitre-fin); text-decoration:none;transition:padding-left var(--vif)} .jrn a:first-child{border-top:0;padding-top:0} .jrn a:hover{padding-left:14px} .jrn h2{font-size:clamp(21px,2.4vw,31px);line-height:1.16;max-width:26ch} .jrn a:hover h2{color:var(--ambre)} .jrn p{font-size:15px;color:var(--os-bas);line-height:1.65;max-width:66ch} .jrn__q{font-family:var(--data);font-size:11px;letter-spacing:.14em; text-transform:uppercase} /* ── l'article ────────────────────────────────────────────────── */ .art{max-width:70ch} .art h2{font-size:clamp(24px,2.8vw,36px);margin:clamp(38px,4vw,58px) 0 14px; max-width:24ch} .art h3{margin:30px 0 10px} .art p,.art li{font-size:16.5px;line-height:1.78;color:var(--os-mi)} .art p{margin-bottom:16px} .art b,.art strong{color:var(--os);font-weight:400} .art a{color:var(--ambre);text-underline-offset:3px} .art ul,.art ol{margin:0 0 18px;padding-left:22px} .art li{margin-bottom:9px} .chapo{font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--os-mi); max-width:62ch} .chapo b{color:var(--os);font-weight:400} .art__meta{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 0; margin-bottom:clamp(20px,2.4vw,32px); border-block:1px solid var(--vitre-fin); font-family:var(--data);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--os-bas)} .art__srcs{margin-top:clamp(38px,4.4vw,64px);padding-top:26px; border-top:1px solid var(--vitre-fin)} .art__srcs h2{font-family:var(--data);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--ambre);margin:0 0 14px} .art__srcs li{font-size:14px;line-height:1.6;color:var(--os-bas)} /* la citation de texte légal : le seul bloc du site qui cite. */ .loi,.reserve{margin:0 0 22px;border-radius:var(--r-g); padding:clamp(18px,2.2vw,26px);background:var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin), inset 3px 0 0 var(--ambre)} .reserve{box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin), inset 3px 0 0 var(--alerte)} .loi__q{display:block;margin-bottom:9px;font-family:var(--data);font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--ambre)} .reserve .loi__q{color:var(--alerte)} .loi p:last-child,.reserve p:last-child{margin-bottom:0} .tableau{overflow-x:auto;margin:0 0 22px;border-radius:var(--r-g); background:var(--nuit-haut); box-shadow:inset 0 1px 0 oklch(1 0 0 / .06),0 0 0 1px var(--vitre-fin)} .tableau table{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px} .tableau caption{caption-side:top;padding:14px 18px;text-align:left; font-family:var(--data);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--os-bas)} .tableau th,.tableau td{text-align:left;padding:13px 18px;vertical-align:top; border-top:1px solid var(--vitre-fin);font-weight:400;color:var(--os-mi)} .tableau th{font-family:var(--data);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--os-mi);white-space:nowrap; background:oklch(0.24 0.010 152)} .tableau td{font-variant-numeric:tabular-nums} .tableau b{color:var(--os);font-weight:400} /* ── l'aveu de /caisse-et-tva ─────────────────────────────────── */ .aveu{margin-top:clamp(26px,3vw,42px);border-radius:var(--r-g); padding:clamp(22px,2.6vw,34px);background:oklch(0.19 0.008 152 / .55); box-shadow:inset 0 1px 0 oklch(1 0 0 / .04),0 0 0 1px var(--vitre-fin)} .aveu h3{margin-bottom:10px} .aveu p{font-size:15.5px;color:var(--os-bas);line-height:1.7;max-width:62ch} .aveu p + p{margin-top:12px} /* ══════════════════════════════════════════════════════════════ CE QU'ELLE Y GAGNE, ET L'INVENTAIRE Deux blocs ajoutés le 5 septembre : la vitrine montrait le logiciel sans jamais dire ce qu'il fait ni ce qu'elle y gagne. ══════════════════════════════════════════════════════════════ */ /* Trois colonnes de largeurs différentes, séparées par un filet. Pas des cartes : trois colonnes de texte. Une grille de trois cartes identiques serait exactement le tic qu'on évite. */ .gains{display:grid;grid-template-columns:1.16fr 1fr 1fr; gap:clamp(24px,3vw,54px)} .gains > div{min-width:0;padding-left:clamp(20px,2.4vw,38px); border-left:1px solid var(--vitre-fin)} .gains > div:first-child{padding-left:0;border-left:0} .gains > div > b{display:block;font-family:var(--data);font-size:11px; font-weight:400;letter-spacing:.16em;text-transform:uppercase; color:var(--ambre)} .gains h3{margin:14px 0 12px;font-size:clamp(20px,1.9vw,25px)} .gains p{font-size:15px;color:var(--os-bas);line-height:1.7} .gains p b{color:var(--os);font-weight:400} /* L'inventaire coule en colonnes de texte plutôt qu'en grille : les groupes n'ont pas la même longueur, et c'est tant mieux. */ .inv{columns:3;column-gap:clamp(26px,3.4vw,60px);margin-top:clamp(26px,3vw,44px)} .inv section{break-inside:avoid;margin-bottom:clamp(24px,2.8vw,40px)} .inv h3{font-family:var(--data);font-size:11px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;color:var(--ambre); padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--vitre-fin)} .inv ul{list-style:none;margin:0;padding:0} .inv li{padding:9px 0;font-size:14.5px;line-height:1.55;color:var(--os-bas); border-top:1px solid oklch(0.24 0.010 152 / .55)} .inv li:first-child{border-top:0} .inv b{color:var(--os);font-weight:400} /* ── ce que l'index d'origine portait et que la refonte remplace ─ */ .gages,.halos .p3,.hero__filet{display:none} } @layer adaptations { @media (max-width:1040px){ .fct__l{grid-template-columns:1fr;gap:16px} .suite{grid-template-columns:1fr 1fr} .paliers{grid-template-columns:1fr} .inv{columns:2} } @media (max-width:620px){ .ag__g{font-size:10px;grid-template-columns:46px repeat(3,minmax(0,1fr))} .ag__x{padding:6px;min-height:38px} .rdv{padding:7px 8px} .rdv b{font-size:12px} .ag__p{padding:14px 15px 16px} } @media (max-width:900px){ /* Le nom de l'écran doit tenir sur une ligne : à cette largeur, la capture elle-même n'est plus lisible et l'étiquette est ce qui reste pour dire ce qu'on regarde. */ .vue{padding-top:33px} .vue::before{height:33px;line-height:33px;padding-left:58px; padding-right:14px;font-size:9px;letter-spacing:.09em; background: radial-gradient(circle 3px at 19px 17px,var(--vitre) 96%,transparent), radial-gradient(circle 3px at 31px 17px,var(--vitre) 96%,transparent), radial-gradient(circle 3px at 43px 17px,var(--vitre) 96%,transparent), linear-gradient(to bottom,transparent calc(100% - 1px),var(--vitre-fin) 0)} .ouv__g,.ouv__g:has(.ouv__aside){grid-template-columns:1fr;gap:32px} .demande{grid-template-columns:1fr;gap:30px} .gains{grid-template-columns:1fr;gap:0} .gains > div{padding:24px 0 0;margin-top:24px; border-left:0;border-top:1px solid var(--vitre-fin)} .gains > div:first-child{padding-top:0;margin-top:0;border-top:0} } @media (max-width:620px){ .suite{grid-template-columns:1fr} .duo{grid-template-columns:1fr} .inv{columns:1} .ag__g{grid-template-columns:46px repeat(3,minmax(0,1fr));font-size:10px} } } /* ══════════════════════════════════════════════════════════════════ CINÉMA — l'ouverture plein écran. ────────────────────────────────────────────────────────────────── Couche déclarée APRÈS `adaptations` : non listée dans l'ordre de la ligne 22, elle se range donc en dernier et l'emporte sur `blocs` comme sur `heritage`. C'est ce qui permet de rebâtir l'ouverture sans toucher aux neuf cents lignes d'avant, et de la retirer d'un bloc si elle ne convient pas. LA RÉFÉRENCE EST UNE PLATEFORME VIDÉO. Son ouverture est un mur d'images en mouvement derrière trois lignes de texte. On ne peut pas copier sa matière — nous ne vendons pas de la vidéo — mais on peut tenir le même geste avec LA NÔTRE : les six écrans du logiciel, en grand, inclinés, qui dérivent lentement. Pas de fichier vidéo : six WebP déjà présents, 337 ko au total, contre les quelques mégaoctets d'une boucle. Et rien à filmer. ══════════════════════════════════════════════════════════════════ */ @layer cinema { /* ── LE CADRE ───────────────────────────────────────────────── `svh` et non `vh` : sur mobile, `100vh` compte la barre d'adresse que le navigateur escamote au défilement, donc le titre est coupé à l'arrivée — exactement là où il ne faut pas. */ .ouv{ position:relative; min-height:100svh; display:grid; align-content:center; padding:clamp(96px,12vh,150px) 0 clamp(40px,6vh,72px); overflow:clip; isolation:isolate; } /* ── LE MUR ─────────────────────────────────────────────────── Une grille de tuiles plus large que l'écran, basculée, qui dérive. `scale` et `rotate` en propriétés distinctes : elles s'animent sans se battre avec la translation du défilement. */ .mur{ position:absolute; inset:-28% -16%; z-index:-2; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,26px); rotate:-11deg; scale:1.22; transform-origin:50% 42%; pointer-events:none; } .mur img{ width:100%; height:100%; object-fit:cover; object-position:left top; border-radius:10px; aspect-ratio:16/10; opacity:.55; /* Les captures sont claires et roses ; posées telles quelles sur un fond noir elles crient. On les désature et on les assombrit pour qu'elles redeviennent une MATIÈRE, pas un sujet. */ filter:saturate(.62) brightness(.74) contrast(1.06); box-shadow:0 0 0 1px oklch(1 0 0 / .07), 0 30px 60px -40px #000; } /* Une colonne sur deux décalée : la grille ne se lit plus comme un tableau, ce qui est tout l'enjeu. */ .mur__col{display:grid;gap:inherit} .mur__col:nth-child(2){margin-top:-11%} .mur__col:nth-child(3){margin-top:5%} .mur__col:nth-child(4){margin-top:-6%} /* ── LE VOILE ───────────────────────────────────────────────── Sans lui, aucun texte ne tient sur le mur. Deux dégradés : un vertical qui noie le haut et le bas, un radial posé à gauche, là où le titre vit. */ .ouv::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 95% at 12% 48%, oklch(0.165 0.006 250 / .97) 0%, oklch(0.165 0.006 250 / .86) 34%, oklch(0.165 0.006 250 / .40) 68%, transparent 100%), linear-gradient(to bottom, var(--nuit) 0%, oklch(0.165 0.006 250 / .55) 22%, oklch(0.165 0.006 250 / .55) 62%, var(--nuit) 97%); } /* ── LE TITRE ───────────────────────────────────────────────── C'est le changement d'ÉCHELLE, et c'est lui qui fait la moitié de l'écart avec la référence : 104 px au lieu de 48, sur une seule colonne de 15 caractères de large. */ .ouv__g{ display:block; max-width:min(960px,92vw); } .ouv h1{ margin:18px 0 26px; font-size:clamp(40px,7.1vw,104px); line-height:.96; letter-spacing:-.035em; font-weight:500; text-wrap:balance; } .ouv h1 em{font-style:normal;color:var(--cyan);background:none} .ouv .dit{ max-width:46ch; font-size:clamp(16px,1.35vw,19.5px); color:var(--os-mi); } .ouv__actes{margin-top:clamp(28px,3.4vw,44px)} /* La figure de l'ancienne ouverture : elle EST devenue le fond. */ .ouv > .env > .ouv__g > figure.vitrine{display:none} /* ── LE SOCLE ───────────────────────────────────────────────── Il sort de l'écran d'ouverture et devient la première chose qu'on gagne en défilant. Un plein écran = un message. */ .ouv .socle{ margin-top:clamp(44px,7vh,88px); border-top:1px solid var(--vitre-fin); padding-top:clamp(22px,2.6vw,34px); } /* ── LE MOUVEMENT ───────────────────────────────────────────── Une dérive de dix pour cent sur quarante secondes : au-dessous du seuil de l'attention, au-dessus du seuil de la perception. C'est ce qui fait qu'une page « respire » sans distraire. `prefers-reduced-motion` l'éteint complètement — et le mur reste parfaitement lisible à l'arrêt, donc rien n'est perdu. */ @media (prefers-reduced-motion:no-preference){ @keyframes derive{ to{ translate:0 -9% } } .mur__col{ animation:derive 46s var(--sortie) infinite alternate; will-change:translate; } .mur__col:nth-child(2){animation-duration:58s;animation-delay:-8s} .mur__col:nth-child(3){animation-duration:52s;animation-delay:-20s} .mur__col:nth-child(4){animation-duration:63s;animation-delay:-4s} } /* ── TÉLÉPHONE ──────────────────────────────────────────────── Le mur passe à deux colonnes et se redresse : à 390 px, une grille de quatre colonnes inclinée à 11° ne montre plus que des fragments illisibles, et le voile mange tout. */ @media (max-width:760px){ .ouv{min-height:92svh;padding-top:clamp(84px,14vh,120px)} .mur{grid-template-columns:repeat(2,1fr);rotate:-7deg;scale:1.5;inset:-22% -30%} .mur__col:nth-child(3),.mur__col:nth-child(4){display:none} .mur img{opacity:.42} .ouv::before{ background: linear-gradient(to bottom, oklch(0.165 0.006 250 / .93) 0%, oklch(0.165 0.006 250 / .80) 46%, var(--nuit) 92%); } .ouv h1{letter-spacing:-.028em} } } @layer cinema { /* Le lien secondaire de l'ouverture est posé sur le mur, pas sur un aplat : mesuré à 2,39:1 en encre tertiaire. Il porte l'encre principale — c'est un appel à l'action, il doit se lire. */ .ouv .lien{color:var(--os)} .ouv .lien:hover{color:var(--cyan)} } @layer cinema { /* ── LE ROSE CONTRE LE CYAN ─────────────────────────────────── Le logiciel tourne ici en coloris « bordeaux » : ses captures sont roses, et posées sur un fond froid elles deviennent la chose la plus chaude de la page — donc celle qu'on regarde, au lieu du titre. Une désaturation RETENUE les fait rentrer dans le rang sans mentir sur le produit. LA VRAIE CORRECTION N'EST PAS ICI. Le logiciel porte sept coloris, dont « glacier » (fond #CEDCE4, accent #26647A), qui est froid. Basculer le cabinet de démonstration sur glacier et reprendre les six captures donnerait des images qui appartiennent à cette page SANS AUCUN filtre — et ce serait le vrai produit, pas une version étalonnée. C'est un réglage et une reprise de captures, pas du CSS. */ .fiche .vitrine img, .vue img{ filter:saturate(.80) contrast(1.04) brightness(.98); transition:filter var(--lent); } .fiche:hover .vitrine img{filter:saturate(.95) contrast(1.02) brightness(1)} @media (prefers-reduced-motion:reduce){ .fiche .vitrine img,.vue img{transition:none} } } /* ══════════════════════════════════════════════════════════════════ ÉPURE — retirer, pas ajouter. ────────────────────────────────────────────────────────────────── Le bouton portait QUATRE ornements : un dégradé à trois arrêts, une ombre colorée de 34 px, un filet de lumière en bord haut, et des capitales en chasse fixe espacées à 0,09 em. Chacun se défend seul ; les quatre ensemble font un objet qui réclame l'attention au lieu de l'obtenir. La référence, elle, pose un aplat et rien d'autre. ══════════════════════════════════════════════════════════════════ */ @layer epure { /* ── LE BOUTON ──────────────────────────────────────────────── Un aplat, une encre sombre, huit pixels de rayon. Le survol ne décolle plus : il éclaircit. Un bouton qui lévite est un bouton qu'on remarque ; un bouton qu'on remarque n'est pas épuré. */ .cta{ padding:15px 26px; border-radius:8px; font-family:var(--texte); font-size:15px; font-weight:500; letter-spacing:-.005em; text-transform:none; background:var(--cyan); box-shadow:none; transition:background var(--vif), color var(--vif); } .cta:hover{ transform:none; background:oklch(0.835 0.105 208); box-shadow:none; } .cta--nu{ background:none; box-shadow:inset 0 0 0 1px var(--vitre); } .cta--nu:hover{ background:oklch(1 0 0 / .045); box-shadow:inset 0 0 0 1px var(--os-bas); } /* La flèche reste : ce n'est pas un ornement, c'est la direction. */ /* ── LE FILET TOURNANT ──────────────────────────────────────── Un dégradé conique animé autour des cartes au survol. C'est le genre d'effet qui impressionne une fois et fatigue ensuite, et il n'existe nulle part sur la référence. Éteint. */ .liseré::before{display:none} /* ── LES LUEURS D'AMBIANCE ──────────────────────────────────── Six sections portaient un lavis radial de teinte à 16 %. Sur un noir neutre, c'est ce qui fait « fond d'écran de carte graphique ». Ramené à 7 % : l'atmosphère reste, l'effet part. */ .ouv__fond,.preuves::before,.matiere::before,.fin::before, .quai::before,.gains::before{opacity:.45} /* ── LES OMBRES DES CARTES ──────────────────────────────────── Quatre ombres empilées par carte, dont une teintée. Deux suffisent : le contact, et la diffusion. */ .vitrine{ box-shadow: 0 0 0 1px var(--vitre-fin), 0 40px 90px -56px oklch(0 0 0 / .9); } .vue{ box-shadow: 0 0 0 1px var(--vitre-fin), 0 50px 100px -64px oklch(0 0 0 / .95); } /* Le voile dégradé posé sur chaque capture : il assombrissait le bas de l'image pour « faire profond ». L'image se suffit. */ .vitrine::after{display:none} /* ── L'OUVERTURE ────────────────────────────────────────────── Le titre perd sa troisième couleur d'accent : sur un mur d'images, deux encres suffisent, et le cyan reprend toute sa force quand il n'est plus que sur le bouton. */ .ouv h1 em{color:var(--os)} .ouv h1 em::after{ content:"";display:block;width:88px;height:2px;margin-top:clamp(20px,2.4vw,30px); background:var(--cyan); } } /* ══════════════════════════════════════════════════════════════════ PORTÉE — l'ouverture cinéma n'appartient qu'à l'accueil. ────────────────────────────────────────────────────────────────── Les onze autres pages emploient la même classe `.ouv`. Elles ont donc hérité d'un titre à 104 px — calibré pour « Le logiciel du cabinet médico-esthétique », trois lignes de trois mots — et d'un plein écran, alors que leur titre fait sept mots et qu'aucune n'a de mur derrière. Résultat : un titre qui mange l'écran et une bande vide au-dessus. `:has(.mur)` règle ça sans toucher à un seul fichier HTML : seule l'ouverture qui porte RÉELLEMENT un mur reçoit le traitement. ══════════════════════════════════════════════════════════════════ */ @layer portee { /* ── LES PAGES INTÉRIEURES ──────────────────────────────────── Elles reprennent du souffle — 68 px au lieu de 48 — sans aller jusqu'au plein écran, qui ne se justifie que par une image. */ .ouv:not(:has(.mur)){ min-height:0; display:block; padding:clamp(28px,4vw,62px) 0 clamp(32px,3.4vw,52px); overflow:visible; } .ouv:not(:has(.mur))::before{display:none} .ouv:not(:has(.mur)) .ouv__g{ display:grid; max-width:none; } .ouv:not(:has(.mur)) h1{ font-size:clamp(34px,4.6vw,68px); line-height:1.02; letter-spacing:-.028em; margin:18px 0 22px; } /* Le trait sous le titre est un geste d'ouverture : il reste à l'accueil. Ailleurs, le mot accentué reprend la couleur. */ .ouv:not(:has(.mur)) h1 em{color:var(--cyan)} .ouv:not(:has(.mur)) h1 em::after{display:none} .ouv:not(:has(.mur)) .dit{max-width:62ch} /* ── LES TITRES DE SECTION, PARTOUT ─────────────────────────── Le gain d'échelle qui vaut pour les douze pages : les titres de section montaient à 38 px, le corps à 16,5. Un rapport de 2,3 ne hiérarchise rien. À 56 px, le rapport passe à 3,4 et la page se lit en diagonale — ce que fait un visiteur pressé. */ .preuves__tete h2,.fct h2,.quai h2,.gains h2,.matiere h2{ font-size:clamp(30px,3.9vw,56px); line-height:1.03; letter-spacing:-.025em; } }