/* idf.bricolage — Acctual style (DESIGN.md). Light, achromatic, sky-teal accent. */ /* Fonts: charger via dans le HTML plutôt que @import (fiabilité file://) */ :root { --color-canvas-white: #ffffff; --color-ink-black: #000000; --color-graphite: #0f0f0f; --color-deep-slate: #1e1e1e; --color-ash-gray: #8d8d8d; --color-button-black: #0d111b; --color-sky-teal: #0098f2; --color-hot-pink: #f200ca; --color-vivid-violet: #6d56fc; --color-subtle-cream: #f7fafc; --color-line: rgba(13,17,27,0.08); --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-script: 'Caveat', cursive; --text-caption: 12px; --text-body-sm: 14px; --text-body: 16px; --text-subheading: 20px; --text-heading: 32px; --text-heading-lg: 40px; --text-display: 64px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-56: 56px; --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px; --r-card: 20px; --r-img: 32px; --r-btn: 100px; --shadow-subtle: rgba(0,0,0,0.06) 0px 2.5px 2.5px 0px; --shadow-btn: rgb(36,38,40) 0px 0px 0px 1px, rgba(27,28,29,0.48) 0px 1px 2px 0px; --max: 1200px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family: var(--font-display); font-size: var(--text-body); line-height: 1.5; color: var(--color-graphite); background: var(--color-canvas-white); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv03','cv04','cv09','cv11'; } img{max-width:100%;display:block;height:auto} a{color: var(--color-sky-teal); text-decoration: none} a:hover{text-decoration: underline} h1,h2,h3,h4{font-family: var(--font-display); color: var(--color-ink-black); letter-spacing: -0.02em; font-weight: 600} h1{font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.037em; font-weight: 600} h2{font-size: var(--text-heading-lg); line-height: 1.15; letter-spacing: -0.03em} h3{font-size: var(--text-heading); line-height: 1.21; letter-spacing: -0.025em} h4{font-size: var(--text-subheading); line-height: 1.25; letter-spacing: -0.012em; font-weight: 500} p{color: var(--color-deep-slate); font-size: var(--text-body); line-height: 1.5; margin-bottom: var(--s-16)} .lede{font-size: var(--text-subheading); line-height: 1.4; color: var(--color-deep-slate); max-width: 620px; font-weight: 400} @media (max-width: 800px){ h1{font-size: 44px; letter-spacing:-0.025em} h2{font-size: 32px} h3{font-size: 26px} } .eyebrow{ font-size: var(--text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-sky-teal); display: inline-block; margin-bottom: var(--s-16); } .handwritten{font-family: var(--font-script); font-weight: 600; color: var(--color-sky-teal); font-size: 24px; line-height: 1.2} .container{max-width: var(--max); margin: 0 auto; padding: 0 var(--s-32)} section{padding: var(--s-96) 0} section.alt{background: var(--color-subtle-cream)} @media (max-width: 800px){section{padding: var(--s-64) 0}} /* === Header === */ .site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--color-line); } .nav{ max-width: var(--max); margin: 0 auto; padding: var(--s-16) var(--s-32); display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); } .brand{display: inline-flex; align-items: center; gap: var(--s-8); text-decoration: none} .brand img{height: 44px; width: auto} .nav-links{list-style: none; display: flex; gap: var(--s-32); align-items: center} .nav-links a{ color: var(--color-ash-gray); font-weight: 500; font-size: var(--text-body-sm); text-decoration: none; transition: color .15s; } .nav-links a:hover, .nav-links a.active{color: var(--color-ink-black); text-decoration: none} @media (max-width: 800px){ .nav{flex-wrap: wrap; gap: var(--s-16)} .nav-links{gap: var(--s-16); flex-wrap: wrap} } /* === Buttons === */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); padding: 12px 22px; border-radius: var(--r-btn); font-family: var(--font-display); font-weight: 500; font-size: var(--text-body-sm); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; } .btn:hover{transform: translateY(-1px); text-decoration: none} .btn-primary{background: var(--color-button-black); color: #fff; box-shadow: var(--shadow-btn)} .btn-primary:hover{background: #000; color: #fff} .btn-ghost{background: transparent; color: var(--color-ink-black); border-color: var(--color-line)} .btn-ghost:hover{background: var(--color-subtle-cream); border-color: rgba(13,17,27,0.18); color: var(--color-ink-black)} .btn-link{color: var(--color-sky-teal); padding: 6px 0; font-weight: 500; gap: 4px} .btn-link::after{content: '→'; transition: transform .2s} .btn-link:hover{text-decoration: none} .btn-link:hover::after{transform: translateX(3px)} /* === Hero === */ .hero{padding: var(--s-96) 0 var(--s-64)} .hero-grid{display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-80); align-items: center} .hero h1{margin-bottom: var(--s-24)} .hero .lede{margin-bottom: var(--s-32)} .hero-actions{display: flex; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-32)} .feature-list{list-style: none; display: flex; flex-direction: column; gap: var(--s-12)} .feature-list li{display: flex; align-items: center; gap: var(--s-8); color: var(--color-graphite); font-size: var(--text-body-sm); margin: 0} .feature-list .check{ display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; background: var(--color-sky-teal); color: #fff; font-size: 11px; font-weight: 700; } .hero-visual{ border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4/5; max-height: 580px; position: relative; } .hero-visual img{width:100%;height:100%;object-fit: cover} .hero-tag{ position: absolute; bottom: 24px; left: 24px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-radius: var(--r-card); padding: var(--s-16) var(--s-20); display: flex; align-items: center; gap: var(--s-12); box-shadow: var(--shadow-subtle); } .hero-tag .dot{width: 8px; height: 8px; border-radius: 50%; background: var(--color-sky-teal); flex: 0 0 8px} .hero-tag span{font-size: var(--text-body-sm); font-weight: 500; color: var(--color-ink-black)} @media (max-width: 900px){ .hero{padding: var(--s-64) 0 var(--s-48)} .hero-grid{grid-template-columns: 1fr; gap: var(--s-48)} .hero-visual{aspect-ratio: 4/3; max-height: 380px} } /* === Trust strip === */ .trust{ border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: var(--s-32) 0; background: var(--color-subtle-cream); } .trust-row{display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); flex-wrap: wrap} .trust-row .label{font-size: var(--text-caption); color: var(--color-ash-gray); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600} .trust-stats{display: flex; gap: var(--s-48); flex-wrap: wrap} .trust-stat strong{font-size: var(--text-subheading); color: var(--color-ink-black); font-weight: 600; display: block; line-height: 1} .trust-stat span{font-size: var(--text-caption); color: var(--color-ash-gray)} /* === Section header === */ .section-head{max-width: 720px; margin-bottom: var(--s-64)} .section-head.center{margin: 0 auto var(--s-64); text-align: center} .section-head h2{margin-bottom: var(--s-16)} .section-head p{color: var(--color-ash-gray); font-size: var(--text-subheading); line-height: 1.4} /* === Pillars === */ .pillars{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24)} @media (max-width: 900px){.pillars{grid-template-columns: 1fr}} .pillar{ background: var(--color-canvas-white); border: 1px solid var(--color-line); border-radius: var(--r-card); padding: var(--s-32); display: flex; flex-direction: column; gap: var(--s-16); transition: border-color .15s, transform .15s; } .pillar:hover{border-color: rgba(13,17,27,0.18); transform: translateY(-2px)} .pillar-icon{ width: 48px; height: 48px; border-radius: 14px; background: var(--color-subtle-cream); display: flex; align-items: center; justify-content: center; color: var(--color-sky-teal); } .pillar-icon svg{width: 24px; height: 24px} .pillar h4{font-weight: 600; color: var(--color-ink-black); margin: 0} .pillar p{flex: 1; color: var(--color-ash-gray); margin: 0} /* === Two-col alternating === */ .altrow{display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-80); align-items: center} .altrow + .altrow{margin-top: var(--s-96)} .altrow .media{border-radius: var(--r-img); overflow: hidden; aspect-ratio: 5/4} .altrow .media img{width:100%;height:100%;object-fit:cover} .altrow.reverse .copy{order: 2} .altrow.reverse .media{order: 1} .altrow ul{list-style: none; padding: 0; margin: var(--s-24) 0} .altrow li{display: flex; gap: var(--s-12); padding: var(--s-12) 0; border-bottom: 1px solid var(--color-line); color: var(--color-graphite); margin: 0} .altrow li:last-child{border-bottom: 0} .altrow li strong{flex: 0 0 88px; font-weight: 600; color: var(--color-ink-black); font-variant-numeric: tabular-nums} @media (max-width: 900px){ .altrow{grid-template-columns: 1fr; gap: var(--s-32)} .altrow.reverse .copy{order: 0} .altrow.reverse .media{order: 0} } /* === Comparison table === */ .compare{ background: var(--color-canvas-white); border: 1px solid var(--color-line); border-radius: var(--r-card); overflow: hidden; } .compare table{width: 100%; border-collapse: collapse} .compare th, .compare td{padding: var(--s-20) var(--s-24); text-align: left} .compare thead{background: var(--color-subtle-cream)} .compare th{font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ash-gray); font-weight: 600} .compare tbody tr + tr{border-top: 1px solid var(--color-line)} .compare td{color: var(--color-deep-slate); font-size: var(--text-body-sm)} .compare td:first-child{color: var(--color-ink-black); font-weight: 500} .compare .reco{color: var(--color-sky-teal); font-weight: 500} @media (max-width: 700px){.compare th, .compare td{padding: var(--s-12) var(--s-16); font-size: 13px}} /* === Kiwiiz partner === */ .kiwiiz-partner{ background: var(--color-button-black); color: #fff; border-radius: var(--r-img); padding: var(--s-64); display: grid; grid-template-columns: 240px 1fr; gap: var(--s-56); align-items: center; margin-top: var(--s-40); } .kiwiiz-partner .partner-logo{ background: #fff; border-radius: var(--r-card); padding: var(--s-32); display: flex; align-items: center; justify-content: center; } .kiwiiz-partner .partner-logo img{height: 48px; width: auto} .kiwiiz-partner h3{color: #fff; font-weight: 600; margin: var(--s-8) 0 0} .kiwiiz-partner p{color: rgba(255,255,255,0.72); font-size: var(--text-body); margin: var(--s-16) 0 var(--s-24)} .kiwiiz-partner .eyebrow{color: var(--color-sky-teal)} .kiwiiz-partner .ctas{display: flex; gap: var(--s-12); flex-wrap: wrap} .kiwiiz-partner .ctas .btn-primary{background: #fff; color: var(--color-button-black); box-shadow: none} .kiwiiz-partner .ctas .btn-primary:hover{background: var(--color-sky-teal); color: #fff} .kiwiiz-partner .ctas .btn-ghost{color: #fff; border-color: rgba(255,255,255,0.2)} .kiwiiz-partner .ctas .btn-ghost:hover{background: rgba(255,255,255,0.06); color: #fff} @media (max-width: 800px){ .kiwiiz-partner{grid-template-columns: 1fr; padding: var(--s-32); gap: var(--s-24)} } /* === FAQ === */ .faq{display: flex; flex-direction: column; gap: var(--s-12); max-width: 880px} .faq details{ border: 1px solid var(--color-line); border-radius: var(--r-card); padding: var(--s-24) var(--s-32); background: var(--color-canvas-white); transition: border-color .15s; } .faq details[open]{border-color: var(--color-sky-teal)} .faq summary{ cursor: pointer; list-style: none; font-weight: 500; color: var(--color-ink-black); font-size: var(--text-subheading); display: flex; justify-content: space-between; align-items: center; } .faq summary::-webkit-details-marker{display: none} .faq summary::after{content: '+'; font-size: 24px; color: var(--color-sky-teal); font-weight: 400; transition: transform .2s} .faq details[open] summary::after{transform: rotate(45deg)} .faq details p{margin-top: var(--s-16); color: var(--color-deep-slate); margin-bottom: 0} /* === Testimonial === */ .testimonial{ background: var(--color-subtle-cream); border-radius: var(--r-img); padding: var(--s-64); text-align: center; max-width: 900px; margin: 0 auto; } .testimonial .handwritten{display: block; margin-bottom: var(--s-16)} .testimonial blockquote{ font-size: var(--text-heading); line-height: 1.3; color: var(--color-ink-black); font-weight: 400; letter-spacing: -0.018em; margin-bottom: var(--s-32); } .testimonial cite{ font-style: normal; display: flex; align-items: center; justify-content: center; gap: var(--s-12); color: var(--color-ash-gray); font-size: var(--text-body-sm); } .testimonial cite::before{content: '—'; color: var(--color-sky-teal)} @media (max-width: 800px){ .testimonial{padding: var(--s-32)} .testimonial blockquote{font-size: 22px} } /* === CTA banner === */ .cta-banner{border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: var(--s-64) 0; background: var(--color-canvas-white)} .cta-banner .container{display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); flex-wrap: wrap} .cta-banner h3{font-size: var(--text-heading); max-width: 560px; margin: 0} .cta-banner .actions{display: flex; gap: var(--s-12)} /* === Footer === */ .site-footer{background: var(--color-canvas-white); padding: var(--s-80) 0 var(--s-32); border-top: 1px solid var(--color-line)} .footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-48); margin-bottom: var(--s-64); } .footer-grid h5{font-size: var(--text-body-sm); color: var(--color-ink-black); font-weight: 600; margin-bottom: var(--s-16); text-transform: uppercase; letter-spacing: 0.06em} .footer-grid ul{list-style: none} .footer-grid li{margin-bottom: var(--s-8)} .footer-grid a{color: var(--color-ash-gray); font-size: var(--text-body-sm); transition: color .15s} .footer-grid a:hover{color: var(--color-ink-black); text-decoration: none} .footer-grid p{color: var(--color-ash-gray); font-size: var(--text-body-sm); max-width: 320px; margin-top: var(--s-16)} .footer-legal{ border-top: 1px solid var(--color-line); padding-top: var(--s-24); display: flex; justify-content: space-between; align-items: center; font-size: var(--text-caption); color: var(--color-ash-gray); flex-wrap: wrap; gap: var(--s-16); } @media (max-width: 800px){.footer-grid{grid-template-columns: 1fr 1fr}} /* === Article (inner page) === */ .article-hero{padding: var(--s-80) 0 var(--s-48)} .article-hero .breadcrumb{font-size: var(--text-caption); color: var(--color-ash-gray); margin-bottom: var(--s-24); display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap} .article-hero .breadcrumb a{color: var(--color-ash-gray)} .article-hero .breadcrumb a:hover{color: var(--color-ink-black); text-decoration: none} .article-hero .breadcrumb span{color: var(--color-ash-gray)} .article-hero h1{font-size: 56px; margin-bottom: var(--s-24); max-width: 900px} @media (max-width: 800px){.article-hero h1{font-size: 36px}} .article-cover{margin: var(--s-48) 0; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 21/9; max-height: 460px} .article-cover img{width:100%;height:100%;object-fit:cover} .prose{max-width: 760px} .prose h2{font-size: var(--text-heading); margin: var(--s-64) 0 var(--s-24)} .prose h3{font-size: var(--text-subheading); font-weight: 600; margin: var(--s-32) 0 var(--s-16)} .prose p{font-size: var(--text-body); line-height: 1.6; margin-bottom: var(--s-16)} .prose ul, .prose ol{margin: var(--s-16) 0 var(--s-24); padding-left: var(--s-24)} .prose li{margin-bottom: var(--s-8); color: var(--color-deep-slate); line-height: 1.6} .prose .pullquote{ border-left: 3px solid var(--color-sky-teal); padding: var(--s-8) 0 var(--s-8) var(--s-32); margin: var(--s-32) 0; font-size: var(--text-subheading); line-height: 1.4; color: var(--color-ink-black); font-weight: 500; } /* Stats inline in article */ .stat-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); margin: var(--s-32) 0; } .stat-card{ background: var(--color-subtle-cream); border-radius: var(--r-card); padding: var(--s-24); } .stat-card strong{font-size: var(--text-heading); color: var(--color-ink-black); display: block; line-height: 1; margin-bottom: var(--s-8)} .stat-card span{font-size: var(--text-body-sm); color: var(--color-ash-gray)} @media (max-width: 700px){.stat-row{grid-template-columns: 1fr}} /* Related posts */ .related{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); margin-top: var(--s-32)} .related a{ display: block; padding: var(--s-24); background: var(--color-canvas-white); border: 1px solid var(--color-line); border-radius: var(--r-card); text-decoration: none; transition: border-color .15s, transform .15s; } .related a:hover{border-color: var(--color-sky-teal); transform: translateY(-2px); text-decoration: none} .related .eyebrow{margin-bottom: var(--s-8)} .related h4{color: var(--color-ink-black); font-weight: 600; font-size: var(--text-subheading); margin: 0 0 var(--s-8)} .related p{color: var(--color-ash-gray); font-size: var(--text-body-sm); margin: 0} @media (max-width: 800px){.related{grid-template-columns: 1fr}} /* Cookie banner */ #cookie-banner{ position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 720px; margin: 0 auto; background: var(--color-button-black); color: #fff; padding: var(--s-16) var(--s-24); border-radius: var(--r-card); z-index: 100; display: flex; gap: var(--s-16); align-items: center; flex-wrap: wrap; font-size: var(--text-body-sm); box-shadow: var(--shadow-btn); } #cookie-banner p{color: rgba(255,255,255,0.85); flex: 1; min-width: 260px; margin: 0} #cookie-banner a{color: var(--color-sky-teal)} #cookie-banner button{ background: #fff; color: var(--color-button-black); border: 0; padding: 8px 18px; border-radius: var(--r-btn); font-weight: 500; cursor: pointer; font-family: inherit; font-size: 13px; } #cookie-banner #ck-no{background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3)} /* Form */ .form-card{ background: var(--color-canvas-white); border: 1px solid var(--color-line); border-radius: var(--r-card); padding: var(--s-48); max-width: 640px; } .form-row{display: flex; flex-direction: column; gap: var(--s-8); margin-bottom: var(--s-24)} .form-row label{font-weight: 500; color: var(--color-ink-black); font-size: var(--text-body-sm)} .form-row input, .form-row select, .form-row textarea{ font-family: inherit; font-size: var(--text-body); padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 12px; background: var(--color-canvas-white); color: var(--color-ink-black); transition: border-color .15s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline: none; border-color: var(--color-sky-teal); }