/* ═══════════════════════════════════════════════════════════════ Emmanuelle Girard Mukuna — infirmière sophrologue, Versoix Charte : voir ../../direction-artistique.md ═══════════════════════════════════════════════════════════════ */ @font-face{font-family:Erode;src:url(../fonts/erode-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Erode;src:url(../fonts/erode-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Erode;src:url(../fonts/erode-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:Erode;src:url(../fonts/erode-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Archivo;src:url(../fonts/archivo-400.woff2) format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Archivo;src:url(../fonts/archivo-500.woff2) format('woff2');font-weight:500;font-display:swap} @font-face{font-family:Archivo;src:url(../fonts/archivo-600.woff2) format('woff2');font-weight:600;font-display:swap} :root{ --nuit:#0C2831; /* le bleu du flyer, tel quel */ --encre:#22323B; --sol:#E9ECEE; /* l'eau du lac sur la photo du port, refroidie */ --sol-clair:#F4F6F7; --blanc:#FBFCFC; --sable:#EFE9DE; /* le sable du flyer, refroidi d'un cran */ /* ⚠ TROIS FONDS, ET SURTOUT SIX CHANGEMENTS. 18.09.2026 : « l'enchainement des couleurs de fond, ca fait un peu beaucoup ». Il avait raison, et le defaut n'etait pas le nombre de couleurs, c'etait le nombre de RUPTURES : une section = un fond, donc onze changements sur une page, donc une alternance mecanique. Les sections sont maintenant groupees en PIECES, et une piece peut en contenir deux, trois ou quatre : nuit le hero blanc les questions + la bascule sable les apports + la seance nuit la respiration blanc elle + le calendrier sable y venir + la mention medicale nuit ecrire + le pied Six changements au lieu de onze, et un rythme reel : chaque aplat sombre ponctue, et entre deux ponctuations on passe du clair au chaud. `--sol-clair` ne peint plus aucune section, il ne sert qu'a la barre. */ --or:#8A5D26; /* l'or vu sur fond clair, mesure a 4,73:1 sur le sable */ --or-clair:#E2B77A; /* le meme or sur fond sombre */ --gris:#5A666C; --serif:Erode,Georgia,'Times New Roman',serif; --sans:Archivo,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --courbe:cubic-bezier(.16,1,.3,1); /* ⚠ L'INTERVALLE A L'INTERIEUR D'UNE PIECE. 18.09.2026 : « les transitions entre les sections, il y a genre un espace bizarre ». Mesure : 230 px entre les questions et la bascule, 236 entre les apports et la seance, 210 entre elle et le calendrier. C'est le cout direct du regroupement en pieces : tant que les fonds differaient, la somme des deux marges se lisait comme deux salles ; sur un fond partage, elle se lit comme un trou. Une jonction interne vaut donc UN saut, pas la somme de deux marges de section. */ --saut:clamp(58px,6.6vw,96px); } *,*::before,*::after{box-sizing:border-box} html{ /* Le fond du DOCUMENT, pas seulement du body : sans lui, un dezoom sur telephone decouvre une bande blanche sous la barre collante. */ background:var(--sol-clair); overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--sol-clair); color:var(--encre); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.012em} p{margin:0} a{color:inherit} .dedans{width:min(1180px,100% - 48px);margin-inline:auto} .insecable{white-space:nowrap} .saut{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--nuit);color:#fff;padding:12px 18px;font-size:14px; } .saut:focus{left:0} /* ─── filet or : il remplace les etiquettes en majuscules espacees ─── */ .filet-or{width:46px;height:2px;background:var(--or);margin-bottom:26px} /* ─── boutons ─── */ .bouton{ font-family:var(--sans);font-size:15.5px;font-weight:500; background:var(--nuit);color:#F2F5F6;border:0;border-radius:2px; padding:15px 26px;cursor:pointer;white-space:nowrap; transition:background .3s var(--courbe); } .bouton:hover{background:#163d4a} .bouton--petit{padding:10px 17px;font-size:14px} .bouton--grand{padding:19px 34px;font-size:17px;width:100%} .bouton--clair{background:var(--or-clair);color:var(--nuit);padding:14px 34px} .bouton--clair:hover{background:#EEC894} .lien-souligne{ text-decoration:none; box-shadow:inset 0 -1px 0 var(--or); transition:box-shadow .3s var(--courbe); } .lien-souligne:hover{box-shadow:inset 0 -3px 0 var(--or)} button.lien-souligne{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:inherit} /* ═══ BARRE ═══ */ /* ⚠ ELLE EST TRANSPARENTE TANT QU'ON EST EN HAUT, et elle se pose dès qu'on défile. Depuis que le premier écran est bleu nuit, une barre claire y dessinait un bandeau blanc en travers, et c'était la première chose qu'on voyait du site. La classe `.barre--pose` est mise par le script : sans lui, la barre est simplement posée, ce qui est l'état sûr. */ .barre{ position:sticky;top:0;z-index:60; /* ⚠ NUIT, PAS TRANSPARENT. Transparente, elle laissait voir le fond clair du document et non le hero : une barre collante reste DANS le flux, elle n'est jamais posée par-dessus la section qui la suit. En bleu nuit elle prolonge le hero sans couture, et se change en clair au défilement. */ background:var(--nuit);border-bottom:1px solid transparent; transition:background .45s var(--courbe),border-color .45s var(--courbe), box-shadow .45s var(--courbe); } /* ⚠ ELLE ETAIT UN VERRE DEPOLI GRIS, C'EST-A-DIRE LE REFLEXE. Elle est maintenant le papier du flyer : c'est la seule matiere que ce site possede, et une barre qui flotte au-dessus de la page doit etre faite de quelque chose. */ .barre--pose{ /* Opaque, et sans flou de fond : a 96 % le flou ne montrait rien, et il forcait la barre dans sa propre couche, ce qui prive tout son texte de l'anticrenelage sous-pixel. On paie de la lisibilite pour rien. */ background:var(--sable); border-bottom-color:rgba(138,93,38,.32); box-shadow:0 16px 28px -24px rgba(12,40,49,.8); } /* En haut du hero, la barre est sur le bleu nuit : son encre doit être claire. */ .barre:not(.barre--pose) .barre-nom b{color:#EFF4F5} .barre:not(.barre--pose) .barre-nom span, .barre:not(.barre--pose) .barre-nav a{color:rgba(224,235,238,.78)} .barre:not(.barre--pose) .barre-nav a:hover{color:#EFF4F5} .barre:not(.barre--pose) .barre-nav .tel{color:#EFF4F5} /* ⚠ IL ETAIT UN BOUTON FANTOME. Un contour de 1 px a 55 % sur du bleu nuit ne se voit pas : c'est la forme qui porte un bouton, pas son filet. Il est plein dans les deux etats, et c'est le meme objet qui change de sol. */ .barre .bouton{padding:12px 24px;font-size:15px} .barre:not(.barre--pose) .bouton{background:var(--or-clair);color:var(--nuit);font-weight:600} .barre:not(.barre--pose) .bouton:hover{background:#EEC894} .barre--pose .bouton{box-shadow:0 12px 20px -14px rgba(12,40,49,.65)} .barre-in{ width:min(1180px,100% - 48px);margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:24px; padding:13px 0; } .barre-nom{text-decoration:none;display:block;line-height:1.3} .barre-nom b{display:block;font-family:var(--serif);font-weight:500;font-size:17.5px} .barre-nom span{display:block;font-size:12.5px;color:var(--gris)} .barre-nav{display:flex;align-items:center;gap:26px;font-size:14.5px} /* ⚠ :not(.bouton) EST INDISPENSABLE, ET CE N'EST PAS DECORATIF. « Me contacter » est un : sans l'exclusion, `.barre-nav a` (0,1,1) battait `.bouton` (0,1,0) et repeignait son texte en gris de corps. Mesure sur les pixels : #5A666C sur #0C2831, soit 2,55:1, c'est-a-dire illisible. Benjamin l'a vu a l'oeil avant que je le mesure. */ .barre-nav a:not(.bouton){text-decoration:none;color:var(--gris);transition:color .25s} .barre-nav a:not(.bouton):hover{color:var(--encre)} .barre-nav .bouton{text-decoration:none;color:#F7FAFA} .barre-nav .tel{font-weight:500;color:var(--encre);font-variant-numeric:tabular-nums} /* ═══ HERO ═══ ⚠ IL ÉTAIT BLANC, IL EST MAINTENANT SOMBRE. Benjamin : « le héros est beaucoup trop simple [...] fais en sorte que ça soit pas complètement blanc du côté du titre [...] il n'a pas l'effet tape-à-l'œil que je voudrais ». Le bleu nuit est SA couleur : c'est celle du flyer imprimé qu'elle a validé après six allers-retours, et le flyer est lui aussi une image sombre. Le premier écran cesse donc d'être un mur clair avec une photo à droite : il devient une pièce dans laquelle la photo entre par la droite. Il ne porte plus que le surtitre, le grand titre et un lien. Les cinq questions sont parties dans leur propre section : un titre de cette taille a besoin d'être seul. ═══════════════════════════════════════════════════════════════════ */ .hero{ position:relative; display:flex;align-items:center; min-height:min(88vh,860px); padding:clamp(70px,9vw,128px) 0 clamp(60px,7vw,100px); overflow:hidden; background:var(--nuit);color:#EAF1F3; } .hero-fond{ position:absolute;top:0;right:0;bottom:0;width:62%; background:url(../img/cabinet-fauteuil.jpg) center 78% / cover no-repeat; /* ⚠ SEPT PALIERS AU LIEU DE QUATRE. La pièce n'apparaît plus, elle affleure. Benjamin : « un peu le diluer [...] essaye de naturaliser le truc ». Le masque court désormais sur toute la largeur du bloc au lieu d'être fini aux deux tiers : il n'y a plus d'endroit où la photo « commence ». */ -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 15%,rgba(0,0,0,.24) 30%,rgba(0,0,0,.46) 44%,rgba(0,0,0,.68) 58%,rgba(0,0,0,.86) 74%,#000 92%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 15%,rgba(0,0,0,.24) 30%,rgba(0,0,0,.46) 44%,rgba(0,0,0,.68) 58%,rgba(0,0,0,.86) 74%,#000 92%); } /* Le voile est du bleu nuit, pas du blanc : c'est lui qui pose l'encre sur laquelle le titre se lit, et il laisse la pièce respirer à droite. Le fond ne bouge pas au défilement, un parallaxe ferait gadget sur une page qui se lit. */ .hero-voile{ position:absolute;inset:0; /* Deux degrades. Le vertical fond la barre dans la photo : sans lui, le bleu de la barre rencontre le mur clair de la piece sur une ligne franche, et cette couture est la premiere chose qu'on voit. */ background: linear-gradient(180deg,rgba(12,40,49,.94) 0%,rgba(12,40,49,.52) 7%,rgba(12,40,49,0) 17%), /* ⚠ LE VOILE NE DESCEND PLUS À ZÉRO. Il s'arrêtait à .04, donc la partie droite de la photo n'était plus teintée du tout et la chaise « sortait » du bleu d'un coup. Avec un plancher à .24, toute l'image baigne dans la même encre : on passe d'un aplat à une photographie sans jamais voir l'endroit où l'un devient l'autre. */ linear-gradient(94deg, rgba(12,40,49,.97) 0%, rgba(12,40,49,.945) 30%, rgba(12,40,49,.87) 44%, rgba(12,40,49,.74) 56%, rgba(12,40,49,.60) 67%, rgba(12,40,49,.45) 78%, rgba(12,40,49,.32) 89%, rgba(12,40,49,.24) 100%); } .hero-in{ position:relative; width:min(1180px,100% - 48px);margin-inline:auto; display:flex;align-items:center;justify-content:space-between; gap:clamp(28px,4.5vw,66px); } .hero-texte{max-width:760px} /* ⚠ EN CASSE NATURELLE, PAS EN MAJUSCULES ESPACÉES. L'eyebrow tout-capitales est le tic n° 1 du rendu généré, et il n'a rien à faire sur un cabinet de santé. C'est une ligne d'adresse, elle se lit comme telle. */ /* ⚠ CE N'EST PLUS UNE LIGNE AU-DESSUS DU TITRE, C'EST UNE LIGNE DE PLACE. 18.09.2026, Benjamin : « c'est quasi comme avant, apportes-y un reel changement ». Il avait raison : j'avais change un separateur et deux pixels, et l'objet restait le meme, un intitule flottant au-dessus d'un titre, c'est-a-dire l'eyebrow, c'est-a-dire le tic. La ligne porte deux faits, ce que c'est et ou c'est. Le filet ne les separe plus : il les RELIE, en occupant toute la distance entre eux, et il tient toute la largeur du bloc de titre, ou il fait linteau. C'est la forme d'un en-tete de papier a lettres et d'une legende de carte, pas celle d'une etiquette. Deux registres du meme serif, aucune majuscule espacee : le lieu passe en italique, la voix basse que la page emploie deja pour sa phrase de bascule et pour sa mention medicale. */ .hero-sur{ display:flex;align-items:center; gap:clamp(14px,1.45vw,22px); /* ⚠ LA MESURE DU LINTEAU EST CELLE DU TITRE, PAS UN CHIFFRE ROND. Le h1 est borne a 16ch ; dans Erode un ch vaut .529em, donc sa largeur vaut 8,47 fois sa taille, elle-meme clamp(37px,5.4vw,74px). Le filet suit exactement la meme courbe : il tombe au pixel sur le bord droit du titre a toutes les largeurs d'ecran, au lieu de le depasser des qu'on quitte 1440 px. */ width:100%;max-width:min(100%,clamp(313px,45.7vw,626px)); color:var(--or-clair); margin-bottom:clamp(28px,3.3vw,42px); } .hs-quoi{ flex:none;white-space:nowrap; font-family:var(--serif);font-weight:400; font-size:clamp(17px,1.95vw,27px);line-height:1;letter-spacing:-.008em; } .hs-ou{ flex:none;white-space:nowrap; font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(15px,1.55vw,21px);line-height:1;letter-spacing:.055em; } /* 3,38:1 mesure sur le nuit : au-dessus du seuil des elements graphiques, et assez bas pour qu'un filet long ne crie pas. */ .hs-fil{ flex:1 1 auto;min-width:20px;height:1px; background:currentColor;opacity:.55; transform-origin:left center; } /* Le filet part du cabinet et VA jusqu'au lieu ; « Versoix » se pose quand il arrive. Un geste qui dure 1,5 s la ou la page en met 0,85 ailleurs : c'est le premier mouvement que l'oeil voit, et il donne le tempo du reste. */ html.anim .hero-sur .hs-quoi, html.anim .hero-sur .hs-ou{opacity:0;transform:translateY(9px)} html.anim .hero-sur .hs-fil{transform:scaleX(0)} html.anim .hero-sur.vu .hs-quoi{ opacity:1;transform:none; transition:opacity .8s var(--courbe),transform .8s var(--courbe); } html.anim .hero-sur.vu .hs-fil{ transform:none; transition:transform 1.15s var(--courbe) .34s; } html.anim .hero-sur.vu .hs-ou{ opacity:1;transform:none; transition:opacity .8s var(--courbe) .82s,transform .8s var(--courbe) .82s; } .hero h1{ font-size:clamp(37px,5.4vw,74px); line-height:1.06; letter-spacing:-.026em; color:#F2F7F8; max-width:16ch; } .hero-lien{margin-top:clamp(32px,3.8vw,48px)} .hero-lien a{ font-family:var(--sans);font-size:16px;text-decoration:none;color:#EAF1F3; padding-bottom:5px;box-shadow:inset 0 -1px 0 var(--or-clair); transition:box-shadow .3s var(--courbe); } .hero-lien a::after{content:'→';margin-left:11px} .hero-lien a:hover{box-shadow:inset 0 -2px 0 var(--or-clair)} /* ─── LES CINQ QUESTIONS ─────────────────────────────────────────── Ses mots, dans son ordre. Pas de puces : une puce ferait liste de courses, et ce sont des questions posées à quelqu'un. Le rythme vient des longueurs inégales, qui sont les siennes, et de l'arrivée successive. La dernière passe en encre pleine : c'est la plus lourde des cinq (« partout, tout le temps »), et elle doit peser plus. ───────────────────────────────────────────────────────────────── */ /* La section porte le blanc le plus clair de la page, juste après le bleu nuit du premier écran : c'est le contraste le plus fort des onze sections, et il tombe à l'endroit où l'on passe de « qui parle » à « ce qui vous amène ». */ .demande{background:var(--blanc);padding:clamp(72px,9vw,124px) 0 var(--saut)} .demande + .bascule{padding-top:0} /* pas de max-width sur le conteneur : il centrait la colonne et la décalait de 110 px vers la droite, seule section de la page à l'être */ /* ⚠ UN FIL QUI SE REMPLIT PENDANT QUE LES QUESTIONS ARRIVENT. Benjamin : « c'est un peu trop simple, un fond blanc avec les différentes phrases ». Le trait met 4,2 s à descendre, c'est-à-dire exactement le temps que mettent les cinq questions à se poser. Ce n'est donc pas une décoration à côté du texte : c'est la même durée, rendue visible. Et c'est le vocabulaire que la page emploie déjà trois fois, le trait qui se dessine : les filets de section, et le carré de la respiration. */ .questions{ list-style:none;margin:0;position:relative; padding-left:clamp(24px,3.4vw,52px); } .questions::before,.questions::after{ content:'';position:absolute;left:0;top:.4em;width:1px; } .questions::before{bottom:.45em;background:rgba(154,106,46,.24)} .questions::after{height:0;background:var(--or)} html.anim .questions.remplir.vu::after{ height:calc(100% - .85em); transition:height 4.2s linear; } .questions li{ font-family:var(--serif); font-size:clamp(20px,2.15vw,28px); line-height:1.34;letter-spacing:-.015em; color:var(--gris); margin-bottom:.34em; } .questions li:last-child{color:var(--encre);margin-bottom:0} /* Le souffle : 800 ms entre deux questions, donc quatre secondes pour les cinq, soit exactement un temps de la respiration en carré pratiquée plus bas. Personne ne le remarquera, et c'est vrai quand même. L'état de départ n'existe que si le script a posé `.anim` : sans lui, les cinq questions sont là, entières. */ /* La bascule ferme le premier écran. Elle est en encre pleine quand les questions sont en gris : c'est la seule des six lignes qui répond. */ /* Décalée sous les questions, et pas alignée sur elles : c'est la réponse, elle ne fait pas partie de la liste. */ .demande-ou{ margin-top:clamp(40px,5vw,66px);max-width:34ch; margin-left:clamp(24px,14vw,230px); font-family:var(--serif);font-style:italic; font-size:clamp(20px,2.1vw,27px);line-height:1.46; letter-spacing:-.014em;color:var(--gris); } .demande-ou b{font-style:normal;font-weight:400;color:var(--encre)} /* elle arrive après les cinq, donc au sixième temps */ .demande-ou.vu{animation-delay:4000ms} html.anim .souffle{opacity:0} html.anim .souffle.vu{opacity:1;animation:souffle 1.15s var(--courbe) backwards} @keyframes souffle{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .souffle:nth-child(2).vu{animation-delay:800ms} .souffle:nth-child(3).vu{animation-delay:1600ms} .souffle:nth-child(4).vu{animation-delay:2400ms} .souffle:nth-child(5).vu{animation-delay:3200ms} /* La plaque : un cabinet qui ouvre pose une plaque. Seule chose chaude de la page, elle porte le papier creme du flyer. Centree a l'interieur, parce qu'une plaque de cabinet l'est. */ .plaque{ flex:none;width:clamp(228px,21vw,286px); position:relative; /* Une plaque se visse sur un MUR. Centrée verticalement, elle tombait sur l'assise du fauteuil, ce qui n'a aucun sens physique et se voit. */ align-self:flex-start;margin-top:clamp(0px,2vw,26px); background:#F7F2E7; padding:26px 24px 21px; text-align:center; box-shadow:0 22px 50px rgba(12,40,49,.24),0 2px 6px rgba(12,40,49,.12); } .plaque::before{content:'';position:absolute;inset:9px;border:1px solid rgba(154,106,46,.42);pointer-events:none} .plaque-nom{font-family:var(--serif);font-size:clamp(20px,1.7vw,23px);line-height:1.24;color:var(--nuit);letter-spacing:-.01em} .plaque-titre{margin-top:7px;font-size:13px;color:var(--or)} .plaque-filet{display:block;width:38px;height:1px;background:rgba(154,106,46,.55);margin:15px auto} .plaque-lieu{font-size:13.6px;line-height:1.62;color:var(--encre)} /* La plaque porte la DATE d'ouverture, pas une liste d'agréments. C'est ce qu'une vraie plaque de cabinet qui ouvre porte, et c'est aussi la seule chose vraie aujourd'hui : l'ASCA et le RME ne sont pas acquis. */ /* ⚠ Une plaque de cabinet qui OUVRE porte sa date, et cette date etait la plus petite ligne du premier ecran alors que c'est la seule information qui change ce que le visiteur fera. Le libelle reste discret, le mois passe au niveau du sous-titre de la plaque. */ .plaque-mention{margin-top:15px;font-size:11.8px;line-height:1.5;color:#6E6250;letter-spacing:.01em} .plaque-mention b{display:block;margin-top:4px;font-family:var(--serif);font-size:17.5px;font-weight:500;letter-spacing:-.012em;color:var(--or)} /* ═══ CE QUE LA SOPHROLOGIE APPORTE ═══ */ .apports{background:var(--sable);padding:clamp(66px,8vw,118px) 0 var(--saut)} .apports + .seance{padding-top:0} .apports-in{display:grid;grid-template-columns:minmax(210px,296px) 1fr;gap:clamp(32px,5vw,84px);align-items:stretch} .apports-tete{display:flex;flex-direction:column} .apports h2{font-size:clamp(26px,2.9vw,36px);line-height:1.16} /* au pied de la colonne, comme une note de bas de page l'est */ .apports-note{ margin-top:auto;padding-top:24px;font-size:15.6px;color:var(--gris); font-family:var(--serif);font-style:italic; } .indications{margin:0} .indications>div{ display:grid;grid-template-columns:134px 1fr;gap:0 26px; border-top:1px solid rgba(154,106,46,.55); padding:19px 0 18px;align-items:baseline; } .indications>div:last-child{border-bottom:1px solid rgba(154,106,46,.55)} .indications dt{font-size:13.6px;font-weight:600;color:var(--or);padding-top:.36em} .indications dd{ margin:0;font-family:var(--serif); font-size:clamp(18px,1.8vw,23px);line-height:1.38;letter-spacing:-.008em; } /* ═══ LA SÉANCE ═══ */ .seance{background:var(--sable);padding:clamp(72px,9vw,128px) 0 clamp(70px,8.5vw,118px)} .seance h2{font-size:clamp(28px,3.4vw,43px);line-height:1.14;max-width:19ch} .moments{margin-top:clamp(36px,4.4vw,62px);max-width:860px} .moments p{ font-family:var(--serif); font-size:clamp(17.5px,1.55vw,21px);line-height:1.58; margin-bottom:clamp(26px,3vw,40px); } .moments p:last-child{margin-bottom:0} /* Entree en vedette : le moment annonce la phrase au lieu de la surplomber. C'est la forme d'un texte suivi, pas d'une frise. */ .moments b{font-weight:500;color:var(--or)} .m-a{max-width:640px} .m-b{max-width:720px;margin-left:clamp(0px,3vw,54px)} .m-c{max-width:560px} .m-d{max-width:690px;margin-left:clamp(0px,3vw,54px)} .seance-corps{ display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,330px); gap:clamp(30px,4vw,66px);align-items:end; } .rassure{ max-width:none; background:var(--blanc);padding:clamp(26px,2.8vw,34px); } /* Le filet va d'un bord a l'autre du panneau. Une barre qui s'arrete au milieu du vide se lit comme une bordure oubliee, pas comme un choix. */ .rassure-titre{ font-family:var(--serif);font-size:18.5px;color:var(--nuit); padding-bottom:13px;margin-bottom:14px; border-bottom:1px solid rgba(154,106,46,.5); } .rassure p{font-size:16px;line-height:1.68;color:#5C5548} /* ═══ BANDE DE LUMIÈRE ═══ */ /* ⚠ ELLE N'EST PLUS UNE BANDE, C'EST UNE LUEUR. Benjamin : « on dirait que c'est plus un bug qu'autre chose ». Elle était une figure autonome de 150 px posée entre une section claire et l'aplat bleu nuit : deux coupures franches en trois centimètres. Elle est maintenant DANS la section sombre, en haut, et trois choses la fondent : un masque vertical qui la fait disparaître vers le bas, `mix-blend-mode:screen` qui fait qu'elle ÉCLAIRE le bleu au lieu de se poser dessus, et une opacité basse. Le jaune de la lumière sur le mur devient la lueur par laquelle on entre dans la pièce. */ .bande-lumiere{ position:absolute;top:0;left:0;right:0;z-index:0; margin:0;height:clamp(170px,26vw,360px);overflow:hidden; opacity:.46;mix-blend-mode:screen;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.50) 52%,rgba(0,0,0,.20) 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 26%,rgba(0,0,0,.50) 52%,rgba(0,0,0,.20) 76%,transparent 100%); } .bande-lumiere img{width:100%;height:100%;object-fit:cover;object-position:68% 45%} /* ═══ LA RESPIRATION EN CARRÉ ═══ */ .respire{ position:relative;overflow:hidden; /* ⚠ SANS CETTE LIGNE, LA SECTION ENTIÈRE S'ÉCLAIRCIT. Un enfant en mix-blend-mode force la composition de tout le groupe : la lueur du haut et le grain en overlay se mettaient à se mélanger au fond de la PAGE au lieu de rester dans la section. isolation:isolate referme le groupe. */ isolation:isolate; background:var(--nuit);color:#DCE5E8; padding:clamp(74px,9vw,126px) 0 clamp(66px,8vw,110px); text-align:center; } .respire-fond{position:absolute;inset:0;opacity:.085} .respire-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .respire-in{position:relative;z-index:1;width:min(720px,100% - 48px);margin-inline:auto} .respire h2{font-size:clamp(28px,3.4vw,42px);color:#F0F5F6} .respire-sous{ margin:18px auto 0;max-width:46ch; font-size:16.5px;line-height:1.66;color:#A9BCC3; } .carre-zone{position:relative;width:min(268px,72vw);aspect-ratio:1;margin:clamp(38px,5vw,58px) auto clamp(26px,3vw,36px)} .carre{width:100%;height:100%;overflow:visible} .carre-piste{fill:none;stroke:rgba(226,183,122,.17);stroke-width:2} .carre-trace{ fill:none;stroke:var(--or-clair);stroke-width:2.5;stroke-linecap:square; stroke-dasharray:640;stroke-dashoffset:640; } .carre-mot{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:clamp(21px,2.4vw,27px);color:#F0F5F6; transition:opacity .5s var(--courbe); } .carre-compte{margin-top:15px;font-size:13.5px;color:#8FA5AD;min-height:20px} .respire-pied{ margin-top:clamp(32px,4vw,50px); font-family:var(--serif);font-style:italic;font-size:15.5px;color:#8FA5AD; } /* ═══ ELLE ═══ */ .elle{background:var(--sable);padding:clamp(72px,8.5vw,124px) 0 clamp(64px,7.5vw,104px)} .elle-in{ display:grid;grid-template-columns:minmax(260px,430px) 1fr; gap:clamp(36px,5.5vw,82px);align-items:center; } /* ⚠ LA PHOTO EST UN TIRAGE MONTE, PAS UNE VIGNETTE. La seule photo dont on dispose est une photo de vacances au restaurant. Recadree serre, il n'en restait que le visage, et serrer un JPEG de telephone ne fait qu'y fabriquer du grain. Elle est donc recadree LARGE, au carre, en couleur : on la voit en entier, attablee au bord de l'eau, et la bouee orange passe derriere son epaule ou elle se lit comme du decor de rive. Le cadre fait le reste du travail : passe-partout blanc, marge basse plus haute que les trois autres, plaque dedans, et une seconde feuille couleur sable decalee derriere. Elle reste a remplacer par un vrai portrait. */ .portrait{margin:0} .portrait-cadre{ position:relative;background:var(--blanc); padding:clamp(13px,1.3vw,17px); box-shadow:clamp(12px,1.5vw,20px) clamp(12px,1.5vw,20px) 0 rgba(138,93,38,.15), 0 0 0 1px rgba(34,50,59,.09); } .portrait-vue{overflow:hidden} .portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} /* La plaque se centre alors que toute la page s'aligne a gauche. C'est volontaire : une plaque de cadre se centre sous l'image, partout. */ .portrait figcaption{ text-align:center; padding:clamp(16px,1.7vw,22px) 6px clamp(6px,.7vw,9px); } .portrait-role{ display:block;font-family:var(--serif);font-size:clamp(17px,1.65vw,20px); color:var(--nuit);line-height:1.3; } .portrait-lieu{ display:block;margin-top:7px; font-family:var(--sans);font-size:12.6px;letter-spacing:.09em; text-transform:none;color:var(--or); } .portrait-lieu::before{content:'';display:block;width:24px;height:1px; background:rgba(138,93,38,.45);margin:0 auto 9px} .elle h2{font-size:clamp(30px,3.7vw,50px);line-height:1.08;letter-spacing:-.02em;margin-bottom:18px} .elle-texte .elle-dabord{ font-family:var(--serif);font-style:italic; font-size:clamp(19px,1.9vw,24px);color:var(--or); margin-bottom:clamp(22px,2.4vw,30px); } .elle-texte .chiffre{ font-family:var(--serif);font-size:clamp(18px,1.75vw,22px); line-height:1.52;color:var(--nuit); padding-bottom:clamp(20px,2.2vw,28px);margin-bottom:clamp(22px,2.4vw,30px); border-bottom:1px solid rgba(138,93,38,.3); } .elle-texte .chiffre b{font-weight:500;color:var(--or)} .elle-texte p{margin-bottom:17px;max-width:54ch;font-size:16.8px} .elle-texte .filet-or{margin-bottom:26px} .elle-texte b{font-weight:600} @media (max-width:820px){ .elle-in{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)} .portrait{max-width:420px} .portrait-cadre{box-shadow:12px 12px 0 rgba(138,93,38,.15),0 0 0 1px rgba(34,50,59,.09)} } /* ═══ LE CABINET, Y VENIR ═══ */ /* 18.09.2026 : « la section le cabinet, mets fond blanc ». La mention medicale suit, elles forment une seule piece : le sable ne subsisterait qu'en bande de 300 px coincee entre du blanc et du nuit, c'est-a-dire le defaut corrige ce matin. Tous les contrastes de la piece y gagnent, le blanc etant plus clair que le sable (l'or passe de 4,73 a 5,52). */ .venir{background:var(--blanc)} .venir-photo{margin:0;position:relative} .venir-photo img{width:100%;height:clamp(230px,34vw,430px);object-fit:cover;object-position:50% 34%} .venir-photo figcaption{ position:absolute;right:0;bottom:0; padding:7px 14px 6px; background:rgba(12,40,49,.58); font-size:11px;color:rgba(255,255,255,.92); } .venir-bloc{padding:clamp(46px,5.5vw,78px) 0 0} .venir-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px)} .venir h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:16px} .venir h3{font-size:18px;font-weight:500;margin-bottom:14px} .venir p{font-size:16.3px;line-height:1.72;color:var(--gris)} .venir .adresse{font-size:17px;color:var(--encre);line-height:1.7} .venir a{color:var(--encre)} /* ═══ ÉCRIRE ═══ Remplace la prise de rendez-vous. Il n'y a pas de créneau à réserver avant décembre, et un agenda qui ne peut rien honorer est une promesse qu'on ne tient pas. Les deux coordonnées sont des CIBLES, pas des lignes de texte : sur téléphone, on appelle depuis cette page. */ .ecrire{background:var(--nuit);color:#EAF1F3;padding:clamp(66px,8vw,112px) 0 clamp(46px,5vw,70px)} .ecrire + .pied{padding-top:clamp(42px,4.6vw,64px)} .ecrire-in{display:grid;grid-template-columns:1fr minmax(320px,430px);gap:clamp(34px,5vw,74px);align-items:center} .ecrire h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:20px;color:#F2F7F8} .ecrire-mot{font-size:17px;line-height:1.72;max-width:48ch;color:#A9BCC3} .ecrire-coord{display:flex;flex-direction:column;gap:14px} /* Un seul papier dans cette piece : la fiche telephone et le mot sont la meme feuille. Deux blancs differents cote a cote se lisent comme une erreur, pas comme une distinction. */ .ecrire-mots .coord{ margin-top:clamp(28px,3.2vw,38px);max-width:340px; background:var(--sable); } .ecrire-direct{margin-top:16px;font-size:15.4px;color:#A9BCC3} .ecrire-direct a{color:#EAF1F3;text-decoration:none;box-shadow:inset 0 -1px 0 var(--or-clair)} .ecrire-direct a:hover{box-shadow:inset 0 -2px 0 var(--or-clair)} /* ─── le mot a Emmanuelle ─── */ .billet{background:var(--sable);padding:clamp(28px,3vw,38px) clamp(26px,2.9vw,38px) clamp(26px,2.9vw,38px)} .billet-date{ font-family:var(--serif);font-size:15.6px;line-height:1.5;color:var(--nuit); padding-bottom:14px;margin-bottom:clamp(22px,2.4vw,28px); border-bottom:1px solid rgba(138,93,38,.5); } .billet-date b{font-weight:500;color:var(--or)} .billet-champ{margin-bottom:clamp(18px,2vw,24px)} .billet-champ label{ display:block;font-family:var(--sans);font-size:12.6px;letter-spacing:.03em; color:var(--gris);margin-bottom:7px; } /* Le seul champ facultatif le dit, et il dit surtout a quoi il sert. « (facultatif) » aurait renseigne le formulaire ; « si vous preferez un appel » renseigne la personne. Mesure sur le sable : 4,73:1 a 12,4 px. */ .billet-champ label .opt{ font-family:var(--serif);font-style:italic;font-size:12.4px; letter-spacing:0;color:var(--or);margin-left:6px; } .billet-champ input,.billet-champ textarea{ display:block;width:100%; font-family:var(--sans);font-size:16.4px;line-height:1.6;color:var(--encre); background:transparent;border:0;border-bottom:1px solid rgba(34,50,59,.26); border-radius:0;padding:6px 0 9px; transition:border-color .3s var(--courbe),box-shadow .3s var(--courbe); } .billet-champ textarea{resize:vertical;min-height:88px} .billet-champ input:focus,.billet-champ textarea:focus{ outline:0;border-bottom-color:var(--or);box-shadow:0 1px 0 var(--or); } .billet-champ.manque input,.billet-champ.manque textarea{border-bottom-color:#A33B2A} .billet-champ.manque label{color:#A33B2A} .billet-envoi{width:100%;margin-top:6px} .billet-note{ margin-top:15px;font-size:13.4px;line-height:1.65;color:var(--gris); } .billet-note.fait{color:var(--or);font-weight:500} @media (max-width:980px){ .billet{margin-top:4px} } /* Sur l'aplat sombre, les deux coordonnées sont des plaques claires : ce sont les deux seules choses à toucher de toute la page, elles doivent avancer. */ .coord{ display:block;text-decoration:none; background:#F7F9F9; padding:20px 24px; border-left:2px solid var(--or); transition:transform .35s var(--courbe),box-shadow .35s var(--courbe); } .coord:hover{transform:translateX(5px);box-shadow:0 14px 30px rgba(0,0,0,.28)} .coord span{display:block;font-size:12.6px;color:var(--gris);margin-bottom:3px} .coord b{ display:block;font-family:var(--serif);font-weight:500; font-size:clamp(19px,1.7vw,23px);color:var(--nuit); letter-spacing:-.012em;font-variant-numeric:tabular-nums; } /* Sa mention médicale, mot pour mot, seule sur son fond. C'est la dernière chose lue avant de quitter la page : dans le pied, elle aurait eu le statut d'une ligne de copyright. */ .mention-med{ background:var(--blanc); width:100%;margin:0; padding:var(--saut) 0 clamp(62px,7vw,94px); font-family:var(--serif);font-style:italic; font-size:clamp(18px,1.95vw,23px);line-height:1.58;color:var(--encre); text-align:center;letter-spacing:-.004em; } .mention-med span{display:block;width:min(840px,100% - 48px);margin:0 auto} /* Elle partage son fond avec l'adresse : le filet dit ou l'une finit et ou l'autre commence, et c'est le meme filet que partout ailleurs. */ .mention-med span::before{content:'';display:block;width:46px;height:1px; background:rgba(138,93,38,.42);margin:0 auto clamp(26px,3vw,36px)} /* ═══ PIED ═══ */ .pied{background:var(--nuit);color:#9FB4BC;padding:clamp(52px,6vw,78px) 0 30px;font-size:14.6px;line-height:1.74} .pied-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px} .pied-nom{font-family:var(--serif);font-size:20px;color:#EAF1F3;margin-bottom:8px} .pied-titre{font-size:12.5px;color:var(--or-clair);margin-bottom:8px} .pied a{color:#C9D8DD;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(226,183,122,.4)} .pied-signature{ width:min(1180px,100% - 48px);margin:clamp(40px,5vw,62px) auto 0; padding-top:20px;border-top:1px solid rgba(226,183,122,.22); font-size:12.5px;color:#7E959D; } .pied-signature b{color:#B9CBD1;font-weight:600} /* ═══ LA BASCULE ═══ La page passe du constat à l'issue. Elle change d'environnement pour le dire avant le texte : une page se lit comme une suite de pièces, pas comme un mur repeint de la même couleur du haut en bas. Le « Ou peut-être… » est en grand et en italique : c'est la seule phrase de la page qui répond directement aux cinq questions du premier écran. */ /* le bleu pâle du lac : la page cesse d'être six gris à la suite */ .bascule{background:var(--blanc);padding:clamp(70px,8.5vw,120px) 0 clamp(64px,7.5vw,104px)} /* ⚠ SON PORTRAIT A REMONTE, ET IL A SA PROPRE PIECE. 18.09.2026 : « ca fait une longue continuite de blanc », et « entre les deux sections il y a un espace bizarre » sur telephone. Les deux remarques n'en font qu'une. Sur ordinateur sa section est une grille a deux colonnes, photo a gauche et nom a droite : elle s'annonce d'elle-meme. Sur telephone la grille s'empile, la photo passe EN PREMIER, sans titre au-dessus, et le lecteur voyait un paragraphe, un vide, puis le visage d'une inconnue. Le vide n'etait pas trop grand (58 px contre 95 sur ordinateur), il etait INEXPLIQUE. Un changement de fond le transforme en mur entre deux pieces, ce qui est exactement ce qu'il est. */ /* pas de max-width ici : .dedans centre sa boite, donc un max-width plus petit pose par-dessus decale toute la section vers la droite. Les largeurs de lecture se bornent sur les elements, jamais sur le conteneur. */ .bascule h2{max-width:20ch} .bascule-ou{ font-family:var(--serif);font-style:italic; font-size:clamp(21px,2.5vw,31px);line-height:1.46; letter-spacing:-.014em;color:var(--gris);max-width:24ch; } .bascule-ou b{font-style:normal;font-weight:400;color:var(--encre)} .bascule h2{ font-size:clamp(27px,3.3vw,41px);line-height:1.16;color:var(--nuit); } .bascule-suite{ margin-top:clamp(26px,3vw,38px); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3.4vw,52px); } .bascule-suite p{font-size:17px;line-height:1.72;color:var(--gris)} .bascule-suite b{font-weight:500;color:var(--encre)} /* ═══ L'ANNONCE ═══ */ .calendrier{background:var(--nuit);color:#EAF1F3;padding:clamp(80px,9.2vw,132px) 0 clamp(72px,8.4vw,120px)} .cal-annonce{width:max-content;max-width:100%} .cal-titre{margin:0} .cal-sur{ display:block;font-family:var(--serif);font-weight:400; font-size:clamp(20px,2.2vw,31px);line-height:1.25;letter-spacing:-.01em; color:#A9BCC3;margin-bottom:clamp(4px,.5vw,8px); } /* ⚠ La seule tres grande taille de la page, et elle porte une donnee vraie. Un chiffre geant pose sur rien serait le tic ; pose sur la seule date que ce cabinet possede, c'est l'annonce elle-meme. */ .cal-date{ display:block;font-family:var(--serif);font-weight:500; font-size:clamp(46px,8.4vw,122px);line-height:.95;letter-spacing:-.038em; color:#F4F9FA; } .cal-fil{ width:100%;height:1px;background:var(--or-clair);opacity:.55; margin-top:clamp(18px,2vw,26px);transform-origin:left center; } html.anim .cal-fil{transform:scaleX(0)} html.anim .cal-fil.vu{transform:none;transition:transform 1.1s var(--courbe) .34s} .cal-quoi{ margin-top:clamp(20px,2.3vw,30px);max-width:36ch; font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.45; color:#EAF1F3; } /* Les deux informations secondes, cote a cote et en bas. */ .cal-bas{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(26px,3.6vw,58px);align-items:start; margin-top:clamp(52px,6vw,84px);padding-top:clamp(20px,2.3vw,30px); border-top:1px solid rgba(226,183,122,.3); } .cal-apres{display:block} .cal-apres-quand{ display:block;font-size:13.6px;font-weight:600;color:var(--or-clair); font-variant-numeric:tabular-nums;margin-bottom:9px;letter-spacing:.015em; } .cal-apres-quoi{display:block;font-size:16.4px;line-height:1.62;color:#A9BCC3} .calendrier-mot{ margin-top:0;max-width:46ch; font-size:16.4px;line-height:1.66;color:#A9BCC3; } .calendrier-mot b{font-weight:500;color:#F2F7F8;box-shadow:inset 0 -1px 0 rgba(226,183,122,.7)} /* ═══ MATIÈRE ═══ Un grain très fin sur les deux grands aplats sombres. Sans lui, un aplat plein écran en bleu nuit est une surface morte ; avec lui, il a une peau. Généré en SVG, donc aucun fichier à charger. Il est SOUS le contenu. */ .respire::after,.pied::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; opacity:.30;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); } .pied{position:relative} .pied-in,.pied-signature{position:relative;z-index:1} /* ═══ MOUVEMENT : un seul effet, declenche, jamais lie au defilement ═══ La classe .anim est posee PAR LE SCRIPT. S'il ne tourne pas, rien n'est masque : l'invisible n'est jamais l'etat par defaut. */ html.anim .reveal{opacity:0} html.anim .reveal.vu{ opacity:1; animation:monte .85s var(--courbe) backwards; } @keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* ─── LE TITRE SE LÈVE, MOT À MOT ──────────────────────────────────── Chaque mot est dans une fenêtre qui le rogne ; il monte depuis sous la ligne de base. C'est le geste le plus visible de la page, et il est réservé aux titres : sept fois en tout, jamais sur du texte courant. ⚠ La fenêtre déborde SOUS la ligne de base (padding puis marge négative), sinon les jambages des p, g et j sont coupés net. Le découpage en mots est fait par le script : sans lui, le titre est un titre normal, entier et lisible. */ .titre-leve .mot{ display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.14em;margin-bottom:-.14em; } html.anim .titre-leve .mot > span{display:inline-block;transform:translateY(112%)} html.anim .titre-leve.vu .mot > span{ transform:none; transition:transform .9s var(--courbe); transition-delay:calc(var(--i,0) * 55ms); } /* ─── UNE IMAGE SE DÉVOILE ─────────────────────────────────────────── ⚠ LE CADRE S'OUVRE EN 1,05 s ET L'IMAGE MONTE EN 1,5 s. Le décalage est tout le geste : si l'image montait à la même vitesse que le cadre, on verrait une barre glisser. Parce qu'elle est plus lente, on voit une photographie se découvrir. */ html.anim .ouvrir{clip-path:inset(0 0 100% 0)} html.anim .ouvrir.vu{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--courbe)} html.anim .ouvrir img{transform:scale(1.07) translateY(5%)} html.anim .ouvrir.vu img{transform:none;transition:transform 1.5s var(--courbe)} /* ─── LE FILET SE TIRE ─────────────────────────────────────────────── Il est la marque de section du site. Le voir se tirer d'un trait coûte une ligne et donne à chaque section son petit lever de rideau. */ html.anim .filet-or{width:0} html.anim .filet-or.vu{width:46px;transition:width .85s var(--courbe) .1s} .indications>div.vu:nth-child(2){animation-delay:110ms} .indications>div.vu:nth-child(3){animation-delay:220ms} .indications>div.vu:nth-child(4){animation-delay:330ms} .indications>div.vu:nth-child(5){animation-delay:440ms} .indications>div.vu:nth-child(6){animation-delay:550ms} .moments p.vu:nth-child(2){animation-delay:110ms} .moments p.vu:nth-child(3){animation-delay:220ms} .moments p.vu:nth-child(4){animation-delay:330ms} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.anim .reveal{opacity:1} html.anim .reveal.vu{animation:none} html.anim .souffle{opacity:1} html.anim .souffle.vu{animation:none} html.anim .titre-leve .mot > span{transform:none} html.anim .ouvrir{clip-path:none} html.anim .ouvrir img{transform:none} html.anim .filet-or{width:46px} html.anim .questions.remplir.vu::after{height:calc(100% - .85em);transition:none} .coord:hover{transform:none} .carre-trace{transition:none} } /* ═══════════════ TÉLÉPHONE ET TABLETTE ═══════════════ */ @media (max-width:980px){ /* ⚠ LE MUR DOIT ETRE VISIBLE AVANT QU'ON Y VISSE LA PLAQUE. 18.09.2026 : « l'encadre je le trouve trop gros, et l'effet est different du hero sur ordinateur ». Les deux venaient du meme endroit : sur ordinateur la plaque est posee DANS la photo, sur un mur ; sur telephone elle flottait sur du bleu, au-dessus d'une bande de photo trop courte pour etre un mur. La photo monte donc plus haut et se decouvre plus tot, et la plaque descend dessus, au fer a gauche comme tout le reste. */ .hero{ min-height:0; padding:clamp(40px,6vw,64px) 0 clamp(150px,38vw,230px); align-items:flex-start; } /* Sur telephone la photo reprend toute la largeur, et son masque bascule a la verticale : elle emerge sous le texte au lieu d'arriver par la droite. En cover l'image serait plus etroite que l'ecran, donc c'est la hauteur qui bornerait et la position verticale ne servirait a rien : d'ou l'agrandissement a 150 %, qui rend la main sur le cadrage. */ .hero-fond{ width:100%; background-size:auto 150%;background-position:58% 24%; -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.88) 64%,#000 80%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 22%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.88) 64%,#000 80%); } .hero-voile{ background:linear-gradient(180deg, rgba(12,40,49,.985) 0%, rgba(12,40,49,.955) 34%, rgba(12,40,49,.86) 52%, rgba(12,40,49,.66) 68%, rgba(12,40,49,.44) 84%, rgba(12,40,49,.30) 100%); } .hero-in{flex-direction:column;align-items:flex-start;gap:clamp(30px,6.5vw,46px)} .hero-texte{max-width:none;width:100%} /* Un tiers plus petite, au fer a gauche, et posee sur la photo. */ .plaque{ width:min(256px,78%);margin:0;align-self:flex-start;margin-top:0; padding:18px 17px 15px; box-shadow:0 14px 30px rgba(12,40,49,.34),0 2px 5px rgba(12,40,49,.18); } .plaque::before{inset:7px} .plaque-nom{font-size:17.4px;line-height:1.22} .plaque-titre{margin-top:5px;font-size:11.8px} .plaque-filet{width:30px;margin:11px auto} .plaque-lieu{font-size:12.3px;line-height:1.54} .plaque-mention{margin-top:11px;font-size:10.6px;line-height:1.45} .plaque-mention b{margin-top:3px;font-size:15.4px} .apports-in{grid-template-columns:1fr;gap:30px} .seance-corps{grid-template-columns:1fr;gap:clamp(38px,5vw,56px);align-items:stretch} .rassure{margin-top:6px} .elle-in{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)} .portrait{max-width:430px} .venir-grille{grid-template-columns:1fr 1fr;gap:32px} .ecrire-in{grid-template-columns:1fr;align-items:stretch} .bascule-suite{grid-template-columns:1fr;gap:20px} .pied-in{grid-template-columns:1fr 1fr} } @media (max-width:720px){ body{font-size:16.5px} .dedans{width:calc(100% - 40px)} .barre-in{width:calc(100% - 40px);padding:10px 0} /* ⚠ :not(.bouton) EST INDISPENSABLE. « Me contacter » était un