/* ============================================================================ LE RELAIS RENOV · styles de page · reecrit le 2026-08-31 Sur sa correction: « we are marketers ». Le sol est le lin, la carte est blanche et flotte dessus, le hero porte son texte SUR l'image, et rien sur cette page ne refroidit le lecteur. Aucun hex ici. Tout vient de theme.css. ========================================================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--u-ground);color:var(--u-ink); font-family:var(--u-ui);font-size:18px;line-height:1.6; /* 18px verrouille */ -webkit-text-size-adjust:100%; } img{max-width:100%;display:block} figure{margin:0} /* le navigateur met 40px de marge laterale par defaut */ a{color:var(--u-grass-deep)} :focus-visible{outline:3px solid var(--u-grass);outline-offset:3px;border-radius:8px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99; min-height:56px;display:inline-flex;align-items:center;padding:0 1.1rem;background:var(--u-grass); color:#fff;border-radius:var(--u-r-pill);font-weight:600;text-decoration:none} .center{text-align:center} .u-wrap{max-width:1100px} /* le rythme editorial des titres de section */ .h2{font-family:var(--u-display);font-weight:400;margin:.45rem 0 .7rem; font-size:clamp(1.65rem,1.2rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance} .h2 em{font-style:italic;color:var(--u-grass)} .lede{font-family:var(--u-text);font-size:1.1rem;line-height:1.62;color:var(--u-ink-soft); margin:0 0 1.3rem;max-width:60ch} .center .lede{margin-inline:auto} .u-sec{padding-block:clamp(46px,6vw,88px)} .band--soft{background:var(--u-cream)} /* ------------------------------------------------------------- L'EN TETE -- */ .hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--u-ground) 88%,transparent); backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--u-hair)} .hd__in{max-width:1100px;margin-inline:auto;padding:10px 22px;display:flex;align-items:center;gap:12px} .hd__b{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--u-ink); flex:0 0 auto;min-height:44px} .hd__b svg{width:30px;height:30px;color:var(--u-grass)} .hd__n{font-family:var(--u-display);font-size:1.12rem;line-height:1;letter-spacing:-.01em;white-space:nowrap} .hd__sp{margin-left:auto} .hd__sm{display:none} @media(max-width:620px){.hd__lg{display:none}.hd__sm{display:inline}} @media(max-width:380px){.hd__in{padding-inline:12px;gap:6px}.hd__n{font-size:.95rem} .hd__b svg{width:26px;height:26px}.hd .u-btn{padding-inline:.85rem;font-size:14px}} /* ================================================================ LE HERO = */ /* Le texte est SUR l'image, comme il l'a demande. La carte d'ouverture reste au-dessus de la ligne de flottaison sur telephone: c'est la seule contrainte mesuree qui ne bouge pas, et elle est tenue par le flex column ci-dessous. */ .hero{position:relative;isolation:isolate;overflow:hidden; min-height:min(92svh,760px);display:flex;align-items:flex-end} .hero__bg{position:absolute;inset:0;z-index:-2} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(180deg,color-mix(in srgb,var(--u-ink) 46%,transparent) 0%, color-mix(in srgb,var(--u-ink) 16%,transparent) 34%, color-mix(in srgb,var(--u-ink) 52%,transparent) 78%, color-mix(in srgb,var(--u-ink) 72%,transparent) 100%)} .hero__in{width:100%;max-width:1100px;margin-inline:auto;padding:26px 22px 32px; display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:inherit} .hero__txt{padding-top:8px} .hero__chip{display:inline-flex;align-items:center;min-height:34px;padding:0 .9rem; border-radius:var(--u-r-pill);font-size:12.5px;font-weight:600;letter-spacing:.01em; background:color-mix(in srgb,#fff 20%,transparent);color:#fff; border:1px solid color-mix(in srgb,#fff 34%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .hero h1{font-family:var(--u-display);font-weight:400;color:#fff;margin:.7rem 0 .5rem; font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);line-height:1.06;letter-spacing:-.02em; text-wrap:balance;max-width:17ch;text-shadow:0 2px 22px rgba(0,0,0,.3)} .hero h1 em{font-style:italic} .hero__lede{font-family:var(--u-text);font-size:1.08rem;line-height:1.5;margin:0;max-width:44ch; color:color-mix(in srgb,#fff 90%,transparent);text-shadow:0 1px 14px rgba(0,0,0,.35)} .hero__proof{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1rem 0 0;padding:0; font-size:13.5px;font-weight:600;color:color-mix(in srgb,#fff 92%,transparent)} .hero__proof li{display:flex;align-items:center;gap:.4rem} .hero__proof li::before{content:"";width:13px;height:7px;flex:0 0 auto; border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-2px)} @media(min-width:960px){ .hero__in{flex-direction:row;align-items:flex-end;gap:52px;padding-block:80px 56px} .hero__txt{flex:1 1 54%} .hero .opener{flex:0 0 400px} } /* ------------------------------------------------- LA BANDE DE CONFIANCE -- */ .band{background:var(--u-ink);color:#fff} .band__l{list-style:none;margin:0;padding:16px 0;display:grid;gap:14px; grid-template-columns:repeat(2,minmax(0,1fr));text-align:center} @media(min-width:760px){.band__l{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:18px}} .band__l li{display:flex;flex-direction:column;gap:1px} .band__l b{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .band__l span{font-size:12.5px;color:color-mix(in srgb,#fff 68%,transparent)} /* ------------------------------------------------------------ LE QUIZ ----- */ /* le simulateur a demenage dans le hero et son conteneur est passe de .qz a .sim: toutes les regles ecrites en descendant de .qz etaient mortes, et les questions du formulaire retombaient sur le h2 par defaut du navigateur, 34 px en gras sans serif. C est ca, « some of the text is too big ». */ .qz,.sim{max-width:620px;margin-inline:auto} .qz__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem} .qz__track{flex:1;height:6px;border-radius:99px;background:var(--u-sand);overflow:hidden} .qz__track i{display:block;height:100%;width:16%;background:var(--u-grass);border-radius:99px; transition:width .34s var(--u-ease)} @media (prefers-reduced-motion:reduce){.qz__track i{transition:none}} .qz__step{font-size:13.5px;font-weight:600;color:var(--u-ink-soft);white-space:nowrap} .qz h2,.sim h2{font-family:var(--u-display);font-weight:400;margin:0 0 .3rem; font-size:clamp(1.4rem,1.1rem + 1.4vw,1.95rem);line-height:1.16;letter-spacing:-.015em} .qz__sub{margin:0 0 1.1rem;font-size:14.5px;color:var(--u-ink-soft)} .qz__opts{display:grid;gap:10px;margin-bottom:1rem} .qz__opts--row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .qz__opts--row .u-opt span{justify-content:center;padding-inline:.2rem;font-size:17px} .qz__opts--row .u-opt span::before{display:none} .qz__opts .u-opt span{min-height:64px;font-size:16px} .opt--sm{min-height:64px;font-size:14.5px !important;font-weight:500 !important;line-height:1.4} .qz__lock{margin:-.3rem 0 1rem;font-size:12.5px;color:var(--u-ink-faint)} .qz .u-field input,.sim .u-field input{min-height:58px;font-size:17px} .qz__nav{display:flex;gap:10px;align-items:center} .qz__back{background:none;border:0;font:inherit;font-size:15px;color:var(--u-ink-soft); cursor:pointer;min-height:56px;padding-inline:.7rem;border-radius:var(--u-r-pill)} .qz__back:hover{background:var(--u-cream)} .qz__err{color:var(--u-clay);font-size:14.5px;font-weight:600;margin:.2rem 0 .6rem} .qz__badge{display:inline-flex;align-items:center;min-height:30px;padding:0 .8rem; border-radius:var(--u-r-pill);background:var(--u-grass-tint);color:var(--u-grass-deep); font-size:13px;font-weight:700;margin-bottom:.6rem} .qz__amount{color:var(--u-grass);font-style:italic} .qz__q3{font-family:var(--u-ui);font-size:1rem;font-weight:600;margin:1.3rem 0 .7rem} .tag{background:var(--u-grass);color:#fff;font-size:11px;font-weight:700;padding:2px 8px; border-radius:var(--u-r-pill);margin-left:.5rem} .qz__ok{text-align:center} /* ----------------------------------------------------- LES BLOCS SPLIT ---- */ .split{display:grid;gap:clamp(28px,4vw,54px);align-items:center} @media(min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .split--rev .split__t{order:2} } .kpis,.specs{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:12px} @media(min-width:520px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}} .kpis li,.specs li{display:flex;flex-direction:column;gap:1px;background:var(--u-paper); border:1px solid var(--u-hair);border-radius:var(--u-r-tile);padding:.9rem 1.1rem} .kpis b,.specs b{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--u-grass-deep); font-variant-numeric:tabular-nums;line-height:1.1} .kpis span,.specs span{font-size:14px;color:var(--u-ink-soft)} /* ------------------------------------------------------------ LE GRAPHE --- */ .chart{padding:1.5rem} .chart__k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--u-ink-faint);margin-bottom:1.1rem} .chart__rows{display:grid;gap:1rem} .chart__row{display:grid;gap:.35rem} .chart__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;font-weight:600} .chart__lbl b{font-variant-numeric:tabular-nums;font-size:1.05rem} .chart__bar{height:16px;border-radius:99px;background:var(--u-sand);overflow:hidden} .chart__bar i{display:block;height:100%;border-radius:99px;background:var(--u-ochre); width:0;transition:width .8s var(--u-ease)} .chart__row--win .chart__lbl{color:var(--u-grass-deep)} .chart__row--win .chart__bar i{background:var(--u-grass)} .chart__save{margin-top:.3rem;display:inline-flex;align-items:center;gap:.4rem; background:var(--u-grass-tint);color:var(--u-grass-deep);border-radius:var(--u-r-pill); padding:.4rem .9rem;font-size:14px;font-weight:700} .chart__n{margin:1.1rem 0 0;font-size:12.5px;line-height:1.5;color:var(--u-ink-faint)} @media (prefers-reduced-motion:reduce){.chart__bar i{transition:none}} /* ------------------------------------------------------------- LE CALCUL -- */ .calc{padding:0;overflow:hidden;max-width:620px;margin:1.6rem auto 0} .calc__r{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1rem 1.3rem;border-bottom:1px solid var(--u-hair);font-size:15.5px} .calc__r i{font-style:normal;color:var(--u-ink-faint);font-size:13.5px} .calc__r b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap} .calc__r--minus b{color:var(--u-grass)} .calc__t{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding:1.3rem;background:var(--u-grass-tint);font-size:1rem;font-weight:600;color:var(--u-grass-deep)} .calc__t b{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.5rem);font-weight:700;letter-spacing:-.035em; font-variant-numeric:tabular-nums;line-height:1} .calc__t sup{font-size:.42em;vertical-align:super} .calc__note{max-width:620px;margin:.9rem auto 0;font-size:12.5px;line-height:1.5;color:var(--u-ink-faint)} /* --------------------------------------------------- ATLANTIC · LA VISU --- */ .shot{padding:2rem;display:grid;place-items:center;gap:1rem;background:var(--u-cream)} .shot svg{width:100%;max-width:320px;color:var(--u-grass)} .shot figcaption{font-size:13px;color:var(--u-ink-faint);text-align:center} /* --------------------------------------------------------- LES 3 ETAPES -- */ .steps3{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:16px;counter-reset:s} @media(min-width:840px){.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}} .steps3 li{background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card); padding:1.5rem;display:flex;flex-direction:column;gap:.55rem} .steps3__n{width:38px;height:38px;border-radius:var(--u-r-pill);background:var(--u-grass);color:#fff; display:grid;place-items:center;font-weight:700;font-size:16px;margin-bottom:.3rem} .steps3 h3{margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-.012em} .steps3 p{margin:0;font-family:var(--u-text);font-size:1rem;line-height:1.55;color:var(--u-ink-soft)} /* ----------------------------------------------------------- LA METHODE -- */ .mesure{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:16px;text-align:left} @media(min-width:840px){.mesure{grid-template-columns:repeat(3,minmax(0,1fr))}} .mesure li{background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card); padding:1.4rem;display:flex;flex-direction:column;gap:.5rem} .mesure svg{width:32px;height:32px;color:var(--u-grass)} .mesure h3{margin:0;font-size:1.04rem;font-weight:600} .mesure p{margin:0;font-family:var(--u-text);font-size:.99rem;line-height:1.55;color:var(--u-ink-soft)} /* -------------------------------------------------------------- LE PIED -- */ .ft{background:var(--u-ink);color:color-mix(in srgb,#fff 74%,transparent);padding-block:44px 28px} .ft .hd__n{color:#fff} .ft .hd__b svg{color:color-mix(in srgb,#fff 74%,transparent)} .ft__grid{display:grid;gap:26px} @media(min-width:820px){.ft__grid{grid-template-columns:1.4fr 1fr 1.3fr}} .ft h4{margin:0 0 .6rem;font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:color-mix(in srgb,#fff 52%,transparent)} .ft p,.ft li{font-size:14.5px;line-height:1.65;margin:0} .ft b{color:#fff} .ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem} .ft a{color:#fff;text-decoration-color:color-mix(in srgb,#fff 40%,transparent)} .ft ul a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem} .ft__end{border-top:1px solid color-mix(in srgb,#fff 16%,transparent);margin-top:26px;padding-top:18px; font-size:12.5px;line-height:1.5;color:color-mix(in srgb,#fff 52%,transparent)} /* ---------------------------------------------------- LA BARRE COLLEE ----- */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--u-ground) 92%,transparent); backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%); border-top:1px solid var(--u-hair);transform:translateY(110%);transition:transform .3s var(--u-ease)} .sticky.on{transform:translateY(0)} .sticky .u-btn{width:100%} @media(min-width:960px){.sticky{display:none}} @media (prefers-reduced-motion:reduce){.sticky{transition:none}} /* les cartes du kit heritent du sol lin, donc elles doivent rester blanches */ .u-card{background:var(--u-paper)} .u-faq{border-top-color:var(--u-hair-2)} .u-review{background:var(--u-paper)} /* ============================================================================ PASSE « MARKETEUR » · 2026-08-31 · sur ses trois corrections: du grain dans le fond, des cartes translucides, et on sort du noir. ========================================================================== */ /* --- LE GRAIN. Un lin imprime a du grain, un aplat n'en a pas. Bruit SVG en data URI, donc zero requete, plus deux halos chauds tres larges. ------ */ body{ background-color:var(--u-ground); background-image: radial-gradient(1100px 620px at 12% -6%, color-mix(in srgb,var(--u-grass) 7%,transparent), transparent 62%), radial-gradient(900px 560px at 96% 22%, color-mix(in srgb,var(--u-ochre) 8%,transparent), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); background-attachment:fixed,fixed,fixed; background-repeat:no-repeat,no-repeat,repeat; } .band--soft{position:relative;background:color-mix(in srgb,var(--u-cream) 76%,transparent)} /* --- LES CARTES TRANSLUCIDES. Le verre refractif du kit, applique au blanc: le lin et son grain transparaissent, donc la carte flotte vraiment. --- */ .u-card,.qz,.kpis li,.specs li,.steps3 li,.mesure li,.u-review{ background:color-mix(in srgb,var(--u-paper) 74%,transparent); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); border:1px solid color-mix(in srgb,#fff 68%,transparent); box-shadow:0 1px 2px rgba(20,40,30,.05), 0 18px 40px -22px rgba(20,40,30,.22); position:relative; } /* l'arete claire en haut, c'est elle qui fait lire le verre plutot que l'opacite */ .u-card::before,.qz::before,.steps3 li::before,.mesure li::before,.u-review::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb,#fff 60%,transparent),transparent 42%); z-index:0; /* DERRIERE le contenu. Sans ca le voile passait par-dessus et delavait pastilles, icones et avatars: toutes les cartes lisaient "desactive" */ } .u-card > *,.qz > *,.sim > form > *,.steps3 li > *,.mesure li > *,.u-review > *{position:relative;z-index:1} .calc,.chart,.shot{background:color-mix(in srgb,var(--u-paper) 82%,transparent)} @supports not (backdrop-filter:blur(2px)){ .u-card,.qz,.sim,.u-review{background:color-mix(in srgb,var(--u-paper) 96%,transparent)} } /* --- ON SORT DU NOIR. Le bandeau, le bloc de cloture et le pied passent en vert foret profond: meme poids visuel, aucune durete. ---------------- */ .band{background:var(--u-grass-deep); background-image:linear-gradient(120deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass) 82%,var(--u-ink)))} .ft{background:var(--u-grass-deep); background-image:linear-gradient(160deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass-deep) 84%,var(--u-ink)))} .u-ink{background:var(--u-grass-deep) !important; background-image:linear-gradient(135deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass) 70%,var(--u-ink))) !important} .u-ink .u-btn--grass{background:var(--u-paper);color:var(--u-grass-deep)} .u-ink .u-btn--grass:hover{background:var(--u-cream)} /* --- LES AVIS GOOGLE, avec la vraie marque ---------------------------------- */ .u-review__g{display:flex;align-items:center;gap:.4rem} .u-review__g img{width:15px;height:15px;flex:0 0 auto} .gsum{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap; margin:0 auto 22px;padding:.7rem 1.2rem;width:max-content;max-width:100%; border-radius:var(--u-r-pill);background:color-mix(in srgb,var(--u-paper) 80%,transparent); border:1px solid var(--u-hair);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .gsum img{width:20px;height:20px} .gsum b{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums} .gsum .u-stars svg{width:14px;height:14px} .gsum span{font-size:13.5px;color:var(--u-ink-soft)} /* les questions que se pose le lecteur sont de la RECHERCHE INTERNE. Elles ne sont jamais imprimees: la section y repond, elle ne les cite pas. */ /* --- LES CHANTIERS ---------------------------------------------------------- */ .chantiers{display:grid;gap:14px;margin-top:1.6rem} @media(min-width:700px){.chantiers{grid-template-columns:repeat(2,minmax(0,1fr))}} .chantier{border-radius:var(--u-r-card);overflow:hidden;position:relative;isolation:isolate; border:1px solid color-mix(in srgb,#fff 60%,transparent);box-shadow:var(--u-sh-2);background:var(--u-cream)} .chantier img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} /* height:auto est obligatoire: l'attribut height=750 du HTML ecrase sinon l'aspect-ratio et l'image sort en portrait */ .chantier figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .8rem; font-size:13px;font-weight:600;color:#fff; background:linear-gradient(180deg,transparent,rgba(12,26,18,.82))} /* --- L'ELIGIBILITE, deux colonnes oui / non -------------------------------- */ .elig{display:grid;gap:14px;margin:1.6rem 0} @media(min-width:700px){.elig{grid-template-columns:repeat(2,minmax(0,1fr))}} .elig li{list-style:none;display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.2rem; border-radius:var(--u-r-tile);background:var(--u-grass-tint);border:1px solid transparent} .elig li svg{width:22px;height:22px;color:var(--u-grass);flex:0 0 auto;margin-top:2px} .elig li b{display:block;font-size:15.5px;font-weight:600} .elig li span{font-size:14px;color:var(--u-ink-soft)} .elig li.no{background:color-mix(in srgb,var(--u-sand) 55%,transparent)} .elig li.no svg{color:var(--u-ink-faint)} /* --- LE RAPPEL DE CTA sous chaque bloc ------------------------------------- */ .after{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:28px} .after small{font-size:13px;color:var(--u-ink-faint)} /* --- l'en tete debordait de 6px a 390: le bouton doit pouvoir retrecir ----- */ .hd .u-btn{white-space:nowrap;padding-inline:1rem;flex:0 1 auto;min-width:0} @media(max-width:430px){.hd .u-btn{padding-inline:.8rem;font-size:14px}} /* --- la legende de chantier: elle est posee sur une photo, donc le degrade doit porter le contraste tout seul, sans dependre de l'image dessous -- */ .chantier figcaption{ background:linear-gradient(180deg,transparent,rgba(10,22,15,.62) 42%,rgba(10,22,15,.92)); padding-top:2.2rem;text-shadow:0 1px 8px rgba(0,0,0,.5)} /* ============================================================================ TOUR D AUDIT 2 · 2026-08-31 · ce que l oeil a trouve et que la mesure ratait ========================================================================== */ /* --- 1 · LE LOGO DE MARQUE, plus l icone bricolee ------------------------- */ .hd__logo{height:34px;width:auto} @media(max-width:520px){.hd__logo{height:29px}} .ft .hd__logo{height:32px;margin-bottom:.8rem} /* --- 3 · LES CARTES DE CERTIFICATION. Le vert pale sur lin lisait delave. Carte blanche, pastille verte pleine, filet net. ------------------- */ .elig li{background:var(--u-paper);border:1px solid var(--u-hair); box-shadow:0 1px 2px rgba(20,40,30,.05), 0 14px 32px -22px rgba(20,40,30,.2); gap:1rem;padding:1.3rem} .elig li svg{width:20px;height:20px;color:#fff;margin:0; padding:9px;box-sizing:content-box;background:var(--u-grass); border-radius:var(--u-r-pill);flex:0 0 auto} .elig li b{font-size:16px;margin-bottom:.15rem} .elig li.no{background:var(--u-cream)} .elig li.no svg{background:var(--u-ink-faint)} /* --- 4 · LES PASTILLES D ETAPE. Le sage pale lisait « desactive ». ------- */ .steps3__n{background:var(--u-grass-deep);color:#fff;font-size:17px; box-shadow:0 4px 12px -4px color-mix(in srgb,var(--u-grass-deep) 60%,transparent)} /* --- 5 · LA BANDE PLEINE LARGEUR. Une respiration au milieu du scroll, pour casser huit sections centrees identiques. --------------------------- */ .bleed{position:relative;isolation:isolate;min-height:min(62svh,440px); display:flex;align-items:center;overflow:hidden} .bleed picture,.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .bleed::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(90deg,rgba(12,26,18,.86) 0%,rgba(12,26,18,.6) 52%,rgba(12,26,18,.3) 100%)} .bleed__in{max-width:1100px;margin-inline:auto;padding:44px 22px;width:100%} .bleed__k{font-family:var(--u-ui);font-size:11px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:color-mix(in srgb,#fff 72%,transparent);margin:0 0 .7rem} .bleed__q{font-family:var(--u-display);font-weight:400;color:#fff;margin:0 0 1.4rem; font-size:clamp(1.5rem,1.1rem + 2.1vw,2.5rem);line-height:1.14;max-width:22ch;letter-spacing:-.018em} .bleed .u-btn--grass{background:#fff;color:var(--u-grass-deep)} .bleed .u-btn--grass:hover{background:var(--u-cream)} /* --- 6 · CASSER LA MONOTONIE. Une section sur deux cale a gauche sur une grille asymetrique, au lieu de huit blocs centres a l identique. ----- */ @media(min-width:960px){ .lead2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,4vw,64px);align-items:end;margin-bottom:8px} .lead2 .lede{margin-bottom:0} } .h2{max-width:22ch} .center .h2{max-width:26ch;margin-inline:auto} /* --- TOUR 2 · les cartes de certification etaient a 4 colonnes, donc chaque titre cassait sur deux lignes et le texte sortait en colonne etroite. Deux colonnes larges, le titre tient sur une ligne. ------------------ */ @media(min-width:760px){ .u-sec .elig[style]{grid-template-columns:repeat(2,minmax(0,1fr)) !important} } .elig li b{white-space:nowrap} @media(max-width:520px){.elig li b{white-space:normal}} /* --- TOUR 3 · la section materiel montrait un dessin dans une carte vide. Une vraie photo de l unite posee vaut dix illustrations. ------------- */ .shot{position:relative;padding:0;border-radius:var(--u-r-xl);overflow:hidden;background:var(--u-cream); border:1px solid color-mix(in srgb,#fff 60%,transparent);box-shadow:var(--u-sh-3);display:block} .shot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block} .shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem .9rem; font-size:13px;font-weight:600;color:#fff;text-align:left;text-shadow:0 1px 8px rgba(0,0,0,.5); background:linear-gradient(180deg,transparent,rgba(10,22,15,.6) 45%,rgba(10,22,15,.9))} @media(min-width:900px){.shot img{aspect-ratio:4/5}} /* ============================================================================ TOUR 4 · LA PROFONDEUR ET LE MOUVEMENT · 2026-08-31 Sa correction: « the site doesnt have depth at all and is static ». Vrai, et les composants existaient deja dans le kit sans etre cables. Trois leviers, dans cet ordre: la SUPERPOSITION (des plans qui se chevauchent), la REACTION (ce qui bouge sous le doigt) et la REVELATION (ce qui arrive). Tout meurt proprement en prefers-reduced-motion. ========================================================================== */ /* --- 1 · LA SUPERPOSITION -------------------------------------------------- */ /* la carte du quiz remonte DANS la bande de confiance: deux sections qui se chevauchent, c'est ce qui fait qu'une page a une epaisseur */ /* les deux chantiers ne sont plus alignes: le second descend, la grille respire */ @media(min-width:700px){ .chantiers .chantier:nth-child(2){transform:translateY(38px)} .chantiers{margin-bottom:38px} } /* la photo du materiel repose sur une plaque decalee: deux plans, pas un */ .shot{transform:rotate(-1.1deg)} .shot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:var(--u-sand);transform:rotate(2.4deg) translate(10px,10px)} @media(min-width:900px){.shot{margin-right:12px}} /* la bande sombre mord sur la section suivante */ .bleed{margin-bottom:-1px} /* --- 2 · LA REACTION · ce qui repond au doigt et au curseur ---------------- */ .elig li,.steps3 li,.mesure li,.u-review,.chantier,.kpis li,.specs li{ transition:transform .34s var(--u-ease), box-shadow .34s var(--u-ease), border-color .34s var(--u-ease); } @media(hover:hover){ .elig li:hover,.steps3 li:hover,.mesure li:hover,.u-review:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(20,40,30,.06), 0 28px 56px -26px rgba(20,40,30,.34); border-color:color-mix(in srgb,var(--u-grass) 26%,transparent)} .chantier:hover{transform:translateY(-5px) scale(1.006)} .chantiers .chantier:nth-child(2):hover{transform:translateY(33px) scale(1.006)} .chantier img{transition:transform .7s var(--u-ease)} .chantier:hover img{transform:scale(1.035)} .tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(20,40,30,.3)} .u-btn--grass:hover{transform:translateY(-1px)} } .u-btn{transition:transform .2s var(--u-ease), background-color .2s var(--u-ease), box-shadow .2s var(--u-ease)} /* le detail de la FAQ s ouvre au lieu de sauter */ .u-faq details summary{transition:color .2s var(--u-ease)} .u-faq details[open] summary{color:var(--u-grass-deep)} .u-faq details > p{animation:faq .3s var(--u-ease)} @keyframes faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* --- 3 · LA REVELATION · une courbe, 300ms, 60ms d ecart, rien d autre ---- */ .rv{opacity:0;transform:translateY(18px); transition:opacity .38s var(--u-ease), transform .38s var(--u-ease); transition-delay:var(--d,0ms)} .rv.in{opacity:1;transform:none} /* --- 4 · LE PARALLAXE · l image du fond derive plus lentement que la page -- */ .hero__bg img,.bleed img{will-change:transform} /* --- 5 · LE COMPTEUR de la bande de confiance ----------------------------- */ .band__l b{font-variant-numeric:tabular-nums} /* --- TOUT MEURT ICI ------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .shot,.shot::after{transform:none} .chantiers .chantier:nth-child(2){transform:none} .elig li:hover,.steps3 li:hover,.mesure li:hover,.u-review:hover, .chantier:hover,.chantier:hover img,.tile:hover,.u-btn--grass:hover{transform:none} .u-faq details > p{animation:none} .hero__bg img,.bleed img{transform:none !important} } /* --- TOUR 5 · le voile des legendes mangeait un quart de la photo. Il descend et se concentre sur la ligne de texte. ------------------- */ .chantier figcaption,.shot figcaption{ padding-top:3.4rem; background:linear-gradient(180deg,transparent 0%,rgba(10,22,15,.24) 46%,rgba(10,22,15,.8) 100%)} /* --- TOUR 6 · deux fautes vues seulement sur telephone --------------------- */ /* 1 · la bande de confiance passe a deux rangees sous 760px, donc le chevauchement de la carte du quiz l avalait entierement. Sur telephone la carte ne remonte plus, et la bande garde sa place. */ /* 2 · le parallaxe agrandit l image a 128% et chassait la maison hors cadre sur telephone. Il ne tourne plus que sur grand ecran, ou il y a la place. */ @media(max-width:900px){ .hero__bg img{height:100% !important;top:0 !important;transform:none !important; object-position:50% 58%} } /* ============================================================================ TOUR 7 · SES SEIZE COMMENTAIRES SUR LA PAGE · 2026-08-31 Un bloc, seize corrections, dans l'ordre ou il les a posees. La ligne directrice de l'ensemble: « lacks depth and layering », « logos, graphs, images and visual artifacts should dominate ». Donc partout ici on ajoute un PLAN, pas un effet: une plaque derriere, une arete devant, une vraie marque au lieu d'une icone dessinee. ========================================================================== */ /* --- 13 · « blank space too dominant should be smaller » ------------------- Le hero tenait 92svh avec space-between: sur telephone il ouvrait un trou entre le titre et la carte. Et huit sections a 88px de respiration faisaient une page deux fois plus longue que son contenu. */ .u-sec{padding-block:clamp(36px,4.4vw,66px)} .hero{min-height:auto} .hero__in{justify-content:flex-start;gap:18px;padding:18px 22px 26px} .hero__txt{padding-top:2px} .hero__lede{margin-top:.55rem} .hero__proof{margin-top:.75rem} @media(min-width:960px){ .hero{min-height:min(88svh,760px)} .hero__in{flex-direction:row;align-items:center;gap:48px;padding-block:64px 56px} .hero__txt{flex:1 1 52%} .hero .sim{flex:0 0 452px} } /* --- 12 · le nombre. « 12 000 is on two separate lines while it should be on one uniquely, the color should be different and in bold ». Fraunces est ici en 400 statique: son gras serait synthetique et sale. Le nombre passe donc en Inter 800, ce qui le rend VRAIMENT gras et le detache du serif au lieu de l'imiter. Insecable par construction. */ .h1n{ display:inline-block;white-space:nowrap;font-family:var(--u-ui);font-weight:800; font-style:normal;color:var(--u-gold);letter-spacing:-.035em;font-size:.94em; text-shadow:0 2px 18px rgba(0,0,0,.42), 0 0 34px color-mix(in srgb,var(--u-gold) 30%,transparent)} .hero h1{max-width:19ch} /* --- 14 · « logo should be included in big to establish brand presence » --- */ .hd__in{padding:12px 22px;gap:14px} .hd__logo{height:48px} @media(max-width:760px){.hd__logo{height:40px}} @media(max-width:430px){.hd__logo{height:34px}} .ft .hd__logo{height:40px} /* --- 15 · « CTA should be blinking or popping to incite interaction » Pas un clignotement, qui lit « publicite » et fatigue. Un halo qui respire toutes les 3,2s, plus une lueur au survol. Meurt en reduced. */ .hd__cta{position:relative;min-height:56px;gap:.5rem; box-shadow:0 6px 18px -8px color-mix(in srgb,var(--u-grass) 70%,transparent)} .hd__ci{width:17px;height:17px;flex:0 0 auto; transition:transform .22s var(--u-ease)} .hd__cta:hover .hd__ci{transform:translateX(3px)} /* le halo est une OMBRE, pas une bordure decalee: une bordure a inset:-3px compte dans le debordement du document et poussait la page a 322px sur un ecran de 320. Une box-shadow ne prend jamais de place. */ .hd__cta{animation:halo 3.4s var(--u-ease) infinite} @keyframes halo{ 0%,66%{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--u-grass) 70%,transparent), 0 0 0 0 color-mix(in srgb,var(--u-grass) 42%,transparent)} 84%{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--u-grass) 70%,transparent), 0 0 0 9px color-mix(in srgb,var(--u-grass) 0%,transparent)} 100%{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--u-grass) 70%,transparent), 0 0 0 0 color-mix(in srgb,var(--u-grass) 0%,transparent)} } @media (prefers-reduced-motion:reduce){.hd__cta{animation:none}} /* --- 16 · le numero de telephone a quitte l'en tete. Il ne reste qu'un geste possible en haut de page, et c'est le bon. ------------------------- */ /* ============================================================================ 11 · LE SIMULATEUR · « should be shining, act like a serious simulator that gives the incentive to interact, features should be loaded, icons should be premium and represent really what to press ». ========================================================================== */ .sim{ position:relative;border-radius:var(--u-r-xl);padding:1.15rem 1.15rem 1.25rem; background:color-mix(in srgb,var(--u-paper) 93%,transparent); backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%); border:1px solid color-mix(in srgb,#fff 72%,transparent); box-shadow: 0 1px 2px rgba(12,26,18,.10), 0 30px 70px -28px rgba(12,26,18,.62), 0 0 0 1px color-mix(in srgb,var(--u-gold) 16%,transparent); isolation:isolate;overflow:hidden} /* l'arete lumineuse en haut: c'est elle qui fait « shining », pas une ombre */ .sim::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2; background:linear-gradient(90deg,transparent,var(--u-gold-soft) 22%,var(--u-gold) 50%,var(--u-gold-soft) 78%,transparent)} /* le balayage: une bande claire traverse la carte toutes les 7s, une fois */ .sim::after{content:"";position:absolute;top:0;bottom:0;width:38%;z-index:0;pointer-events:none; background:linear-gradient(100deg,transparent,color-mix(in srgb,#fff 55%,transparent),transparent); animation:sweep 7s var(--u-ease) infinite} @keyframes sweep{0%{left:-45%}55%,100%{left:120%}} @media (prefers-reduced-motion:reduce){.sim::after{animation:none;display:none}} .sim form{position:relative;z-index:1} @media(max-width:959px){.sim{padding:1rem 1rem 1.1rem}} .sim__top{display:grid;gap:.6rem;margin-bottom:.85rem} .sim__k{display:flex;align-items:center;gap:.5rem;margin:0; font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--u-grass)} .sim__meter{display:flex;align-items:center;gap:.8rem} .sim__track{flex:1;height:6px;border-radius:99px;background:var(--u-sand);overflow:hidden} .sim__track i{display:block;height:100%;width:16%;border-radius:99px; background:linear-gradient(90deg,var(--u-grass),color-mix(in srgb,var(--u-grass) 60%,var(--u-gold))); transition:width .34s var(--u-ease)} .sim__step{font-size:13px;font-weight:600;color:var(--u-ink-soft);white-space:nowrap} @media (prefers-reduced-motion:reduce){.sim__track i{transition:none}} /* --- LA JAUGE. C'est elle qui rend le simulateur « serieux »: le chiffre existe des la premiere seconde et il se precise a chaque reponse. --- */ .gauge{display:grid;gap:.35rem;padding:.85rem 1rem;margin-bottom:1rem; border-radius:var(--u-r-tile);position:relative;overflow:hidden; background-color:var(--u-grass-deep); background-image:linear-gradient(135deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass) 76%,var(--u-ink))); color:#fff;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent)} .gauge::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 140% at 88% -20%, color-mix(in srgb,var(--u-gold) 26%,transparent), transparent 58%)} .gauge__l{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;position:relative;z-index:1} .gauge__k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:color-mix(in srgb,#fff 70%,transparent)} .gauge__v{font-family:var(--u-ui);font-weight:800;font-size:1.42rem;letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--u-gold-soft);white-space:nowrap;line-height:1.1} .gauge--on .gauge__v{color:var(--u-gold);text-shadow:0 0 22px color-mix(in srgb,var(--u-gold) 55%,transparent)} .gauge__n{font-size:12.5px;line-height:1.35;color:color-mix(in srgb,#fff 80%,transparent);position:relative;z-index:1} .gauge--warn .gauge__n{color:var(--u-gold-soft)} .gauge__c{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:.15rem 0 0;padding:0;position:relative;z-index:1} .gauge__c:empty{display:none} .gauge__c li{font-size:11.5px;font-weight:600;padding:2.5px 8px;border-radius:var(--u-r-pill); background:color-mix(in srgb,#fff 16%,transparent);color:#fff; border:1px solid color-mix(in srgb,#fff 22%,transparent)} /* --- LES OPTIONS. « icons should be premium and by premium i mean represent really what to press »: une icone par reponse, qui dessine la chose reelle (une cuve, une flamme, une cle), plus une coche a la selection. */ .u-opt--ic span{gap:.8rem;padding:.72rem .9rem;min-height:64px;align-items:center} .u-opt--ic span::before{display:none} .opt__i{width:26px;height:26px;flex:0 0 auto;color:var(--u-grass); padding:8px;box-sizing:content-box;border-radius:12px; background:var(--u-grass-tint);transition:background-color .2s var(--u-ease),color .2s var(--u-ease)} .opt__t{flex:1;display:flex;flex-direction:column;gap:1px;font-style:normal;min-width:0} .opt__t i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--u-ink-faint);line-height:1.3} .opt__c{width:20px;height:20px;flex:0 0 auto;color:#fff;background:var(--u-grass); border-radius:50%;padding:4px;box-sizing:content-box; opacity:0;transform:scale(.6);transition:opacity .2s var(--u-ease),transform .2s var(--u-ease)} .u-opt--ic input:checked + span .opt__c{opacity:1;transform:scale(1)} .u-opt--ic input:checked + span .opt__i{background:var(--u-grass);color:#fff} .u-opt--ic input:checked + span{box-shadow:0 8px 22px -14px color-mix(in srgb,var(--u-grass) 90%,transparent)} /* les tuiles de foyer: un chiffre, gros, lisible au pouce */ .u-opt--n span{flex-direction:column;gap:0;justify-content:center;min-height:64px;padding:.4rem .2rem} .u-opt--n span::before{display:none} .u-opt--n b{font-size:1.24rem;font-weight:700;letter-spacing:-.03em;line-height:1.1} .u-opt--n i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--u-ink-faint)} .u-opt--n input:checked + span b{color:var(--u-grass-deep)} /* les tranches de revenus portent leur consequence: c'est ca, un simulateur */ .u-opt--val span{gap:.7rem;padding:.7rem .95rem;min-height:60px;flex-wrap:wrap} .u-opt--val span::before{display:none} .opt__v{margin-left:auto;font-size:12.5px;font-weight:700;white-space:nowrap; color:var(--u-grass-deep);background:var(--u-grass-tint); padding:3px 9px;border-radius:var(--u-r-pill)} .u-opt--val input:checked + span .opt__v{background:var(--u-grass);color:#fff} /* les champs portent leur icone: on sait ce qu'on tape avant de taper */ .u-field--ic{position:relative} .u-field--ic .fi{position:absolute;left:14px;bottom:0;width:20px;height:20px; color:var(--u-ink-faint);pointer-events:none;transform:translateY(-19px)} .u-field--ic input{padding-left:44px} .u-field--ic:has(.u-help) .fi{transform:translateY(-45px)} .u-field--ic:has(label) .fi{bottom:auto;top:auto} .qz__lock{display:flex;align-items:center;gap:.4rem} .qz__lock svg{width:14px;height:14px;flex:0 0 auto} .qz__amount{display:block;font-family:var(--u-ui);font-weight:800;font-style:normal; font-size:clamp(1.9rem,1.4rem + 2vw,2.5rem);letter-spacing:-.04em;line-height:1.05; color:var(--u-grass-deep);margin:.2rem 0 .7rem;font-variant-numeric:tabular-nums} .qz__badge--warn{background:color-mix(in srgb,var(--u-ochre) 15%,transparent);color:var(--u-ochre)} .okl{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem;text-align:left} .okl li{display:flex;align-items:flex-start;gap:.6rem;font-size:14px;color:var(--u-ink-soft);line-height:1.45} .okl svg{width:15px;height:15px;flex:0 0 auto;color:#fff;background:var(--u-grass); border-radius:50%;padding:3px;box-sizing:content-box;margin-top:1px} /* ============================================================================ 9 · LA BANDE DE CONFIANCE · « add the logo to establish trust for atlantic and make this band stand out in color and in texture from the hero, it is very weak here ». Elle etait vert sombre sous une photo sombre: deux plans de meme valeur ne se distinguent pas. Elle passe en LIN, elle MORD sur la photo de 38px, elle prend un grain, et elle porte les VRAIES marques. ========================================================================== */ .band{ position:relative;z-index:4;margin-top:-40px; border-radius:26px 26px 0 0;padding:1.4rem 0 1.1rem; background:var(--u-ground);color:var(--u-ink); background-image: linear-gradient(180deg,color-mix(in srgb,#fff 70%,transparent),transparent 180px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23b)' opacity='.085'/%3E%3C/svg%3E"); box-shadow:0 -26px 50px -24px rgba(10,22,15,.55)} .band::before{content:"";position:absolute;left:0;right:0;top:0;height:3px; border-radius:26px 26px 0 0; background:linear-gradient(90deg,transparent,var(--u-gold) 30%,var(--u-gold-soft) 50%,var(--u-gold) 70%,transparent)} @media(min-width:960px){.band{margin-top:-52px}} .band__k{text-align:center;margin:0 0 1rem;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--u-ink-faint)} .band__logos{list-style:none;margin:0 0 1.15rem;padding:0 0 1.15rem; display:grid;gap:14px 10px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center; border-bottom:1px solid var(--u-hair)} @media(min-width:760px){.band__logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}} .band__logos li{display:flex;flex-direction:column;align-items:center;gap:.42rem;text-align:center} .band__logos img{height:38px;width:auto;object-fit:contain} .band__logos li:nth-child(3) img{height:22px} .band__logos span{font-size:11.5px;line-height:1.3;color:var(--u-ink-faint);max-width:19ch} .band__g{gap:.3rem !important} .band__g img{height:26px !important} .band__g span{font-size:13px !important;color:var(--u-ink) !important} .band__g b{font-weight:700;font-variant-numeric:tabular-nums} /* ============================================================================ 5 · LES AVIS GOOGLE · « add depth, lacks depth ». La pastille etait un contour pose a plat. Elle devient une carte a trois zones, avec une arete, une ombre portee et un plan qui la souleve du lin. ========================================================================== */ .gsum{display:none} .gcard{display:grid;gap:.9rem;align-items:center;margin:34px auto 0;padding:1.1rem 1.3rem; width:max-content;max-width:100%;border-radius:var(--u-r-card);position:relative;overflow:hidden; background:color-mix(in srgb,var(--u-paper) 88%,transparent); backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%); border:1px solid color-mix(in srgb,#fff 70%,transparent); box-shadow:0 1px 2px rgba(20,40,30,.06), 0 26px 54px -26px rgba(20,40,30,.34)} .gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,color-mix(in srgb,#fff 62%,transparent),transparent 44%)} .gcard > *{position:relative;z-index:1} @media(min-width:620px){.gcard{grid-auto-flow:column;gap:1.5rem;padding:1.1rem 1.5rem}} .gcard__brand{display:flex;align-items:center;gap:.55rem;font-size:13px;font-weight:600; color:var(--u-ink-soft);justify-content:center} .gcard__brand img{width:26px;height:26px} .gcard__score{display:flex;align-items:center;gap:.8rem;justify-content:center; padding-inline:1.4rem;border-inline:1px solid var(--u-hair)} @media(max-width:619px){.gcard__score{border-inline:0;padding-inline:0; border-block:1px solid var(--u-hair);padding-block:.8rem}} .gcard__score > b{font-family:var(--u-ui);font-weight:800;font-size:2.3rem;letter-spacing:-.045em; line-height:1;color:var(--u-grass-deep);font-variant-numeric:tabular-nums} .gcard__score .u-stars{display:flex;gap:2px} .gcard__score .u-stars svg{width:15px;height:15px;fill:var(--u-gold);color:var(--u-gold)} .gcard__n{display:block;font-size:12.5px;color:var(--u-ink-faint);margin-top:2px} .gcard__n b{font-weight:700;color:var(--u-ink-soft)} .gcard__a{display:inline-flex;align-items:center;gap:.35rem;justify-content:center; font-size:13.5px;font-weight:600;color:var(--u-grass-deep);text-decoration:none;white-space:nowrap} .gcard__a svg{width:14px;height:14px} .gcard__a:hover{text-decoration:underline} /* ============================================================================ 7 · « logos should be added when present ». Trois marques reelles existaient deja sur le disque et aucune n'etait sur la page. Elles remplacent l'icone dessinee partout ou la marque EST la preuve. ========================================================================== */ .elig--logo li{align-items:center} .elig__logo{height:46px;width:auto;object-fit:contain;flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(20,40,30,.14))} .elig__logo--w{height:38px} .brandmark{height:26px;width:auto;margin:.1rem 0 .5rem; filter:drop-shadow(0 3px 8px rgba(20,40,30,.12))} /* ============================================================================ 3 · 4 · 8 · LA PROFONDEUR ET LA SUPERPOSITION « lacks depth and layering » · « background lacks depth and layering » · « the background should have texture added for some slides and maybe even images with low opacity of happy customers, alternating to keep layering and depth present ». Une section sur deux porte desormais une PLAQUE: une vraie photographie de la maison au chaud ou du chantier, a 6-9% d'opacite, fondue en haut et en bas au masque pour qu'elle n'ait pas de bord. Plus de grain dans le sol, plus de halos, et un filet clair a la couture de chaque plan. ========================================================================== */ body{ background-image: radial-gradient(1100px 620px at 12% -6%, color-mix(in srgb,var(--u-grass) 9%,transparent), transparent 62%), radial-gradient(900px 560px at 96% 20%, color-mix(in srgb,var(--u-ochre) 10%,transparent), transparent 60%), radial-gradient(1000px 700px at 40% 108%, color-mix(in srgb,var(--u-grass) 8%,transparent), transparent 64%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E"); background-attachment:fixed,fixed,fixed,fixed; background-repeat:no-repeat,no-repeat,no-repeat,repeat; } .plated{position:relative;isolation:isolate} .plated::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none; background-image:var(--plate);background-size:cover; background-position:var(--plate-pos,50% 50%); opacity:var(--plate-o,.07);filter:saturate(.7); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%)} /* le voile qui garde le texte lisible par-dessus la plaque, quelle que soit la photo: la mesure de contraste ne doit rien devoir a l'image */ .plated::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(130% 90% at 50% 45%, color-mix(in srgb,var(--u-ground) 62%,transparent), color-mix(in srgb,var(--u-ground) 24%,transparent))} .band--soft.plated::after{background:radial-gradient(130% 90% at 50% 45%, color-mix(in srgb,var(--u-cream) 66%,transparent), color-mix(in srgb,var(--u-cream) 26%,transparent))} /* la couture entre deux plans: un filet clair en haut, une ombre douce dessous. C'est ce qui fait qu'on VOIT deux couches au lieu d'un aplat qui change. */ .band--soft{position:relative; box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 78%,transparent), inset 0 -1px 0 color-mix(in srgb,var(--u-sand) 70%,transparent)} /* les cartes gagnent un troisieme etage d'ombre: contact, portee, ambiante */ .u-card,.qz,.kpis li,.specs li,.steps3 li,.mesure li,.u-review,.elig li{ box-shadow: 0 1px 1px rgba(20,40,30,.05), 0 8px 18px -12px rgba(20,40,30,.18), 0 30px 60px -34px rgba(20,40,30,.34)} /* le graphe est un artefact visuel, pas un tableau: il merite son relief */ .chart{box-shadow:0 1px 2px rgba(20,40,30,.06), 0 34px 66px -30px rgba(20,40,30,.4)} .chart__bar{box-shadow:inset 0 1px 2px rgba(20,40,30,.14)} .chart__bar i{box-shadow:0 1px 0 color-mix(in srgb,#fff 30%,transparent)} /* ============================================================================ 1 · 2 · 16 · LE TELEPHONE A QUITTE LA PAGE « remove number of phone always » · « we should only have the CTA » · « remove phone number and too confidential information, only add adresse and siret ». Le pied garde l'entite, l'adresse et le SIRET. Rien d'autre. ========================================================================== */ .ft__cta{margin-top:.9rem;display:inline-flex;border-color:color-mix(in srgb,#fff 40%,transparent);color:#fff} .ft__cta:hover{background:color-mix(in srgb,#fff 12%,transparent)} .nextl{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem} .nextl li{display:flex;align-items:center;gap:.65rem;font-size:14px;line-height:1.4} .nextl span{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center; font-size:11.5px;font-weight:700;background:color-mix(in srgb,#fff 18%,transparent); border:1px solid color-mix(in srgb,#fff 26%,transparent)} /* --- ce qui meurt en mouvement reduit --------------------------------------- */ @media (prefers-reduced-motion:reduce){ .sim::after,.hd__cta{animation:none} .opt__c{transition:none} } /* --- retouches apres la premiere passe navigateur -------------------------- */ @media(min-width:960px){ .hero{min-height:min(84svh,724px)} .hero__in{padding-block:48px 44px} } .gauge__l{flex-wrap:wrap} @media(max-width:420px){ .gauge__v{font-size:1.3rem} .gauge__l{gap:.25rem} } /* --- deux fautes vues a l'ecran, pas a la lecture du code ------------------ */ /* 1 · le bouton du pied etait un bouton fantome BLANC sur fond vert: il lisait comme une pastille vide. Il devient un contour clair. */ .ft__cta{background:transparent !important;color:#fff !important; border:1px solid color-mix(in srgb,#fff 42%,transparent) !important; min-height:48px;padding-inline:1.1rem;font-size:14.5px} .ft__cta:hover{background:color-mix(in srgb,#fff 12%,transparent) !important} /* 2 · les pastilles 1-2-3 vivent dans la carte BLANCHE du bloc encre, donc un fond blanc translucide les rendait invisibles. */ .u-ink__card .nextl span{background:var(--u-grass-tint);color:var(--u-grass-deep); border-color:color-mix(in srgb,var(--u-grass) 22%,transparent)} .u-ink__card .nextl li{color:var(--u-ink)} /* --- 320px · le logo agrandi ne tient plus a cote du CTA. Sous 400 il rend la hauteur qu'il faut, et pas un pixel de plus: le document ne deborde jamais, c'est la seule regle qui ne se negocie pas. ----------------- */ @media(max-width:400px){ .hd__in{padding-inline:14px;gap:10px} .hd__logo{height:28px} .hd .u-btn{padding-inline:.72rem;font-size:13.5px} .hd__ci{width:15px;height:15px} } /* ============================================================================ TOUR 8 · SES SIX COMMENTAIRES DU 31 AOUT AU MATIN ========================================================================== */ /* --- 1 · LE FOND · « add texture to the background, that means the background should have layers and the background having some sort of depth and material going out, to not be plain ». Un bruit a 7% n'est pas une matiere, c'est un voile. Une matiere a une TRAME (le fil), un GRAIN (la fibre), une MOUCHETURE (l'irregularite) et un BORD (la vignette qui dit qu'il y a une feuille, pas un vide). Quatre couches, toutes fixes, toutes en CSS, zero requete. --------- */ /* couche 1 · la trame. Deux passes croisees a 45 degres: c'est le tissage du lin, et c'est ce qui rend la surface tactile de pres. */ body::before{ content:"";position:fixed;inset:0;z-index:-10;pointer-events:none; background-image: repeating-linear-gradient(45deg, color-mix(in srgb,var(--u-ink) 3.4%,transparent) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, color-mix(in srgb,var(--u-ink) 2.6%,transparent) 0 1px, transparent 1px 4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)' opacity='.16'/%3E%3C/svg%3E"); background-size:auto, auto, 620px 620px; mix-blend-mode:multiply; } /* couche 2 · le bord. Sans vignette une page n'a pas de bords, donc pas de feuille, donc pas de matiere: elle lit comme une couleur. */ body::after{ content:"";position:fixed;inset:0;z-index:-9;pointer-events:none; background: radial-gradient(150% 105% at 50% 45%, transparent 46%, color-mix(in srgb,var(--u-ink) 9%,transparent) 100%), linear-gradient(90deg, color-mix(in srgb,var(--u-ink) 5%,transparent), transparent 13%, transparent 87%, color-mix(in srgb,var(--u-ink) 5%,transparent)); } /* couche 3 · le grain, monte de .075 a .13, et une seconde frequence pour que le motif ne se repete pas visiblement sur 9 000 px de page. */ body{ background-image: radial-gradient(1200px 680px at 10% -8%, color-mix(in srgb,var(--u-grass) 12%,transparent), transparent 60%), radial-gradient(980px 600px at 98% 16%, color-mix(in srgb,var(--u-ochre) 13%,transparent), transparent 58%), radial-gradient(1100px 760px at 34% 62%, color-mix(in srgb,var(--u-grass) 9%,transparent), transparent 62%), radial-gradient(900px 620px at 88% 96%, color-mix(in srgb,var(--u-ochre) 10%,transparent), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); background-attachment:fixed,fixed,fixed,fixed,fixed; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat; } /* la bande sourde herite de la matiere au lieu de l'effacer: un aplat creme par-dessus une trame de lin tuait la trame sur un tiers de la page. */ .band--soft{background-color:color-mix(in srgb,var(--u-cream) 64%,transparent)} /* couche 4 · L'ARTEFACT QUI SORT DU CADRE. « material going out ». Un trait geant, tire du jeu de taches de la maison, qui deborde la section. Il n'illustre rien: il donne une echelle et un troisieme plan. */ .artefact{position:absolute;pointer-events:none;z-index:-1;color:var(--u-grass); opacity:.055;width:min(46vw,620px);height:auto} .artefact--r{right:-8%;top:-6%} .artefact--l{left:-10%;bottom:-10%;transform:scaleX(-1)} @media(max-width:860px){.artefact{opacity:.04;width:min(78vw,420px)}} /* ============================================================================ 4 · LE RUBAN D'AVIS · « there are only 3 reviews, there should be an endless row always scrolling with reviews just like before ». Dix-neuf avis reels, la piste ecrite deux fois, translation de -50%: la boucle est mathematiquement invisible. Elle se fige au survol et au focus, sinon on ne peut pas lire ce qu'on veut lire. ========================================================================== */ .ticker{position:relative;margin-top:26px;overflow:hidden;padding-block:6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .ticker__row{display:flex;width:max-content; animation:tick var(--dur,120s) linear infinite} @keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .ticker:hover .ticker__row, .ticker:focus-within .ticker__row{animation-play-state:paused} /* la marge est portee par la carte, PAS par un gap de flex: avec un gap, la moitie de la piste ne tombe pas sur le debut de la seconde copie et le ruban saute d'un demi ecart a chaque tour. */ .ticker .u-review{flex:0 0 340px;width:340px;margin-right:16px; display:flex;flex-direction:column} .ticker .u-review__t{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical; overflow:hidden} @media(max-width:520px){.ticker .u-review{flex-basis:290px;width:290px}} @media (prefers-reduced-motion:reduce){ .ticker__row{animation:none} .ticker{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px} .ticker .u-review{scroll-snap-align:start} } /* ============================================================================ 2 · 3 · L'ESPACEMENT · « spacing in this part should be studied and is really bad knowing it is the first impression of the site » et « spacing between the two parts is bad here too ». Le defaut etait qu'il n'y avait pas d'ECHELLE: surtitre, titre, chapo et grille etaient separes par quatre valeurs sans rapport entre elles. Une seule progression desormais, et elle se lit: 0,5 · 0,8 · 2,4 rem. ========================================================================== */ .u-eyebrow{margin:0 0 .5rem} .h2{margin:0 0 .8rem} .lede{margin:0} /* le pas franc entre le bloc de titre et le contenu qu'il annonce */ .elig,.steps3,.mesure,.chantiers,.ticker,.calc,.u-faq,.gcard{margin-top:2.4rem} .center + .elig,.center + .mesure{margin-top:2.4rem} .u-sec .elig[style]{margin-top:2.4rem !important} .gcard{margin-top:2.4rem;margin-bottom:0} .after{margin-top:2.4rem} /* le bloc de titre centre: une largeur de lecture, pas une largeur de boite */ .u-sec .center{max-width:60ch;margin-inline:auto} .lede{max-width:62ch} .center .lede{margin-inline:auto} /* les deux parts d'un bloc en vis a vis: l'ecart horizontal etait plus petit que l'ecart vertical, donc les deux colonnes se lisaient comme une seule. */ .split{gap:clamp(30px,3vw,44px) clamp(40px,5vw,72px);align-items:center} /* les deux colonnes n'existent QUE sur grand ecran. La regle .split--rev etait ecrite hors media query et forcait deux colonnes a 390 px: le bloc materiel sortait de l'ecran de 21 px. */ @media(min-width:900px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)} .split--rev{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)} } .split__t > :last-child{margin-bottom:0} .kpis,.specs{margin-bottom:1.8rem} @media(min-width:960px){.hero__in{gap:56px}} .hasart{position:relative;overflow:hidden} /* ============================================================================ TOUR 9 · LE TÉLÉPHONE · 31 août 2026 Sa mesure: « 2/10 ». Et: « when i drag my finger around everything moves with it, it feels not in place », « it feels like lego that is about to fall, not a page standing still and firm ». IL A RAISON ET C'EST MOI QUI L'AI CASSÉ. La passe de profondeur a empilé, sur un appareil qui n'en avait pas besoin, quatre sources de mouvement autonome: 1. `background-attachment:fixed` sur cinq couches, plus deux pseudo-elements en `position:fixed` plein écran. Sur un téléphone le navigateur repeint ça à chaque image et la barre d'URL qui se rétracte change la hauteur du viewport: le fond RETARDE sur le doigt. C'est littéralement « tout bouge quand je fais glisser mon doigt ». 2. La révélation au scroll sur chaque carte: dix-huit blocs qui glissent de 18 px vers le haut pendant qu'on descend. C'est le lego. 3. Les décorations en transform: la photo matériel tournée de 1,1 degré sur une plaque décalée, le second chantier descendu de 38 px. 4. Le balayage du simulateur et le halo du CTA, qui pulsent en boucle. Sur grand écran ces quatre choses donnent de la profondeur. Sur un écran de 390 px tenu à la main, elles donnent de l'instabilité. Une page tient debout quand rien ne bouge sans qu'on l'ait touchée. ========================================================================== */ @media(max-width:900px){ /* 1 · LE FOND NE DÉCOLLE PLUS. Il défile avec la page, comme le papier. */ body{background-attachment:scroll,scroll,scroll,scroll,scroll} body::before{position:absolute;inset:0;height:100%;min-height:100%} body::after{display:none} /* la vignette d'un écran n'a pas de sens sur un document de 9 000 px de haut */ /* 2 · RIEN N'ARRIVE. Le contenu est là dès le premier pixel. */ .rv{opacity:1 !important;transform:none !important;transition:none !important} /* 3 · TOUT EST D'APLOMB. Aucune rotation, aucun décalage décoratif. */ .shot{transform:none;margin-right:0} .shot::after{display:none} .chantiers .chantier:nth-child(2){transform:none} .chantiers{margin-bottom:0} /* 4 · RIEN NE PULSE. */ .sim::after{display:none} .hd__cta{animation:none} /* l espacement et la typo de ce bloc sont partis dans le SYSTEME TELEPHONE en bas de fichier. Ici il ne reste que la stabilite. */ } /* le pied porte le lockup clair, plus l'arche bricolee a la main */ .ft__logo{height:38px;width:auto;margin-bottom:.9rem} @media(max-width:430px){.ft__logo{height:32px}} /* deux liens tombaient sous la cible tactile de 44 px: le lien vers les avis Google et le numero de France Renov' dans le pied. */ .gcard__a{min-height:44px} .ft p a{display:inline-flex;align-items:center;min-height:44px} /* le simulateur est borne par la colonne du hero, pas par une largeur de lecture */ .sim{max-width:none} .sim h3{font-family:var(--u-ui)} /* ============================================================================ TOUR 10 · LES SIX POINTS DU CLIENT · 31 août 2026 ========================================================================== */ /* --- 4 · « some cards should be centered, they are going to the left » Vrai, et la cause est bête: `.elig` est un `