/* ========================================================================== VANILLA - LE DECOR ORGANIQUE -------------------------------------------------------------------------- Langage repris des references deposees par le client (dossier `reference/`) : des aplats aux contours mous qui debordent des bords, des disques pleins, et des images decoupees dans des formes organiques. ⚠️ AUCUNE FORME EVIDEE (consigne client du 01/08/2026) : ni cercle a simple bordure, ni tache reduite a son contour, ni trait decale derriere une photo. Tout ce qui est decor est un APLAT PLEIN. TOUT EST EN CSS. Aucun fichier SVG d'illustration, aucun dessin anime : les taches sont des `border-radius` asymetriques, les etoiles un `clip-path` polygonal, les cercles une simple bordure. Rien a charger, rien qui puisse passer pour une illustration faite a la main. PALETTE : celle de la maison, pas celle des references. Les maquettes sont en terracotta ; le logo Vanilla donne creme, nude, ocre et cacao. C'est la MISE EN PAGE qui est reprise, jamais la couleur. ========================================================================== */ /* ---------------------------------------------------------- LES VAGUES Les maquettes ne separent jamais deux aplats par un trait droit : la couleur passe de l'un a l'autre par une ONDE qui traverse toute la largeur. C'est le geste le plus reconnaissable des references. Une courbe pleine largeur ne se fait pas en `border-radius` : il faut un trace. Ce sont donc des chemins SVG, mais STATIQUES et purement geometriques. Ce ne sont pas des illustrations : aucune forme figurative, aucun dessin a la main, et rien ne s'anime dedans. USAGE : poser `
` a la fin d'une section. Le ton est celui de la section SUIVANTE, puisque la vague est la matiere qui deborde sur elle. */ .vague { position: relative; z-index: 2; display: block; width: 100%; height: clamp(56px, 6.4vw, 100px); /* les langues doivent avoir la place de pendre */ margin-block: -1px; /* pas de liseré entre l'aplat et l'onde */ pointer-events: none; /* ⚠️ La coupe se fait ICI et pas sur `body`. `overflow-x: clip` pose sur `html` ou `body` n'a AUCUN effet : le moteur propage la valeur a la fenetre. L'onde faisant 108 % de large, elle ouvrait sinon une barre de defilement horizontale de 104 px. */ overflow: clip; } /* Plus large que sa boite : l'onde glisse lateralement sans jamais decouvrir de vide sur les cotes. ⚠️ `max-width: none` est OBLIGATOIRE : la remise a zero pose `max-width: 100%` sur tous les `svg`, ce qui bridait l'onde a la largeur de la fenetre et laissait une bande claire de 100 px a droite. */ /* ⚠️ 112 % ET NON 108 %, ET C'EST UNE CONTRAINTE MESUREE, pas un reglage d'oeil. La translation de l'onde est un POURCENTAGE DE SA PROPRE LARGEUR, alors que le debordement disponible est un pourcentage de la BOITE. A 108 % / -4 %, le debordement gauche valait 57,6 px sur une fenetre de 1440 tandis qu'une course de 4 % en faisait 62,2 : mesure, il restait 5 px de vide clair sur le bord gauche a l'amplitude maximale. A 112 % / -6 %, le debordement passe a 86,4 px pour une course de 64,5 px -- il reste 22 px de reserve. */ .vague svg { display: block; width: 112%; max-width: none; height: 100%; margin-left: -6%; } /* `data-ton` = la couleur de la section QUI ARRIVE (le trace). `data-de` = la couleur de la section QUI PART (le fond de la boite). ⚠️ Sans `data-de`, la boite de l'onde garde le fond de la page et une bande claire s'intercale des que la section du dessus est coloree. */ /* Le trait fin qui double la coulee. Il ne se remplit pas : c'est un contour, et il garde son epaisseur quelle que soit la largeur de la fenetre -- `vector-effect` est pose sur le CHEMIN, pas sur un parent : ce n'est pas une propriete heritee. */ /* ⚠️ Ce trait prend le brun du logotype et NON l'ocre des aplats : un fil de 1,5 px en #D5B48A sur du blanc ne fait que 1,9:1, on ne le voit pas. */ .vague__trait { fill: none !important; stroke: var(--secondaire); stroke-width: 1.5px; opacity: .5; } .vague[data-ton='blanc'] path { fill: var(--blanc); } .vague[data-ton='gris'] path { fill: var(--gris); } .vague[data-ton='peche'] path { fill: var(--peche); } .vague[data-ton='beige'] path { fill: var(--beige); } .vague[data-ton='terra'] path { fill: var(--terra); } /* `vanille` remplace `brun` : c'est l'onde qui verse dans le pied de page, lui aussi passe au vanille du logotype. */ .vague[data-ton='vanille'] path { fill: var(--vanille); } .vague[data-ton='secondaire'] path { fill: var(--secondaire); } .vague[data-de='blanc'] { background: var(--blanc); } .vague[data-de='gris'] { background: var(--gris); } .vague[data-de='peche'] { background: var(--peche); } .vague[data-de='beige'] { background: var(--beige); } .vague[data-de='terra'] { background: var(--terra); } .vague[data-de='vanille'] { background: var(--vanille); } .vague[data-de='secondaire'] { background: var(--secondaire); } /* ⚠️ Sur un fond brun, le trait fin qui double la coulee doit passer au clair : en brun sur brun il disparait, et l'onde perd le second geste des maquettes. */ .vague[data-de='secondaire'] .vague__trait, .vague[data-ton='secondaire'] .vague__trait { stroke: var(--vanille); } /* Deux ondes superposees et decalees, comme dans les maquettes : la premiere plus pale, la seconde pleine. */ .vague__doux { opacity: .5; } /* ⚠️ LES ONDES BOUGENT MAINTENANT TOUTES SEULES, LENTEMENT (client, 02/08/2026 : « les sections avec fond coloré contiennent des waves, anime-les, mais leur vitesse doit être lente, voire moyenne »). Avant, le mouvement etait lie au defilement (`animation-timeline: view()`) : l'onde n'avancait que si le visiteur bougeait, donc une section immobile a l'ecran etait figee. Elle respire desormais en permanence, en 11 s aller-retour (26 s a la premiere passe, juge trop lent) et sur une course portee de 3 a 4 % : le mouvement se voit maintenant sans avoir a le chercher. ⚠️ LA COURSE EST BORNEE PAR LA LARGEUR DE L'ONDE. Le trace fait 108 % de large et deborde de 4 % a gauche : au-dela de 4 % de translation, un bord decouvre le fond et une bande claire apparait sur le cote. C'est le plafond, pas un choix esthetique. ⚠️ `alternate` et pas `infinite` seul : une translation qui repart de -4 % apres avoir atteint +4 % ferait un saut de 8 % a chaque tour. En alternance, elle revient sur ses pas et le raccord est invisible. ⚠️ SEULE `translate` EST ANIMEE : elle tourne sur le compositeur, donc dix ondes en mouvement ne coutent pas une mise en page. */ /* ⚠️ LA DUREE SE REGLE ICI, PAS DANS `base.css`. Les feuilles sont chargees dans l'ordre base -> decor -> scene : une regle de meme specificite ecrite dans base.css est ECRASEE par celle-ci. Une premiere correction de vitesse posee la-bas n'avait donc aucun effet, et rien ne le signalait. */ @media (prefers-reduced-motion: no-preference) { .vague svg { animation: onde 6.5s ease-in-out infinite alternate; will-change: transform; } .vague__doux { animation-direction: alternate-reverse; animation-duration: 8.5s; } } @keyframes onde { from { translate: -4% 0; } to { translate: 4% 0; } } /* ------------------------------------------------------------- LA COUCHE */ .decor { position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: 0; } .decor > * { position: absolute; } /* --------------------------------------------------------------- TACHES Quatre silhouettes reutilisables. Elles debordent volontairement du cadre : c'est ce debordement qui donne l'impression d'une forme decoupee plutot que d'un element pose. */ /* ⚠️ CE N'EST PLUS UN border-radius. Un border-radius, meme asymetrique, ne produit que QUATRE ARCS D'ELLIPSE, donc une forme TOUJOURS CONVEXE : il ne peut pas faire un lobe ni une echancrure. Les references en ont partout -- ce sont des coulees, pas des galets. D'ou des traces. Ils restent purement geometriques : des points a des rayons inegaux relies par des cubiques (script `formes.mjs`), rien de dessine. */ .tache { clip-path: url(#t-a); background: var(--ton, var(--nude)); } .tache--a { clip-path: url(#t-a); } .tache--b { clip-path: url(#t-b); } .tache--c { clip-path: url(#t-c); } .tache--d { clip-path: url(#t-d); } /* ⚠️ PLUS AUCUNE FORME EVIDEE (client, 01/08/2026). Les contours seuls -- la tache tracee (`.trace`), le cercle a simple bordure, le contour decale derriere une photo -- sont supprimes. Un aplat existe ou n'existe pas ; un fil de 1,5 px pose sur du blanc ne lit ni comme une forme ni comme un trait, il lit comme un residu. Ne pas les reintroduire. */ /* Les taches respirent lentement. Le mouvement est a peine perceptible : c'est ce qui distingue un decor vivant d'un decor qui gigote. ⚠️ Un `clip-path: url(#…)` ne s'interpole PAS d'une forme a l'autre : la respiration passe donc par l'echelle et une rotation d'un degre. */ @media (prefers-reduced-motion: no-preference) { .tache { animation: respire-tache var(--t, 26s) ease-in-out infinite alternate; } } @keyframes respire-tache { from { scale: 1 1; rotate: -1.2deg; } to { scale: 1.06 0.97; rotate: 1.4deg; } } /* --------------------------------------------------------------- CERCLES Un disque PLEIN, jamais un anneau : les cercles vides ont ete retires. */ .rond { border-radius: 50%; background: var(--ton, var(--nude)); } /* Plus aucun disque n'est pose sur le site : le dernier servait de point final au mot monumental du heros et est parti avec lui. La regle reste pour un usage futur. ⚠️ Sur telephone une section raccourcit et un decor pose en pourcentage vient sur le texte : le masquer sous 980 px. */ @media (max-width: 980px) { .rond { display: none; } } /* ⚠️ LES PETITES ETOILES A QUATRE BRANCHES SONT SUPPRIMEES (client, 01/08/2026). Elles scintillaient dans chaque section ; a treize pixels elles ne se lisaient pas comme un geste de la maquette mais comme un ornement qui bouge. Ne pas les reintroduire. */ /* ------------------------------------------------- LES CADRES D'IMAGE Les references decoupent leurs photographies dans des formes molles : une arche irreguliere, une tache, un quart-de-rond. Un `overflow: clip` suffit, l'image dessous reste rectangulaire. */ .cadre { overflow: clip; } .cadre img { width: 100%; height: 100%; object-fit: cover; display: block; } /* LA FORME DU VISUEL PRINCIPAL. La maquette donnait un rectangle a coins ELLIPTIQUES (rayon horizontal 18 % de la largeur, vertical 50 % de la hauteur), donc des cotes gauche et droit entierement courbes. ⚠️ Le client a tranche autrement le 01/08/2026 : « allonge-la horizontalement et reduis son radius, plus rectangulaire ». C'est donc un rectangle allonge a coins simplement adoucis. Le rayon est en pixels et non en pourcentage : sur une boite qui s'allonge, un rayon en pourcentage grandit avec elle et l'ovalise a nouveau. */ .cadre--arche { border-radius: clamp(12px, 1.6vw, 26px); } /* La tache posee sur une PHOTO : le meme vocabulaire, mais moins creusee, sinon l'echancrure mange le sujet. */ .cadre--tache { clip-path: url(#t-photo); border-radius: 0; } /* Le quart : le coin HAUT-GAUCHE seul, tres arrondi, les trois autres parfaitement vifs. Mesure sur la maquette 2 : la courbe couvre 55 % de la largeur et 62 % de la hauteur. */ .cadre--quart { border-radius: 55% 0 0 0 / 62% 0 0 0; } /* Le galet : les quatre angles arrondis, sans exces. */ .cadre--galet { border-radius: clamp(18px, 3vw, 42px); } /* -------------------------------------------- LE MOT MONUMENTAL Les trois maquettes posent un mot enorme en bas de composition. ⚠️ LA CLASSE `.monument` EST SUPPRIMEE (client, 01/08/2026) : une fois le heros vide de ses aplats, le mot ne composait plus avec rien et se lisait comme un « Vanilla » isole entre deux sections. Les mots monumentaux DANS une composition restent (`.maison__mot`, `.cloture__mot`) : eux sont encadres par une photo et un pied de maquette. */ /* ------------------------------------------------- LE TEXTE VERTICAL La colonne « ATELIER » des maquettes. Reprise pour le lieu, qui est une information reelle et non un ornement. */ /* ⚠️ AGRANDI ET REDESSINE (client, 01/08/2026 : « change son style et augmente sa taille »). Il passe de 0,92 a 1,35 rem, prend le brun du logotype et se lit de BAS EN HAUT (`vertical-rl` + `rotate: 180deg`), comme la colonne « ATELIER » des maquettes : dans ce sens le regard suit la montee de la page au lieu de la contrarier. */ .vertical { writing-mode: vertical-rl; rotate: 180deg; text-orientation: mixed; font-size: clamp(1.1rem, 1.35vw, 1.45rem); font-weight: 400; color: var(--terra-txt); white-space: nowrap; } /* ------------------------------------------------------- LES PASTILLES Les points de progression en bas a gauche des maquettes. Ici ils marquent la section en cours et sont cliquables : un ornement qui ne sert a rien serait une decoration de plus. */ .pastilles { display: flex; gap: .55rem; align-items: center; } .pastilles a { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--encre) 22%, transparent); transition: background .45s var(--sortie), scale .45s var(--ressort); } .pastilles a:hover { scale: 1.35; } /* Meme raison que le trait des coulees : une pastille de 9 px doit se voir. */ .pastilles a[aria-current] { background: var(--secondaire); scale: 1.25; }