/* ============================================================ CINDY BLANDIN, Système « Porcelaine » Thème clair premium : porcelaine / sauge / argile. Instrument Serif + Sora. Arches, blob respirant, parallax rAF léger, révélations masquées, accordéons animés. Aucun héritage des systèmes précédents. DEUX VARIANTES. L'attribut data-lum sur vaut « jour » ou « nuit ». La variante jour est celle qui a été validée : ses valeurs ne bougent pas. La variante nuit reprend les mêmes RÔLES avec d'autres valeurs. Les noms de jetons décrivent un rôle, pas une couleur : en variante nuit, --blanc est plus clair que --porcelain sans être blanc, et --sauge-deep est plus CLAIR que --sauge. Ne jamais écrire une couleur en dur en croyant respecter un jeton. ============================================================ */ :root { /* Fonds */ --porcelain: #F6F3ED; --blanc: #FCFBF8; --lin: #EDE7DB; /* Textes */ --ink: #1B1813; --ink-soft: rgba(27,24,19,.78); --ink-mute: rgba(27,24,19,.55); /* Accent principal */ --sauge: #40614F; --sauge-deep: #2E4A3B; --sauge-soft: #DFE8E1; --sur-sauge: #FBFAF6; /* texte posé SUR un aplat sauge */ /* Accent chaud */ --argile: #C0714A; --argile-soft: #F4E3D7; --argile-texte: #8C4E2E; /* texte lisible sur --argile-soft */ /* Traits */ --ligne: rgba(27,24,19,.12); --ligne-forte: rgba(27,24,19,.40); --pointille: rgba(27,24,19,.22); /* Surfaces particulières */ --chip-fond: #FBFAF6; --chip-texte: #2E4A3B; --voile-nav: rgba(246,243,237,.82); --select: rgba(64,97,79,.22); --barre: rgba(27,24,19,.20); /* Halos décoratifs */ --blob-sauge: #CBDCCF; --blob-argile: #EFD3BF; --blob-op: .55; /* Le pied de page est sombre dans les DEUX variantes : il a ses jetons. */ --pied-fond: #1B1813; --pied-texte: #EDE9E0; /* Ombres */ --shadow-s: 0 6px 24px rgba(27,24,19,.07); --shadow-m: 0 18px 50px rgba(27,24,19,.12); --ombre-btn: 0 10px 26px rgba(46,74,59,.28); --ombre-btn-h: 0 16px 34px rgba(46,74,59,.34); /* Formes et mouvement */ --r-card: 22px; --r-arch: 999px 999px 26px 26px; --ease: cubic-bezier(.22,.75,.25,1); color-scheme: light; } [data-lum="nuit"] { --porcelain: #16130F; --blanc: #201C16; --lin: #100E0B; --ink: #F2EDE3; --ink-soft: rgba(242,237,227,.76); --ink-mute: rgba(242,237,227,.50); --sauge: #7FA98D; --sauge-deep: #A9C9B4; --sauge-soft: #253229; --sur-sauge: #14211A; --argile: #DA9A72; --argile-soft: #3A2A20; --argile-texte: #E8B78F; --ligne: rgba(242,237,227,.14); --ligne-forte: rgba(242,237,227,.42); --pointille: rgba(242,237,227,.24); --chip-fond: #14211A; --chip-texte: #A9C9B4; --voile-nav: rgba(22,19,15,.84); --select: rgba(127,169,141,.28); --barre: rgba(242,237,227,.22); --blob-sauge: #2C4536; --blob-argile: #4A3122; --blob-op: .78; --pied-fond: #0C0A07; --pied-texte: #EDE9E0; --shadow-s: 0 6px 24px rgba(0,0,0,.35); --shadow-m: 0 18px 50px rgba(0,0,0,.50); --ombre-btn: 0 10px 26px rgba(0,0,0,.45); --ombre-btn-h: 0 16px 34px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { font-size: 106.25%; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--porcelain); color: var(--ink); font-family: 'Sora', system-ui, sans-serif; font-weight: 300; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background .5s ease, color .5s ease; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; } ::selection { background: var(--select); } /* Barre de défilement : fine et sans rail sur pointeur fin, et rendue au système sur écran tactile, où notre version dessinée jurait. */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--barre); border-radius: 6px; } @media (pointer: coarse), (max-width: 700px) { ::-webkit-scrollbar { width: 0; height: 0; } html { scrollbar-width: none; } } /* Une ancre ne doit jamais atterrir sous la barre fixe. */ [id] { scroll-margin-top: 5.5rem; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--sauge); outline-offset: 3px; border-radius: 8px; } .wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.15rem, 4.5vw, 3.5rem); } /* ---------- Typographie ---------- */ .disp { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.015em; } .h-hero { font-size: clamp(2.35rem, 7.6vw, 5.8rem); line-height: 1.03; } .h-sec { font-size: clamp(1.85rem, 5.4vw, 4rem); line-height: 1.07; } h1 em, h2 em, h3 em, .disp em { font-style: italic; color: var(--argile); } /* Sur-titre. Pas de puce : le point animé qui vivait ici parasitait la lecture, surtout en mobile où il passait pour une coquille. */ .kicker { display: inline-flex; align-items: center; padding: .5rem 1.05rem; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; font-size: .6rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--sauge-deep); box-shadow: var(--shadow-s); } .lead { font-size: clamp(1rem, 1.8vw, 1.25rem); color: var(--ink-soft); max-width: 42rem; } p strong { font-weight: 600; color: var(--ink); } .sec-note { margin-top: 1.6rem; font-size: .82rem; color: var(--ink-mute); max-width: 46rem; } .dsc { display: block; margin-top: .5rem; font-size: .74rem; font-style: italic; color: var(--ink-mute); } /* ---------- Sections ---------- */ .sec { position: relative; padding-block: clamp(3.6rem, 9vw, 7.5rem); } .sec--lin { background: var(--lin); } .sec--blanc { background: var(--blanc); } .sec-head { max-width: 780px; margin-bottom: clamp(2rem, 5vw, 3.6rem); } .sec-head .kicker { margin-bottom: 1.3rem; } .sec-head p { margin: 1.1rem 0 0; } /* ---------- Révélation par mots masqués ---------- */ .wline { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .14em .2em .05em; margin: -.08em -.14em -.2em -.05em; } .wline > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); } .rv.in .wline > span { transform: translateY(0); } html.no-js .wline > span, html.reduced .wline > span { transform: none; } .fade { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s var(--ease); } .fade.in { opacity: 1; transform: none; } html.no-js .fade, html.reduced .fade { opacity: 1; transform: none; } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: .8rem; padding: .55rem .6rem .55rem 1.5rem; background: var(--sauge); color: var(--sur-sauge); border-radius: 999px; font-size: .82rem; font-weight: 500; letter-spacing: .02em; box-shadow: var(--ombre-btn); transition: background .35s ease, transform .35s var(--ease), box-shadow .35s ease; } .btn .chip { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-fond); color: var(--chip-texte); font-size: .95rem; transition: transform .35s var(--ease); } .btn:hover { background: var(--sauge-deep); transform: translateY(-2px); box-shadow: var(--ombre-btn-h); } [data-lum="nuit"] .btn:hover { color: var(--sur-sauge); } .btn:hover .chip { transform: translateX(3px); } .btn--sm { padding: .4rem .45rem .4rem 1rem; font-size: .74rem; gap: .55rem; } .chip--sm { width: 28px !important; height: 28px !important; font-size: .82rem; } .btn-line { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border: 1.5px solid var(--ligne-forte); border-radius: 999px; font-size: .82rem; font-weight: 500; transition: border-color .3s, background .3s, color .3s; } .btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--porcelain); } .btn-line--sm { padding: .62rem 1.15rem; font-size: .76rem; } .link-a { display: inline-flex; align-items: center; font-weight: 500; font-size: .85rem; color: var(--sauge-deep); border-bottom: 1px solid var(--ligne); padding-bottom: 2px; transition: border-color .3s ease, color .3s ease; } .link-a:hover { border-color: var(--sauge); } /* ============================================================ BLOC DE MARQUE Le sous-titre ne doit JAMAIS dépasser la largeur du nom. L'interlettrage est calculé par mesure dans main.js, fonction sigle(). Le CSS ne fait que poser la structure et une valeur de repli tenable si le JavaScript ne tourne pas. ============================================================ */ .sigle { display: flex; flex-direction: column; line-height: 1; } /* Les deux lignes se rétractent sur leur encre : sans cela, elles prendraient la largeur du conteneur et la mesure de calage serait fausse. Le chapô du pied, lui, garde toute la largeur. */ .sigle .l1, .sigle .l2 { align-self: flex-start; } .sigle .f-tag { align-self: stretch; } .sigle .l1 { font-family: 'Instrument Serif', serif; letter-spacing: .01em; white-space: nowrap; } .sigle .l2 { display: block; margin-top: .3rem; font-size: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; white-space: nowrap; color: var(--sauge-deep); } .logo .l1 { font-size: 1.5rem; } /* ---------- Nav ---------- */ #nav { position: fixed; inset: 0 0 auto; z-index: 90; transition: background .45s, box-shadow .45s, border-color .45s; border-bottom: 1px solid transparent; } #nav.on { background: var(--voile-nav); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--ligne); } .nav-in { max-width: 1240px; margin-inline: auto; padding: .8rem clamp(1.15rem, 4.5vw, 3.5rem); display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .nav-r { display: flex; align-items: center; gap: .5rem; flex: none; } .nav-l { display: none; gap: 1.7rem; font-size: .8rem; font-weight: 400; } .nav-l a { color: var(--ink-soft); transition: color .3s; } .nav-l a:hover { color: var(--ink); } @media (min-width: 1100px) { .nav-l { display: flex; } } .burger, .bascule { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--ligne); border-radius: 50%; background: var(--blanc); cursor: pointer; box-shadow: var(--shadow-s); transition: border-color .3s, background .3s, transform .35s var(--ease); } .burger:hover, .bascule:hover { border-color: var(--sauge); transform: translateY(-2px); } .burger svg { width: 16px; } .burger line { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; transition: transform .4s var(--ease), opacity .3s; transform-origin: center; } .burger.x line:nth-child(1) { transform: translateY(4px) rotate(45deg); } .burger.x line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } @media (min-width: 1100px) { .burger { display: none; } } /* Bascule jour / nuit. En variante jour le bouton montre une LUNE, ce qu'il propose d'atteindre ; en variante nuit il montre un SOLEIL. Aucun SVG : la lune est un disque échancré, le soleil un disque à huit rayons. */ .bascule { color: var(--ink); } .bascule-i { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: currentColor; transition: width .45s var(--ease), height .45s var(--ease), box-shadow .45s ease; } .bascule-i::after { content: ''; position: absolute; top: -3px; left: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanc); transition: transform .45s var(--ease), opacity .3s ease; } [data-lum="nuit"] .bascule-i { width: 10px; height: 10px; box-shadow: 0 -8px 0 -4px currentColor, 0 8px 0 -4px currentColor, -8px 0 0 -4px currentColor, 8px 0 0 -4px currentColor, 6px 6px 0 -4.6px currentColor, -6px -6px 0 -4.6px currentColor, 6px -6px 0 -4.6px currentColor, -6px 6px 0 -4.6px currentColor; } [data-lum="nuit"] .bascule-i::after { opacity: 0; transform: translateX(-9px); } /* Menu plein écran */ #veil { position: fixed; inset: 0; z-index: 80; background: var(--porcelain); display: flex; flex-direction: column; justify-content: center; padding: 5.2rem 1.6rem 2rem; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s; } #veil.on { opacity: 1; visibility: visible; } .veil-in { display: flex; flex-direction: column; } .veil-in a { font-family: 'Instrument Serif', serif; font-size: clamp(1.45rem, 6vw, 2.2rem); line-height: 1.25; padding-block: .38rem; border-bottom: 1px solid var(--ligne); opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s var(--ease); } #veil.on .veil-in a { opacity: 1; transform: none; } #veil.on .veil-in a:nth-child(1){transition-delay:.04s} #veil.on .veil-in a:nth-child(2){transition-delay:.09s} #veil.on .veil-in a:nth-child(3){transition-delay:.14s} #veil.on .veil-in a:nth-child(4){transition-delay:.19s} #veil.on .veil-in a:nth-child(5){transition-delay:.24s} #veil.on .veil-in a:nth-child(6){transition-delay:.29s} #veil.on .veil-in a:nth-child(7){transition-delay:.34s} #veil.on .veil-in a:nth-child(8){transition-delay:.39s} #veil.on .veil-in a:nth-child(9){transition-delay:.44s} .veil-cta { margin-top: 1.4rem; align-self: flex-start; font-family: 'Sora', sans-serif !important; font-size: .82rem !important; font-weight: 500; border: 0 !important; padding: .85rem 1.5rem !important; border-radius: 999px; background: var(--sauge); color: var(--sur-sauge); } #veil .vfoot { margin-top: 1.8rem; font-size: .58rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); } /* ---------- Loader ---------- */ #loader { position: fixed; inset: 0; z-index: 100; background: var(--porcelain); display: grid; place-items: center; transition: opacity .7s ease, visibility .7s ease; } #loader.off { opacity: 0; visibility: hidden; } #loader .li { text-align: center; } #loader .ln { font-family: 'Instrument Serif', serif; font-size: clamp(1.35rem, 6vw, 2rem); letter-spacing: .3em; text-indent: .3em; animation: lspace 1.4s var(--ease) forwards; } @keyframes lspace { from { letter-spacing: .55em; opacity: 0; } to { letter-spacing: .12em; opacity: 1; } } #loader .lb { margin: 1.2rem auto 0; width: 120px; height: 2px; background: var(--ligne); border-radius: 2px; overflow: hidden; } #loader .lb::after { content: ''; display: block; height: 100%; width: 40%; background: var(--sauge); border-radius: 2px; animation: lslide 1.2s ease-in-out infinite; } @keyframes lslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } } /* ---------- Curseur (desktop) ---------- */ .cur-d, .cur-r { display: none; } @media (hover:hover) and (pointer:fine) { .cur-d, .cur-r { display: block; position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 99; will-change: transform; } .cur-d { width: 6px; height: 6px; background: var(--ink); } .cur-r { width: 30px; height: 30px; border: 1.5px solid var(--sauge); opacity: .6; transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, opacity .3s; } /* Au survol d'un element cliquable l'anneau grossit un peu, et RESTE VIDE : un fond, meme pale, masquait le texte qu'on venait justement lire. */ .cur-r.hv { width: 40px; height: 40px; opacity: .95; border-color: var(--sauge); } } [data-para] { will-change: transform; transition: none; } /* ---------- Blob respirant ---------- */ .blob { position: absolute; border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; filter: blur(46px); opacity: var(--blob-op); pointer-events: none; animation: bmorph 19s ease-in-out infinite alternate; } .blob--sauge { background: radial-gradient(circle at 35% 35%, var(--blob-sauge), transparent 70%); } .blob--argile { background: radial-gradient(circle at 60% 40%, var(--blob-argile), transparent 70%); } @keyframes bmorph { 0% { border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; } 100% { border-radius: 58% 42% 44% 56% / 42% 58% 46% 54%; } } /* ---------- HERO ---------- */ .hero { position: relative; overflow: hidden; padding-top: clamp(5.6rem, 12vh, 8.5rem); padding-bottom: clamp(2.6rem, 7vw, 5.5rem); } .hero-g { display: grid; gap: 2.4rem; align-items: center; } @media (min-width: 980px) { .hero-g { grid-template-columns: 11fr 9fr; gap: clamp(2.5rem, 5vw, 4.5rem); } } .hero-copy { position: relative; z-index: 3; } .hero-copy .kicker { margin-bottom: 1.4rem; } .hero-sub { margin: 1.3rem 0 0; } .hero-cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; } .hero-note { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .45rem; } .mini-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); font-size: .64rem; font-weight: 500; letter-spacing: .05em; color: var(--ink-soft); } .mini-chip b { color: var(--sauge-deep); font-weight: 600; } /* La vidéo vit dans son arche, AUCUN élément ne la recouvre (visage protégé) */ .hero-media { position: relative; z-index: 2; } .arch { position: relative; overflow: hidden; border-radius: var(--r-arch); aspect-ratio: 4 / 5; background: var(--lin); box-shadow: var(--shadow-m); border: 1px solid var(--ligne); } .arch video, .arch img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; } .arch--sm { max-width: 460px; } .hero-media .arch { margin-inline: auto; max-width: 520px; will-change: transform; } /* Deux pastilles sous la vidéo : le nom, puis la portée géographique. C'est le seul endroit du premier écran où le territoire est nommé. */ .media-cap { margin: 1rem auto 0; max-width: 520px; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; } @media (min-width: 980px) { .hero-media .arch { margin-inline: 0 0; } .media-cap { justify-content: flex-start; margin-left: .4rem; } } /* ---------- Ticker ---------- */ .ticker { overflow: hidden; border-block: 1px solid var(--ligne); background: var(--blanc); } .ticker .tk { display: flex; gap: 3.2rem; padding: 1.05rem 0; white-space: nowrap; animation: tkm 52s linear infinite; } .ticker span { font-size: .64rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-mute); } .ticker i { font-style: normal; color: var(--argile); } @keyframes tkm { to { transform: translateX(-50%); } } /* ============================================================ ORIENTATION, « Qu'est-ce qui vous amène ? » ============================================================ */ .orient-sec { overflow: hidden; } .orient-head { max-width: 720px; } .orient-blob { top: 8%; right: -14%; width: 560px; height: 500px; } .orient { position: relative; z-index: 2; max-width: 940px; } .orient-cadre { position: relative; background: var(--porcelain); border: 1px solid var(--ligne); border-radius: 26px; box-shadow: var(--shadow-m); padding: clamp(1.2rem, 4vw, 2.9rem); min-height: 24rem; display: flex; flex-direction: column; overflow: hidden; } .orient-prog { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .orient-prog-b { flex: 1 1 6rem; min-width: 4rem; height: 2px; background: var(--ligne); border-radius: 2px; overflow: hidden; } .orient-prog-b i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sauge), var(--argile)); border-radius: 2px; transition: width .6s var(--ease); } .orient-prog-t { font-size: .58rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } /* Reprise depuis le début. Discrète, dans l'en-tête du cadre, jamais sous la carte de réponse : on ne pose pas une sortie sous ce qu'on vient de dire. */ .orient-zero { display: inline-flex; align-items: center; gap: .5rem; padding: .34rem .8rem .34rem .5rem; border-radius: 999px; border: 1px solid var(--ligne); background: var(--blanc); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; white-space: nowrap; transition: color .3s ease, border-color .3s ease, background .3s ease; } .orient-zero:hover { color: var(--sauge-deep); border-color: var(--sauge); } .orient-zero-i { display: grid; place-items: center; width: 19px; height: 19px; } .orient-zero-i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); } .orient-zero:hover .orient-zero-i svg { transform: rotate(-150deg); } .orient-scene { flex: 1; display: flex; flex-direction: column; justify-content: center; } .orient-p { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s var(--ease); } .orient-p.on { opacity: 1; transform: none; } .orient-p.sort { opacity: 0; transform: translateY(-14px); } .orient-q { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.55rem, 4.2vw, 2.8rem); line-height: 1.12; margin: 0; letter-spacing: -.015em; } .orient-opts { display: grid; gap: .6rem; margin-top: 1.6rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .orient-opts { grid-template-columns: 1fr 1fr; } } .orient-opt { display: flex; align-items: center; gap: .85rem; text-align: left; width: 100%; padding: .95rem 1.1rem; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 15px; font-size: .9rem; line-height: 1.35; cursor: pointer; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s ease, background .3s; } .orient-opt::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1.5px solid var(--ligne-forte); transition: background .3s, border-color .3s, transform .35s var(--ease); } .orient-opt:hover { border-color: var(--sauge); transform: translateY(-3px); box-shadow: var(--shadow-s); } .orient-opt:hover::before { background: var(--sauge); border-color: var(--sauge); transform: scale(1.25); } .orient-opt.choisi { border-color: var(--sauge); background: var(--sauge-soft); } .orient-opt.choisi::before { background: var(--sauge); border-color: var(--sauge); } .orient-attente { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(1.3rem, 3.6vw, 2.2rem); color: var(--ink-mute); text-align: center; margin: 0; padding-block: 2.6rem; } .orient-res-k { display: inline-flex; align-items: center; gap: .5rem; font-size: .58rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--sauge-deep); margin-bottom: .8rem; } .orient-res-t { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.75rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 .8rem; letter-spacing: -.015em; } .orient-res-d { font-size: .98rem; color: var(--ink-soft); margin: 0; max-width: 38rem; } .orient-res-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } .orient-res-dsc { margin-top: .9rem; font-size: .74rem; font-style: italic; color: var(--ink-mute); } .orient-res-2 { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px dashed var(--ligne); } .orient-res-2 p { margin: 0 0 .45rem; font-size: .8rem; color: var(--ink-mute); } .orient-res-2 a { font-family: 'Instrument Serif', serif; font-size: 1.25rem; color: var(--argile); } .orient-res-2 a:hover { text-decoration: underline; text-underline-offset: 4px; } .orient-res-r { margin-top: 1.4rem; font-size: .76rem; color: var(--ink-mute); } /* Retour d'une question. Même dessin que « Tout reprendre », pour que les deux sorties du questionnaire se lisent comme une paire. */ .orient-pied { margin-top: 1.4rem; } .orient-retour { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .95rem .4rem .8rem; border-radius: 999px; border: 1px solid var(--ligne); background: var(--blanc); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; transition: color .3s ease, border-color .3s ease; } .orient-retour::before { content: ''; width: 7px; height: 7px; flex: none; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .35s var(--ease); } .orient-retour:hover { color: var(--sauge-deep); border-color: var(--sauge); } .orient-retour:hover::before { transform: rotate(45deg) translate(2px, -2px); } .orient-sortie { font-size: .74rem; color: var(--ink-mute); margin: .7rem 0 0; } .orient-sortie a { color: var(--sauge-deep); font-weight: 500; } .orient-nojs { max-width: 46rem; padding: 1.6rem 0 0; } .orient-nojs p { color: var(--ink-soft); } .orient-nojs-p { font-size: .85rem; color: var(--ink-mute); } .orient-nojs a:not(.btn-line) { color: var(--sauge-deep); font-weight: 500; } /* ============================================================ LES APPROCHES, cartes empilées à révélation latérale Une carte par ligne : ouvrir l'une n'étire plus sa voisine, ce qui était le défaut de la grille à deux colonnes. Au-delà de 1000px, le détail se déplie DANS LA COLONNE DE DROITE, à côté du titre, et non en dessous. ============================================================ */ .svc-l { display: flex; flex-direction: column; gap: .9rem; } .svc { display: grid; grid-template-columns: 1fr; padding: clamp(1.3rem, 3vw, 2rem); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-card); box-shadow: var(--shadow-s); transition: box-shadow .5s ease, border-color .4s ease; } .svc:hover { box-shadow: var(--shadow-m); border-color: var(--sauge); } .svc[open] { border-color: var(--sauge); box-shadow: var(--shadow-m); } @media (min-width: 1000px) { .svc[open] { grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); column-gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; } } .svc > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .svc-t { min-width: 0; } .svc-b { display: inline-block; margin-bottom: .6rem; padding: .32rem .7rem; border-radius: 999px; background: var(--argile-soft); color: var(--argile-texte); font-size: .56rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .svc-b.badge--sauge { background: var(--sauge-soft); color: var(--sauge-deep); } .svc h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.12; } .svc .ideal { margin: .7rem 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.55; } .svc .voir { display: inline-block; margin-top: .9rem; } .svc-in { padding-top: 1.2rem; } @media (min-width: 1000px) { .svc-in { padding-top: 0; } } .svc p.d { margin: 0 0 .8rem; font-size: .88rem; color: var(--ink-soft); } .svc p.d b { color: var(--ink); font-weight: 600; } /* Seconde révélation, imbriquée : le montant demande donc deux gestes. */ .svc-h, .acc-h, .atl-h { margin-top: 1.1rem; } .svc-h > summary, .acc-h > summary, .atl-h > summary { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-radius: 999px; border: 1px dashed var(--ligne-forte); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sauge-deep); transition: border-color .3s ease, background .3s ease; } .svc-h > summary:hover, .acc-h > summary:hover, .atl-h > summary:hover { border-style: solid; border-color: var(--sauge); background: var(--sauge-soft); } .svc-h > summary .pm, .acc-h > summary .pm, .atl-h > summary .pm { width: 20px; height: 20px; } .svc-h > summary .pm svg, .acc-h > summary .pm svg, .atl-h > summary .pm svg { width: 9px; height: 9px; } .svc-h-in, .acc-h-in, .atl-h-in { padding-top: .9rem; } .svc-h-in small, .acc-h-in small, .atl-h-in small { font-size: .68rem; color: var(--ink-mute); } /* Le montant lui-meme. Il ne vit QUE dans un .fa, donc toujours derriere au moins un geste : c'est verifie mecaniquement par controle.py. */ .px { font-family: 'Instrument Serif', serif; font-size: 1.45rem; line-height: 1.1; } .px small { font-family: 'Sora', sans-serif; font-size: .66rem; color: var(--ink-mute); } .svc .link-a { margin-top: 1.3rem; } .svc .dsc { margin-top: 1rem; } /* ---------- Étapes ---------- */ .steps-g { display: grid; gap: 2.2rem; } @media (min-width: 960px) { .steps-g { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .steps-l { position: sticky; top: 7.2rem; } } .steps-fig { display: none; margin-top: 2.2rem; } @media (min-width: 960px) { .steps-fig { display: block; } } .steps-ligne { display: block; width: 2px; height: 140px; background: var(--ligne); border-radius: 2px; overflow: hidden; } .steps-ligne i { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--sauge), var(--argile)); transition: height .55s var(--ease); } .step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: clamp(1.3rem, 3vw, 1.8rem); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-card); box-shadow: var(--shadow-s); overflow: hidden; transition: border-color .5s ease, transform .5s var(--ease), box-shadow .5s ease; } .step + .step { margin-top: .9rem; } /* Filet d'accent qui se remplit : au défilement (.vue) et au survol. */ .step::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--sauge), var(--argile)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); } .step.vue::before { transform: scaleY(1); } .step.vue { border-color: var(--sauge); box-shadow: var(--shadow-m); } .step .n { font-family: 'Instrument Serif', serif; font-size: clamp(2.2rem, 4.5vw, 3.2rem); line-height: 1; color: var(--argile); transition: color .5s ease, transform .5s var(--ease); } .step.vue .n { color: var(--sauge); } .step h3 { margin: .15rem 0 .4rem; font-size: 1rem; font-weight: 600; } .step p { margin: 0; font-size: .88rem; color: var(--ink-soft); } @media (hover:hover) and (pointer:fine) { .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--sauge); } .step:hover::before { transform: scaleY(1); } .step:hover .n { transform: translateY(-3px) scale(1.06); color: var(--sauge); } } /* ---------- À propos ---------- */ .about-g { display: grid; gap: 2.4rem; align-items: center; } @media (min-width: 960px) { .about-g { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 4.5rem); } } .about-fig { position: relative; } .about-fig .blob { inset: -8% -12% auto; height: 115%; width: 124%; z-index: 0; } .about-fig .arch { position: relative; z-index: 1; } .about-fig .arch img { object-position: center top; } .pull { margin: 1.4rem 0 0; padding-left: 1.1rem; border-left: 3px solid var(--argile); font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.35; color: var(--ink); } .tools { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .45rem; } /* ============================================================ ACCOMPAGNEMENTS Au repos : la durée, le nom, une phrase. Tout le reste, contenu, objectif et honoraires, se découvre au clic. ============================================================ */ .acc-l { display: flex; flex-direction: column; gap: .9rem; } .acc { display: grid; grid-template-columns: 1fr; padding: clamp(1.3rem, 3vw, 2rem); background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-card); box-shadow: var(--shadow-s); transition: box-shadow .5s ease, border-color .4s ease; } .acc:hover { box-shadow: var(--shadow-m); border-color: var(--sauge); } .acc[open] { border-color: var(--sauge); box-shadow: var(--shadow-m); } @media (min-width: 1000px) { .acc[open] { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); column-gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; } } .acc > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .acc-t { min-width: 0; } .acc-duree { display: inline-block; margin-bottom: .6rem; padding: .3rem .7rem; background: var(--sauge-soft); color: var(--sauge-deep); border-radius: 999px; font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; } .acc h3 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 400; line-height: 1.12; } .acc-qui { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-soft); } .acc-t .voir { display: inline-block; margin-top: .9rem; } .acc-in { padding-top: 1.2rem; } @media (min-width: 1000px) { .acc-in { padding-top: 0; } } .acc-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; } .acc-incl li { position: relative; padding-left: 1.4rem; font-size: .88rem; } .acc-incl li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--argile); opacity: .85; } /* Mention « en construction ». Elle dit la verite sur un livrable pas encore pret, plutot que de le promettre sans reserve dans une formule payante. */ .att { display: inline-block; margin-left: .4rem; padding: .12rem .5rem; border-radius: 999px; border: 1px dashed var(--ligne-forte); font-size: .56rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); vertical-align: middle; } .acc-vise { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--ligne); font-size: .84rem; color: var(--ink-soft); } .acc-vise b { display: block; font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .3rem; } .acc-btn { margin-top: 1.2rem; } /* ============================================================ ATELIERS, rangées empilées ============================================================ */ .atl-l { display: flex; flex-direction: column; } .atl { border-top: 1px solid var(--ligne); } .atl:last-child { border-bottom: 1px solid var(--ligne); } .atl-g { display: grid; gap: 1rem; padding-block: clamp(1.4rem, 3vw, 2rem); transition: padding-left .45s var(--ease); } @media (min-width: 900px) { .atl-g { grid-template-columns: minmax(0, 1fr) auto; gap: 2.4rem; align-items: center; } } @media (hover:hover) and (pointer:fine) { .atl:hover .atl-g { padding-left: .7rem; } .atl:hover h3 { color: var(--sauge-deep); } } .atl-c { min-width: 0; } .atl h3 { margin: 0 0 .35rem; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.15; transition: color .4s ease; } .atl-f { display: block; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .7rem; } .atl p { margin: 0; font-size: .86rem; color: var(--ink-soft); max-width: 44rem; } .atl-a { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; } @media (min-width: 900px) { .atl-a { align-items: flex-end; } } .atl-a .atl-h { margin-top: 0; } /* ---------- Honoraires ---------- */ .pr-wrap { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-card); box-shadow: var(--shadow-s); padding: clamp(1.2rem, 3.5vw, 2.6rem); } .pr-group { padding-block: .5rem; } .pr-group + .pr-group { border-top: 1px solid var(--ligne); margin-top: .8rem; padding-top: 1.3rem; } .pr-group h3 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.35rem); } .pr-row { display: flex; align-items: baseline; gap: .9rem; padding-block: .55rem; } .pr-row .nm { font-size: .88rem; } .pr-row .nm small { display: block; font-size: .7rem; color: var(--ink-mute); } .pr-row .ld { flex: 1; border-bottom: 1.5px dotted var(--pointille); transform: translateY(-4px); } .pr-row .am { font-family: 'Instrument Serif', serif; font-size: 1.15rem; white-space: nowrap; } @media (max-width: 560px) { .pr-row { flex-wrap: wrap; row-gap: .1rem; } .pr-row .ld { display: none; } .pr-row .am { margin-left: auto; } } .policy { margin-top: 1.6rem; display: grid; gap: .9rem; } @media (min-width: 760px) { .policy { grid-template-columns: repeat(3, 1fr); } } .pol { padding: 1.15rem 1.2rem; border: 1px solid var(--ligne); border-radius: 16px; background: var(--porcelain); font-size: .78rem; color: var(--ink-soft); } .pol b { display: block; margin-bottom: .25rem; font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sauge-deep); } /* ---------- Base commune des accordéons ---------- */ details.acd > summary { list-style: none; cursor: pointer; } details.acd > summary::-webkit-details-marker { display: none; } summary .pm { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ligne-forte); transition: transform .4s var(--ease), background .3s, border-color .3s, color .3s; } summary .pm svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; } details.acd[open] > summary .pm { transform: rotate(45deg); background: var(--sauge); border-color: var(--sauge); color: var(--sur-sauge); } .fa { overflow: hidden; } /* Invite de dévoilement, elle s'efface une fois le bloc ouvert */ .voir, .voir-h { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sauge-deep); } details.acd[open] > summary .voir, details.acd[open] > summary .voir-h { display: none; } /* Groupes d'honoraires repliables. Le repere « plus » est TOUJOURS colle au bord droit du cartouche, ouvert comme ferme, et sur toutes les largeurs. Le laisser suivre la fin du titre donnait une colonne en dents de scie, tres visible en mobile. */ details.pr-group > summary { display: flex; align-items: center; gap: .8rem; padding-block: .55rem; } /* C'est le TITRE qui pousse, pas les elements de droite qui tirent : le repere reste ainsi colle au bord, que l'invite « Voir les honoraires » soit affichee ou masquee. La caler sur l'invite la decrochait en mobile, ou celle-ci est cachee mais toujours presente dans le document. */ details.pr-group > summary h3 { margin: 0 auto 0 0; } details.pr-group > summary .voir-h { text-align: right; } .pr-group .fa > div { padding-top: .35rem; } @media (max-width: 620px) { details.pr-group > summary .voir-h { display: none; } } /* Encart de cadre de pratique (guidance) */ .cadre-p { margin-top: 1.2rem; padding: 1rem 1.1rem; border-left: 3px solid var(--argile); background: var(--argile-soft); border-radius: 0 14px 14px 0; } .cadre-p b { display: block; font-size: .56rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--argile-texte); margin-bottom: .35rem; } .cadre-p p { margin: 0; font-size: .82rem; color: var(--ink-soft); } /* ============================================================ QUESTIONS Pas de pastille plus, qu'on voit sur tous les sites. La question porte un numéro en serif et se lit en typographie de titre ; la réponse se déploie dessous, dans son panneau. ============================================================ */ .qa-l { display: flex; flex-direction: column; max-width: 940px; } .qa { border-top: 1px solid var(--ligne); } .qa:last-child { border-bottom: 1px solid var(--ligne); } /* Aucun repere « plus » : la ligne entiere est cliquable, le numero et la question suffisent a dire qu'il y a quelque chose derriere. */ .qa > summary { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1rem clamp(.9rem, 2.5vw, 1.8rem); padding-block: clamp(1.1rem, 2.6vw, 1.5rem); transition: padding-left .45s var(--ease); } .qa-n { font-family: 'Instrument Serif', serif; font-size: .95rem; color: var(--ink-mute); letter-spacing: .06em; transition: color .4s ease; } .qa-q { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.25; letter-spacing: -.01em; transition: color .4s ease; } .qa[open] .qa-n { color: var(--sauge); } .qa[open] .qa-q { color: var(--ink); } @media (hover:hover) and (pointer:fine) { .qa:hover > summary { padding-left: .6rem; } .qa:hover .qa-n { color: var(--argile); } } .qa-r { margin-left: 0; margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); padding: 1.1rem 1.3rem; background: var(--porcelain); border-left: 3px solid var(--sauge); border-radius: 0 16px 16px 0; font-size: .9rem; color: var(--ink-soft); max-width: 46rem; } @media (min-width: 700px) { .qa-r { margin-left: 2.7rem; } } .qa-r a { color: var(--sauge-deep); font-weight: 500; border-bottom: 1px solid var(--ligne); } /* ---------- CTA final ---------- */ .final { text-align: center; position: relative; overflow: hidden; } .final .blob { left: 50%; top: 12%; width: 620px; height: 480px; transform: translateX(-50%); } .final-in { position: relative; z-index: 2; } .final .lead { margin-inline: auto; } .final .hero-cta { justify-content: center; } /* ---------- Bouton flottant ---------- */ #float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70; opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none; transition: opacity .4s ease, transform .4s var(--ease); } #float.on { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 640px) { #float { right: 50%; transform: translate(50%, 16px) scale(.94); } #float.on { transform: translate(50%, 0) scale(1); } } /* ============================================================ PIED DE PAGE Sombre dans les deux variantes : il a ses propres jetons. ============================================================ */ footer { background: var(--pied-fond); color: var(--pied-texte); padding: 4rem 0 2.4rem; } footer a:hover { color: #fff; } .f-g { display: grid; gap: 2.2rem; } @media (min-width: 860px) { .f-g { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } } .f-logo .l1 { font-size: 1.7rem; } .f-logo .l2 { color: rgba(237,233,224,.62); } .f-tag { margin-top: 1rem; max-width: 22rem; font-size: .86rem; color: rgba(237,233,224,.75); } .f-h { margin: 0 0 1.2rem; font-size: .56rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: rgba(237,233,224,.55); } .f-ls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; font-size: .88rem; } .f-ls a { display: inline-flex; align-items: center; gap: .7rem; } .f-ls--nu { gap: .55rem; } .f-ls--nu a { color: rgba(237,233,224,.82); transition: color .3s ease; } /* Pastille de pictogramme, avec son effet au survol */ .f-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(237,233,224,.22); transition: background .35s ease, border-color .35s ease, transform .4s var(--ease), color .35s ease; } .f-ic svg { width: 16px; height: 16px; fill: currentColor; } .f-ls a:hover .f-ic { background: var(--sauge); border-color: var(--sauge); color: var(--sur-sauge); transform: translateY(-3px) rotate(-6deg); } .f-mute { color: rgba(237,233,224,.6); } .f-leg { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(237,233,224,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem 1.4rem; font-size: .68rem; color: rgba(237,233,224,.6); } /* Le bloc de gauche empile ses trois mentions : copyright, disclaimer santé, monnaie. Elles restent dans la même rangée que les liens légaux. */ .f-leg-c { display: flex; flex-direction: column; gap: .35rem; } .f-leg nav { display: flex; flex-wrap: wrap; gap: 1.1rem; } .f-leg nav a { border-bottom: 1px solid rgba(237,233,224,.24); padding-bottom: 1px; } /* ============================================================ PAGES DE TEXTE LONG Mentions légales, confidentialité, cookies, et toute page qui se lit plutôt qu'elle ne se parcourt. Une seule colonne, calée sur une longueur de ligne confortable, avec un sommaire collant sur grand écran. ============================================================ */ .txt-sec { padding-top: clamp(6.5rem, 14vh, 9.5rem); } .txt-g { display: grid; gap: 2.4rem; align-items: start; } @media (min-width: 1000px) { .txt-g { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); } .txt-som { position: sticky; top: 7.2rem; } } .txt-som { min-width: 0; } .txt-som-t { display: block; margin-bottom: 1rem; font-size: .58rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); } .txt-som ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; counter-reset: som; } .txt-som li { counter-increment: som; } .txt-som a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.4; transition: color .3s ease; } .txt-som a::before { content: counter(som, decimal-leading-zero); font-family: 'Instrument Serif', serif; color: var(--ink-mute); transition: color .3s ease; } .txt-som a:hover { color: var(--ink); } .txt-som a:hover::before { color: var(--argile); } .txt { min-width: 0; max-width: 42rem; } .txt-maj { display: inline-block; margin-bottom: 2rem; padding: .4rem .9rem; border: 1px solid var(--ligne); border-radius: 999px; background: var(--blanc); font-size: .64rem; font-weight: 500; letter-spacing: .06em; color: var(--ink-mute); } .txt h2 { margin: 2.8rem 0 .9rem; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; scroll-margin-top: 6rem; } .txt h2:first-of-type { margin-top: 0; } .txt h3 { margin: 1.8rem 0 .6rem; font-size: .96rem; font-weight: 600; } .txt p { margin: 0 0 1rem; font-size: .93rem; color: var(--ink-soft); } .txt ul { margin: 0 0 1.2rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; } .txt li { position: relative; padding-left: 1.3rem; font-size: .93rem; color: var(--ink-soft); } .txt li::before { content: ''; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--argile); opacity: .8; } .txt a { color: var(--sauge-deep); font-weight: 500; border-bottom: 1px solid var(--ligne); transition: border-color .3s ease; } .txt a:hover { border-color: var(--sauge); } .txt strong, .txt b { font-weight: 600; color: var(--ink); } /* Encart de mise en avant, pour ce qui doit sauter aux yeux dans une page de texte : l'absence de cookies, la nature non médicale des prestations. */ .txt-cle { margin: 1.6rem 0 1.8rem; padding: 1.2rem 1.3rem; border-left: 3px solid var(--sauge); background: var(--blanc); border-radius: 0 16px 16px 0; box-shadow: var(--shadow-s); } .txt-cle b { display: block; margin-bottom: .35rem; font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sauge-deep); } .txt-cle p { margin: 0; font-size: .9rem; } .txt-cle p + p { margin-top: .6rem; } /* ============================================================ PAGE DE CONTACT Deux colonnes : a gauche ce qui rassure, a droite le formulaire. Aucun montant sur cette page, donc rien a depiler : c'est la seule ou l'on demande, pas ou l'on lit. ============================================================ */ .ct-sec { overflow: hidden; padding-top: clamp(6.5rem, 14vh, 9.5rem); } .ct-blob { top: -10%; right: -12%; width: 560px; height: 500px; } .ct-g { position: relative; z-index: 2; display: grid; gap: 2.6rem; align-items: start; } @media (min-width: 980px) { .ct-g { grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 4.5rem); } .ct-l { position: sticky; top: 7.2rem; } } /* min-width sur une colonne de grille : sans lui, un champ large deborde au lieu de se retracter. */ .ct-r { min-width: 0; } .ct-etapes { margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1.1rem; } .ct-e { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; } .ct-n { font-family: 'Instrument Serif', serif; font-size: 1.5rem; line-height: 1; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1px solid var(--ligne); border-radius: 50%; color: var(--argile); background: var(--blanc); } .ct-e h2 { margin: .3rem 0 .2rem; font-size: .95rem; font-weight: 600; } .ct-e p { margin: 0; font-size: .84rem; color: var(--ink-soft); } .ct-vite { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--ligne); } .ct-vite-t { display: block; margin-bottom: 1rem; font-size: .58rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); } /* Les pastilles de contact sont dessinees pour le pied de page, qui est sombre. Sur fond clair, il leur faut leurs propres valeurs. */ .ct-ls { font-size: .88rem; } .ct-ls .f-ic { border-color: var(--ligne); background: var(--blanc); color: var(--sauge-deep); } .ct-ls a:hover .f-ic { background: var(--sauge); border-color: var(--sauge); color: var(--sur-sauge); } .ct-ls a:hover { color: var(--sauge-deep); } /* ---------- Le formulaire ---------- */ .ct-form { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-card); box-shadow: var(--shadow-m); padding: clamp(1.4rem, 3.5vw, 2.4rem); } .ct-jardin { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ct-champ { margin-bottom: 1.2rem; } .ct-duo { display: grid; gap: 0 1rem; } @media (min-width: 620px) { .ct-duo { grid-template-columns: 1fr 1fr; } } .ct-champ label { display: block; margin-bottom: .45rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .ct-req { color: var(--argile); } .ct-opt { font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--ink-mute); } .ct-champ input[type="text"], .ct-champ input[type="email"], .ct-champ input[type="tel"], .ct-champ textarea, .ct-select select { width: 100%; font: inherit; font-size: .92rem; color: var(--ink); padding: .8rem .95rem; background: var(--porcelain); border: 1px solid var(--ligne); border-radius: 13px; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; } .ct-champ textarea { resize: vertical; min-height: 8rem; line-height: 1.6; } .ct-champ input:focus, .ct-champ textarea:focus, .ct-select select:focus { outline: none; border-color: var(--sauge); background: var(--blanc); box-shadow: 0 0 0 3px var(--sauge-soft); } .ct-champ input::placeholder, .ct-champ textarea::placeholder { color: var(--ink-mute); } /* Le chevron du menu deroulant est dessine ici : celui du systeme jure. */ .ct-select { position: relative; } .ct-select select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer; } .ct-select::after { content: ''; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none; border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute); transform: rotate(45deg); } .ct-aide { margin: .5rem 0 0; font-size: .74rem; font-style: italic; color: var(--ink-mute); } .ct-accord { margin: 1.5rem 0; padding-top: 1.3rem; border-top: 1px dashed var(--ligne); } .ct-case { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; cursor: pointer; font-size: .8rem; color: var(--ink-soft); } .ct-case input { position: absolute; opacity: 0; width: 0; height: 0; } .ct-coche { width: 22px; height: 22px; flex: none; margin-top: .1rem; border: 1.5px solid var(--ligne-forte); border-radius: 7px; background: var(--porcelain); position: relative; transition: background .3s ease, border-color .3s ease; } .ct-coche::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border-right: 2px solid var(--sur-sauge); border-bottom: 2px solid var(--sur-sauge); transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); } .ct-case input:checked + .ct-coche { background: var(--sauge); border-color: var(--sauge); } .ct-case input:checked + .ct-coche::after { transform: rotate(45deg) scale(1); } .ct-case input:focus-visible + .ct-coche { outline: 2px solid var(--sauge); outline-offset: 3px; } .ct-case a { color: var(--sauge-deep); font-weight: 500; border-bottom: 1px solid var(--ligne); } .ct-envoi { border: 0; cursor: pointer; } .ct-pied { margin: 1.2rem 0 0; font-size: .76rem; color: var(--ink-mute); } /* ============================================================ MOBILE Tout ce qui doit tenir sur une seule ligne y tient. Le bloc de marque rétrécit, le bouton de la barre s'efface au profit du menu et du bouton flottant, et la ponctuation reste collée à son mot par des espaces insécables dans le HTML. ============================================================ */ @media (max-width: 1099px) { .nav-cta { display: none; } } @media (max-width: 700px) { .logo .l1 { font-size: 1.18rem; } .sigle .l2 { font-size: .44rem; margin-top: .26rem; } .nav-in { padding-block: .65rem; gap: .5rem; } .burger, .bascule { width: 38px; height: 38px; } .burger svg { width: 15px; } .hero-cta .btn, .hero-cta .btn-line { font-size: .76rem; } .hero-cta .btn { padding-left: 1.15rem; } .btn .chip { width: 30px; height: 30px; } .mini-chip { font-size: .6rem; padding: .38rem .7rem; } .orient-prog-t { font-size: .54rem; letter-spacing: .18em; } .orient-zero { font-size: .54rem; padding: .3rem .65rem .3rem .42rem; } .f-leg { flex-direction: column; } } @media (max-width: 400px) { .logo .l1 { font-size: 1.05rem; } .hero-cta .btn, .hero-cta .btn-line { width: 100%; justify-content: space-between; } .hero-cta .btn-line { justify-content: center; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #loader { display: none; } .ticker .tk { animation: none; } .blob { animation: none; } [data-para] { transform: none !important; } .orient-p { opacity: 1 !important; transform: none !important; } .step::before { transform: scaleY(1) !important; } }