/* ========================================================================== Romain Chassot — Applications sur mesure Feuille de style unique. Aucun framework, aucune dépendance externe. Direction visuelle : « atelier logiciel », version chaleureuse. Fond clair légèrement chaud, bandes alternées plus chaudes, cartes blanches, noir chaud, ombres beiges, angles arrondis. Un seul accent : bleu. La grille de fond et la monospace de la micro-typographie portent le côté logiciel. Parti pris : aucune maquette factice (fausse fenêtre, faux terminal, wireframe décoratif) et aucun dégradé d'ambiance. Le caractère technique vient de la mise en page, de la grille et de la typographie — pas d'illustrations de remplissage — les seules images sont les avatars 3D et la photo. Beaucoup d'air, contrastes vérifiés en AA. ========================================================================== */ /* ---------- Police auto-hébergée (aucun appel à un service tiers) --------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext.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; } /* ---------- Jetons de design --------------------------------------------- Thème clair pour tout le monde. La palette sombre existe toujours plus bas, sous `:root[data-theme="dark"]` : pour la voir, ajouter data-theme="dark" sur la balise ; pour revenir au basculement automatique, remplacer ce sélecteur par `@media (prefers-color-scheme: dark) { :root { … } }`. Neutres légèrement chauds, noir chaud, ombres beiges : le site doit rester technique sans être froid. ------------------------------------------------------------------------- */ :root { color-scheme: light; --bg: #F6F5F2; --bg-alt: #EFEDE6; --bg-2: #FBFAF7; --surface: #FFFFFF; --surface-2: #F3F1EB; --line: #E4E0D8; --line-2: #D2CCC2; --grid: rgba(95, 84, 66, .05); --ink: #191714; --ink-2: #4A473F; --muted: #67625A; --accent: #1F5FD0; --accent-ink: #FFFFFF; --accent-soft: rgba(31, 95, 208, .07); --accent-line: rgba(31, 95, 208, .26); --amber: #8F5610; --mark-bg: #211E1A; --mark-fg: #6FA8FF; --btn-fg: #FFFFFF; --btn-bg: #211E1A; --btn-bg-h: #383229; --font-sans: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --container: 1180px; --gutter: clamp(20px, 5vw, 40px); --section-y: clamp(76px, 9vw, 128px); --r-xs: 6px; --r-sm: 10px; --r: 15px; --r-lg: 20px; --shadow-sm: 0 1px 2px rgba(70, 58, 40, .06), 0 12px 28px -22px rgba(70, 58, 40, .45); --shadow-md: 0 2px 8px rgba(70, 58, 40, .07), 0 34px 64px -38px rgba(70, 58, 40, .38); --glow: 0 0 0 1px var(--accent-line), 0 0 26px -14px rgba(31, 95, 208, .45); --ease: cubic-bezier(.2, .6, .25, 1); } /* Palette sombre — voir la note ci-dessus pour l'activer. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #131211; --bg-alt: #191816; --bg-2: #1A1917; --surface: #1E1C1A; --surface-2: #24221F; --line: #2C2926; --line-2: #3E3934; --grid: rgba(190, 175, 150, .05); --ink: #F0EEE9; --ink-2: #BAB4AB; --muted: #8B857B; --accent: #6FA8FF; --accent-ink: #06152B; --accent-soft: rgba(111, 168, 255, .10); --accent-line: rgba(111, 168, 255, .26); --amber: #E7B36A; --mark-bg: #2A2724; --mark-fg: #6FA8FF; --btn-fg: #131211; --btn-bg: #F0EEE9; --btn-bg-h: #FFFFFF; --shadow-sm: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -24px rgba(0, 0, 0, .85); --shadow-md: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 32px 70px -44px rgba(0, 0, 0, .95); --glow: 0 0 0 1px var(--accent-line), 0 0 32px -14px rgba(111, 168, 255, .5); } /* ---------- Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--bg); } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Grille d'atelier : le seul élément décoratif de la page. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); background-size: 78px 78px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 420px, transparent 860px); mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 420px, transparent 860px); } h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); } ::selection { background: var(--accent); color: var(--accent-ink); } .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); padding: .75rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; font-size: .9rem; } .skip-link:focus { left: 0; } /* ---------- Révélations très discrètes ------------------------------------ */ .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .js .reveal.is-visible { opacity: 1; transform: none; } /* ---------- Boutons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: 0 1.55rem; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; text-align: center; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } .btn .arrow { font-family: var(--font-mono); font-size: .95em; opacity: .6; transition: transform .2s var(--ease), opacity .2s var(--ease); } .btn:hover .arrow { transform: translateX(3px); opacity: 1; } .btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--btn-bg-h); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); } .btn-ghost:hover { color: var(--ink); border-color: var(--accent); box-shadow: var(--glow); } .btn-sm { min-height: 42px; padding: 0 1.05rem; font-size: .92rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .55; cursor: progress; transform: none; } /* ---------- En-tête ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 76%, transparent); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 93%, transparent); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(.7rem, 3vw, 1.5rem); min-height: 72px; } /* Marque : petite tuile monospace + nom. */ .wordmark { display: inline-flex; align-items: center; gap: .65rem; white-space: nowrap; } .wordmark-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--mark-bg); color: var(--mark-fg); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: -0.02em; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .wordmark:hover .wordmark-mark { border-color: var(--accent-line); box-shadow: var(--glow); } .wordmark-text { font-size: 1rem; font-weight: 600; letter-spacing: -0.025em; } .nav-desktop { display: none; gap: clamp(.9rem, 2.2vw, 1.9rem); } .nav-desktop a { position: relative; font-family: var(--font-mono); font-size: .84rem; color: var(--ink-2); padding: .4rem 0; transition: color .18s var(--ease); } .nav-desktop a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .nav-desktop a:hover { color: var(--ink); } .nav-desktop a:hover::after { transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: .55rem; } /* Voyant « disponible » : signal doux, jamais clignotant agressif. */ .status-pill { display: none; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .75rem; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem .3rem .65rem; } .led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: led-pulse 3s var(--ease) infinite; flex: none; } @keyframes led-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 95, 208, .35); } 50% { box-shadow: 0 0 0 6px rgba(31, 95, 208, 0); } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); cursor: pointer; } .nav-toggle-bars { display: block; width: 15px; } .nav-toggle-bars span { display: block; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease); } .nav-toggle-bars span + span { margin-top: 4.5px; } .nav-toggle[aria-expanded='true'] .nav-toggle-bars span:first-child { transform: translateY(3px) rotate(45deg); } .nav-toggle[aria-expanded='true'] .nav-toggle-bars span:last-child { transform: translateY(-3px) rotate(-45deg); } .nav-mobile { border-top: 1px solid var(--line); background: var(--bg-2); } .nav-mobile nav { display: flex; flex-direction: column; padding-block: .25rem 1.25rem; } .nav-mobile a { font-family: var(--font-mono); font-size: .96rem; padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); } .nav-mobile a:last-child { border-bottom: 0; } @media (min-width: 720px) { .status-pill { display: inline-flex; } } /* Sur téléphone, le bouton mangeait la moitié de l'en-tête. On s'appuie sur le menu, où « contact » est mis en avant pour ne pas perdre l'appel à l'action. */ @media (max-width: 700px) { .header-actions .btn { display: none; } } .nav-mobile a[href="#contact"] { color: var(--accent); } @media (min-width: 960px) { .nav-desktop { display: flex; } .nav-toggle { display: none; } .nav-mobile { display: none !important; } } /* ---------- Hero ---------------------------------------------------------- Une seule colonne : le titre porte la page, rien ne le concurrence. -------------------------------------------------------------------------- */ .hero { padding-top: clamp(52px, 9vw, 118px); padding-bottom: clamp(44px, 6.5vw, 84px); } .hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } } .hero-inner { max-width: 950px; } /* Avatar du hero : présent sans écraser le titre. */ /* Sur petit écran l'avatar passe sous le texte : le titre parle en premier. */ .hero-art { justify-self: center; } /* On borne la hauteur : le personnage est debout, c'est elle qui compte. */ .hero-art img { width: auto; max-width: 100%; max-height: 260px; } @media (min-width: 1000px) { .hero-art { justify-self: end; } .hero-art img { max-height: 430px; } } /* Ligne d'invite « ~ … » avec curseur : le clin d'œil technique du hero. */ .prompt-line { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .84rem; color: var(--muted); margin-bottom: clamp(1.2rem, 2.6vw, 1.7rem); } .prompt-line .sigil { color: var(--accent); } .caret { display: inline-block; width: 7px; height: 15px; border-radius: 1px; background: var(--accent); translate: 0 2px; animation: blink 1.25s steps(1) infinite; } @keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } } .hero-title { font-size: clamp(2.5rem, 6.6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.042em; max-width: 17ch; } .hero-title .hl { color: var(--accent); white-space: nowrap; } .hero-lead { margin-top: clamp(1.3rem, 2.8vw, 1.9rem); font-size: clamp(1.06rem, 1.4vw, 1.24rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.9rem, 3.8vw, 2.6rem); } .hero-actions .btn { flex: 1 1 220px; } @media (min-width: 620px) { .hero-actions .btn { flex: 0 0 auto; } } .hero-note { display: flex; align-items: center; gap: .45rem; margin-top: 1.35rem; font-family: var(--font-mono); font-size: .82rem; color: var(--muted); } /* Coche des listes de la section contact. */ .tick { flex: none; font-family: var(--font-mono); font-size: .9em; line-height: 1.8; color: var(--accent); } /* ---------- Sections génériques ------------------------------------------- */ .section { padding-block: var(--section-y); position: relative; } .section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .section-head { max-width: none; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); } .section-label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--muted); margin-bottom: .95rem; } .section-label::before { content: '//'; color: var(--accent); margin-right: .55em; } .section-title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); } .section-lead { margin-top: 1.15rem; font-size: clamp(1rem, 1.25vw, 1.1rem); color: var(--ink-2); } .section-lead + .section-lead { margin-top: .9rem; } .br-lg { display: none; } @media (min-width: 900px) { .br-lg { display: inline; } } /* ---------- Ce que je fais : trois fiches numérotées ---------------------- */ .services { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); } @media (min-width: 700px) { .services { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } } .example { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.1rem); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .example:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); } /* Index + filet : le repère technique remplace l'illustration. */ .example-idx { display: flex; align-items: center; gap: .8rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 1.15rem; } .example-idx b { color: var(--accent); font-weight: 500; } .example-idx::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* Illustration de la fiche : hauteur fixe pour que les trois s'alignent. */ .example-art { display: flex; align-items: flex-end; justify-content: center; height: 150px; margin: -.25rem 0 1.25rem; } .example-art img { max-height: 150px; width: auto; } .card-title { font-size: clamp(1.18rem, 1.9vw, 1.42rem); letter-spacing: -0.03em; } .card-text { margin-top: .75rem; color: var(--ink-2); font-size: .98rem; } /* Bénéfices : présentés comme des lignes ajoutées. */ .add-list { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px dashed var(--line-2); display: grid; gap: .55rem; font-family: var(--font-mono); font-size: .83rem; line-height: 1.6; color: var(--muted); } .add-list li { display: flex; gap: .6rem; } .add-list li::before { content: '+'; color: var(--accent); flex: none; } .chips { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } .chips-label { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); } .chips-list { display: flex; flex-wrap: wrap; gap: .45rem; } .chips-list li { font-family: var(--font-mono); font-size: .81rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .32rem .68rem; transition: border-color .2s var(--ease), color .2s var(--ease); } .chips-list li:hover { border-color: var(--accent-line); color: var(--ink); } /* ---------- Tarifs --------------------------------------------------------- */ /* Quatre offres : deux prix chacune, developpement puis exploitation. */ .offers { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); } @media (min-width: 720px) { .offers { grid-template-columns: 1fr 1fr; } } @media (min-width: 1120px) { .offers { grid-template-columns: repeat(4, 1fr); } } .offer { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 2.6vw, 1.9rem); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .offer:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); } .offer-tag { display: flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); margin-bottom: 1rem; } .offer-tag::after { content: ''; flex: 1; height: 1px; background: var(--line); } .offer-title { font-size: clamp(1.15rem, 1.8vw, 1.32rem); letter-spacing: -0.03em; } .offer-for { margin-top: .6rem; color: var(--muted); font-size: .93rem; flex: 1; } /* Les deux prix, en bas de carte pour qu'ils s'alignent d'une carte a l'autre. */ .offer-prices { margin: 1.3rem 0 0; padding-top: 1.2rem; border-top: 1px dashed var(--line-2); display: grid; gap: .8rem; } .offer-prices div { display: grid; gap: .15rem; } .offer-prices dt { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted); } .offer-prices dd { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; } .offer-prices dd span { font-size: .85rem; font-weight: 400; color: var(--muted); } /* La charge de travail passe sous le prix : elle le rend verifiable. */ .offer-hours { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; line-height: 1.4; color: var(--muted); } /* Fourchette sous les cartes : desamorce le prix le plus eleve. */ .offers-note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: .95rem; color: var(--muted); } .offers-note strong { color: var(--ink); font-weight: 600; } /* Carte « ce qui est compris dans le developpement ». */ .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .plan-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .78rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } .plan-key b { color: var(--accent); font-weight: 500; } .plan-included { margin-top: clamp(1.5rem, 3vw, 2.25rem); } .plan-included-body { display: grid; gap: clamp(1.25rem, 3vw, 3rem); padding: clamp(1.5rem, 3vw, 2.2rem); } @media (min-width: 860px) { .plan-included-body { grid-template-columns: .95fr 1.05fr; align-items: start; } } .price-list { display: grid; gap: .5rem; font-family: var(--font-mono); font-size: .85rem; color: var(--ink-2); } .price-list li { display: flex; gap: .6rem; } .price-list li::before { content: '▸'; color: var(--accent); flex: none; } .price-text { color: var(--ink-2); font-size: .96rem; } .price-text + .price-text { margin-top: .9rem; } .price-text strong { color: var(--ink); font-weight: 600; } /* Echelonnement du paiement : trois jalons, dits une seule fois. */ .pay { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } .pay-title { font-size: clamp(1.1rem, 1.9vw, 1.3rem); font-weight: 600; letter-spacing: -0.028em; margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); } .pay-steps { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); } @media (min-width: 760px) { .pay-steps { grid-template-columns: repeat(3, 1fr); } } .pay-steps li { position: relative; padding-top: 1.35rem; } .pay-steps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); } .pay-steps li::after { content: ''; position: absolute; left: 0; top: -3.5px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .pay-pct { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .pay-when { margin-top: .4rem; font-family: var(--font-mono); font-size: .82rem; line-height: 1.55; color: var(--muted); } /* Chapeau de la partie mensuelle. */ .plan-intro { margin-top: clamp(2.5rem, 5vw, 4rem); } .plan-intro .section-label { margin-bottom: .8rem; } .plan-intro-title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); letter-spacing: -0.03em; } .plan-intro-text { margin-top: .8rem; color: var(--ink-2); font-size: .98rem; } .price-note { margin-top: clamp(1.5rem, 3vw, 2rem); font-size: .95rem; color: var(--muted); } /* Encart « a savoir » : la regle qui evite le malentendu sur l'abonnement. Encadree plutot que noyee dans un paragraphe, mais sans ton d'avertissement. */ .notice { display: grid; gap: .7rem; margin-top: clamp(1.5rem, 3vw, 2rem); padding: clamp(1.15rem, 2.4vw, 1.5rem) clamp(1.25rem, 2.6vw, 1.75rem); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-sm); } .notice-title { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--amber); } .notice-title::before { content: '//'; margin-right: .55em; opacity: .6; } .notice p { font-size: .96rem; color: var(--ink-2); } .notice strong { color: var(--ink); font-weight: 600; } /* ---------- À propos ------------------------------------------------------- */ .about-inner { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; } @media (min-width: 980px) { .about-inner { grid-template-columns: 1.4fr .6fr; } } .about-text { display: grid; gap: 1.15rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.08rem); } /* Carte d'identité : portrait réel + liens directs. */ .about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; background: var(--surface-2); } .about-id { padding: 1.1rem 1.25rem 1.25rem; } .about-name { font-weight: 600; letter-spacing: -0.025em; } .about-role { margin-top: .15rem; font-family: var(--font-mono); font-size: .77rem; color: var(--muted); } .about-links { display: grid; gap: .55rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .about-links a { display: flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .81rem; color: var(--ink-2); overflow-wrap: anywhere; transition: color .2s var(--ease); } .about-links a:hover { color: var(--accent); } .about-links svg { width: 15px; height: 15px; flex: none; color: var(--accent); } @media (min-width: 980px) { .about-card { position: sticky; top: 104px; } } /* ---------- Questions ------------------------------------------------------ */ /*
natifs : repliables sans JavaScript, et accessibles au clavier. */ .faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .faq li + li { border-top: 1px solid var(--line); } .faq summary { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem clamp(1.2rem, 2.6vw, 1.75rem); font-size: clamp(1rem, 1.4vw, 1.08rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.45; cursor: pointer; list-style: none; transition: color .2s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); } .faq summary::after { content: '+'; margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 400; line-height: 1.3; color: var(--accent); transition: transform .25s var(--ease); } .faq details[open] summary::after { content: '\2212'; } .faq details > p { padding: 0 clamp(1.2rem, 2.6vw, 1.75rem) 1.35rem; margin-top: -.35rem; max-width: 78ch; color: var(--ink-2); font-size: .97rem; } /* ---------- Avant de m'écrire : les questions ------------------------------ */ .qa-head { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; } @media (min-width: 940px) { .qa-head { grid-template-columns: minmax(0, 1fr) auto; max-width: none; } } .qa-art { display: none; } @media (min-width: 940px) { .qa-art { display: block; width: auto; max-height: 250px; justify-self: end; } } .qa { display: grid; gap: clamp(1.5rem, 2.6vw, 2.1rem); } @media (min-width: 780px) { .qa { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 3.5rem); } } @media (min-width: 1120px) { .qa { grid-template-columns: repeat(3, 1fr); } } .qa-item { position: relative; padding-top: 1.45rem; } .qa-item::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); } .qa-item::after { content: ''; position: absolute; left: 0; top: -3.5px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } .qa-n { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; color: var(--muted); margin-bottom: .7rem; } .qa-q { font-size: clamp(1.04rem, 1.5vw, 1.18rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; } .qa-a { margin-top: .55rem; color: var(--muted); font-size: .95rem; max-width: 46ch; } /* ---------- Contact -------------------------------------------------------- */ .section-contact { border-top: 1px solid var(--line); } .contact-inner { display: grid; gap: clamp(2.25rem, 4.5vw, 4rem); align-items: start; } @media (min-width: 1000px) { .contact-inner { grid-template-columns: 1fr 1fr; } } .contact-meta { display: grid; gap: .55rem; margin-top: clamp(1.6rem, 3vw, 2.25rem); font-size: .96rem; color: var(--ink-2); } .contact-meta li { display: flex; align-items: flex-start; gap: .7rem; } .contact-alt { margin-top: 1.6rem; font-size: .95rem; color: var(--muted); } .contact-alt a { font-family: var(--font-mono); font-size: .9rem; color: var(--accent); border-bottom: 1px solid var(--accent-line); transition: border-color .2s var(--ease); } .contact-alt a:hover { border-color: var(--accent); } /* Illustration du contact : uniquement en deux colonnes, pour ne pas rallonger la page sur mobile. */ .contact-art { display: none; } @media (min-width: 1000px) { .contact-art { display: block; margin-top: clamp(1.5rem, 3vw, 2.5rem); } .contact-art img { width: auto; max-height: 300px; } } .contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.15rem); box-shadow: var(--shadow-sm); } .form-title { font-size: 1.25rem; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .field { display: grid; gap: .42rem; margin-bottom: 1.05rem; } .field-row { display: grid; gap: 0 1rem; } @media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } } .field label { font-family: var(--font-mono); font-size: .79rem; letter-spacing: .02em; color: var(--muted); } .req { color: var(--accent); } /* Les parenthèses suffisent à distinguer le champ facultatif : pas de gris illisible. */ .opt { color: var(--muted); } .field input, .field textarea { width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .82rem .95rem; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.55; } .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; } .field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line-2)); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--amber); } .field-error { font-family: var(--font-mono); font-size: .79rem; color: var(--amber); } .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .contact-form .btn { margin-top: .6rem; } .form-status { margin-top: .95rem; font-size: .93rem; line-height: 1.6; min-height: 1.4rem; } .form-status.is-error { color: var(--amber); } .form-status.is-success { color: var(--ink); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: .85rem 1rem; } .form-legal { margin-top: 1rem; font-size: .81rem; line-height: 1.55; color: var(--muted); } .form-legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Pied de page ---------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding-block: clamp(2.25rem, 4.5vw, 3.5rem); } .footer-inner { display: grid; gap: 2rem; } @media (min-width: 840px) { .footer-inner { grid-template-columns: 1.3fr 1fr; align-items: start; } .footer-end { grid-column: 1 / -1; } } .footer-tagline { margin-top: .85rem; color: var(--muted); font-size: .93rem; max-width: 34ch; } .footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; } .footer-nav a { font-family: var(--font-mono); font-size: .83rem; color: var(--ink-2); transition: color .2s var(--ease); } .footer-nav a:hover { color: var(--accent); } .footer-social { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .9rem; } .footer-social a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .83rem; color: var(--muted); transition: color .2s var(--ease); } .footer-social a:hover { color: var(--accent); } .footer-social svg { width: 14px; height: 14px; flex: none; } .footer-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .78rem; color: var(--muted); } .footer-build { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; } .footer-build .sep { color: var(--line-2); margin-inline: .55rem; } /* Drapeaux : le blanc de celui de Fribourg disparaitrait sans le liseré. */ .flag { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-inline: .1rem .05rem; border: 1px solid var(--line-2); border-radius: 3px; } /* ---------- Page de contenu (confidentialité) ------------------------------- */ .prose { max-width: 740px; padding-block: clamp(52px, 7.5vw, 92px); } .prose h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: 1.4rem; } .prose h2 { font-size: clamp(1.15rem, 2vw, 1.35rem); margin-top: 2.5rem; margin-bottom: .7rem; } .prose h2::before { content: '#'; font-family: var(--font-mono); font-weight: 400; color: var(--accent); margin-right: .5em; } .prose p, .prose li { color: var(--ink-2); } .prose p + p { margin-top: .9rem; } .prose ul { display: grid; gap: .45rem; margin-top: .9rem; } .prose ul li { display: flex; gap: .65rem; } .prose ul li::before { content: '–'; font-family: var(--font-mono); color: var(--accent); flex: none; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose .back { display: inline-block; margin-top: 2.75rem; font-family: var(--font-mono); font-size: .86rem; color: var(--ink-2); text-decoration: none; } .prose .back:hover { color: var(--accent); } /* ---------- Ajustements petits écrans --------------------------------------- */ .label-short { display: none; } @media (max-width: 480px) { .label-long { display: none; } .label-short { display: inline; } .btn-sm { padding: 0 .9rem; } } @media (max-width: 960px) { .footer-nav { gap: .2rem 1.4rem; } .footer-nav a { padding-block: .4rem; } } /* ---------- Mouvement réduit ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .caret, .led { animation: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---------- Impression ------------------------------------------------------ */ @media print { .site-header, .nav-mobile, .hero-actions, .contact-form-wrap, .footer-nav { display: none !important; } body::before { display: none !important; } html, body { background: #fff; color: #000; } .section { padding-block: 1.5rem; } .offer, .plan, .contact-form { border: 1px solid #ccc; box-shadow: none; } }