:root{ /* ── Palette ────────────────────────────────────────────────────────────── Même palette que la page résidents ; noms de jetons propres à cette page. dominante #17494D pétrole accent #B4877C argile (teinte CLAIRE) fond #EFEDE6 chaux */ --bg:#EFEDE6; --bg-alt:#FFFFFF; --paper:#F7F6F1; --text:#23272B; --text-dim:#4C5257; --text-faint:#565C61; --accent:#17494D; --accent-deep:#103639; --accent-soft:rgba(23,73,77,0.12); --accent-line:rgba(23,73,77,0.40); /* --rust porte désormais l'argile : teinte claire, donc texte foncé dessus. */ --rust:#B4877C; --rust-soft:rgba(180,135,124,0.20); --accent2:#3F7376; /* pétrole moyen : icônes, segments du graphique */ --gold:#7E5249; /* argile foncée : la seule version lisible en texte */ --gold-soft:rgba(180,135,124,0.18); --border:rgba(35,39,43,0.15); --border-strong:rgba(35,39,43,0.32); --good:#17494D; --good-soft:rgba(23,73,77,0.12); --warn:#7E5249; --warn-soft:rgba(180,135,124,0.18); --chip-bg:rgba(35,39,43,0.66); --chip-text:#EFEDE6; --font-display:'Fraunces',Georgia,"Times New Roman",serif; --font-body:'Barlow Semi Condensed',"Helvetica Neue",Arial,sans-serif; --font-mono:'IBM Plex Mono',"Courier New",monospace; --maxw:1180px; --radius:0; --radius-sm:0; --shadow-soft:0 1px 2px rgba(35,39,43,.06), 0 18px 36px -22px rgba(35,39,43,.28); --grad-1:linear-gradient(155deg, #D3DEDB 0%, #17494D 55%, #0C2A2D 100%); --grad-2:linear-gradient(155deg, #EAE1D5 0%, #B4877C 58%, #6B4239 100%); --grad-3:linear-gradient(160deg, #CFE0DE 0%, #3F7376 58%, #1B2C2E 100%); --grad-4:linear-gradient(150deg, #E6E3DA 0%, #A9A599 55%, #55564E 100%); --grad-5:linear-gradient(155deg, #EFE6DB 0%, #C6AE9C 55%, #7A6355 100%); --grad-6:linear-gradient(150deg, #B9CFCD 0%, #2E5C5F 62%, #14282A 100%); --grad-7:linear-gradient(160deg, #E2DED2 0%, #8E8F86 55%, #3A3D3C 100%); --grad-8:linear-gradient(150deg, #EDE0D4 0%, #9C8579 55%, #46504C 100%); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0; overflow-x:clip; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; line-height:1.05; text-wrap:balance; margin:0; } p{margin:0;} a{color:inherit;} button{font-family:inherit;} .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; } /* full-bleed breakout — for imagery that should run edge to edge */ .bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;} /* ---------- eyebrow / section heads ---------- */ .eyebrow{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; } .eyebrow .num{ color:var(--text-faint); } .section-head{ max-width:52ch; margin-bottom:2.75rem; } .section-head h2{ font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.08; margin-bottom:1.1rem; } .section-head .chapo{ color:var(--text-dim); font-size:1rem; max-width:60ch; } section{padding:7rem 0;border-top:1px solid var(--border);scroll-margin-top:5rem;} .bg-alt{background:var(--bg-alt);} /* ---------- reveal ---------- */ /* Apparition au défilement. Gardée sous le préfixe .js : sans JavaScript, la classe n'est jamais posée sur et tout le contenu reste visible. Pour supprimer l'effet : retirer ce bloc et la ligne correspondante dans le script de bas de page. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;} .js .reveal.in{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none;} } /* ---------- status bar ---------- */ .statusbar{ background:var(--accent-soft); border-bottom:1px solid var(--border); text-align:center; padding:.55rem 1rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text); } .statusbar .dot{ display:inline-block; width:7px;height:7px; background:var(--accent); margin-right:.6em; animation:pulse 2.2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 var(--accent-line);} 50%{opacity:.55; box-shadow:0 0 0 5px transparent;} } @media (prefers-reduced-motion:reduce){ .statusbar .dot{animation:none;} } /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:40; background:rgba(247,242,231,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .header-inner{ display:flex;align-items:center;justify-content:space-between; height:5.25rem; } .logo{ display:flex;flex-direction:column;line-height:1; text-decoration:none;color:inherit; } .logo .mark{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:.02em; width: 10rem; } .logo .baseline{ font-family:var(--font-display); font-style:italic; font-size:.72rem; color:var(--text-faint); letter-spacing:.01em; margin-top:.15rem; font-weight:500; } nav.primary{ display:flex;gap:2rem; font-size:.88rem; } nav.primary a{ text-decoration:none; color:var(--text-dim); transition:color .2s ease; } nav.primary a:hover, nav.primary a:focus-visible{color:var(--text);} .header-cta{display:flex;align-items:center;gap:1.25rem;} .link-quiet{ font-size:.8rem;color:var(--text-dim);text-decoration:none; white-space:nowrap; } .link-quiet:hover{color:var(--text);} /* Tiroir de navigation mobile —
/, sans JavaScript. Le panneau se positionne sous l'en-tête grâce à top:100% ; aucune hauteur n'a besoin d'être mesurée. */ .nav-drawer{display:none;position:static;} .nav-drawer > summary{ list-style:none;cursor:pointer; border:1px solid var(--border-strong);color:var(--text); width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center; } .nav-drawer > summary::-webkit-details-marker{display:none;} .nav-drawer > summary::marker{content:"";} .nav-drawer[open] > summary{background:var(--accent);color:#FBF4E8;border-color:var(--accent);} .mobile-menu{ position:absolute;top:100%;left:0;right:0; height:calc(100dvh - 100%);overflow-y:auto; background:var(--bg);border-bottom:1px solid var(--border); padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem; } .mobile-menu a{color:var(--text);text-decoration:none;font-size:1.1rem;font-family:var(--font-display);font-weight:600;} .mobile-menu .drawer-cta{margin-top:.5rem;width:fit-content;} @media (max-width:900px){ nav.primary{display:none;} .header-cta .link-quiet, .header-cta .lang-toggle{display:none;} .nav-drawer{display:block;} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-mono);font-weight:600;font-size:.85rem; letter-spacing:.02em; padding:.9rem 1.7rem;border-radius:0; border:1px solid transparent;cursor:pointer; text-decoration:none;white-space:nowrap; transition:transform .15s ease, background .2s ease, border-color .2s ease; } .btn:active{transform:translateY(1px);} .btn-accent{background:var(--accent);color:#FBF4E8;} .btn-accent:hover{background:var(--accent-deep);} .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text);} .btn-ghost:hover{border-color:var(--text);} .btn-lg{padding:1.05rem 2.1rem;font-size:.92rem;} .btn-dark{background:var(--rust);color:#FBF4E8;} .btn-dark:hover{background:#8A3D1C;} /* ---------- visual placeholder — warm gradient stand-ins for photography ---------- */ .visual{ position:relative; overflow:hidden; background:var(--grad-1); border-radius:var(--radius); isolation:isolate; } .visual::after{ content:""; position:absolute;inset:0; background:repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 30px); mix-blend-mode:soft-light; pointer-events:none; } .visual .tag{ position:absolute;left:0;bottom:0;z-index:1; background:var(--chip-bg); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); color:var(--chip-text); border-radius:0; font-family:var(--font-mono);font-size:.64rem;letter-spacing:.05em; text-transform:uppercase;padding:.55rem .9rem; max-width:calc(100% - 2rem); line-height:1.4; } .visual.grad-2{background:var(--grad-2);} .visual.grad-3{background:var(--grad-3);} .visual.grad-4{background:var(--grad-4);} .visual.grad-5{background:var(--grad-5);} .visual.grad-6{background:var(--grad-6);} .visual.grad-7{background:var(--grad-7);} .visual.grad-8{background:var(--grad-8);} /* Photographies : l'image remplit le cadre, la légende reste au-dessus. */ .visual img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;display:block; } /* Le grain diagonal a été dessiné pour les aplats de dégradé : il doit disparaître dès qu'une vraie photo occupe le cadre. */ .visual:has(img)::after{content:none;} /* ---------- hero ---------- */ .hero-wrap{padding:4.5rem 0 6rem;} .kicker{ font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem; } h1.headline{ font-family:var(--font-display);font-weight:600; font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.04;letter-spacing:-.015em; max-width:20ch; margin-bottom:1.8rem; color:var(--text); } .hero-visual{margin-block:4.5rem 7.5rem;position:relative;} @media (max-width:700px){ .hero-visual{margin-bottom:6rem;} } .hero-visual .visual{width:100%;aspect-ratio:20/9;} .hero-visual .overlap{ position:absolute;z-index:2; right:6%;bottom:-14%; width:24%;aspect-ratio:3/4; } @media (max-width:700px){ .hero-visual .visual{aspect-ratio:4/5;} .hero-visual .overlap{width:42%;right:5%;bottom:-10%;} } .sub{ font-size:1.15rem;color:var(--text-dim);max-width:52ch;margin-bottom:3.25rem; } .kpi-row{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border-strong); padding-top:2.25rem; margin-bottom:3rem; } .kpi{ border-left:1px solid var(--border); padding:0 1.5rem; } .kpi:first-child{border-left:none;padding-left:0;} .kpi .val{ font-family:var(--font-mono);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem); color:var(--accent);font-variant-numeric:tabular-nums;display:block;margin-bottom:.5rem; } .kpi .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);} @media (max-width:640px){ .kpi-row{grid-template-columns:repeat(2,1fr);row-gap:1.75rem;} .kpi{border-left:none;border-top:1px solid var(--border);padding:1.25rem 1.25rem 0 0;} } .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin-bottom:1.75rem;} .cta-note{font-size:.8rem;color:var(--text-faint);} .microproof{ font-size:.85rem;color:var(--text-dim);margin-bottom:1.75rem; } .microproof b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;} .microproof .sep{color:var(--text-faint);margin:0 .6em;} .disclaimer{ font-size:.76rem;line-height:1.65;color:var(--text-faint);font-style:italic; max-width:62ch; } /* ---------- thesis ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;} @media (max-width:860px){.grid-3{grid-template-columns:1fr;}} .thesis-card{ border-top:1px solid var(--border-strong);padding-top:1.8rem; position:relative; } .thesis-card .glyph{ display:block; font-family:var(--font-display);font-weight:600;font-size:3rem; color:var(--accent); line-height:1;user-select:none;margin-bottom:1.4rem; } .thesis-card h3{ font-size:1.3rem;line-height:1.2;margin-bottom:1rem;letter-spacing:-.005em; } .thesis-card p{color:var(--text-dim);font-size:.95rem;line-height:1.65;} /* ---------- tables ---------- */ table.dossier{ width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px; } table.dossier th{ text-align:left;font-family:var(--font-mono);font-size:.68rem; text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint); padding:0 1rem .8rem 0;border-bottom:1px solid var(--border-strong);font-weight:500; } table.dossier td{ padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid var(--border); vertical-align:top;color:var(--text); } table.dossier tr:last-child td{border-bottom:1px solid var(--border-strong);} table.dossier td.dim{color:var(--text-dim);font-style:italic;} table.dossier tr.highlight td{color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent-line);} .badge{ display:inline-block;font-family:var(--font-mono);font-size:.68rem; text-transform:uppercase;letter-spacing:.05em;padding:.35rem .8rem;border-radius:0; border:1px solid var(--border-strong);color:var(--text-dim);white-space:nowrap; background:var(--paper); } .badge.good{border-color:transparent;background:var(--good-soft);color:var(--good);} .badge.warn{border-color:transparent;background:var(--warn-soft);color:var(--warn);} @media (max-width:760px){ table.dossier{min-width:0;} table.dossier thead{display:none;} table.dossier, table.dossier tbody, table.dossier tr, table.dossier td{display:block;width:100%;} table.dossier tr{border:1px solid var(--border);margin-bottom:1rem;padding:1rem 1.1rem;} table.dossier tr.highlight{border-color:var(--accent-line);} table.dossier td{border-bottom:none !important;padding:.4rem 0;} table.dossier td::before{ content:attr(data-label);display:block;font-family:var(--font-mono); font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint); margin-bottom:.25rem; } } /* ---------- programming visuals strip ---------- */ .strip-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:3rem;} .strip-4 .visual{aspect-ratio:3/4;} @media (max-width:700px){.strip-4{grid-template-columns:repeat(2,1fr);gap:2px;}} /* relance de conversion en milieu de page */ .cta-inline{ margin-top:3rem;border-top:1px solid var(--border-strong);padding-top:2rem; display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;justify-content:space-between; } .cta-inline p{color:var(--text-dim);font-size:.95rem;max-width:46ch;} .callout{ border-left:2px solid var(--accent);padding:0 0 0 1.8rem;margin-top:2.5rem; } .callout .head{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:.75rem; } .callout p{color:var(--text-dim);font-size:.92rem;line-height:1.7;} .callout p b{color:var(--text);font-variant-numeric:tabular-nums;} /* ---------- model / pass ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;} @media (max-width:860px){.split{grid-template-columns:1fr;gap:2rem;}} .pass-stack{display:flex;flex-direction:column;align-items:center;gap:.4rem;} .pass-block{ width:100%;background:var(--paper);border:1px solid var(--border);padding:1.8rem 2rem; border-radius:var(--radius-sm);box-shadow:var(--shadow-soft); } .pass-block h4{font-size:.95rem;margin-bottom:.5rem;} .pass-block .price{ font-family:var(--font-mono);color:var(--accent);font-weight:600;font-size:1.05rem; margin-bottom:.6rem;display:block; } .pass-block p{color:var(--text-dim);font-size:.86rem;line-height:1.6;} .plus{color:var(--accent);font-size:1.8rem;font-family:var(--font-display);font-weight:600;} .arpu-table{width:100%;font-size:.92rem;} .arpu-table tr td{padding:.85rem 0;border-bottom:1px solid var(--border);color:var(--text-dim);} .arpu-table tr td:last-child{text-align:right;font-family:var(--font-mono);color:var(--text);font-variant-numeric:tabular-nums;} .arpu-table tr.highlight td{color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent-line);font-size:1.05rem;} /* ligne de détail rattachée à la ligne précédente */ .arpu-table tr.sub td{color:var(--text-faint);font-size:.82rem;padding:.15rem 0 .85rem;border-bottom:1px solid var(--border);} .arpu-table tr.sub td:last-child{color:var(--text-faint);} .split.top{align-items:start;} .table-label{ font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:1rem; } .compliance-box{ margin-top:3rem;border-top:1px solid var(--border-strong);padding-top:1.8rem; display:flex;gap:1.25rem;align-items:flex-start; } .compliance-box .ico{flex:none;color:var(--accent2);display:flex;margin-top:.15rem;} .compliance-box .head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.6rem;} .compliance-box p{color:var(--text-dim);font-size:.85rem;line-height:1.7;} /* ---------- team ---------- */ .team-atmos{margin-block:2.5rem 3.5rem;} .team-atmos .visual{width:100%;aspect-ratio:21/8;} @media (max-width:700px){.team-atmos .visual{aspect-ratio:16/13;}} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;} @media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}} @media (max-width:520px){.grid-4{grid-template-columns:1fr;}} .team-card{border-top:1px solid var(--border-strong);padding-top:1.5rem;} .team-card .photo{ width:100%;aspect-ratio:1;margin-bottom:1.3rem; } .team-card .photo .tag{font-size:.6rem;} .team-card h4{font-size:1rem;margin-bottom:.15rem;} .team-card .role{color:var(--accent);font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-mono);margin-bottom:.7rem;} .team-card p{color:var(--text-dim);font-size:.84rem;line-height:1.6;} /* ---------- timeline ---------- */ .timeline{display:flex;gap:0;overflow-x:auto;padding:1rem 0 1.5rem;position:relative;} .milestone{ flex:0 0 auto;width:190px;padding-right:1.5rem;position:relative; } /* au-delà de 1000px, les 7 jalons se répartissent au lieu de déborder hors écran */ @media (min-width:1000px){ .timeline{overflow-x:visible;} .milestone{flex:1 1 0;width:auto;min-width:0;padding-right:1.25rem;} .milestone .line{right:-1.25rem;} } .milestone .line{ position:absolute;top:9px;left:0;right:-1.5rem;height:1px;background:var(--border-strong); } .milestone:last-child .line{display:none;} .milestone .dot{ width:16px;height:16px;border-radius:0;position:relative;z-index:1;margin-bottom:1rem; display:flex;align-items:center;justify-content:center;font-size:.65rem; } .milestone.done .dot{background:var(--accent);color:#FBF4E8;} .milestone.current .dot{background:var(--bg);border:2px solid var(--accent);animation:pulse 2s infinite;} .milestone.pending .dot{background:transparent;border:2px solid var(--border-strong);} .milestone h4{font-size:.86rem;margin-bottom:.35rem;line-height:1.35;} .milestone .status{font-size:.75rem;color:var(--text-dim);font-family:var(--font-mono);} .milestone.current .status{color:var(--accent);} .fund-box{margin-top:2rem;} .fund-box .amount{font-family:var(--font-mono);font-size:1.5rem;color:var(--accent);font-weight:600;display:block;margin-bottom:1.25rem;} .fund-bar{display:flex;height:14px;width:100%;overflow:hidden;border-radius:1px;margin-bottom:1rem;} .fund-bar span{height:100%;} .fund-legend{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.8rem;color:var(--text-dim);} .fund-legend .sw{display:inline-block;width:9px;height:9px;margin-right:.5em;border-radius:1px;vertical-align:middle;} /* ---------- traction ---------- */ .verbatim{ border-top:1px solid var(--border-strong);padding-top:1.6rem;position:relative; } .verbatim .quote{font-family:var(--font-display);font-size:2.6rem;color:var(--accent);line-height:1;margin-bottom:.3rem;display:block;} .verbatim p.text{font-size:.95rem;color:var(--text);margin-bottom:1rem;line-height:1.6;} .verbatim .who{font-size:.78rem;color:var(--text-dim);font-family:var(--font-mono);} .lifestyle-compose{position:relative;margin-top:3rem;} .lifestyle-compose .lifestyle-main{width:100%;aspect-ratio:21/9;} .lifestyle-compose .lifestyle-overlap{ position:absolute;z-index:2; left:6%;bottom:-18%; width:26%;aspect-ratio:3/4; } .lifestyle-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:6.5rem;} @media (max-width:760px){ .lifestyle-compose .lifestyle-main{aspect-ratio:4/5;} .lifestyle-compose .lifestyle-overlap{width:46%;left:5%;bottom:-12%;} .lifestyle-row{grid-template-columns:1fr;margin-top:5rem;gap:1.5rem;} } .lifestyle-item .visual{aspect-ratio:1;margin-bottom:.75rem;} .lifestyle-item p{font-size:.82rem;color:var(--text-dim);text-align:center;} /* ---------- conversion ---------- */ .conversion{ background:linear-gradient(160deg,#CE733B 0%, var(--accent) 55%, #8A3D1C 100%); color:#FBF3E6; } .conversion .section-head{color:#FBF3E6;} .conversion .section-head .chapo{color:rgba(251,243,230,.82);} .conversion .eyebrow{color:#F6D9BC;} .conv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;} @media (max-width:900px){.conv-cards{grid-template-columns:1fr;}} .conv-card{ background:var(--paper); border:1px solid rgba(255,255,255,.5);padding:2.1rem 1.8rem;color:var(--text); display:flex;flex-direction:column; border-radius:var(--radius);box-shadow:var(--shadow-soft); } .conv-card .step{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem;} .conv-card h3{font-size:1.3rem;margin-bottom:.6rem;} .conv-card p.desc{color:var(--text-dim);font-size:.88rem;margin-bottom:1.4rem;flex:1;} .conv-card ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--text-dim);font-size:.84rem;line-height:1.9;} .field-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.5rem;} .field{ flex:1;min-width:0;background:var(--bg);border:1px solid var(--border-strong);color:var(--text); padding:.75rem .95rem;border-radius:0;font-size:.9rem;font-family:inherit; } @media (max-width:420px){ .field-row .field{flex-basis:100%;} .field-row .btn{flex:1;} } .field::placeholder{color:var(--text-faint);} select.field{appearance:none;} .form-confirm{font-size:.82rem;color:var(--good);margin-top:.7rem;display:none;} .form-confirm.show{display:block;} .dataroom-box{ margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.35);padding-top:1.8rem; display:flex;gap:1.25rem;align-items:flex-start; } .dataroom-box .ico{flex:none;display:flex;margin-top:.15rem;color:#F6D9BC;} .dataroom-box .head{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem;color:#F6D9BC;} .dataroom-box p{font-size:.88rem;line-height:1.8;color:rgba(251,243,230,.88);} /* ---------- FAQ ---------- */ /* FAQ —
: accordéon natif exclusif, aucun JavaScript. Sur les navigateurs qui ignorent l'attribut name, plusieurs réponses peuvent rester ouvertes simultanément : la dégradation est sans conséquence. */ .faq-item{border-bottom:1px solid var(--border);} .faq-q{ list-style:none;cursor:pointer;color:var(--text); padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem; font-size:1rem;font-family:var(--font-display);font-weight:600; } .faq-q::-webkit-details-marker{display:none;} .faq-q::marker{content:"";} .faq-q .chev{flex:none;width:20px;height:20px;color:var(--accent);transition:transform .25s ease;} .faq-item[open] .faq-q .chev{transform:rotate(45deg);} .faq-a p{padding:0 0 1.5rem;color:var(--text-dim);font-size:.92rem;max-width:70ch;line-height:1.7;} /* Ouverture animée là où le navigateur sait interpoler une hauteur automatique. */ @supports (interpolate-size: allow-keywords){ :root{interpolate-size:allow-keywords;} .faq-item::details-content{height:0;overflow:hidden;transition:height .3s ease, content-visibility .3s;transition-behavior:allow-discrete;} .faq-item[open]::details-content{height:auto;} } /* ---------- footer ---------- */ footer{border-top:1px solid var(--border);padding:5rem 0 3rem;} .foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;margin-bottom:3.5rem;} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}} @media (max-width:460px){.foot-grid{grid-template-columns:1fr;}} .foot-col h5{ font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);margin-bottom:1.1rem; } .foot-col a, .foot-col .line{display:block;color:var(--text-dim);text-decoration:none;font-size:.88rem;margin-bottom:.65rem;} .foot-col a:hover{color:var(--text);} .legal-row{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.78rem;color:var(--text-dim); border-top:1px solid var(--border);padding-top:1.75rem;margin-bottom:1.75rem;} .legal-row a{text-decoration:none;color:var(--text-dim);} .legal-row a:hover{color:var(--text);} .disclaimer-long{font-size:.74rem;line-height:1.8;color:var(--text-faint);font-style:italic;max-width:80ch;} ::selection{background:var(--accent);color:#FBF4E8;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* ---------- impression / export PDF ---------- */ @media print{ :root{--bg:#fff;--bg-alt:#fff;--paper:#fff;} body{background:#fff;color:#000;font-size:11pt;} .statusbar, .site-header, .nav-drawer, .btn, .cta-row, .cta-inline, .cta-note{display:none !important;} .js .reveal{opacity:1 !important;transform:none !important;} section{padding:1.4cm 0;border-top:1px solid #ccc;break-inside:avoid;} .section-dark, .conversion{background:#fff !important;color:#000 !important;} .section-dark *, .conversion *{color:#000 !important;} .visual{display:none !important;} .faq-item::details-content{height:auto !important;} .faq-a p{display:block !important;} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;} h1,h2,h3,h4{break-after:avoid;} table, .grid-3, .grid-4{break-inside:avoid;} }