/* ============================================================ SOMMAIRE (ordre d'apparition dans ce fichier) 1. Variables (couleurs, typo, structure — jour/nuit) 2. Reset & base (éléments HTML bruts, .wrap, .eyebrow) 3. Progression de scroll (barre fine en haut de page) 4. Header / nav 5. Hero (plein écran + ambiance en canvas 2D) 6. À propos 7. Pour qui est-ce fait 8. Qu'est-ce que le coaching 9. Citation (bandeau séparateur) 10. Déroulement concret (Méthode, séance par séance) 11. Témoignages (section désactivée, en attente de vrais retours clients) 12. FAQ 13. Tarifs 14. Contact 15. Footer 16. Pages légales (mentions-legales.html, confidentialite.html) ============================================================ */ /* ============================================================ VARIABLES — modifiez ici pour personnaliser le site ============================================================ */ :root{ /* Couleurs — mode jour */ --bg: #FAF9F5; --bg-alt: #F1EEE6; --surface: #FFFFFF; --ink: #1C1F1B; --ink-soft: #5B5F53; --accent: #193E2F; --accent-soft:#7C9473; --accent-tint:#E4E9DE; --line: rgba(28,31,27,0.12); --shadow: rgba(28,31,27,0.07); /* couleur de texte utilisée SUR un fond --accent (boutons pleins, badges). Mode jour : --accent est un vert foncé → texte clair. */ --accent-contrast:#F8F9F4; /* rouge terracotta, en accord avec la palette verte/crème du site — utilisé pour les croix "✕" de la colonne "Ce n'est peut-être pas (encore) le moment" (voir .qualif-no li::before). Redéfini plus bas pour le mode nuit, où une teinte plus claire est nécessaire pour rester visible sur un fond sombre. */ --danger: #B3492F; /* doré, rare : utilisé à exactement trois endroits (eyebrows "//", cadre photo décalé, soulignement d'un mot-clé) — jamais ailleurs. Voir .accent-word plus bas : le trait du soulignement est un SVG en data-URI qui ne peut pas lire cette variable, donc sa couleur est dupliquée à la main dans le SVG (une version claire, une sombre). */ --brass: #A9752F; /* Typographie */ --font-display: 'Playfair Display', serif; --font-body: 'Manrope', sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* Structure */ --radius: 3px; --max-width: 1120px; --gutter: clamp(1.25rem, 4vw, 3rem); --section-space: clamp(4rem, 9vw, 8rem); color-scheme: light; } [data-theme="dark"]{ --bg: #14170F; --bg-alt: #1B1F15; --surface: #1A1E14; --ink: #ECEAE1; --ink-soft: #ABAE9E; --accent: #9AC085; --accent-soft:#5E7A54; --accent-tint:#232A1B; --line: rgba(236,234,225,0.12); --shadow: rgba(0,0,0,0.35); /* Mode nuit : --accent devient un vert clair → il faut un texte foncé dessus, sinon le contraste tombe sous 2:1 (illisible). */ --accent-contrast:#12160D; /* voir le commentaire sur --danger en mode jour : teinte plus claire (corail) pour rester bien visible sur le fond sombre. */ --danger: #D9765F; /* même doré, éclairci pour rester lisible sur fond sombre — voir le commentaire sur --brass en mode jour. */ --brass: #D9AB63; color-scheme: dark; } /* ============================================================ RESET & BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } } /* Lenis (scroll fluide, voir js/script.js) ajoute la classe "lenis" sur dès qu'il prend le contrôle du scroll. Le "scroll-behavior:smooth" natif défini juste au-dessus doit alors être désactivé : sinon, un clic sur un lien d'ancrage (ex. #tarifs) déclenche à la fois le smooth-scroll natif du navigateur ET celui de Lenis, qui se battent pour la même position — ce qui bloque ou fait "sauter" le scroll, surtout visible sur Chrome. */ html.lenis, html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; } .lenis.lenis-stopped{ overflow:hidden; } .lenis.lenis-scrolling iframe{ pointer-events:none; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; transition:background .4s ease, color .4s ease; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3{ font-family:var(--font-display); font-weight:500; margin:0; line-height:1.1; } /* taille commune à tous les titres h2 de section — une seule règle plutôt que dupliquée section par section, pour rester cohérent partout */ section h2{ font-size:clamp(1.8rem, 3.4vw, 2.5rem); } .wrap{ max-width:var(--max-width); margin:0 auto; padding-inline:var(--gutter); } section{ padding-block:var(--section-space); } .eyebrow{ display:inline-flex; /* flex-start (pas center) : si le texte passe sur 2 lignes à cause d'un eyebrow long sur petit écran (le hero par exemple), le "//" reste collé en haut, contre la première ligne, plutôt que de se retrouver centré entre les deux lignes. */ align-items:flex-start; gap:.5em; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:1.2rem; } /* le "//" façon commentaire de code est l'un des trois seuls usages du doré (--brass) sur tout le site — voir le commentaire sur --brass. */ .eyebrow::before{ content:"//"; color:var(--brass); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* lien d'évitement : hors écran par défaut, révélé au focus clavier (première chose atteignable en tabulant depuis le haut de page) */ .skip-link{ position:absolute; top:-100%; left:1rem; z-index:100; background:var(--accent); color:var(--accent-contrast); padding:.8rem 1.4rem; border-radius:var(--radius); text-decoration:none; font-size:.9rem; font-weight:600; transition:top .2s ease; } .skip-link:focus{ top:1rem; } /* ============================================================ PROGRESSION DE SCROLL ============================================================ */ .scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:60; transform-origin:left; pointer-events:none; } /* ============================================================ HEADER / NAV ============================================================ */ header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem; } .logo{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:.01em; text-decoration:none; cursor:pointer; } .logo em{ color:var(--accent); font-style:italic; } .nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; font-size:.92rem; color:var(--ink-soft); transition:color .2s ease; /* garde-fou : un lien du menu ne doit jamais se couper en deux lignes, même dans un cas limite imprévu (zoom navigateur, police de repli, libellé futur plus long) — voir le commentaire sur le breakpoint ci-dessous pour la cause principale déjà traitée. */ white-space:nowrap; } .nav-links a:hover{ color:var(--ink); } .nav-right{ display:flex; align-items:center; gap:1.4rem; } .theme-toggle{ border:1px solid var(--line); background:var(--surface); width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:border-color .2s ease, transform .2s ease; } .theme-toggle:hover{ border-color:var(--accent-soft); } .theme-toggle svg{ width:18px; height:18px; } .theme-toggle .sun{ display:none; } [data-theme="dark"] .theme-toggle .sun{ display:block; } [data-theme="dark"] .theme-toggle .moon{ display:none; } .nav-toggle{ display:none; border:none; background:none; cursor:pointer; width:38px; height:38px; color:var(--ink); } /* Seuil aligné sur --max-width (1120px) plutôt que sur un chiffre arbitraire : logo + 8 liens + bouton thème ont besoin d'environ 925px sur une seule ligne, et l'espace réellement disponible ne suffit qu'à partir de ~1022px mesuré en pratique. Entre l'ancien seuil (820px) et ~1022px, les liens à plusieurs mots ("À propos", "Pour qui"...) se compressaient et cassaient en deux lignes. 1120px laisse une marge confortable au-dessus de ce point de rupture réel. */ @media (max-width:1120px){ .nav-links{ position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:1.5rem var(--gutter) 2rem; gap:1.1rem; display:none; } .nav-links.open{ display:flex; } .nav-toggle{ display:grid; place-items:center; } } /* ============================================================ HERO — plein écran, ambiance en canvas 2D, invitation au scroll ============================================================ */ /* Éléments animés à l'entrée par initHeroIntroAnimation() (js/script.js) : invisibles par défaut, avant même que le JS ne s'exécute — sinon, comme js/script.js est chargé en fin de , le texte apparaît brièvement à son état final avant que GSAP ne le fasse disparaître puis réapparaître en fondu (flash au chargement/rechargement). GSAP anime chaque élément individuellement depuis cet état masqué ; si GSAP est indisponible ou que l'utilisateur préfère un mouvement réduit, js/script.js retire ce masquage directement (voir initScrollAnimations() et le repli sans GSAP). Masqué via visibility (pas opacity) : les tweens GSAP ci-dessous utilisent `.from({ autoAlpha: 0, ... })`, qui capture l'opacité ACTUELLE de l'élément comme valeur d'arrivée. Si on masquait avec `opacity:0` ici, cette valeur "actuelle" serait déjà 0 au moment où GSAP la lit — la transition irait alors de 0 à 0, et l'élément resterait invisible pour de bon (bug réel constaté). `visibility:hidden` masque tout aussi bien sans fausser l'opacité "naturelle" (1) que GSAP doit lire. */ .hero-reveal{ visibility:hidden; } .hero{ position:relative; overflow:hidden; min-height:85svh; display:flex; align-items:center; padding-block:clamp(3rem, 8vw, 5rem); } .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.6; pointer-events:none; } .hero > .wrap{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; } .hero-copy{ max-width:44em; display:flex; flex-direction:column; align-items:center; } .hero h1{ font-size:clamp(2.6rem, 6.4vw, 4.2rem); letter-spacing:-.015em; } /* soulignement "à main levée" — troisième et dernier usage du doré (--brass) sur le site. Couleur codée en dur dans le SVG (data-URI, ne peut pas lire une variable CSS) : #A9752F ci-dessous = --brass en mode jour, remplacé par #D9AB63 (--brass en mode nuit) juste après. */ .hero h1 .accent-word{ font-style:italic; color:var(--accent); white-space:nowrap; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:0 100%; background-size:100% .4em; padding-bottom:.12em; } [data-theme="dark"] .hero h1 .accent-word{ background-image:url("data:image/svg+xml;utf8,"); } .hero p.lead{ margin-top:clamp(1.4rem, 3vw, 2.2rem); max-width:32em; font-size:1.12rem; color:var(--ink-soft); } .hero-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:1.8rem; } .tag-pill{ border:1px solid var(--line); border-radius:999px; padding:.4rem 1rem; font-size:.82rem; color:var(--ink-soft); background:var(--surface); } .hero-cta{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:2.4rem; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.6rem; border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .btn-primary{ background:var(--accent); color:var(--accent-contrast); } .btn-primary:hover{ transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 88%, black); } .btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); } .btn-ghost:hover{ border-color:var(--accent-soft); } .hero-meta{ margin-top:2.6rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1rem; font-size:.82rem; color:var(--ink-soft); } .hero-meta span:not(:last-child)::after{ content:"·"; margin-left:1rem; color:var(--line); } .scroll-cue{ margin-top:2.6rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; } .scroll-cue svg{ width:15px; height:15px; animation:scrollBob 1.8s ease-in-out infinite; } @keyframes scrollBob{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(7px); opacity:1; } } /* ============================================================ À PROPOS ============================================================ */ .a-propos{ background:var(--bg-alt); border-block:1px solid var(--line); } .a-propos .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem, 6vw, 5rem); align-items:center; } @media (max-width:820px){ .a-propos .wrap{ grid-template-columns:1fr; } /* en une seule colonne, .a-propos-photo-frame s'étirait sinon sur toute la largeur du bloc (jusqu'à ~700px sur une tablette en portrait) et devenait démesurée, vu son aspect-ratio 4/5 (donc encore plus haute que large). On la plafonne et on la centre. */ .a-propos-photo-frame{ max-width:22rem; margin-inline:auto; } } /* conteneur qui porte le format (aspect-ratio) et les coins dorés (façon étiquette de galerie — un des trois seuls usages du doré, --brass), décalés de 3px à l'extérieur de la photo. Posés ici plutôt que sur .a-propos-photo : ce conteneur a overflow:hidden (nécessaire pour rogner l'image avec object-fit:cover) et couperait tout ce qui dépasse ses bords. L'animation de parallaxe au scroll (voir initAproposAnimations() dans js/script.js) cible donc ce conteneur plutôt que .a-propos-photo, pour que les coins restent synchronisés avec la photo pendant le défilement. */ .a-propos-photo-frame{ position:relative; aspect-ratio:4/5; } .a-propos-photo-frame::before, .a-propos-photo-frame::after{ content:""; position:absolute; width:2.4rem; height:2.4rem; } .a-propos-photo-frame::before{ top:-3px; left:-3px; border-top:1px solid var(--brass); border-left:1px solid var(--brass); } .a-propos-photo-frame::after{ bottom:-3px; right:-3px; border-bottom:1px solid var(--brass); border-right:1px solid var(--brass); } .a-propos-photo{ width:100%; height:100%; border-radius:var(--radius); background: linear-gradient(160deg, var(--accent-tint), transparent 60%), var(--surface); border:1px solid var(--line); position:relative; z-index:1; overflow:hidden; } .a-propos-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .a-propos-photo .a-propos-caption{ position:absolute; bottom:1.2rem; left:1.2rem; font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:#F8F9F4; text-shadow:0 2px 10px rgba(0,0,0,.35); } .a-propos p{ color:var(--ink-soft); margin-top:1.1rem; max-width:38em; } .a-propos .signature{ margin-top:1.6rem; font-family:var(--font-display); font-style:italic; color:var(--accent); } .a-propos .signature-title{ display:block; margin-top:.3rem; font-family:var(--font-body); font-style:normal; font-size:.82rem; color:var(--ink-soft); } /* bloc formation/certification — troisième élément de la grille 2 colonnes de .a-propos .wrap (grid-column:1/-1 pour sortir des 2 colonnes photo/texte et s'afficher en dessous des deux). Grille à 3 colonnes de largeur FIXE (pas "auto"/contenu) : les deux badges (Elty, ICF) ont exactement la même largeur, la colonne de texte est un peu plus large pour que la phrase passe sur 2-3 lignes. Le tout est en largeur "contenu" (fit-content) et centré sous la colonne de texte de la bio. */ .a-propos-credentials{ grid-column:1/-1; margin-top:.5rem; width:fit-content; max-width:100%; margin-inline:auto; display:grid; grid-template-columns:12rem 12rem 21rem; align-items:stretch; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .credential-col{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1.8rem 1.2rem; text-align:center; } /* filet de séparation entre colonnes : volontairement pas bord à bord (autrefois un border-left pleine hauteur) — un pseudo-élément à 80% de hauteur, centré, rend le trait plus léger visuellement. */ .credential-col + .credential-col::before{ content:""; position:absolute; top:10%; left:0; width:1px; height:80%; background:var(--line); } .credential-logo img{ width:64px; height:64px; object-fit:contain; } /* le sceau ICF porte un texte circulaire fin ("ICF-ACCREDITED COACHING EDUCATION") illisible à 64px — agrandi spécifiquement pour rester déchiffrable, sans changer la taille du logo Elty à côté. */ .credential-badge img{ width:120px; height:120px; object-fit:contain; } .a-propos .credential-col p{ margin-top:0; max-width:none; } .a-propos .credential-logo p, .a-propos .credential-badge p{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; line-height:1.3; color:var(--accent); } .credential-logo span{ font-size:1rem; color:var(--ink-soft); } .credential-badge span{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.05em; text-transform:uppercase; font-weight:600; } .a-propos .credential-text{ color:var(--ink); font-size:.95rem; line-height:1.6; } @media (max-width:820px){ .a-propos-credentials{ grid-template-columns:1fr; } /* même logique qu'en desktop (filet à 80%, centré) mais à l'horizontale puisque les colonnes sont empilées plutôt que côte à côte. */ .credential-col + .credential-col::before{ top:0; left:10%; width:80%; height:1px; } } /* ============================================================ POUR QUI EST-CE FAIT ============================================================ */ .qualif{ background:var(--bg-alt); border-block:1px solid var(--line); } .qualif > .wrap > p.intro{ color:var(--ink-soft); max-width:36em; margin-top:.9rem; } .qualif-grid{ margin-top:2.6rem; display:grid; grid-template-columns:1.3fr 1fr; gap:1.6rem; } @media (max-width:820px){ .qualif-grid{ grid-template-columns:1fr; } } .qualif-col{ border-radius:var(--radius); padding:1.8rem 2rem; } .qualif-col h3{ font-family:var(--font-display); font-weight:500; font-size:1.2rem; } .qualif-col ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.9rem; } .qualif-col li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem; line-height:1.5; } .qualif-col li strong{ color:var(--ink); font-weight:600; } .qualif-yes li strong{ color:var(--accent); } .qualif-yes{ background:var(--accent-tint); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); } .qualif-yes h3{ color:var(--accent); } .qualif-yes li::before{ content:"✓"; flex:none; color:var(--accent); font-weight:700; } .qualif-no{ background:var(--surface); border:1px solid var(--line); } .qualif-no h3{ color:var(--ink-soft); } .qualif-no li{ color:var(--ink-soft); } .qualif-no li::before{ content:"✕"; flex:none; color:var(--danger); } /* ============================================================ QU'EST-CE QUE LE COACHING ============================================================ */ .coaching{ border-block:1px solid var(--line); } .coaching > .wrap > p.intro{ color:var(--ink-soft); max-width:42em; margin-top:.9rem; font-size:1.02rem; } .compare-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; } @media (max-width:980px){ .compare-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .compare-grid{ grid-template-columns:1fr; } } .compare-card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; background:var(--surface); } .compare-card.featured{ border-color:var(--accent); background:linear-gradient(160deg, var(--accent-tint), var(--surface) 60%); } .compare-card h3{ font-size:1.05rem; font-style:italic; color:var(--accent); } .compare-card p{ margin-top:.7rem; font-size:.9rem; color:var(--ink-soft); } .coaching-benefits{ margin-top:clamp(3rem, 6vw, 4.5rem); } .coaching-benefits h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; } .coaching-benefits > div > p{ color:var(--ink-soft); margin-top:.8rem; max-width:42em; } .benefit-list{ list-style:none; margin:2.6rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.8rem 1.5rem; } @media (max-width:820px){ .benefit-list{ grid-template-columns:1fr; } } .benefit-list li{ font-size:.98rem; } .benefit-list strong{ color:var(--accent); font-weight:600; } .benefit-list span{ color:var(--ink-soft); } /* mécanisme — pourquoi le coaching fonctionne (point A → point B) */ .mechanism{ margin-top:clamp(3rem, 6vw, 4.5rem); padding-top:clamp(3rem, 6vw, 4.5rem); border-top:1px solid var(--line); } .mechanism .eyebrow{ margin-bottom:0; } .mechanism h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:500; margin-top:.6rem; } .mechanism-intro{ color:var(--ink-soft); max-width:42em; margin-top:1rem; font-size:1.02rem; } .transform-grid{ margin-top:2.6rem; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2rem; } @media (max-width:820px){ .transform-grid{ grid-template-columns:1fr; } } .transform-col{ border-radius:var(--radius); padding:1.6rem 1.5rem; background:var(--surface); border:1px solid var(--line); } .transform-label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); margin-bottom:1rem; } .transform-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; font-size:.94rem; color:var(--ink-soft); } .transform-col li{ padding-left:1rem; position:relative; } .transform-col li::before{ content:"—"; position:absolute; left:0; color:var(--ink-soft); } .transform-col li strong{ color:var(--ink); font-weight:600; } /* Point B — la destination : mêmes codes visuels que .qualif-yes (fond teinté, coche accent) pour signaler que c'est l'issue positive. */ .transform-b{ background:var(--accent-tint); border-color:color-mix(in srgb, var(--accent) 25%, var(--line)); } .transform-b .transform-label{ color:var(--accent); } .transform-b ul{ color:var(--ink); } .transform-b li::before{ content:"✓"; color:var(--accent); font-weight:700; } .mechanism-note{ margin-top:1.4rem; color:var(--ink); font-size:1.02rem; max-width:42em; } .mechanism-note strong{ color:var(--accent); font-weight:600; } /* ============================================================ CITATION — bandeau séparateur entre "Comprendre le coaching" et "Concrètement" ============================================================ */ .quote-break{ background:var(--accent-tint); border-block:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); padding-block:clamp(3rem, 6vw, 4.5rem); } .quote-break blockquote{ max-width:60em; margin:0 auto; text-align:center; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ink-soft); } .quote-break blockquote p{ margin:0 0 1rem; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.4rem, 3vw, 1.9rem); line-height:1.45; letter-spacing:normal; text-transform:none; color:var(--ink); } /* ============================================================ DÉROULEMENT CONCRET — chemin SVG qui se dessine au scroll ============================================================ */ .journey-intro p{ color:var(--ink-soft); max-width:34em; margin-top:.9rem; } .journey-body{ position:relative; margin-top:2.8rem; --rail-w:2.5rem; /* largeur du rail, partagée par le chemin et les points */ } .journey-path{ position:absolute; left:0; top:0; width:var(--rail-w); height:100%; overflow:visible; } .journey-path-bg{ stroke:var(--line); stroke-width:1.5; vector-effect:non-scaling-stroke; } .journey-path-draw{ stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke; /* stroke-dasharray / stroke-dashoffset sont calculés et animés en JS (longueur réelle du tracé obtenue via getTotalLength()) */ } /* points d'étape : des HTML plutôt que des SVG — le viewBox du chemin est étiré verticalement (rail bien plus haut que large), ce qui déformait les cercles SVG en ovales. Un élément HTML avec border-radius reste un cercle parfait quelle que soit la hauteur réelle du bloc. */ .journey-dot{ position:absolute; left:calc(var(--rail-w) / 2); width:.7rem; height:.7rem; transform:translate(-50%, -50%); border-radius:50%; background:var(--surface); border:1.5px solid var(--line); z-index:1; } .journey-list{ display:flex; flex-direction:column; gap:clamp(3rem, 8vw, 6rem); padding-left:4.5rem; } .journey-step{ max-width:36em; } .journey-num{ font-family:var(--font-display); font-style:italic; font-size:.9rem; color:var(--accent); } .journey-step h4{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.3rem, 2.4vw, 1.6rem); margin-top:.3rem; } .journey-step p{ color:var(--ink-soft); margin-top:.7rem; font-size:1rem; } .journey-step strong{ color:var(--ink); font-weight:600; } .journey-note{ color:var(--ink-soft); font-size:.9rem; margin-top:2.8rem; padding-left:4.5rem; } /* deux notes de fin désormais : la 2e suit directement la 1re, donc un espacement resserré plutôt que le grand écart utilisé pour détacher le bloc de notes du reste de la timeline. */ .journey-note + .journey-note{ margin-top:.8rem; } @media (max-width:600px){ .journey-body{ --rail-w:1.6rem; } .journey-list, .journey-note{ padding-left:3rem; } .journey-list{ gap:2.5rem; } } /* ============================================================ TÉMOIGNAGES ============================================================ */ .temoignages{ background:var(--bg-alt); border-block:1px solid var(--line); } .temoin-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } @media (max-width:900px){ .temoin-grid{ grid-template-columns:1fr; } } .temoin-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; } .temoin-card p{ font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink); } .temoin-card cite{ display:block; margin-top:1rem; font-style:normal; font-size:.85rem; color:var(--ink-soft); } /* ============================================================ FAQ ============================================================ */ .faq > .wrap > p{ color:var(--ink-soft); max-width:34em; margin-top:.9rem; } .faq-list{ margin-top:2.6rem; border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.4rem; cursor:pointer; list-style:none; font-family:var(--font-display); font-size:1.1rem; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .plus{ flex:none; width:22px; height:22px; position:relative; } .faq-item summary .plus::before, .faq-item summary .plus::after{ content:""; position:absolute; top:50%; left:50%; background:var(--accent); transform:translate(-50%,-50%); transition:transform .25s ease, opacity .25s ease; } .faq-item summary .plus::before{ width:14px; height:1.5px; } .faq-item summary .plus::after{ width:1.5px; height:14px; } .faq-item[open] summary .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .faq-item p{ color:var(--ink-soft); max-width:38em; padding-bottom:1.5rem; margin:0; } /* ============================================================ TARIFS ============================================================ */ .tarifs-frame{ margin-top:2.4rem; position:relative; } .tarifs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; } @media (max-width:820px){ .tarifs-grid{ grid-template-columns:1fr; } } .tarif-card{ border:1px solid var(--line); border-radius:var(--radius); padding:2.4rem; background:var(--surface); display:flex; flex-direction:column; } .tarif-card.featured{ border-color:var(--accent); position:relative; background:linear-gradient(160deg, var(--accent-tint), var(--surface) 55%); } .tarif-card.featured::before{ content:"Recommandé"; position:absolute; top:-.75rem; left:2.4rem; right:2.4rem; width:fit-content; max-width:calc(100% - 4.8rem); background:var(--accent); color:var(--accent-contrast); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; border-radius:2px; } @media (max-width:400px){ .tarif-card.featured::before{ left:1.4rem; max-width:calc(100% - 2.8rem); } .tarif-card.featured{ padding-top:2.8rem; } } .tarif-name{ font-family:var(--font-body); font-size:1.05rem; font-weight:500; color:var(--ink-soft); } .tarif-price{ font-family:var(--font-display); font-size:clamp(2.2rem, 4vw, 2.8rem); margin-top:.5rem; display:flex; align-items:baseline; flex-wrap:wrap; gap:.6rem; } .tarif-price small{ font-family:var(--font-body); font-size:1rem; color:var(--ink-soft); font-weight:500; } .tarif-note{ color:var(--ink-soft); font-size:.9rem; margin-top:.4rem; } .tarif-list{ list-style:none; padding:0; margin:1.8rem 0 2.2rem; display:flex; flex-direction:column; gap:.7rem; } .tarif-list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.94rem; color:var(--ink); } .tarif-list li::before{ content:"—"; color:var(--accent-soft); flex:none; } .tarif-card .btn{ margin-top:auto; align-self:flex-start; } /* bloc "nouveau client" — texte suivi, sans habillage carte, posé avant le cadre "tarif de lancement" (la gratuité est indiquée dans le texte plutôt que sous forme de prix affiché). */ .tarifs-discovery{ margin-top:2.4rem; max-width:calc(50% - .8rem); margin-inline:auto; padding:2rem 2.2rem; background:var(--accent-tint); border:1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius:var(--radius); } @media (max-width:820px){ .tarifs-discovery{ max-width:none; } } .tarifs-discovery h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; color:var(--accent); } .tarifs-discovery p{ color:var(--ink); margin-top:.6rem; max-width:42em; } .tarifs-discovery .btn{ margin-top:1.4rem; } /* ============================================================ CONTACT ============================================================ */ .contact{ background:var(--bg-alt); border-top:1px solid var(--line); } .contact .wrap{ display:grid; grid-template-columns:1.1fr .9fr; column-gap:clamp(2rem, 6vw, 4rem); row-gap:1.5rem; align-items:center; } @media (max-width:820px){ .contact .wrap{ grid-template-columns:1fr; } } .contact p{ color:var(--ink-soft); margin-top:1rem; max-width:32em; } .contact-actions{ display:flex; flex-direction:column; gap:1rem; padding:2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } .contact-actions .btn{ justify-content:center; } .contact-meta{ display:flex; flex-direction:column; gap:1.1rem; margin-top:.5rem; } .meta-row{ display:flex; align-items:center; gap:.9rem; } .meta-icon{ flex:none; width:1.15rem; height:1.15rem; color:var(--accent-soft); } .contact-hours{ display:flex; flex-direction:column; gap:.2rem; } .contact-hours dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:600; } .contact-hours dd{ margin:0; font-size:.94rem; color:var(--ink); font-weight:500; } .contact-detail{ font-size:.94rem; color:var(--ink); font-weight:500; } .social-links{ display:flex; align-items:center; gap:.7rem; margin-top:.3rem; } .social-links a{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid var(--line); border-radius:50%; color:var(--ink-soft); transition:color .2s ease, border-color .2s ease, transform .15s ease; } .social-links a:hover{ color:var(--accent); border-color:var(--accent-soft); transform:translateY(-1px); } .social-links svg{ width:1.2rem; height:1.2rem; } /* ============================================================ FOOTER ============================================================ */ footer{ padding-block:2.4rem; border-top:1px solid var(--line); } footer .wrap{ display:flex; flex-direction:column; gap:1.4rem; font-size:.85rem; color:var(--ink-soft); } /* menu + réseaux sociaux sur une même ligne en grand écran (le copyright vit en dessous, dans son propre bloc) ; flex-wrap permet à chaque groupe de retomber sur sa propre ligne quand l'espace manque, sans media query dédiée. */ .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } footer nav{ display:flex; flex-wrap:wrap; gap:1.4rem; } footer a{ text-decoration:none; } footer a:hover{ color:var(--ink); } .footer-legal{ font-size:.78rem; } /* ============================================================ PAGES LÉGALES (mentions-legales.html, confidentialite.html) ============================================================ */ .legal-content{ max-width:42em; } .legal-content h1{ font-size:clamp(2rem, 4vw, 2.6rem); } .legal-content .legal-updated{ color:var(--ink-soft); font-size:.85rem; margin-top:.8rem; margin-bottom:2.4rem; } .legal-content h2{ font-size:1.2rem; margin-top:2.4rem; color:var(--accent); } .legal-content p{ color:var(--ink-soft); line-height:1.7; margin-top:.8rem; } .legal-content a{ color:var(--accent); }