/* ============================================================ Vendly — site vitrine Feuille de style partagée (design system + interactions) Polices auto-hébergées (RGPD : aucun appel à Google Fonts) ============================================================ */ /* ---------- Bricolage Grotesque (titres) ---------- */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap; src:url("/site/fonts/bricolage-latin.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap; src:url("/site/fonts/bricolage-latinext.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---------- Plus Jakarta Sans (texte) ---------- */ @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url("/site/fonts/jakarta-latin.woff2") format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url("/site/fonts/jakarta-latinext.woff2") format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} /* ---------- Base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;color-scheme:light} body{background:#E9F2EF;color:#0A2B29;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5} img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:3px solid #0C8F84;outline-offset:2px;border-radius:6px} /* ---------- Animations ---------- */ @keyframes vlyAurora1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.18)}100%{transform:translate(0,0) scale(1)}} @keyframes vlyAurora2{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-8vw,-6vh) scale(.92)}100%{transform:translate(0,0) scale(1.1)}} @keyframes vlyAurora3{0%{transform:translate(0,0)}50%{transform:translate(6vw,-8vh) scale(1.12)}100%{transform:translate(0,0)}} @keyframes vlyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* Cette animation ne doit PAS toucher à transform. Un élément qui anime son transform devient le bloc conteneur de ses descendants en position:fixed — et comme elle est posée sur avec le remplissage « both », l'effet persistait après la fin. L'en-tête fixe se calait donc sur le body et défilait avec la page au lieu de rester en haut. Un simple fondu suffit. */ @keyframes vlyPageIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){body{animation:vlyPageIn .55s cubic-bezier(.22,1,.36,1) both}} /* Reveal on scroll (JS ajoute .is-in) */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)} .reveal.is-in{opacity:1;transform:none} /* ---------- Interactions (états au survol) ---------- */ .nav-link{transition:color .2s} .nav-link:hover{color:#0A2B29} .foot-link{transition:color .2s} .foot-link:hover{color:#FAFBFB} .btn-primary{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1)} .btn-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px rgba(10,43,41,.34)} .btn-primary.lg:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 32px rgba(10,43,41,.36)} .btn-ghost{transition:transform .25s cubic-bezier(.22,1,.36,1)} .btn-ghost:hover{transform:translateY(-3px)} .card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)} .card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.25),0 18px 42px rgba(10,43,41,.15)} /* ---------- Bouton App Store ---------- */ .btn-appstore{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;border-radius:12px;padding:9px 16px;border:1px solid rgba(255,255,255,.2);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s} .btn-appstore:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.28)} .btn-appstore .ico{width:20px;height:20px;flex-shrink:0} .btn-appstore .t1{font-size:9.5px;line-height:1.1;opacity:.92;display:block;letter-spacing:.01em} .btn-appstore .t2{font-size:16px;line-height:1.15;font-weight:600;display:block;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.01em} .btn-appstore.lg{padding:12px 24px;border-radius:14px;gap:12px} .btn-appstore.lg .ico{width:26px;height:26px} .btn-appstore.lg .t1{font-size:11px} .btn-appstore.lg .t2{font-size:20px} .btn-appstore.block{justify-content:center;width:100%} .menu-panel .btn-appstore{justify-content:center;margin-top:4px} /* ---------- Menu mobile ---------- */ .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px;color:#0A2B29;transition:background .2s} .menu-btn:hover{background:rgba(255,255,255,.5)} .menu-panel{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:4px;padding:12px;border-radius:18px;z-index:60} .menu-panel.open{display:flex;animation:vlyMenuIn .24s cubic-bezier(.22,1,.36,1) both;transform-origin:top center} @keyframes vlyMenuIn{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}} .menu-panel a{padding:13px 14px;border-radius:12px;text-decoration:none;color:#0A2B29;font-weight:600;font-size:16px;transition:background .2s} .menu-panel a:hover{background:rgba(255,255,255,.55)} .menu-panel .menu-cta{background:linear-gradient(180deg,#1A4B46,#0A2B29);color:#FAFBFB;text-align:center;margin-top:4px} @media (max-width:760px){ .menu-btn{display:grid;place-items:center} } /* ---------- Reusable atoms ---------- */ .glass{background:rgba(255,255,255,.42);backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.25),0 12px 32px rgba(10,43,41,.10)} .eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0C8F84} .h-display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.08} .prose{max-width:70ch} .prose h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.01em;font-size:26px;margin:34px 0 12px;line-height:1.15} .prose h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;margin:24px 0 8px} .prose p{margin:0 0 14px;color:#324B47;line-height:1.7;font-size:16px} .prose ul{margin:0 0 14px 20px;color:#324B47;line-height:1.7} .prose li{margin:4px 0} .prose a{color:#066A62;font-weight:600} /* ---------- Forms ---------- */ .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:14px;font-weight:700;color:#0A2B29} .field input,.field textarea,.field select{font-family:inherit;font-size:15.5px;color:#0A2B29;background:rgba(255,255,255,.85);border:1px solid rgba(10,43,41,.14);border-radius:14px;padding:13px 15px;transition:border-color .2s,box-shadow .2s} .field textarea{min-height:140px;resize:vertical} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:#0C8F84;box-shadow:0 0 0 3px rgba(12,143,132,.18)} .form-note{font-size:13px;color:#52706B;line-height:1.6} .form-status{font-size:15px;font-weight:600;border-radius:12px;padding:12px 14px;display:none} .form-status.ok{display:block;background:#E2F4F0;color:#066A62} .form-status.err{display:block;background:#FDE8E8;color:#B4322F} /* ============================================================ Bloc ajouté pour le site de démonstration (v2, août 2026) ============================================================ */ /* ---------- Mise en page ---------- */ .wrap{width:100%;max-width:1120px;margin:0 auto} .sec{position:relative;z-index:1;padding:78px 24px;display:flex;justify-content:center} .sec-head{display:flex;flex-direction:column;gap:14px;max-width:62ch} .h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.1;font-size:clamp(28px,4vw,46px);margin:0} .lead{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:#52706B;max-width:60ch} /* ---------- Sélecteur de langue ---------- */ /* width:fit-content : dans le pied de page, la colonne est un flex vertical qui étire ses enfants sur toute la largeur. La pastille des trois langues s'allongeait donc jusqu'au bout de la colonne, avec un grand vide à droite. */ .lang{display:inline-flex;width:fit-content;gap:2px;padding:3px;border-radius:99px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8)} .lang a{display:grid;place-items:center;min-width:34px;height:26px;border-radius:99px;text-decoration:none;font-size:12px;font-weight:700;color:#52706B;letter-spacing:.03em;transition:background .2s,color .2s} .lang a:hover{color:#0A2B29} .lang a[aria-current="true"]{background:#0A2B29;color:#FAFBFB} /* Bandeau « cette page existe dans ta langue » [hidden] doit être déclaré ICI : la règle du navigateur ([hidden]{display:none}) a moins de poids qu'une classe, donc le display:flex ci-dessous l'écrasait et le bandeau vide s'affichait en petite pastille de verre au ras de l'en-tête. */ .langbar[hidden]{display:none} .langbar{position:fixed;left:50%;transform:translateX(-50%) translateY(-140%);bottom:auto;top:76px;z-index:70;display:flex;align-items:center;gap:14px;padding:11px 14px 11px 18px;border-radius:99px;font-size:14.5px;font-weight:600;transition:transform .45s cubic-bezier(.22,1,.36,1)} .langbar.show{transform:translateX(-50%) translateY(0)} .langbar a{color:#066A62;text-decoration:none;font-weight:700;white-space:nowrap} .langbar button{background:none;border:0;cursor:pointer;color:#52706B;font-size:18px;line-height:1;padding:2px 4px;border-radius:8px} .langbar button:hover{color:#0A2B29} /* ---------- Cadre iPhone ---------- Trois couches, comme un vrai appareil : une bande métallique très fine, une marge de verre noir, puis l'écran. La bande fait 2 px : sur un iPhone le titane ne dépasse pas d'un ou deux millimètres, tout le reste est de l'écran. Le dégradé alterne clair et sombre par bandes courtes — c'est ce qui donne l'impression de métal brossé plutôt que de plastique gris. */ /* Rayons en pixels, pas en pourcentage. Deux raisons. Un seul pourcentage donne des coins ELLIPTIQUES sur un rectangle : 13 % de 278 px de large font 36 px, 13 % de 603 px de haut en font 79. Écrire « 14% / 6.48% » corrigeait l'ellipse, mais pas le problème suivant. Trois rectangles emboîtés doivent être CONCENTRIQUES : le rayon de chacun vaut celui du parent moins l'épaisseur de la bande. En pourcentage, chaque rayon se calcule sur sa propre boîte, avec sa propre excentricité — les trois arcs ne suivaient donc pas la même courbe. Résultat : le liseré noir restait fin sur les côtés et s'épaississait dans les angles, ce qui donnait ce bas de téléphone bancal. 39 − 3 = 36, 36 − 3,5 = 32,5. Trois arcs parallèles, partout. */ /* display:grid sur les deux enveloppes, et surtout PAS de height:100%. La hauteur de .tel vient de son aspect-ratio ; Safari ne sait pas toujours résoudre un pourcentage de hauteur contre une hauteur obtenue de cette façon. La couche noire retombait alors sur la hauteur intrinsèque de la capture, plus courte de quelques pixels : d'où cette bande métallique trop épaisse sous l'écran, visible sur grand format et pas sur téléphone où l'écart était deux fois moindre. En grille, l'enfant s'étire tout seul. */ .tel{position:relative;display:grid;width:100%;max-width:278px;aspect-ratio:1290/2796;margin:0 auto; border-radius:39px;padding:3px; background:linear-gradient(145deg,#F4F7F6 0%,#AEB9B7 8%,#7C8886 15%,#EDF1F0 26%,#93A09D 38%,#6E7A78 47%,#D9E0DE 58%,#8A9794 70%,#F1F4F3 82%,#96A2A0 91%,#6B7775 100%); box-shadow:0 26px 54px rgba(10,43,41,.24),0 4px 12px rgba(10,43,41,.12),0 0 0 .5px rgba(10,43,41,.22)} .tel .verre{display:grid;min-height:0;border-radius:36px;padding:3.5px;background:#080C0C; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16)} .tel img{width:100%;height:100%;min-height:0;border-radius:32.5px;object-fit:cover;background:#E9F2EF;display:block} /* Boutons latéraux. Sur un vrai iPhone ils sont courts et brillants : un bouton de volume fait à peine 4 % de la hauteur. À 16 % ils ressemblaient à des rails. Le dégradé horizontal leur donne le même reflet que la tranche. */ .tel .btn-g,.tel .btn-d{position:absolute;width:2px;border-radius:1px;pointer-events:none; background:linear-gradient(90deg,#6F7B79,#D8DFDD 35%,#F2F5F4 55%,#93A09D); box-shadow:0 0 0 .5px rgba(10,43,41,.18)} .tel .btn-g{left:-1.5px} .tel .btn-d{right:-1.5px} .tel .b1{top:20.5%;height:2.6%} /* silencieux */ .tel .b2{top:26%;height:5.4%} /* volume + */ .tel .b3{top:33%;height:5.4%} /* volume − */ .tel .b4{top:28%;height:8.6%} /* veille */ .tel.flotte{animation:vlyFloat 7s ease-in-out infinite} /* ---------- Hero ---------- .sec.hero et pas .hero : la section porte les deux classes, et la règle `.sec{padding:46px 18px}` du bloc mobile arrive PLUS LOIN dans la feuille. À poids égal, c'est la dernière qui gagne — la marge haute du hero tombait donc à 46 px et le titre passait sous la barre fixe. Deux classes suffisent à passer devant, quel que soit l'ordre. */ .sec.hero{padding-top:150px;padding-bottom:56px} .hero-centre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:840px} .hero-titre{margin:0;font-size:clamp(46px,7.4vw,92px);line-height:1.0} .hero-chapo{margin:0;max-width:56ch;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#52706B} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px} .hero-actions .btn-ghost{display:inline-flex;align-items:center;padding:16px 26px;border-radius:16px;color:#0A2B29;text-decoration:none;font-weight:700;font-size:16px} .hero-rassure{margin:0;font-size:14px;color:#52706B} /* ---------- Démonstration écran par écran ---------- */ .demo{display:flex;flex-direction:column;gap:96px} .demo-pas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);align-items:center} .demo-pas:nth-child(even) .demo-txt{order:2} .demo-txt{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .demo-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(160deg,#0C8F84,#066A62);color:#FAFBFB;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;box-shadow:0 6px 16px rgba(6,106,98,.3)} .demo-txt h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.12;font-size:clamp(23px,2.7vw,31px)} .demo-txt p{margin:0;color:#42605B;line-height:1.68;font-size:16.5px;max-width:46ch} .puces{display:flex;flex-direction:column;gap:9px;margin:2px 0 0;padding:0;list-style:none} .puces li{position:relative;padding-left:26px;color:#42605B;font-size:15.5px;line-height:1.55} .puces li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:13px;border-radius:50%;background:#E2F4F0;box-shadow:inset 0 0 0 3.5px #0C8F84} /* ---------- Avant / après ---------- */ .ab{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1/1;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;box-shadow:0 20px 46px rgba(10,43,41,.18)} /* Sans -webkit-user-drag, Safari démarre son propre glisser-déposer d'image dès qu'on attrape le curseur : une copie translucide de la veste suivait la souris par-dessus le comparateur. pointer-events:none évite en plus que les images volent les événements au conteneur. */ .ab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; -webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none} .ab .apres{clip-path:inset(0 0 0 var(--x,50%))} .ab .barre{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#FAFBFB;box-shadow:0 0 0 1px rgba(10,43,41,.16),0 0 18px rgba(10,43,41,.3);pointer-events:none} .ab .poignee{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#FAFBFB;display:grid;place-items:center;box-shadow:0 6px 18px rgba(10,43,41,.3);pointer-events:none;font-size:15px;color:#0A2B29} .ab .etq{position:absolute;bottom:14px;padding:6px 13px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(10,43,41,.72);color:#FAFBFB;backdrop-filter:blur(8px);pointer-events:none} .ab .etq.g{left:14px} .ab .etq.d{right:14px;background:rgba(12,143,132,.86)} /* ---------- Cartes ---------- */ .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px} .carte{border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:11px} .carte h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.01em;font-size:20px} .carte p{margin:0;color:#42605B;line-height:1.62;font-size:15.5px} .ico-rond{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#E2F4F0;color:#066A62;margin-bottom:3px} .ico-rond svg{width:22px;height:22px} /* ---------- Chiffres ---------- */ .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px} .chiffre{border-radius:20px;padding:22px 20px;text-align:center} .chiffre b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,38px);color:#066A62;line-height:1.1} .chiffre span{display:block;margin-top:5px;font-size:14px;color:#52706B;line-height:1.45} /* ---------- Tarifs ---------- */ .tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;align-items:stretch} .tarif{position:relative;border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;gap:14px} .tarif.pop{box-shadow:inset 0 0 0 2px #0C8F84,0 18px 40px rgba(10,43,41,.14)} .tarif .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:99px;background:linear-gradient(160deg,#0C8F84,#066A62);color:#FAFBFB;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap} .tarif h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px} .tarif .prix{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;line-height:1;color:#0A2B29} .tarif .prix small{font-size:14px;font-weight:600;color:#52706B;font-family:'Plus Jakarta Sans',sans-serif} .tarif .quota{font-weight:700;color:#066A62;font-size:15.5px} .tarif p{margin:0;color:#52706B;font-size:14.5px;line-height:1.55;flex:1} /* ---------- FAQ ---------- Neuf questions dépliées d'office, c'était un mur. Tout est maintenant derrière un seul bouton ; chaque question garde son propre repli. Le texte reste dans le HTML et dans le schéma FAQPage : Google le lit, qu'il soit affiché ou non. */ .faq-tout > summary{list-style:none;cursor:pointer} .faq-tout > summary::-webkit-details-marker{display:none} .faq-bascule{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-radius:18px; font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;color:#0A2B29;transition:transform .25s cubic-bezier(.22,1,.36,1)} .faq-bascule:hover{transform:translateY(-2px)} .faq-bascule::after{content:"";width:9px;height:9px;border-right:2.5px solid #0C8F84;border-bottom:2.5px solid #0C8F84;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s} .faq-tout[open] > .faq-bascule::after{transform:rotate(-135deg) translate(-2px,-2px)} .faq-tout[open] > .faq-bascule{margin-bottom:12px} .faq{display:flex;flex-direction:column;gap:12px} .faq details{border-radius:18px;padding:4px 22px;transition:box-shadow .3s} .faq summary{cursor:pointer;list-style:none;padding:19px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17.5px;letter-spacing:-.005em;display:flex;justify-content:space-between;align-items:center;gap:18px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:23px;font-weight:400;color:#0C8F84;transition:transform .3s;flex-shrink:0;line-height:1} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{margin:0 0 20px;color:#42605B;line-height:1.72;font-size:15.5px;max-width:74ch} /* ---------- Bandeau final ---------- Vert d'eau, pas vert foncé : le pied de page juste en dessous est déjà presque noir. Deux blocs sombres collés faisaient une grosse masse terne coupée d'une bande claire. En teal, l'appel à l'action se détache et le pied de page reste le point d'arrivée. */ .final{border-radius:32px;padding:clamp(38px,6vw,64px) 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;color:#FAFBFB; background:linear-gradient(152deg,#12A093 0%,#0C8F84 42%,#066A62 100%); box-shadow:0 24px 56px rgba(6,106,98,.28),inset 0 1px 0 rgba(255,255,255,.24)} .final h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,46px);line-height:1.08;margin:0;letter-spacing:-.01em} .final p{margin:0;color:rgba(255,255,255,.86);max-width:52ch;line-height:1.6;font-size:16.5px} .final .fin-note{font-size:13.5px;color:rgba(255,255,255,.7)} /* Sélecteur de langue posé sur fond sombre */ .lang.sombre{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)} .lang.sombre a{color:rgba(250,251,251,.62)} .lang.sombre a:hover{color:#FAFBFB} .lang.sombre a[aria-current="true"]{background:#FAFBFB;color:#0A2B29} /* Une ancre amène le haut de la section pile en haut de la fenêtre, donc sous l'en-tête fixe. scroll-margin-top réserve la hauteur de la barre. */ section[id]{scroll-margin-top:96px} /* ---------- Menu déroulant ---------- Le panneau porte aussi la classe .glass, définie PLUS BAS dans la feuille : à spécificité égale, c'est la dernière déclaration qui gagne, et le fond à 42 % d'opacité reprenait donc le dessus. D'où le titre du hero qui transparaissait au travers du menu. On sélectionne les deux classes ensemble pour passer devant, et on garde un vrai flou : le panneau reste clair, mais ce qu'il y a derrière devient illisible, ce qui est le but. */ .menu-panel.glass{ background:rgba(244,249,248,.90); backdrop-filter:blur(34px) saturate(1.7);-webkit-backdrop-filter:blur(34px) saturate(1.7); border:1px solid rgba(255,255,255,.92); box-shadow:0 20px 48px rgba(10,43,41,.22),inset 0 1px 0 rgba(255,255,255,.95)} /* Le bouton noir de l'App Store est une exception : la règle de couleur du menu lui repeignait son texte en encre, et il se retrouvait noir sur noir. */ .menu-panel a.btn-appstore{color:#fff} .menu-panel a.btn-appstore:hover{background:#000} /* ---------- En-tête compacte au défilement ---------- L'en-tête est fixe depuis le début : elle suit déjà la page. Le reproche portait sur la place qu'elle prend. Passé 40 px de défilement, elle se resserre — moins de marge, logo plus petit, verre plus opaque pour rester lisible par-dessus le contenu. On garde l'accès permanent aux sections et aux langues sans manger le haut de l'écran. */ .entete{transition:padding .28s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)} /* Escamotable : elle s'efface quand on descend, revient dès qu'on remonte. On ne la voit donc que lorsqu'on la cherche. */ .entete.cachee{transform:translateY(-135%)} .entete .barre{transition:padding .28s cubic-bezier(.22,1,.36,1),background .28s,box-shadow .28s} .entete .marque-nom,.entete .marque-logo{transition:font-size .28s,width .28s,height .28s} .entete.compacte{padding-top:8px} .entete.compacte .barre{padding:5px 12px;background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(10,43,41,.14)} .entete.compacte .marque-logo{width:28px;height:28px;border-radius:9px} .entete.compacte .marque-logo>span{font-size:16px} .entete.compacte .marque-nom{font-size:17px} @media (prefers-reduced-motion:reduce){.entete,.entete *{transition:none !important}} /* ---------- Pages légales ---------- Elles gardent leur mise en page (une colonne étroite, une carte de verre), mais reprennent l'en-tête, les liens et le pied du site pour qu'on ne se croie pas passé sur un autre domaine en cliquant sur « CGU ». */ .legal-top{display:flex;align-items:center;gap:12px;margin-bottom:22px} .legal-marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .legal-logo{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(160deg,#0C8F84,#066A62);flex-shrink:0} .legal-logo span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;color:#FAFBFB;line-height:1} .legal-logo i{position:absolute;top:-4px;right:-4px;width:11px;height:11px;background:#FFC24B;clip-path:polygon(50% 0%,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0% 50%,38% 38%)} .legal-nom{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em} .legal-retour{margin-left:auto;color:#0C8F84;font-weight:700;font-size:14px;text-decoration:none;transition:color .2s} .legal-retour:hover{color:#066A62} .legal-liens{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .legal-liens a{padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);color:#42605B;text-decoration:none;font-size:13.5px;font-weight:600;transition:background .2s,color .2s} .legal-liens a:hover{background:rgba(255,255,255,.9);color:#0A2B29} .legal-liens a[aria-current="page"]{background:#0A2B29;border-color:#0A2B29;color:#FAFBFB} .legal-pied{text-align:center;margin-top:26px;font-size:12.5px;color:#52706B} .legal-pied a{color:#066A62;font-weight:600;text-decoration:none} /* ---------- Responsive ---------- L'en-tête porte quatre groupes : logo, navigation, langues, bouton App Store. En flex, quand la place manque, les éléments se compriment au lieu de passer à la ligne — la pastille des langues finissait posée sur « Tarifs ». On bascule donc sur le menu bien plus tôt, et le bouton noir disparaît avant lui. */ @media (max-width:1040px){ [data-nav-links]{display:none !important} .menu-btn{display:grid !important;place-items:center} } @media (max-width:900px){ .hide-sm{display:none !important} /* Quatre forfaits dans 340 px, ça faisait quatre colonnes de timbres-poste. Une seule colonne : chaque carte respire et le prix redevient lisible. */ .tarifs{grid-template-columns:1fr} .grille{grid-template-columns:1fr} } @media (max-width:860px){ /* Le téléphone touchait le dernier point de la liste. 34 px de plus, et l'œil comprend qu'il illustre ce qu'il vient de lire au lieu d'y coller. */ .demo-pas{grid-template-columns:1fr;gap:38px} .demo-pas .demo-txt,.demo-pas:nth-child(even) .demo-txt{order:0} .demo{gap:72px} .sec.hero{padding-top:128px;padding-bottom:34px} .hero-centre{gap:22px} } @media (max-width:760px){ [data-nav-links]{display:none !important} .hide-sm{display:none !important} [data-hero-grid]{grid-template-columns:1fr !important;gap:40px !important} [data-hero-copy]{text-align:center !important;align-items:center !important} [data-studio-grid]{grid-template-columns:1fr !important;gap:26px} .sec{padding:46px 18px} .langbar{left:14px;right:14px;transform:translateY(-160%);width:auto;max-width:none} .langbar.show{transform:translateY(0)} } /* ---------- Téléphone : plus court à parcourir ---------- Sur un écran de 6 pouces, six téléphones de 280 px empilés font une page interminable et le pouce s'épuise avant les tarifs. On resserre tout : maquettes plus petites, sections moins hautes, cartes plus compactes. Rien n'est masqué — le texte compte pour le référencement, et une page mobile amputée n'est plus la même page que celle vue par Google. */ @media (max-width:640px){ /* Téléphone plus petit : les trois rayons se resserrent d'autant, toujours à la même différence que les bandes (27,5 − 2,5 − 2,5). */ .tel{max-width:196px;padding:2.5px;border-radius:27.5px} .tel .verre{padding:2.5px;border-radius:25px} .tel img{border-radius:22.5px} .demo{gap:44px} .demo-pas{gap:20px} .demo-txt{gap:11px} .demo-txt h3{font-size:21px} .demo-txt p{font-size:15.5px;line-height:1.6} .demo-num{width:29px;height:29px;font-size:14px;border-radius:10px} .puces li{font-size:14.5px;padding-left:23px} .puces li::before{width:11px;height:11px;top:7px;box-shadow:inset 0 0 0 3px #0C8F84} .sec{padding:38px 16px} .sec-head{gap:10px} .grille{gap:12px} .carte{padding:20px 18px;gap:8px} .carte h3{font-size:18px} .carte p{font-size:14.5px} .tarifs{gap:12px} .tarif{padding:22px 20px;gap:10px} .faq details{padding:2px 18px} .faq summary{font-size:16px;padding:16px 0} .faq details p{font-size:14.5px;margin-bottom:16px} .final{border-radius:26px;padding:34px 22px;gap:16px} .ab{border-radius:20px} .ab .poignee{width:40px;height:40px} .demo-pas{gap:30px} .faq-bascule{padding:15px 18px;font-size:15.5px} .sec.hero{padding-top:118px;padding-bottom:26px} .hero-titre{font-size:clamp(40px,12vw,58px)} .hero-chapo{font-size:16.5px} .hero-actions{width:100%;flex-direction:column;align-items:stretch} .hero-actions > *{justify-content:center} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} .reveal{opacity:1;transform:none} }