/* ============================================================ YUI — Design tokens Palette imposée par le cahier des charges (60-30-10) : fond albâtre, texte anthracite, accent vert sauge. --sauge-profond est une déclinaison plus sombre du sauge, ajoutée pour les fonds de boutons : le sauge #899985 sur blanc ne fait que 3:1 de contraste (illisible au sens WCAG AA). ============================================================ */ :root{ color-scheme:light; --albatre:#F9F8F6; --lin:#F1EEE9; --anthracite:#2C2C2C; --gris:#6B6B67; --encre:#1B1F1C; --sauge:#899985; --sauge-profond:#5F6E5C; --hairline:rgba(44,44,44,.13); --hairline-clair:rgba(249,248,246,.18); --serif:"Playfair Display",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --rail:88px; --gut:clamp(20px,5vw,72px); --max:1320px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--albatre);color:var(--anthracite); font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.7; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} /* ---------- typographie ---------- */ h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em;line-height:1.12} .t-display{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.06;letter-spacing:-.025em} .t-h1{font-size:clamp(2.1rem,4.2vw,3.4rem)} .t-h2{font-size:clamp(1.7rem,2.9vw,2.5rem)} .t-h3{font-size:clamp(1.25rem,1.8vw,1.55rem)} p{margin:0 0 1.1em} .lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.62;color:var(--gris);max-width:56ch} .mesure{max-width:64ch} .mesure-court{max-width:46ch} .eyebrow{ font-family:var(--sans);font-size:.68rem;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--sauge-profond); margin:0 0 var(--s3);display:block; } .eyebrow--clair{color:var(--sauge)} /* ---------- boutons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.65em; padding:15px 30px;border:1px solid transparent;border-radius:2px; font-size:.86rem;font-weight:500;letter-spacing:.06em; transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease; } .btn .ar{transition:transform .35s ease} .btn:hover .ar{transform:translateX(4px)} .btn--plein{background:var(--sauge-profond);color:#fff} .btn--plein:hover{background:var(--encre)} .btn--ligne{border-color:var(--anthracite);color:var(--anthracite)} .btn--ligne:hover{background:var(--anthracite);color:var(--albatre)} .btn--clair{border:1px solid var(--hairline-clair);color:var(--albatre)} .btn--clair:hover{background:var(--albatre);color:var(--encre)} .lien{ display:inline-flex;align-items:center;gap:.5em; font-size:.82rem;font-weight:500;letter-spacing:.06em; padding-bottom:3px;border-bottom:1px solid var(--sauge); transition:gap .3s ease,border-color .3s ease; } .lien:hover{gap:.9em;border-color:var(--anthracite)} /* ---------- en-tête ---------- */ .entete{ position:fixed;top:0;left:0;right:0;z-index:60; background:rgba(249,248,246,.86);backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease; } .entete.est-defile{border-bottom-color:var(--hairline)} .entete__in{ max-width:var(--max);margin:0 auto;padding:0 var(--gut); height:82px;display:flex;align-items:center;gap:var(--s4); } .marque{display:flex;align-items:center;gap:12px;flex:0 0 auto} .marque__emb{width:30px;height:28px;color:var(--anthracite)} .marque__mot{width:52px;color:var(--anthracite)} .nav{display:flex;gap:26px;margin-left:auto;align-items:center} .nav a{ font-size:.82rem;letter-spacing:.02em;color:var(--gris); padding:4px 0;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease; } .nav a:hover{color:var(--anthracite)} .nav a.est-actif{color:var(--anthracite);border-bottom-color:var(--sauge)} .entete .btn{padding:12px 24px} .burger{display:none;background:none;border:0;padding:10px;margin-left:auto;color:var(--anthracite)} .burger span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;transition:transform .3s ease,opacity .3s ease} .est-ouvert .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)} .est-ouvert .burger span:nth-child(2){opacity:0} .est-ouvert .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:1080px){ .nav{ position:fixed;inset:82px 0 auto;flex-direction:column;align-items:flex-start; gap:0;background:var(--albatre);border-bottom:1px solid var(--hairline); padding:var(--s3) var(--gut) var(--s4);margin:0; transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease; } .est-ouvert .nav{opacity:1;transform:none;pointer-events:auto} .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--hairline);font-size:1rem} .nav .btn{margin-top:var(--s3)} .burger{display:block} .entete__in .btn--plein{display:none} } /* ---------- structure de page + fil conducteur ---------- */ main{padding-top:82px} .page{display:none} .page.est-visible{display:block} .bande{position:relative;background:var(--albatre);color:var(--anthracite)} .bande__in{ max-width:var(--max);margin:0 auto;padding:var(--s7) var(--gut); display:grid;grid-template-columns:var(--rail) minmax(0,1fr); } .bande--serre .bande__in{padding-top:var(--s6);padding-bottom:var(--s6)} .bande--lin{background:var(--lin);color:var(--anthracite)} .bande--encre{background:var(--encre);color:var(--albatre)} .bande--encre .lede{color:rgba(249,248,246,.68)} .bande--encre .t-h2,.bande--encre .t-h3{color:var(--albatre)} /* le fil : une ligne continue qui relie toutes les sections, écho au kanji 結 (nouer). Un nœud hexagonal marque chaque section. */ .rail{position:relative} .rail::before{ content:"";position:absolute;left:0;top:-170px;bottom:-170px;width:1px; background:var(--hairline); } .bande--encre .rail::before{background:var(--hairline-clair)} .noeud{ position:absolute;left:-4.5px;top:12px;width:10px;height:11px; background:var(--sauge); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } @media (max-width:900px){ .bande__in{grid-template-columns:1fr;padding:var(--s6) var(--gut)} .rail{display:none} } /* ---------- révélation au défilement ---------- */ .rev{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease} .rev.est-vue{opacity:1;transform:none} .rev:nth-child(2){transition-delay:.08s} .rev:nth-child(3){transition-delay:.16s} /* ---------- hero ---------- */ .hero .bande__in{padding-top:clamp(70px,10vw,120px);padding-bottom:clamp(70px,10vw,120px)} .hero__grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:center} .hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)} .hero__emb{width:min(100%,400px);margin-left:auto;color:var(--sauge)} @media (max-width:900px){ .hero__grille{grid-template-columns:1fr;gap:var(--s4)} .hero__emb{width:190px;margin:0 0 var(--s3)} } /* le nœud se noue : les trois boucles convergent au chargement */ .emb-anim .bcl{opacity:0;transform-box:view-box;transform-origin:50% 50%} .emb-anim.est-noue .bcl{opacity:1;transform:none} .emb-anim .bcl{transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)} .emb-anim .bcl--1{transform:translateY(-70px)} .emb-anim .bcl--2{transform:translate(60px,42px);transition-delay:.18s} .emb-anim .bcl--3{transform:translate(-60px,42px);transition-delay:.36s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rev{opacity:1;transform:none;transition:none} .emb-anim .bcl{opacity:1;transform:none;transition:none} *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ---------- placeholder photo (à remplacer par les visuels réels) ---------- */ .ph{ display:block;position:relative;width:100%;background: linear-gradient(135deg,rgba(137,153,133,.16),rgba(44,44,44,.06) 60%,rgba(137,153,133,.10)); border:1px solid var(--hairline);overflow:hidden; } .ph::after{ content:attr(data-shot);position:absolute;left:16px;bottom:14px;right:16px; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris); } /* dès qu'une photo est posée en fond, l'étiquette et le dégradé disparaissent */ .ph[style*="background-image"]{background-size:cover;background-position:center; background-repeat:no-repeat;border-color:transparent} .ph[style*="background-image"]::after{content:none} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .ph:has(img){border-color:transparent} .ph:has(img)::after{content:none} .ph--16x9{aspect-ratio:16/9} .ph--4x3{aspect-ratio:4/3} .ph--1x1{aspect-ratio:1/1} .ph--3x4{aspect-ratio:3/4} .ph--haut{aspect-ratio:3/4} /* ---------- piliers ---------- */ .piliers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hairline)} .pilier{ position:relative;padding:var(--s4) var(--s3) var(--s4) 0;border-right:1px solid var(--hairline); display:flex;flex-direction:column;gap:var(--s2);transition:background .4s ease; } .pilier:first-child{padding-left:0} .pilier:not(:first-child){padding-left:var(--s3)} .pilier:last-child{border-right:0} .pilier::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(137,153,133,.09); transition:height .45s cubic-bezier(.22,.61,.36,1);z-index:-1; } .pilier:hover::before{height:100%} .pilier h3{font-size:1.3rem} .pilier p{font-size:.92rem;color:var(--gris);margin:0;flex:1} @media (max-width:900px){ .piliers{grid-template-columns:1fr} .pilier{border-right:0;border-bottom:1px solid var(--hairline);padding:var(--s3) 0!important} .pilier:last-child{border-bottom:0} } /* ---------- grilles génériques ---------- */ .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:center} .duo--haut{align-items:start} .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} @media (max-width:900px){.duo,.trio{grid-template-columns:1fr;gap:var(--s4)}} .bloc-titre{margin-bottom:var(--s5)} .bloc-titre p{margin-top:var(--s3)} /* ---------- engagements / listes ---------- */ .liste{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)} .liste li{display:grid;grid-template-columns:14px 1fr;gap:var(--s2);align-items:start;font-size:.95rem;color:var(--gris)} .liste li::before{ content:"";width:9px;height:10px;margin-top:.55em;background:var(--sauge); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); } .bande--encre .liste li{color:rgba(249,248,246,.7)} /* ---------- témoignages ---------- */ .temoin{border-top:1px solid var(--hairline);padding-top:var(--s3)} .temoin blockquote{margin:0 0 var(--s3);font-family:var(--serif);font-size:1.2rem;line-height:1.45} .temoin cite{font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)} /* ---------- biens ---------- */ .recherche{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:1px; background:var(--hairline);border:1px solid var(--hairline);margin-top:var(--s4); } .recherche > *{background:var(--albatre);border:0;padding:18px 20px;font:inherit;font-size:.9rem;color:var(--anthracite)} .recherche select,.recherche input{appearance:none;border-radius:0;width:100%} .recherche button{background:var(--sauge-profond);color:#fff;padding:18px 34px;font-size:.84rem;letter-spacing:.06em;font-weight:500} .recherche button:hover{background:var(--encre)} @media (max-width:760px){.recherche{grid-template-columns:1fr}} .biens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)} .bien{display:flex;flex-direction:column;gap:var(--s2)} .bien .ph{margin-bottom:var(--s1)} .bien__ligne{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)} .bien h3{font-size:1.15rem} .bien__prix{font-family:var(--serif);font-size:1.15rem} .bien__meta{font-size:.8rem;color:var(--gris);letter-spacing:.02em} .peb{ display:inline-flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;color:var(--gris); } .peb b{ display:inline-grid;place-items:center;width:20px;height:20px;border-radius:2px; background:var(--sauge);color:#fff;font-size:.7rem;font-weight:500;letter-spacing:0; } @media (max-width:900px){.biens{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:620px){.biens{grid-template-columns:1fr}} /* ---------- formulaires ---------- */ .form{display:grid;gap:var(--s3);max-width:640px} .form--large{max-width:none} .form > .btn,.form > button{justify-self:start} .rangee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)} @media (max-width:620px){.rangee{grid-template-columns:1fr}} .champ{display:flex;flex-direction:column;gap:8px} .champ > label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)} .champ input,.champ select,.champ textarea{ font:inherit;font-size:.95rem;color:var(--anthracite);background:transparent; border:0;border-bottom:1px solid var(--hairline);padding:11px 0;border-radius:0;appearance:none; transition:border-color .3s ease; } .champ textarea{resize:vertical;min-height:110px} .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-bottom-color:var(--sauge-profond)} .bande--encre .champ input,.bande--encre .champ select,.bande--encre .champ textarea{ color:var(--albatre);border-bottom-color:var(--hairline-clair) } .bande--encre .champ > label{color:rgba(249,248,246,.6)} .champ--large{grid-column:1/-1} .depot{ border:1px dashed var(--hairline);padding:var(--s4);text-align:center; font-size:.88rem;color:var(--gris);transition:border-color .3s ease,background .3s ease; } .depot:hover{border-color:var(--sauge);background:rgba(137,153,133,.05)} .depot b{display:block;font-weight:500;color:var(--anthracite);margin-bottom:4px;font-size:.95rem} .bande--encre .depot b{color:var(--albatre)} .consent{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:.8rem;color:var(--gris);line-height:1.55} .consent input{margin:3px 0 0;accent-color:var(--sauge-profond)} .note-demo{ font-size:.74rem;letter-spacing:.02em;color:var(--gris); border-left:2px solid var(--sauge);padding-left:14px; } /* ---------- étapes numérotées (séquence réelle) ---------- */ .etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);counter-reset:e} .etape{border-top:1px solid var(--hairline);padding-top:var(--s3)} .bande--encre .etape{border-top-color:var(--hairline-clair)} .etape::before{ counter-increment:e;content:"0" counter(e); display:block;font-size:.72rem;letter-spacing:.2em;color:var(--sauge);margin-bottom:var(--s2); } .etape h3{font-size:1.15rem;margin-bottom:10px} .etape p{font-size:.9rem;color:var(--gris);margin:0} .bande--encre .etape p{color:rgba(249,248,246,.66)} @media (max-width:760px){.etapes{grid-template-columns:1fr}} /* ---------- formules ---------- */ .formule{ border:1px solid var(--hairline);padding:var(--s4) var(--s3); display:flex;flex-direction:column;gap:var(--s2);transition:border-color .4s ease,transform .4s ease; } .formule:hover{border-color:var(--sauge);transform:translateY(-3px)} .formule__tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sauge-profond)} .formule h3{font-size:1.35rem} .formule p{font-size:.9rem;color:var(--gris);flex:1;margin:0} .formule .lien{align-self:flex-start;margin-top:var(--s2)} /* ---------- accordéon ---------- */ .acc{border-top:1px solid var(--hairline)} .acc__t{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s3); background:none;border:0;border-bottom:1px solid var(--hairline);padding:22px 0;text-align:left; font-family:var(--serif);font-size:1.12rem;color:inherit; } .acc__t .sig{color:var(--sauge);transition:transform .35s ease;flex:0 0 auto} .acc__i[open] .sig,.acc__t[aria-expanded="true"] .sig{transform:rotate(45deg)} .acc__c{max-height:0;overflow:hidden;transition:max-height .45s ease} .acc__c p{font-size:.92rem;color:var(--gris);padding:var(--s3) 0;margin:0;max-width:62ch} .bande--encre .acc,.bande--encre .acc__t{border-color:var(--hairline-clair)} .bande--encre .acc__c p{color:rgba(249,248,246,.66)} /* ---------- avant / après ---------- */ .ap{position:relative;overflow:hidden} .ap__b{position:absolute;inset:0;opacity:0;transition:opacity .5s ease} .ap:hover .ap__b,.ap:focus-within .ap__b{opacity:1} .ap__lb{ position:absolute;top:14px;left:14px;z-index:2;background:rgba(27,31,28,.82);color:#fff; font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px; } .ap:hover .ap__lb::after,.ap:focus-within .ap__lb::after{content:" · après"} .ap:hover .ap__lb .av,.ap:focus-within .ap__lb .av{display:none} /* ---------- créneaux ---------- */ .creneaux{display:flex;flex-wrap:wrap;gap:10px} .creneau{ border:1px solid var(--hairline);background:none;padding:11px 18px;font-size:.84rem; color:var(--anthracite);transition:border-color .3s ease,background .3s ease,color .3s ease; } .creneau:hover{border-color:var(--sauge-profond)} .creneau.est-choisi{background:var(--sauge-profond);border-color:var(--sauge-profond);color:#fff} /* ---------- chiffres ---------- */ .chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)} .chiffre{border-top:1px solid var(--hairline-clair);padding-top:var(--s3)} .chiffre b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.8rem);font-weight:400;line-height:1} .chiffre span{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,248,246,.6);display:block;margin-top:10px} @media (max-width:760px){.chiffres{grid-template-columns:1fr}} /* ---------- appel final ---------- */ .appel{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:end;justify-content:space-between} /* ---------- pied de page ---------- */ .pied{background:var(--encre);color:var(--albatre)} .pied__in{max-width:var(--max);margin:0 auto;padding:var(--s6) var(--gut) var(--s4)} .pied__haut{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:var(--s4)} .pied h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);font-weight:500;color:rgba(249,248,246,.5);margin-bottom:var(--s3)} .pied ul{list-style:none;padding:0;margin:0;display:grid;gap:12px} .pied a{font-size:.88rem;color:rgba(249,248,246,.78);transition:color .25s ease} .pied a:hover{color:var(--albatre)} .pied__marque{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3);color:var(--albatre)} .pied__marque svg:first-child{width:34px;height:32px} .pied__marque svg:last-child{width:86px} .pied__slogan{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:rgba(249,248,246,.7)} .pied__bas{ margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--hairline-clair); display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between; font-size:.74rem;color:rgba(249,248,246,.5); } @media (max-width:900px){.pied__haut{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.pied__haut{grid-template-columns:1fr}} /* ---------- accessibilité ---------- */ section[id],main[id]{scroll-margin-top:110px} :focus-visible{outline:2px solid var(--sauge-profond);outline-offset:3px} /* ============================================================ CORRECTIFS ============================================================ */ /* Les