:root { --coquelicot: #E43824; --soleil: #F28717; --tournesol: #F7BD12; --bleu: #3F98CA; --feuille: #549C49; --vert-jardin: #1A6B40; /* retour PF 21/07 : un tout petit peu plus lumineux (ex #155B37) */ --creme: #FDFBF5; --ink: #1F2A1B; --ink-soft: rgba(31, 42, 27, 0.78); --line: rgba(31, 42, 27, 0.10); --card: #FFFFFF; /* Harmonisation 22/07 (demande Julien) : tailles de référence = celles du hero */ --eyebrow: clamp(26px, 2.3vw, 34px); /* = kicker « Coach en écriture · Script-Doctor Jardinier » */ --petit-texte: clamp(16px, 1.3vw, 19px); /* = lead « Un scénario se développe… » */ } * { margin: 0; padding: 0; box-sizing: border-box; } textarea { resize: none; } /* règle WE : jamais de resize utilisateur */ /* Règle JBC : aucun défilement animé, les ancres sautent DIRECT. scroll-padding-top compense le header collant, c'est indépendant. */ html { overscroll-behavior: none; scrollbar-gutter: stable; overflow-y: scroll; } /* overflow-x: hidden sur body casse position: sticky (le body devient le conteneur de scroll) : clip clippe sans créer de scroll container */ html { overflow-x: hidden; } body { overflow-x: clip; } /* Verrou de défilement (burger, modales). 🔴 Il DOIT porter sur , jamais sur : un overflow sur body en fait un conteneur de scroll, le header collant perd le viewport comme repère et remonte en haut du document, donc il disparaît de l'écran et on voit la page derrière le menu ouvert. Sur , l'overflow est propagé au viewport : le scroll est bloqué et le header reste en place. scrollbar-gutter: stable évite le décalage. */ html.scroll-lock { overflow: hidden; } body { background: #FFFFFF; color: var(--ink); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; line-height: 1.7; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; } img { max-width: 100%; display: block; } .kicker { font-family: 'Caveat', cursive; font-weight: 600; color: var(--soleil); font-size: var(--eyebrow); line-height: 1.2; display: block; } /* Variante du kicker quand c'est une citation qui tient la place de l'eyebrow (rubrique « La serre aux curiosités », demande de PF du 19/09/2026) : même encre soleil et même main Caveat, mais deux lignes de sens au lieu d'un libellé court, et l'auteur sur sa propre ligne. Elle doit rester APRÈS .kicker : à égalité de spécificité, c'est la dernière écrite qui gagne. */ .kicker-cita { font-size: clamp(22px, 1.9vw, 29px); } .kicker-cita-qui { display: block; font-size: 0.82em; margin-top: 2px; } .section-head { text-align: center; max-width: 760px; margin: 0 auto 52px; } /* Gros titres de rubriques en vert (proposition PF 22/07, appliquée 04/08) ; les sections sur fond vert (témoignages, newsletter) restent en blanc */ .section-head h2 { font-size: clamp(32px, 4.4vw, 48px); margin: 8px 0 16px; color: var(--vert-jardin); } /* Séparateur branche feuillue (banque Ysabel, épaissie) au-dessus des eyebrows, couleurs qui tournent dans la palette du site */ .section-head .kicker::before, .bienvenue-box .kicker::before, .bio-right .kicker::before { content: ""; display: block; width: 148px; height: 33px; margin: 0 auto 14px; background: center / contain no-repeat; background-image: url('sep-branche-coquelicot.png'); } .bienvenue-box .kicker::before { background-image: url('sep-branche-feuille.png'); } .bio-right .kicker::before { margin: 0 0 14px; background-position: left center; background-image: url('sep-branche-bleu.png'); } @media (max-width: 1024px) { .bio-right .kicker::before { margin: 0 auto 14px; background-position: center; } } /* rotation SANS le soleil : le séparateur ne doit jamais être de la même couleur que l'eyebrow (toujours soleil), demande Julien 22/07 */ main > section:nth-of-type(5n+2) .section-head .kicker::before { background-image: url('sep-branche-feuille.png'); } main > section:nth-of-type(5n+3) .section-head .kicker::before { background-image: url('sep-branche-bleu.png'); } main > section:nth-of-type(5n+4) .section-head .kicker::before { background-image: url('sep-branche-tournesol.png'); } main > section:nth-of-type(5n) .section-head .kicker::before { background-image: url('sep-branche-vertjardin.png'); } main > section.temoignages .section-head .kicker::before { background-image: url('sep-branche-blanc.png'); } .section-head p { color: var(--ink-soft); font-size: var(--petit-texte); } /* ===== Nav (pattern JBC : logo gauche / liens centrés / CTA droite) ===== */ .nav-bar { position: sticky; top: 0; z-index: 40; background: #fff; box-shadow: 0 4px 18px rgba(31, 42, 27, 0.08); } .nav { max-width: 1280px; margin: 0 auto; padding: 14px 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .nav-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--vert-jardin); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; } .nav-logo img { width: 46px; height: 46px; border-radius: 50%; } .nav-links { display: flex; gap: 0; align-items: center; list-style: none; flex: 1; justify-content: center; } .nav-links li { display: flex; align-items: center; } .nav-links li.nav-mobile-only { display: none; } .nav-links li + li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--coquelicot); margin: 0 15px; } .nav-links a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px; padding: 8px 2px; white-space: nowrap; } .nav-links a:hover { color: var(--coquelicot); } .nav-cta-btn { display: inline-flex; align-items: center; justify-content: center; /* Fond rouge coquelicot : retour PF 16/08 (il revient au rouge d'avant, l'orange posé le 06/08 ne lui convient plus) */ background: var(--coquelicot); color: #fff; padding: 12px 26px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16.5px; transition: transform 0.15s ease, background 0.15s ease; min-height: 44px; } .nav-cta-btn:hover { transform: translateY(-2px); background: #C92F1D; } .nav-mobile-only { display: none; } .nav-desktop-only { display: inline-flex; align-items: center; } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 12px 8px; } .hamburger span { width: 26px; height: 3px; border-radius: 2px; background: var(--vert-jardin); transition: transform 0.2s ease, opacity 0.2s ease; } /* ===== Hero ===== */ /* Blanc du haut fortement réduit le 22/09 (demande PF) : le kicker « Coach en écriture » arrive juste sous le menu et la prairie fleurie remonte dans l'écran d'accueil. */ .hero { position: relative; padding: clamp(26px, 2.6vw, 44px) 0 0; text-align: center; } .hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: 0 24px; } .hero h1 { font-size: clamp(44px, 6vw, 76px); margin: 14px 0 22px; color: var(--ink); } .hero p.lead { max-width: 640px; margin: 0 auto 32px; color: var(--ink-soft); font-size: var(--petit-texte); } .hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit; text-decoration: none; font-weight: 700; font-size: 17px; transition: transform 0.15s ease; min-height: 48px; } .btn:hover { transform: translateY(-2px); } .btn-green { background: var(--vert-jardin); color: #fff; } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--coquelicot); } .btn-outline:hover { border-color: #C92F1D; color: var(--coquelicot); } .btn-poppy { background: var(--coquelicot); color: #fff; } /* Bouton « Premier contact » : retour au rouge coquelicot (demande PF 16/08) */ .btn-soleil { background: var(--coquelicot); color: #fff; } .btn-tournesol { background: var(--tournesol); color: var(--ink); } /* Illustration prairie v1 (décision PF 22-28/07 : style « joyeux et lumineux » de la toute première proposition, validé pour l'accueil). Layout v1 : texte en flux sur fond blanc, prairie remontée dessous en marge négative (le centre de l'image est blanc, les fleurs bordent les côtés et le bas). */ .hero p.lead { font-size: clamp(18px, 2vw, 21px); } .hero-art { position: relative; z-index: 1; margin-top: clamp(-700px, -38vw, -140px); } .hero-art img { width: 100%; height: auto; display: block; } @media (max-width: 1024px) { .hero-art { margin-top: -24vw; } } @media (max-width: 640px) { .hero-art { margin-top: -12vw; } } /* Trait de barrage en pseudo-élément (retour PF 21/07) : il démarre après le tiret (qui reste visible) et dépasse un peu à droite pour la visibilité */ .barre { position: relative; margin: 0 0.14em 0 0.12em; display: inline-block; } .barre::after { content: ""; position: absolute; left: 0.06em; right: -0.22em; top: 54%; height: 3px; border-radius: 2px; background: var(--coquelicot); } /* ===== Méthode : 3 cartes ===== */ /* Rubrique « Mon approche » de l'accueil. Elle prolongeait le champ crème de la section Bienvenue ; celle-ci ayant été retirée le 23/09 (demande de PF), elle ouvre désormais la page sous le hero et reprend un rythme plein. Son chapeau respire au-dessus du texte de Mon approche, arrivé en dessous le même jour. */ .approche-intro { padding: 96px 0; background: url('texture-creme.webp') repeat left top var(--creme); } .approche-intro .section-head { margin-bottom: 36px; } /* 🛑 .methode / .cards3 / .mcard : bloc « Semer, cultiver, faire éclore » RETIRÉ de l'accueil le 22/09 à la demande de PF, qui a demandé de « garder les illustrations sous le coude ». Habit conservé tel quel pour pouvoir le remettre d'une seule ligne de HTML. */ .methode { padding: 88px 0 30px; background: url('texture-creme.webp') repeat left top var(--creme); } .cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .mcard { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease; } .mcard:hover { transform: translateY(-6px); } .mcard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-top: auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px); mask-image: linear-gradient(to bottom, transparent 0, #000 90px); } .mcard .body { padding: 28px 28px 20px; } .mcard .step-num { font-family: 'Caveat', cursive; font-weight: 700; font-size: 27px; display: block; margin-bottom: 4px; } .mcard h3 { font-size: 23px; margin-bottom: 10px; } .mcard p { font-size: var(--petit-texte); } /* Carte 1 : crème ciel (fond de l'illustration portillon) */ .mcard-1 { background: #FEF7E0; } .mcard-1 .step-num { color: var(--feuille); } .mcard-1 h3 { color: var(--vert-jardin); } .mcard-1 p { color: var(--ink-soft); } /* Carte 2 : ocre plein (fond de l'illustration racines) */ .mcard-2 { background: #FCC735; } .mcard-2 img { object-position: top; } .mcard-2 .step-num { color: #FFFFFF; } .mcard-2 h3 { color: #4A3300; } .mcard-2 p { color: rgba(74, 51, 0, 0.85); } /* Carte 3 : bleu nuit plein (fond de l'illustration floraison) */ .mcard-3 { background: #011B3E; } .mcard-3 img { object-position: 50% 68%; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.08) 0, #000 120px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.08) 0, #000 120px); } .mcard-3 .step-num { color: var(--tournesol); } .mcard-3 h3 { color: #FFFFFF; } .mcard-3 p { color: rgba(255, 255, 255, 0.85); } /* ===== Bienvenue ===== */ /* 🛑 Section RETIRÉE de l'accueil le 23/09 (PF : « Enlever Bienvenue au jardin » et « Enlever UN PETIT TEMPLE DE VERDURE »). Habit conservé tel quel, comme .methode, pour pouvoir remettre le bloc d'une seule ligne de HTML. .portail-quote sert encore. */ .bienvenue { padding: 96px 0; background: url('texture-creme.webp') repeat left top var(--creme); } .bienvenue-box { max-width: 820px; margin: 0 auto; text-align: center; } .bienvenue h2 { font-size: clamp(32px, 4.4vw, 48px); margin: 8px 0 24px; color: var(--vert-jardin); } .bienvenue p { color: var(--ink-soft); font-size: var(--petit-texte); margin-bottom: 18px; } .portail-quote { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(30px, 4vw, 40px); color: var(--vert-jardin); margin-top: 26px; display: inline-block; } /* ===== Prestations ===== */ .prestations { padding: 96px 0; background: #fff; } .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pcard { background: var(--creme); border: 2px solid var(--feuille); border-radius: 18px; padding: 28px 26px; position: relative; transition: transform 0.2s ease; } .pcard:hover { transform: translateY(-4px); } .pcard::before { content: ""; display: block; width: 44px; height: 6px; border-radius: 3px; margin-bottom: 18px; } .pcard:nth-child(1)::before { background: var(--coquelicot); } .pcard:nth-child(2)::before { background: var(--feuille); } .pcard:nth-child(3)::before { background: var(--bleu); } .pcard:nth-child(4)::before { background: var(--tournesol); } .pcard:nth-child(5)::before { background: var(--soleil); } .pcard:nth-child(6)::before { background: var(--vert-jardin); } .pcard:nth-child(7)::before { background: var(--bleu); } .pcard:nth-child(8)::before { background: var(--coquelicot); } .pcard:nth-child(9)::before { background: var(--tournesol); } .pcard h3 { font-size: 21px; margin-bottom: 10px; } .pcard p { color: var(--ink-soft); font-size: var(--petit-texte); } /* ===== Témoignages ===== */ .temoignages { padding: 96px 0; background: var(--vert-jardin); } .temoignages .kicker { color: var(--tournesol); } .temoignages .section-head h2 { color: #fff; } .temoignages .section-head p { color: rgba(255, 255, 255, 0.82); } /* 6 témoignages en 3 colonnes (demande Julien 04/08), le reste sur la page des offres */ .tgrid { columns: 3; column-gap: 22px; margin: 0 auto; } .tcard { background: #fff; border-radius: 18px; padding: 28px 28px 24px; margin-bottom: 22px; break-inside: avoid; } /* Guillemet ouvrante bien visible : Julien la trouvait trop petite (11/08/2026). 🔴 Avec line-height 0.55, l'encre du « “ » démarre 4,4 px AU-DESSUS du haut de son propre bloc : elle ne laissait que 19,6 px de marge au cadre en mobile, pour une encre de 14,5 px de haut, d'où le « trop bord cadre » de Julien (11/08/2026). Le margin-top la redescend de 12 px sans toucher à sa taille ; le margin-bottom compense pour que la carte ne grandisse presque pas. */ .tcard .quote-mark { font-family: 'Caveat', cursive; font-size: 64px; line-height: 0.55; color: var(--coquelicot); display: block; margin-top: 12px; margin-bottom: 14px; } .tcard p { color: var(--ink); font-size: var(--petit-texte); margin-bottom: 16px; } .tcard .who { color: var(--ink-soft); font-size: 15px; font-weight: 600; } .tcard .who-ctx { font-weight: 500; font-size: 14.5px; color: var(--ink-soft); } .tbadge { background: var(--tournesol); color: var(--ink); border-radius: 18px; padding: 30px 28px; margin-bottom: 22px; break-inside: avoid; text-align: center; } .tbadge p { font-size: var(--petit-texte); font-weight: 600; margin-top: 8px; } .tbadge .note { font-weight: 500; font-size: 14.5px; color: rgba(31, 42, 27, 0.7); margin-top: 6px; } /* Repère vers les témoignages, sous les boutons du hero. Le chiffre-preuve « 62 » a été retiré à la demande de PF (WhatsApp 09/09/2026) : la carte tournesol ne porte plus qu'une phrase, centrée sur une seule ligne, et reste cliquable vers les témoignages de la page des prestations. */ .tbadge-hero { display: inline-block; margin: 28px auto 0; padding: 16px 30px; text-align: center; text-decoration: none; transition: transform 0.15s ease; } .tbadge-hero .lbl { display: block; font-weight: 700; font-size: 19px; line-height: 1.3; } .tbadge-hero:hover { transform: translateY(-2px); } /* ===== Jardiner ensemble : 5 étapes ===== */ .etapes { padding: 96px 0; background: url('texture-creme.webp') repeat left top var(--creme); } .timeline { max-width: 780px; margin: 0 auto; } .etape { display: flex; gap: 22px; align-items: flex-start; padding: 22px 0; border-bottom: 2px dashed var(--feuille); } .etape:last-child { border-bottom: none; } .etape .n { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; color: #fff; } .etape:nth-child(1) .n { background: var(--coquelicot); } .etape:nth-child(2) .n { background: var(--soleil); } .etape:nth-child(3) .n { background: var(--tournesol); color: var(--ink); } .etape:nth-child(4) .n { background: var(--feuille); } .etape:nth-child(5) .n { background: var(--vert-jardin); } .etape h3 { font-size: 21px; margin-bottom: 6px; } .etape p { color: var(--ink-soft); font-size: var(--petit-texte); } /* ===== Qui je suis ===== */ .quijesuis { padding: 96px 0; background: #fff; } .bio-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; max-width: 1040px; margin: 0 auto; } .bio-left { text-align: center; } .bio-left img { width: min(100%, 320px); margin: 0 auto; border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 18px 44px rgba(31, 42, 27, 0.14); } .bio-left .sign { font-family: 'Caveat', cursive; font-weight: 600; font-size: 30px; color: var(--vert-jardin); margin-top: 20px; display: block; } .bio-right h2 { font-size: clamp(30px, 4vw, 42px); margin: 8px 0 20px; color: var(--vert-jardin); } .bio-right p { color: var(--ink-soft); font-size: var(--petit-texte); margin-bottom: 16px; } .bio-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .chip { border: none; border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 15px; } .bio-chips .chip:nth-child(1) { background: var(--bleu); color: #FFFFFF; } .bio-chips .chip:nth-child(2) { background: var(--tournesol); color: #4A3300; } .bio-chips .chip:nth-child(3) { background: var(--feuille); color: #FFFFFF; } .bio-chips .chip:nth-child(4) { background: var(--coquelicot); color: #FFFFFF; } /* ===== CTA final ===== */ /* Fond illustré (22/07) : les massifs du jardin affleurent en bas du bloc, voilés de crème pour garder le formulaire parfaitement lisible */ .cta-final { padding: 96px 0 0; text-align: center; background: #fff; position: relative; } .cta-head-card { background: #fff; border-radius: 26px; padding: 40px 34px 38px; max-width: 760px; margin: 0 auto; } .cta-final .portail-quote { font-size: clamp(36px, 5vw, 54px); margin: 0 0 18px; } .cta-final p { color: var(--ink-soft); font-size: var(--petit-texte); max-width: 560px; margin: 0 auto 32px; } /* Montage façon hero de la landing : le texte flotte dans le ciel blanc de l'illustration, les fleurs l'entourent (image derrière, pas de crop) */ .cta-final .wrap { position: relative; z-index: 2; } .cta-art { position: relative; z-index: 1; margin-top: clamp(-490px, -27vw, -120px); } .cta-art img { width: 100%; height: auto; display: block; } .cta-coords { margin-top: 26px; color: var(--ink-soft); font-size: 17px; font-weight: 600; } .cta-coords a { color: var(--vert-jardin); text-decoration: none; } .cta-coords a:hover { text-decoration: underline; } /* ===== Footer (rebossé 22/07 : logo + colonnes, pattern Ysabel/Damien) ===== */ .footer { background: var(--vert-jardin); padding: 64px 0 0; color: rgba(255, 255, 255, 0.85); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 44px; padding-bottom: 48px; text-align: left; } .footer-marque { max-width: 360px; } .footer-logo { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; } .footer-logo img { width: 62px; height: 62px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; } .footer-pitch { font-size: var(--petit-texte); color: rgba(255, 255, 255, 0.82); margin-top: 16px; } .footer-quote { font-family: 'Caveat', cursive; font-weight: 600; font-size: 27px; color: var(--tournesol); display: block; margin-top: 14px; } .footer-titre { font-family: 'Caveat', cursive; font-weight: 600; font-size: 27px; color: var(--tournesol); margin-bottom: 14px; display: flex; align-items: center; gap: 11px; } .footer-titre img { width: 26px; height: 26px; object-fit: contain; } .footer-titre img.ico-lg { width: 36px; height: 36px; } .footer-liens { list-style: none; margin: 0; padding: 0; } .footer-liens li { margin-bottom: 9px; } .footer-liens a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: var(--petit-texte); transition: color 0.15s ease; } .footer-liens a:hover { text-decoration: underline; text-decoration-color: var(--tournesol); text-decoration-thickness: 2px; text-underline-offset: 5px; } .footer-infos { list-style: none; margin: 0; padding: 0; font-size: var(--petit-texte); } .footer-infos li { margin-bottom: 9px; } .footer-infos a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.15s ease; } .footer-infos a:hover { text-decoration: underline; text-decoration-color: var(--tournesol); text-decoration-thickness: 2px; text-underline-offset: 5px; } .footer-sep { width: 100%; height: 3px; border-radius: 3px; background: var(--soleil); margin: 0 auto 26px; } .footer-bottom { padding: 0 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14.5px; color: rgba(255, 255, 255, 0.6); } .footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; text-decoration-color: var(--tournesol); text-decoration-thickness: 2px; text-underline-offset: 5px; } .footer .maquette-note { font-size: 14.5px; padding: 0 0 18px; color: rgba(255, 255, 255, 0.45); text-align: center; } @media (max-width: 900px) { .footer { padding-top: 52px; } .footer-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; } .footer-titre { justify-content: center; } .footer-marque { max-width: none; margin: 0 auto; } .footer-bottom { justify-content: center; text-align: center; } } /* ===== Cabane à outils ===== */ .cabane { padding: 96px 0; background: url('texture-creme.webp') repeat left top var(--creme); } .cabane .note-page { text-align: center; margin-top: 34px; font-family: 'Caveat', cursive; font-weight: 600; font-size: 26px; color: var(--soleil); } /* ===== Blog ===== */ .blog { padding: 96px 0; background: #fff; } .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Cartes blog : image en haut, texte dessous (ref Isabelle, 22/07) */ .bcard { background: var(--creme); border: 2px solid var(--feuille); border-radius: 18px; padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s ease; /* Fix WebKit : sans contexte isolé, l'image scalée au hover déborde du cadre arrondi malgré overflow: hidden */ isolation: isolate; transform: translateZ(0); } .bcard-imgwrap { overflow: hidden; aspect-ratio: 16/10; } .bcard-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 0.35s ease; } /* Photo en hauteur : cadrée en haut, sinon la vignette 16/10 coupe le visage */ .bcard-img--portrait { object-position: 50% 0; } .bcard:hover .bcard-img { transform: scale(1.06); } .bcard-body { padding: 22px 26px 22px; display: flex; flex-direction: column; flex: 1; } .bcard:hover { transform: translateY(-4px); } .bcard .bdate { font-family: 'Caveat', cursive; font-weight: 600; font-size: 22px; color: var(--feuille); margin-bottom: 6px; } .bcard h3 { font-size: 20px; margin-bottom: 10px; } .bcard p { color: var(--ink-soft); font-size: var(--petit-texte); flex: 1; } .bcard .blire { margin-top: 16px; font-weight: 700; font-size: 15.5px; color: var(--vert-jardin); text-decoration: none; } .bcard .blire:hover { color: var(--coquelicot); } .blog-note { text-align: center; margin-top: 26px; font-size: 15px; color: var(--ink-soft); } /* ===== Newsletter : bandeau pleine largeur style Ysabel (22/07) ===== */ .newsletter { padding: 64px 0; background: var(--vert-jardin); } .nl-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; } /* Icône centrée verticalement sur tout le bloc texte, plus grosse (demande Julien 04/08) */ .nl-left { display: flex; align-items: center; gap: 26px; } .nl-text .nl-kicker { margin-bottom: 2px; } .nl-text h2 { margin-bottom: 14px; } .nl-icone { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; background: var(--soleil); display: inline-flex; align-items: center; justify-content: center; } .nl-icone img { width: 52px; height: 52px; object-fit: contain; transform: translateY(-3px); } .nl-kicker { color: var(--tournesol); } .newsletter h2 { color: #fff; font-size: clamp(24px, 2.6vw, 34px); margin-top: 2px; } .nl-desc { color: rgba(255, 255, 255, 0.85); font-size: var(--petit-texte); } .nl-form { display: flex; gap: 12px; flex-wrap: wrap; } .nl-form input { flex: 1 1 220px; padding: 13px 20px; border-radius: 999px; border: 2px solid transparent; background: #fff; font-family: inherit; font-size: 16px; color: var(--ink); outline: none; } .nl-form input:focus { border-color: var(--tournesol); } .nl-btn { background: var(--soleil); color: #fff; } .nl-note { font-style: italic; font-size: 14.5px; color: rgba(255, 255, 255, 0.7); margin-top: 14px; margin-bottom: 0 !important; text-align: center; } @media (max-width: 900px) { .nl-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; } .nl-left { flex-direction: column; gap: 14px; } .nl-form { justify-content: center; } } /* ===== Formulaire premier contact ===== */ .contact-form { max-width: 600px; margin: 34px auto 0; text-align: left; display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 32px 30px; } .contact-form label { font-weight: 700; font-size: 15.5px; display: block; margin-bottom: 6px; } .contact-form input, .contact-form textarea { width: 100%; padding: 13px 18px; border-radius: 14px; border: 2px solid rgba(31, 42, 27, 0.16); font-family: inherit; font-size: 16px; color: var(--ink); background: #fff; outline: none; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--feuille); } .contact-form textarea { min-height: 120px; resize: none; } /* .contact-form est en display:grid : sans ça, l'attribut hidden ne masque rien (même piège que .modal-overlay) quand on bascule sur l'écran de confirmation */ .contact-form[hidden] { display: none; } .contact-form .btn { justify-self: center; margin-top: 6px; border: none; cursor: pointer; font-family: inherit; } /* ===== Reveals (sûrs : visibles par défaut, animés seulement si JS) ===== */ html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } html.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.22s ease; } /* le :hover doit gagner sur le transform: none du reveal */ html.js .mcard.reveal.in:hover { transform: translateY(-6px); } html.js .pcard.reveal.in:hover { transform: translateY(-4px); } /* Entrée des heros (landing + pages) : fadeUp en cascade au chargement */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } html.js .hero-inner .kicker { animation: fadeUp 0.6s ease 0.05s both; } html.js .hero-inner h1 { animation: fadeUp 0.6s ease 0.18s both; } html.js .hero-inner p.lead { animation: fadeUp 0.6s ease 0.3s both; } html.js .hero-btns { animation: fadeUp 0.6s ease 0.42s both; } html.js .hero-inner .tbadge-hero { animation: fadeUp 0.6s ease 0.54s both; } html.js .page-hero .kicker { animation: fadeUp 0.6s ease 0.05s both; } html.js .page-hero h1 { animation: fadeUp 0.6s ease 0.16s both; } html.js .page-hero p.lead { animation: fadeUp 0.6s ease 0.28s both; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .hero-inner .kicker, html.js .hero-inner h1, html.js .hero-inner p.lead, html.js .hero-btns, html.js .hero-inner .tbadge-hero, html.js .page-hero .kicker, html.js .page-hero h1, html.js .page-hero p.lead { animation: none !important; } } /* ===== Responsive ===== */ /* Le menu bascule en burger dès 1140 px, et non 1024 : mesuré le 22/09, entre 1025 et ~1130 px (iPad en paysage) la barre complète ne tient pas, le bouton « Premier contact » sortait de l'écran de 80 px. Les autres règles de mise en page restent au palier 1024. */ @media (max-width: 1140px) { /* Le panneau est ACCROCHÉ au header (absolute dans .nav-bar, qui est sticky donc positionné) et non plus en position: fixed à 83px du haut : plus aucune hauteur de header codée en dur, le panneau reste toujours collé sous la barre, quelle que soit sa hauteur et l'état du défilement. */ .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; gap: 4px; padding: 18px 24px 26px; display: none; flex: initial !important; justify-content: initial !important; box-shadow: 0 24px 40px rgba(31, 42, 27, 0.12); max-height: 82dvh; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav-links::-webkit-scrollbar { display: none; width: 0; } .nav-links.open { display: flex; } .nav-links li { display: block; width: 100%; } .nav-links li + li::before { display: none; } .nav-links a { font-size: 19px; padding: 12px 4px; display: block; width: 100%; text-align: center; } /* Le CTA garde la largeur de son texte : sans ça il héritait du width: 100% des liens du menu et l'aplat orange traversait l'écran. */ .nav-links li.nav-mobile-only { text-align: center; } .nav-links a.nav-cta-btn { display: inline-flex; width: auto; padding: 12px 30px; } .nav-mobile-only { display: list-item !important; margin-top: 10px; } .nav-desktop-only { display: none !important; } .hamburger { display: flex; } } @media (max-width: 1024px) { .cards3 { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .pgrid { grid-template-columns: 1fr 1fr; } .tgrid { columns: 2; } .bgrid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .bio-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; } .bio-chips { justify-content: center; } } @media (max-width: 640px) { body { font-size: 17px; } .pgrid { grid-template-columns: 1fr; } .tgrid { columns: 1; } /* Marges intérieures resserrées : sur un écran de 320px, 28px de chaque côté ne laissaient que 216px de texte et l'attribution débordait de la carte. */ .tcard { padding: 24px 20px 20px; } .hero { padding-top: 20px; } /* Repère témoignages : resserré pour tenir sur une seule ligne dans 320px de large */ .tbadge-hero { margin-top: 22px; padding: 13px 20px; } .tbadge-hero .lbl { font-size: 17px; } .methode, .bienvenue, .approche-intro, .prestations, .temoignages, .etapes, .quijesuis, .cabane, .blog, .newsletter { padding: 72px 0; } } /* ===================================================== */ /* ===== Composants pages intérieures (site-pages) ===== */ /* ===================================================== */ /* Lien actif dans la nav */ .nav-links a.active { color: var(--coquelicot); } /* Hero de page intérieure (fond illustré léger : même style que la landing, illustration voilée de crème pour rester discrète) */ .page-hero { padding: 68px 0 56px; text-align: center; background: url('texture-creme.webp') repeat left top var(--creme); border-bottom: 1px solid var(--line); } /* Bandeaux de titre en aplat, TOUS sur le vert foncé du jardin (demande PF 08/08 : unifier l'ambiance sur 3-4 couleurs, blanc + vert foncé + écritures blanches + touches orangées, les fleurs apportant déjà la couleur. Remplace la rotation « une couleur par page » du 04/08.) */ .page-hero.ph-illu { padding: 40px 0; min-height: clamp(300px, 30vw, 380px); display: flex; align-items: center; justify-content: center; background: var(--ph-bg, var(--vert-jardin)); border-bottom: 0; } .page-hero.ph-illu .wrap { background: transparent; border-radius: 0; padding: 0 24px; max-width: 880px; } .page-hero.ph-illu .kicker { color: var(--tournesol); } .page-hero.ph-illu .kicker.kicker-soleil { color: var(--soleil); } /* Qui je suis : PF le veut en orange (21/09), tranché par Julien le 22/09 pour ce seul bandeau */ .page-hero.ph-illu h1, .page-hero.ph-illu h1.titre-vert { color: #fff; } .page-hero.ph-illu p.lead { color: rgba(255, 255, 255, 0.9); } /* Les anciennes classes de couleur par page restent dans les pages mais pointent toutes sur le même vert : une seule ambiance de bandeau. */ .ph-pergola, .ph-jardin, .ph-soleil, .ph-cabane, .ph-brouette, .ph-banc { --ph-bg: var(--vert-jardin); } .page-hero h1 { font-size: clamp(38px, 5vw, 60px); margin: 12px 0 20px; } .page-hero p.lead { max-width: 680px; margin: 0 auto; color: var(--ink-soft); font-size: var(--petit-texte); } /* Retour PF 21/07 : titres et emphases en vert Script-Jardinier */ .titre-vert { color: var(--vert-jardin); } .page-hero h1.titre-vert { font-size: clamp(34px, 4.4vw, 52px); } /* Le titre livré par PF (« Les 4 saisons du Script-Jardinier ») est plus long que les autres H1 de page : sans réglage propre, sa deuxième ligne dépassait la largeur du téléphone. Doit rester APRÈS .page-hero h1. */ .page-hero h1.h1-saisons { font-size: clamp(30px, 4.6vw, 54px); } .prose strong.vert { color: var(--vert-jardin); } /* Longs textes */ .prose { max-width: 760px; margin: 0 auto; } /* Photo d'ouverture d'article (photos fournies par PF le 16/08/2026) */ .art-photo { max-width: 760px; margin: 0 auto 36px; } .art-photo img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 10px 28px rgba(31, 42, 27, 0.16); } .art-photo--portrait { max-width: 400px; } .art-photo figcaption { margin-top: 12px; text-align: center; font-size: 14.5px; font-style: italic; color: var(--ink-soft); } @media (max-width: 560px) { .art-photo { margin-bottom: 28px; } .art-photo--portrait { max-width: 280px; } } .prose h3 { font-size: 20px; color: var(--vert-jardin); margin: 28px 0 8px; } .prose h3:first-child { margin-top: 0; } .prose p { color: var(--ink-soft); font-size: var(--petit-texte); margin-bottom: 20px; } .prose p strong { color: var(--ink); } .prose .accroche { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(25px, 3.6vw, 36px); color: var(--vert-jardin); line-height: 1.25; margin: 8px 0 26px; } .section-blanc { padding: 88px 0; background: #fff; } .section-creme { padding: 88px 0; background: url('texture-creme.webp') repeat left top var(--creme); } /* Comparaison Script-Doctor vs Script-Jardinier */ .vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; max-width: 980px; margin: 0 auto; } .vs-col { border-radius: 22px; padding: 34px 32px 28px; } .vs-doctor { background: #F2EDE4; } .vs-doctor h3 { color: var(--coquelicot); } .vs-doctor p { color: rgba(31, 42, 27, 0.62); font-size: var(--petit-texte); margin-bottom: 16px; } .vs-jardinier { background: var(--vert-jardin); } .vs-jardinier h3 { color: var(--tournesol); } .vs-jardinier p { color: rgba(255, 255, 255, 0.9); font-size: var(--petit-texte); margin-bottom: 16px; } .vs-jardinier a { color: var(--tournesol); text-decoration: underline; text-underline-offset: 3px; } .prose a, .presta-points a { color: var(--vert-jardin); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .vs-col h3 { font-size: 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .vs-col h3 .vs-titre { flex: 1 1 0; min-width: 0; } .vs-col .vs-icone { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 23px; } .vs-doctor .vs-icone { background: var(--coquelicot); } .vs-jardinier .vs-icone { background: var(--tournesol); } .vs-credo { text-align: center; margin: 40px auto 0; max-width: 700px; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(28px, 3.8vw, 38px); color: var(--vert-jardin); line-height: 1.3; } .vs-nb { text-align: center; margin: 26px auto 0; max-width: 640px; font-size: var(--petit-texte); color: var(--ink-soft); } /* Prestations détaillées */ .presta { padding: 74px 0; } .presta:nth-child(odd) { background: url('texture-creme.webp') repeat left top var(--creme); } .presta:nth-child(even) { background: #fff; } .presta-head { max-width: 760px; margin: 0 auto 30px; } .presta-head .bande { width: 52px; height: 7px; border-radius: 4px; display: block; margin-bottom: 20px; } .presta-head h2 { font-size: clamp(28px, 3.8vw, 40px); margin: 6px 0 0; } .presta .prose { margin: 0 auto; } .presta-points { max-width: 760px; margin: 10px auto 0; padding: 0; list-style: none; } .presta-points li { position: relative; padding: 10px 0 10px 34px; color: var(--ink-soft); font-size: var(--petit-texte); border-bottom: 2px dashed var(--feuille); } .presta-points li:last-child { border-bottom: none; } .presta-points li::before { content: "✿"; position: absolute; left: 4px; top: 9px; color: var(--coquelicot); font-size: 17px; } .presta-cta { max-width: 760px; margin: 30px auto 0; text-align: center; } .presta-note { max-width: 760px; margin: 24px auto 0; background: #FFF6DC; border-radius: 16px; padding: 20px 24px; font-size: var(--petit-texte); color: var(--ink-soft); } /* Tarifs */ .tarifs-bloc { max-width: 820px; margin: 0 auto; } /* Tarifs associés à chaque prestation (demande PF 22/07 : tarifs plus « cachés ») */ .tarif-groupe.presta-tarifs { max-width: 760px; margin: 30px auto 0; background: #fff; border: 2px dashed var(--tournesol); } .tarif-groupe { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 30px 12px; margin-bottom: 20px; } .tarif-groupe h3 { font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .tarif-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 12px 0; border-bottom: 2px dashed var(--feuille); } .tarif-ligne:last-child { border-bottom: none; } .tarif-ligne .desc { color: var(--ink-soft); font-size: var(--petit-texte); } .tarif-ligne .prix { font-weight: 800; font-size: 19px; color: var(--vert-jardin); white-space: nowrap; } .tarifs-note { text-align: center; color: var(--ink-soft); font-size: var(--petit-texte); max-width: 640px; margin: 26px auto 0; } /* Terres de prédilection */ .terres-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; } .terre { background: #fff; border: 2px dashed var(--tournesol); border-radius: 16px; padding: 22px 22px 18px; font-size: var(--petit-texte); color: var(--ink-soft); } .terre .t-emoji { font-size: 26px; display: block; margin-bottom: 8px; } .terre strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 17.5px; } /* ===== « Qui je suis » : les 4 saisons + les 7 valeurs (matière de PF, 21/09/2026) ===== Remplace la grille de pastilles 2-3-2 et le parcours en 6 étapes : PF a livré sa rubrique complète, l'ancienne rédaction JBC ne sert plus. */ /* Le portrait ouvre la rubrique, seul et centré au-dessus des 5 saisons. Il réutilise le médaillon et la signature du bloc bio (.bio-left), qui gardent leur unique définition ; ici on ne fixe que sa largeur et sa marge. La photo de PF (22/09/2026) est déjà recadrée CARRÉE et centrée sur son visage : object-fit et object-position de .bio-left img n'ont rien à rattraper, et le médaillon rond reste l'habit commun aux deux blocs bio. */ .qui-portrait { max-width: 340px; margin: 0 auto 56px; } /* Une saison = une étiquette à la main, un intertitre, le récit, puis le commentaire personnel en italique (demande de PF du 21/09 à 16h41). */ .saisons { max-width: 760px; margin: 0 auto; } .saison { padding: 34px 0; border-bottom: 2px dashed var(--feuille); } .saison:first-child { padding-top: 0; } .saison:last-child { border-bottom: none; padding-bottom: 0; } .saison-etiquette { /* Pastille pleine à la couleur de la saison (Julien, 22/09), sur le modèle des .chip de la bio : fond plein, texte blanc, bords ronds. */ display: inline-block; padding: 3px 18px 5px; border-radius: 999px; background: var(--saison, var(--soleil)); color: #FFFFFF; font-family: 'Caveat', cursive; font-weight: 600; font-size: 27px; line-height: 1.2; } .saison h2 { font-size: clamp(24px, 3vw, 34px); color: var(--vert-jardin); margin: 10px 0 16px; } .saison p { color: var(--ink-soft); font-size: var(--petit-texte); margin-bottom: 16px; } .saison p:last-child { margin-bottom: 0; } /* Le commentaire perso (en italique) ressort sur un fond BLANC pur (Julien, 22/09 : « juste blanc », pas de teinte), la section étant sur le crème texturé. */ .saison p.saison-ressenti { padding: 18px 22px; border-radius: 18px; background: #FFFFFF; } /* La couleur de l'étiquette suit la saison, dans la palette du site. */ .saison:nth-child(1) { --saison: var(--feuille); } .saison:nth-child(2) { --saison: var(--soleil); } .saison:nth-child(3) { --saison: var(--coquelicot); } /* Automne · Hiver (PF, 22/09) */ .saison:nth-child(4) { --saison: var(--feuille); } /* Printemps du Jardin : le vert du printemps 1 */ /* Les 7 valeurs commentées. La carte est celle des prestations (.pcard) : même fond crème, même bord feuille, même barre de couleur qui tourne dans la palette, même survol sans ombre. Ici, seulement la mise en rangées : un fil flexible qui CENTRE la dernière rangée (la 7e carte ne reste donc jamais seule à gauche), et le texte centré verticalement dans la carte. */ .valeurs-cartes { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; } .valeurs-cartes .pcard { width: calc((100% - 44px) / 3); display: flex; flex-direction: column; justify-content: center; } /* Les deux paliers du composant, juste après sa définition : posés plus haut dans la feuille ils seraient morts (même poids, c'est la dernière règle écrite qui gagne, piège mesuré le 19/09). Mêmes paliers que .pgrid. */ @media (max-width: 1024px) { .valeurs-cartes .pcard { width: calc((100% - 22px) / 2); } } @media (max-width: 640px) { .valeurs-cartes .pcard { width: 100%; } } /* Témoignage saupoudré (une seule carte, au fil des pages) */ .temoin-solo { padding: 74px 0; background: url('texture-creme.webp') repeat left top var(--creme); } .temoin-solo .tcard { max-width: 720px; margin: 0 auto; } /* Encadré « en construction » (contenu à venir de PF) */ .a-venir { max-width: 760px; margin: 34px auto 0; text-align: center; border: 2px dashed rgba(31, 42, 27, 0.2); border-radius: 18px; padding: 30px 28px; background: rgba(255, 255, 255, 0.6); } .a-venir .kicker { color: var(--feuille); } .a-venir p { color: var(--ink-soft); font-size: var(--petit-texte); margin-top: 8px; } /* Responsive pages intérieures */ @media (max-width: 900px) { .vs-grid { grid-template-columns: 1fr; max-width: 560px; } .terres-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .vs-col { padding: 26px 20px 22px; } .page-hero { padding: 52px 0 44px; } .page-hero.ph-illu .wrap { padding: 28px 20px 26px; } .cta-head-card { padding: 30px 18px 28px; } .modal-card { padding: 34px 22px 24px; } .terres-grid { grid-template-columns: 1fr; max-width: 480px; } .tarif-ligne { flex-direction: column; gap: 2px; } .section-blanc, .section-creme, .presta, .temoin-solo { padding: 64px 0; } } /* ===== Modal premier contact (header + boutons « Premier contact ») ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(31, 42, 27, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-overlay[hidden] { display: none; } .modal-card { position: relative; background: #fff; border-radius: 26px; padding: 40px 34px 30px; width: min(620px, 100%); max-height: 90dvh; overflow-y: auto; text-align: center; } .modal-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--soleil); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .modal-icone img { width: 34px; height: 34px; object-fit: contain; } .modal-card h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 4px 0 0; } /* Cartes prestations cliquables + fiche détaillée en modale (demande Julien 04/08) */ /* Texte centré verticalement dans la carte, trait de couleur calé en haut */ .pcard-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } .pcard-link h3 { margin-top: auto; } .pcard-link .pcard-more { display: inline-block; margin-top: 14px; margin-bottom: auto; font-weight: 700; font-size: 15.5px; color: var(--coquelicot); } /* Fiche modale : compacte (tenir dans le cadre sans scroller autant que possible), croix qui ne défile pas, barre de scroll invisible */ .modal-presta { width: min(860px, 100%); text-align: left; padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* La croix vit HORS de la zone de scroll : elle ne bouge pas et ne masque rien */ .modal-presta .modal-scroll { overflow-y: auto; padding: 26px 36px 26px; scrollbar-width: none; } .modal-presta .modal-scroll::-webkit-scrollbar { display: none; } .modal-presta .modal-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; } .modal-presta .presta-head { margin: 0 auto 14px; } .modal-presta .presta-head .bande { margin-bottom: 12px; height: 6px; } .modal-presta .presta-head .kicker { font-size: var(--eyebrow); } .modal-presta .presta-head h2 { font-size: clamp(24px, 3vw, 32px); } .modal-presta .prose p { font-size: 16px; margin-bottom: 12px; } .modal-presta .presta-points { margin-top: 4px; } .modal-presta .presta-points li { padding: 7px 0 7px 30px; font-size: 16px; } .modal-presta .prose[style] { margin-top: 12px !important; } .modal-presta .tarif-groupe { padding: 16px 22px 6px; } .modal-presta .presta-tarifs { margin-top: 18px; } .modal-presta .tarif-groupe h3 { font-size: 18px; margin-bottom: 8px; } .modal-presta .tarif-ligne { padding: 8px 0; } .modal-presta .tarif-ligne .desc { font-size: 15.5px; } .modal-presta .tarif-ligne .prix { font-size: 17px; } .modal-presta .presta-cta { margin-top: 34px; margin-bottom: 6px; text-align: center; } .modal-presta .presta-cta .btn { padding: 12px 26px; min-height: 44px; } @media (max-width: 640px) { .modal-presta { padding: 22px 18px 22px; } .modal-presta .modal-close { margin-right: -6px; } } .modal-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; cursor: pointer; font-size: 36px; line-height: 1; color: var(--ink-soft); padding: 6px; } .modal-close:hover { color: var(--coquelicot); } .modal-card .contact-form { background: transparent; border: 0; padding: 0; margin-top: 20px; max-width: none; } .modal-card .cta-coords { margin-top: 18px; } /* ===== Modale « Premier contact » v2 (feuille PF du 06/08) ===== Agenda en ligne abandonné : la modale devient le seul point d'entrée. Pattern modale JBC : scroll intérieur invisible, croix hors zone de défilement. */ .modal-contact { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .modal-contact .modal-scroll { overflow-y: auto; padding: 40px 34px 30px; scrollbar-width: none; -ms-overflow-style: none; } .modal-contact .modal-scroll::-webkit-scrollbar { display: none; width: 0; } .modal-contact .modal-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; } /* « Parlez-moi de votre histoire » dans le vert habituel (demande PF) */ .modal-contact h3 { color: var(--vert-jardin); } /* Pièce jointe : « Votre texte en P.J (pour un premier retour) » */ .champ-fichier { display: grid; gap: 8px; } .champ-fichier input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .champ-fichier label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; cursor: pointer; margin-bottom: 0; padding: 18px 20px; /* Orange plutôt que vert : demande Julien 06/08 */ border-radius: 14px; border: 2px dashed var(--soleil); background: #fff; transition: border-color 0.15s ease, background 0.15s ease; } .champ-fichier label:hover, .champ-fichier input[type="file"]:focus-visible + label { border-color: #D97406; background: rgba(242, 135, 23, 0.07); } .champ-fichier .cf-titre { font-weight: 700; font-size: 15.5px; color: var(--soleil); } .champ-fichier .cf-aide { font-weight: 600; font-size: 14.5px; color: var(--ink-soft); } .champ-fichier .cf-nom { text-align: center; font-weight: 700; font-size: 14.5px; color: var(--ink-soft); word-break: break-all; } .champ-fichier .cf-nom[hidden] { display: none; } /* Écran de validation après envoi : « Bienvenue au Jardin ! » */ .contact-merci { margin-top: 30px; } .contact-merci[hidden] { display: none; } .contact-merci h3 { font-size: clamp(22px, 2.6vw, 32px); } .contact-merci p { margin-top: 10px; color: var(--ink-soft); font-size: var(--petit-texte); } @media (max-width: 640px) { .modal-contact .modal-scroll { padding: 34px 22px 24px; } } /* ═══════════════════════════════════════════════════════════════════ PAGES D'ARTICLE DU BLOG (08/08/2026) Les 6 articles LinkedIn de PF, dans l'habillage du jardin. ═══════════════════════════════════════════════════════════════════ */ /* Les titres d'articles sont longs par nature : taille dédiée, plus petite que les titres de rubrique, pour tenir en lignes de sens jusqu'à 320 px de large. */ .page-hero h1.titre-article { font-size: clamp(27px, 3.3vw, 42px); line-height: 1.16; max-width: 820px; margin-left: auto; margin-right: auto; } .page-hero .art-date { margin-top: 18px; font-family: 'Caveat', cursive; font-weight: 600; font-size: 23px; color: var(--tournesol); } .page-hero.ph-brouette .art-date { color: var(--coquelicot); } /* Illustration d'ouverture */ .art-illu { max-width: 900px; margin: 0 auto 46px; } .art-illu img { width: 100%; height: auto; display: block; border-radius: 22px; border: 2px solid var(--feuille); } /* Corps de l'article : on laisse le navigateur couper les paragraphes (largeur maîtrisée par .prose), les insécables tiennent les groupes. */ .art-corps p { line-height: 1.75; } .art-corps h3 { margin: 40px 0 14px; font-size: clamp(20px, 1.8vw, 24px); } .art-corps > .accroche { text-align: center; } /* Citations */ .art-cite { margin: 30px 0; padding: 26px 30px; background: url('texture-creme.webp') repeat left top var(--creme); border-left: 4px solid var(--feuille); border-radius: 0 18px 18px 0; } .art-cite p { margin: 0; font-size: var(--petit-texte); color: var(--ink); font-style: italic; line-height: 1.7; } /* Une citation en plusieurs paragraphes garde de l'air entre eux. */ .art-cite p + p { margin-top: 16px; } .art-cite .art-cite-auteur { display: block; margin-top: 12px; font-family: 'Caveat', cursive; font-style: normal; font-weight: 600; font-size: 22px; color: var(--vert-jardin); } /* Les 5 conseils numérotés */ .art-conseil { display: flex; gap: 20px; align-items: flex-start; margin: 34px 0; } .art-conseil-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--vert-jardin); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 21px; line-height: 1; } .art-conseil-txt { flex: 1 1 auto; min-width: 0; } .art-conseil-txt h3 { margin: 8px 0 12px; } .art-conseil-txt p:last-child { margin-bottom: 0; } /* Liste à puces fleuries */ .art-liste { list-style: none; margin: 0 0 26px; padding: 0; } .art-liste li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--ink-soft); font-size: var(--petit-texte); line-height: 1.65; } .art-liste li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--feuille); } /* Formule de fin, à la main de PF. 🔴 Le sélecteur DOIT rester « p.art-fin » : « .prose p » (0,1,1) l'emporte sur « .art-fin » (0,1,0), et tant que la règle s'appelait « .art-fin », la taille, la couleur et l'interligne ci-dessous n'étaient jamais appliqués : la formule sortait en 16 px gris, comme le corps de texte (constaté le 11/08/2026, c'est la vraie cause du « riquiqui » signalé par PF). Les valeurs sont volontairement hautes : la Caveat a une hauteur d'x de 0,40 em contre 0,536 pour la Plus Jakarta, elle paraît donc un quart plus petite à taille égale (35 px de Caveat ≈ 26 px de Jakarta à l'œil). */ p.art-fin { margin-top: 40px; text-align: center; font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(35px, 3.7vw, 44px); color: var(--vert-jardin); line-height: 1.35; } /* Sous 600 px, les coupes .br-mobile prennent le relais et la ligne la plus longue doit tenir dans 272 px (320 px moins les marges du .wrap) : la formule descend d'un cran. Largeurs mesurées dans la Caveat 600 réelle, pas en nombre de caractères. */ @media (max-width: 600px) { p.art-fin { font-size: clamp(27px, 8vw, 35px); } } /* Retour au blog + article précédent / suivant */ .art-retour { text-align: center; margin-top: 48px; } .art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 40px auto 0; padding-top: 34px; border-top: 1px solid var(--line); } .art-nav a { display: block; padding: 20px 24px; border-radius: 18px; background: url('texture-creme.webp') repeat left top var(--creme); border: 2px solid var(--feuille); text-decoration: none; transition: transform 0.2s ease; } .art-nav a:hover { transform: translateY(-4px); } .art-nav .art-nav-suiv { text-align: right; } .art-nav .art-nav-sens { display: block; font-family: 'Caveat', cursive; font-weight: 600; font-size: 21px; color: var(--feuille); margin-bottom: 4px; } .art-nav .art-nav-titre { display: block; font-weight: 700; font-size: 16.5px; color: var(--vert-jardin); line-height: 1.4; } .art-nav a:hover .art-nav-titre { color: var(--coquelicot); } .art-nav .art-nav-vide { display: block; } /* Carte de blog entièrement cliquable */ .bcard-lien { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; } @media (max-width: 760px) { .art-illu { margin-bottom: 34px; } .art-illu img { border-radius: 16px; } .art-cite { padding: 22px 20px; border-radius: 0 14px 14px 0; } .art-conseil { gap: 14px; } .art-conseil-num { width: 40px; height: 40px; font-size: 19px; } .art-nav { grid-template-columns: 1fr; } .art-nav .art-nav-suiv { text-align: left; } .art-nav .art-nav-vide { display: none; } } /* ═══════════════════════════════════════════════════════════════════ COUPES DE LIGNE RESPONSIVES (08/08/2026) Règle JBC : chaque ligne coupée à la main doit tenir dans la largeur réelle du conteneur, jusqu'à 320 px, sans laisser de mot orphelin. Les titres et textes mis en avant gardent leur découpe desktop validée ; les coupes supplémentaires n'apparaissent que sur mobile. ═══════════════════════════════════════════════════════════════════ */ .br-mobile { display: none; } .br-desktop { display: inline; } /* Un mot composé ne se coupe jamais sur son tiret (Script-Doctor, court-métrage, tête-à-tête...). Règle Julien du 11/08/2026. */ .nb { white-space: nowrap; } /* Sur le bandeau d'accueil, le point médian disparaît en mobile : la ligne se coupe à sa place, « Script-Doctor Jardinier » reste entier. */ .sep-desktop { display: inline; } @media (max-width: 600px) { .sep-desktop { display: none; } } @media (max-width: 600px) { .br-mobile { display: inline; } .br-desktop { display: none; } } /* Sur les petits écrans, les gros titres de bandeau descendent d'un cran : sinon un titre long se replie tout seul et lâche un mot sur sa ligne. */ @media (max-width: 420px) { .page-hero h1 { font-size: 29px; } .page-hero h1.titre-vert { font-size: 28px; } .page-hero h1.titre-article { font-size: 24px; } .section-head h2 { font-size: 29px; } /* Un titre de rubrique trop long pour 320 px se replierait tout seul et lâcherait un mot sur sa ligne : il descend d'un cran de plus. */ .section-head h2.h2-long { font-size: 25px; } } /* ═══════════════════════════════════════════════════════════════════ LA CABANE À OUTILS (refonte 17/09/2026, matière de PF, lot 1) Quatre rubriques : le podcast, la bibliothèque, les citations, la serre aux curiosités. Une seule définition par composant. ═══════════════════════════════════════════════════════════════════ */ /* ----- Rubrique 1 : la carte du podcast ----- */ .cab-podcast { display: grid; grid-template-columns: 340px 1fr; max-width: 940px; margin: 0 auto; background: #fff; border: 2px solid var(--feuille); border-radius: 22px; overflow: hidden; } .cab-podcast-illu { width: 100%; height: 100%; object-fit: cover; border-right: 2px solid var(--feuille); } .cab-podcast-corps { padding: 34px 38px; display: flex; flex-direction: column; } .cab-podcast-corps p { color: var(--ink-soft); font-size: var(--petit-texte); margin-bottom: 16px; } .cab-podcast-btn { align-self: center; margin-top: auto; } /* ----- Rubrique 3 : le cartouche de présentation ----- */ .cab-intro { max-width: 720px; margin: 0 auto; padding: 30px 34px; background: url('texture-creme.webp') repeat left top var(--creme); border: 2px dashed var(--feuille); border-radius: 22px; text-align: center; } .cab-intro p { color: var(--ink-soft); font-size: var(--petit-texte); } /* ----- Rubrique 2 : la bibliothèque, un livre par ligne ----- */ .biblio-groupe { max-width: 900px; margin: 0 auto; } .biblio-groupe + .biblio-groupe { margin-top: 70px; } .biblio-titre { text-align: center; color: var(--vert-jardin); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.22; } .biblio-titre::after { content: ""; display: block; width: 120px; height: 0; border-bottom: 5px dotted var(--soleil); margin: 18px auto 0; /* 5 px : Julien trouvait les points trop fins (18/09) */ } .biblio-livre { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; padding: 32px 0; scroll-margin-top: 96px; } .biblio-livre + .biblio-livre { border-top: 2px solid var(--line); } /* 2 px : Julien trouvait le trait trop fin (18/09) */ .biblio-couv { width: 220px; } .biblio-couv img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(31, 42, 27, 0.18); } /* Livre dont la photo de couverture n'est pas encore là : une tranche dessinée, à remplacer par un le jour où la photo arrive, sans rien changer d'autre. */ .biblio-tranche { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; padding: 16px; text-align: center; background: url('texture-creme.webp') repeat left top var(--creme); border: 2px dashed var(--feuille); border-radius: 8px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 23px; line-height: 1.2; color: var(--vert-jardin); } /* Couverture prise sur le web (accord PF 18/09) : posée DANS le cadre dessiné de la tranche, pour ne pas mettre une image plate au milieu des photos de PF sur son banc (choix Julien 18/09, option B). Même crème, mêmes pointillés que .biblio-tranche. */ .biblio-couv-web { padding: 14px; background: url('texture-creme.webp') repeat left top var(--creme); border: 2px dashed var(--feuille); border-radius: 8px; } .biblio-couv-web img { border-radius: 4px; box-shadow: 0 4px 12px rgba(31, 42, 27, 0.16); } .biblio-corps h4 { font-size: clamp(20px, 1.9vw, 24px); color: var(--vert-jardin); margin-bottom: 10px; } .biblio-corps p { color: var(--ink-soft); font-size: var(--petit-texte); } .biblio-corps p a { color: var(--vert-jardin); text-decoration: underline; } .biblio-lien { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 16px; color: var(--vert-jardin); text-decoration: underline; text-underline-offset: 3px; } /* ----- Rubrique 3 : les citations fertiles, 4 thèmes sur une seule page (lot 2 de PF, 18/09) ----- */ /* Une couleur de la palette par thème, portée par la carte du sommaire ET par son bloc. */ .cita-feuille { --cita: var(--feuille); } .cita-bleu { --cita: var(--bleu); } .cita-tournesol { --cita: var(--tournesol); } .cita-coquelicot { --cita: var(--coquelicot); } .cita-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 44px auto 0; } .cita-theme { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; background: #fff; border-radius: 18px; border: 2px solid var(--cita); color: inherit; text-decoration: none; text-align: center; transition: transform 0.22s ease; } .cita-theme:hover { transform: translateY(-4px); } .cita-theme-num { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cita); color: #fff; font-family: 'Caveat', cursive; font-weight: 700; font-size: 27px; line-height: 1; } .cita-tournesol .cita-theme-num { color: var(--ink); } .cita-theme h3 { font-size: clamp(21px, 2vw, 25px); color: var(--vert-jardin); margin-bottom: 10px; } .cita-theme p { color: var(--ink-soft); font-size: var(--petit-texte); } .cita-theme-lien { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 16px; color: var(--vert-jardin); text-decoration: underline; text-underline-offset: 3px; } .cita-groupe { max-width: 900px; margin: 80px auto 0; scroll-margin-top: 96px; } .cita-groupe .biblio-titre::after { border-color: var(--cita); } .cita-groupe-intro { max-width: 640px; margin: 22px auto 30px; text-align: center; color: var(--ink-soft); font-size: var(--petit-texte); } .cita-liste { columns: 2; column-gap: 22px; } .cita { background: #fff; border-radius: 18px; border-left: 4px solid var(--cita); padding: 26px 26px 22px; margin-bottom: 22px; break-inside: avoid; } /* Guillemet ouvrante dessinée en CSS (même dessin que les témoignages), hors du texte. */ .cita::before { content: "\201C"; font-family: 'Caveat', cursive; font-size: 64px; line-height: 0.55; color: var(--cita); display: block; margin: 12px 0 14px; } .cita blockquote p { color: var(--ink); font-size: var(--petit-texte); margin-bottom: 14px; } .cita figcaption { font-size: 15px; line-height: 1.5; } .cita cite { display: block; font-style: normal; font-weight: 700; color: var(--vert-jardin); } .cita-src { display: block; color: var(--ink-soft); font-weight: 500; font-size: 14.5px; } /* ----- Rubrique 4 : la serre aux curiosités (matière de PF, 19/09) ----- */ /* Deux articles l'un sous l'autre, au patron de la carte du podcast : l'image à gauche, le texte à droite, une couleur de la palette par carte. Pas d'ombre, pas de survol : ce sont des articles à lire, pas des cartes cliquables. */ .serre-liste { max-width: 940px; margin: 0 auto; } .serre-item { --serre: var(--feuille); display: grid; grid-template-columns: 340px 1fr; background: #fff; border: 2px solid var(--serre); border-radius: 22px; overflow: hidden; } .serre-item + .serre-item { margin-top: 34px; } .serre-bleu { --serre: var(--bleu); } .serre-illu { width: 100%; height: 100%; object-fit: cover; border-right: 2px solid var(--serre); } /* L'affiche du festival (22/09) : plus haute que sa colonne sur ordinateur, on garde son titre en haut et on rogne le bandeau des partenaires en bas. */ .serre-illu-affiche { object-position: top; } .serre-corps { padding: 34px 38px; } .serre-corps h3 { font-size: clamp(21px, 2vw, 26px); color: var(--vert-jardin); line-height: 1.18; margin-bottom: 12px; } .serre-corps p { color: var(--ink-soft); font-size: var(--petit-texte); } .serre-corps p a { color: var(--vert-jardin); text-decoration: underline; text-underline-offset: 3px; } .serre-cta { text-align: center; margin-top: 44px; } @media (max-width: 760px) { .cab-podcast { grid-template-columns: 1fr; } .cab-podcast-illu { height: auto; border-right: 0; border-bottom: 2px solid var(--feuille); } .cab-podcast-corps { padding: 26px 22px; } /* Sur 320 px, le libellé se coupait en deux (« Écouter » seul) : le bouton garde sa hauteur mais rend 20 px de chaque côté au texte. */ .cab-podcast-btn { align-self: stretch; text-align: center; padding: 15px 20px; } .cab-intro { padding: 26px 22px; } .biblio-livre { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; } .biblio-couv { width: min(260px, 100%); margin: 0 auto; } .biblio-corps h4 { text-align: center; } .serre-item { grid-template-columns: 1fr; } .serre-illu { height: auto; border-right: 0; border-bottom: 2px solid var(--serre); } .serre-corps { padding: 26px 22px; } .serre-corps h3 { text-align: center; } .serre-cta { margin-top: 34px; } .cita-themes { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; } .cita-theme { padding: 26px 22px 22px; } .cita-groupe { margin-top: 64px; } .cita-liste { columns: 1; } .cita { padding: 22px 20px 18px; } } /* Sur les écrans les plus étroits, les titres de sous-rubrique descendent d'un cran : à 320 px « J'aime beaucoup aussi… » lâchait « J'aime » seul sur sa ligne et « pour retrouver/booster » débordait de sa coupe (mesuré le 19/09). ⚠️ Cette règle doit rester ICI, après la définition de .biblio-titre : posée dans le bloc 420 px du haut de la feuille, elle est écrasée par le clamp. */ @media (max-width: 420px) { .biblio-titre { font-size: 21px; } /* Idem pour les titres des deux articles de la serre : à 21 px, « tout près du paradis… » dépassait sa coupe et se repliait (mesuré). */ .serre-corps h3 { font-size: 19px; } /* Le H1 de PF et les intertitres de saison les plus longs dépassaient leur coupe et se repliaient en laissant un mot seul sur sa ligne (mesuré à 320 et 360 px). */ .page-hero h1.h1-saisons { font-size: clamp(24px, 7vw, 30px); } .saison h2 { font-size: clamp(19px, 5.8vw, 24px); } .saison-etiquette { font-size: 24px; } /* Marges resserrées, comme .tcard : 26 px de chaque côté ne laissaient que 201 px de texte dans la carte à 320 px. */ .valeurs-cartes .pcard { padding: 24px 20px; } } /* ===== Formulaire Premier contact : piège à robots et message d'erreur ===== */ /* Le piège reste dans le flux mais invisible. Pas de left:-9999px : sur iOS, un élément posé hors écran à gauche fait défiler la page horizontalement. */ .cf-piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .cf-erreur { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--coquelicot); border-radius: 10px; background: #FFFFFF; color: var(--coquelicot); font-size: 15.5px; font-weight: 600; line-height: 1.45; text-align: center; } .cf-erreur[hidden] { display: none; } /* ===== La lettre du jardin : retour d'inscription ===== */ .nl-message { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--coquelicot); color: var(--coquelicot); font-size: 15.5px; font-weight: 600; line-height: 1.45; } .nl-message.nl-message-ok { border-color: var(--tournesol); color: var(--vert-jardin); } .nl-message[hidden] { display: none; } .nl-note a { color: inherit; text-decoration: underline; }