/* * TheoTour — feuille de style du thème, synchronisée avec la maquette validée (maquettes/index.html, v12). * Jetons de couleur et de typographie en tête ; thème clair et sombre. Règles de design : DESIGN.md. * Polices : fichiers à placer dans assets/fonts/ (voir assets/fonts/LISEZMOI.md), déclarées dans fonts.css. */ /* Mise en page : mobile d'abord. Grandes photos plein cadre pour la nature, mots manuscrits repris des affiches de Théo pour le ton, une « journée type » pour montrer l'enchaînement des activités. Les filtres gardent l'ergonomie validée. Repère du sujet : le jaune du balisage des sentiers sert d'accent et de jauge de niveau. */ :root { --bg: #f6f7f2; /* lichen clair */ --surface: #ffffff; --ink: #1c2a22; /* forêt profonde */ --muted: #5a6a60; --line: #dfe3d8; --sun: #f4b62a; /* soleil des affiches, balisage */ --sun-ink: #1c2a22; --meadow: #5f8f45; /* alpage */ --meadow-soft: #e6efdc; --sky: #2f7099; --sky-soft: #e1edf4; --night: #16231c; /* bandeaux sombres */ --on-night: #f3f5ee; --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif; --font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive; --r: 14px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121a15; --surface: #1a241e; --ink: #e9eee6; --muted: #a3b2a8; --line: #2c3a31; --sun: #f4b62a; --sun-ink: #1c2a22; --meadow: #8cc06c; --meadow-soft: #23331f; --sky: #8ac0e0; --sky-soft: #1d3240; --night: #0c120e; --on-night: #f3f5ee; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #121a15; --surface: #1a241e; --ink: #e9eee6; --muted: #a3b2a8; --line: #2c3a31; --sun: #f4b62a; --sun-ink: #1c2a22; --meadow: #8cc06c; --meadow-soft: #23331f; --sky: #8ac0e0; --sky-soft: #1d3240; --night: #0c120e; --on-night: #f3f5ee; color-scheme: dark; } * { box-sizing: border-box; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.55; } a { color: var(--sky); } img { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; text-wrap: balance; margin: 0; letter-spacing: -.01em; } h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; } h3 { font-size: 1.3rem; font-weight: 600; } p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; } .wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--meadow); } .eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .stack { display: flex; flex-direction: column; gap: 16px; } section.band { padding-block: 48px; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); } header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); } header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .logo svg { width: 46px; height: 30px; } .logo b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; } .logo small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.1; } nav.main { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; } nav.main a { text-decoration: none; color: var(--ink); padding: 7px 11px; border-radius: 999px; font-weight: 600; font-size: .95rem; } nav.main a[aria-current="page"] { background: var(--meadow-soft); color: var(--meadow); } @media (max-width: 640px) { nav.main a.opt { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 700; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--sun); color: var(--sun-ink); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .chip { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: .93rem; font-weight: 600; cursor: pointer; white-space: nowrap; } .chip svg { width: 19px; height: 19px; flex: none; color: var(--meadow); } .chip[aria-pressed="true"] { background: var(--meadow); color: #fff; border-color: var(--meadow); } .chip[aria-pressed="true"] svg { color: #fff; } .chip[disabled] { opacity: .4; cursor: not-allowed; } .chip .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; font-weight: 600; } .chip[aria-pressed="true"] .n { color: inherit; opacity: .8; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--meadow-soft); color: var(--meadow); } .tag.sun { background: var(--sun); color: var(--sun-ink); } .tag.todo { background: transparent; border: 1px dashed var(--muted); color: var(--muted); font-weight: 600; } /* Accueil : photo plein cadre */ .hero { position: relative; color: #fff; background: var(--night); } .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 20 14 / .15) 0%, rgb(10 20 14 / .35) 45%, rgb(10 20 14 / .82) 100%); } .hero .wrap { position: relative; z-index: 1; padding-block: 120px 36px; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 900px) { .hero .wrap { padding-block: 200px 56px; } } .hero h1 { max-width: 15ch; font-size: clamp(2.5rem, 6.2vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 24px rgb(0 0 0 / .45); } .hero h1 .accent { color: var(--sun); } /* Ordinateur : voile sombre à gauche, derrière le texte, pour un contraste régulier sur la photo */ @media (min-width: 641px) { .hero::after { background: linear-gradient(90deg, rgb(10 20 14 / .92) 0%, rgb(10 20 14 / .74) 45%, rgb(10 20 14 / .12) 75%), linear-gradient(180deg, transparent 55%, rgb(10 20 14 / .6) 100%); } } /* Téléphone : la photo seule, puis le texte sur fond uni (contraste garanti, pas de texte sur les visages floutés) */ @media (max-width: 640px) { .hero > img { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: center 70%; } .hero::after { display: none; } .hero .wrap { padding-block: 22px 50px; gap: 12px; } .hero h1 { font-size: clamp(2.35rem, 10.5vw, 3rem); text-shadow: none; } .hero .hand { font-size: 1.4rem; } .hero .lead { font-size: 1.05rem; } .hero .lead-plus { display: none; } .hero .credit { top: 8px; bottom: auto; } } .hero .lead { font-size: 1.15rem; max-width: 52ch; color: rgb(255 255 255 / .92); } .hero .hand { color: var(--sun); font-size: 1.9rem; } .hero .credit { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 8px; z-index: 1; font-size: .72rem; color: rgb(255 255 255 / .7); } /* Accueil : une seule rangée d'activités à faire défiler, pas de formulaire */ .quick-wrap { position: relative; z-index: 2; margin-top: -26px; } .quick { background: var(--surface); border-radius: var(--r); box-shadow: 0 12px 40px rgb(20 40 28 / .14); padding: 14px; display: flex; flex-direction: column; gap: 10px; } @media (min-width: 900px) { .quick { flex-direction: row; align-items: center; padding: 14px 16px; } } .quick > b { flex: none; padding-left: 4px; } .scroller { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; padding-block: 2px; mask-image: linear-gradient(90deg, #000 88%, transparent); } .scroller::-webkit-scrollbar { display: none; } .scroller .chip { flex: none; } .quick .btn { flex: none; } .words { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; padding-block: 28px 4px; } .words span { font-family: var(--font-hand); font-size: 1.7rem; color: var(--meadow); transform: rotate(var(--rot, -2deg)); } .acts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 760px) { .acts-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } } .act-tile { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; color: #fff; background: var(--night); } .act-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .act-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(10 20 14 / .8)); } .act-tile div { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; } .act-tile b { font-family: var(--font-display); font-size: 1.3rem; display: flex; align-items: center; gap: 8px; } .act-tile b svg { width: 22px; height: 22px; } .act-tile small { font-size: .85rem; opacity: .9; } @media (prefers-reduced-motion: no-preference) { .act-tile:hover img { transform: scale(1.04); } } .day { display: grid; gap: 14px; } @media (min-width: 900px) { .day { grid-template-columns: repeat(4, 1fr); } } .moment { background: var(--surface); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; } .moment img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } .moment .t { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .moment .h { font-family: var(--font-hand); font-size: 1.5rem; color: var(--meadow); line-height: 1; } .formules { display: grid; gap: 16px; } @media (min-width: 640px) { .formules { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .formules { grid-template-columns: repeat(4, 1fr); } } .specs { display: flex; flex-direction: column; margin: 2px 0 6px; font-size: .93rem; } .specs dt { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 10px; } .specs dd { margin: 2px 0 0; } .specs dd.next { color: var(--meadow); font-weight: 700; } .formule { background: var(--surface); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); } .formule img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .formule .t { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .formule .go { margin-top: auto; font-weight: 700; color: var(--sky); } .nocar { display: grid; gap: 22px; background: var(--night); color: var(--on-night); border-radius: var(--r); padding: 26px; overflow: hidden; } @media (min-width: 900px) { .nocar { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 36px; } } .nocar p { color: rgb(243 245 238 / .82); max-width: 60ch; } .stations { display: flex; flex-direction: column; gap: 8px; } .stations div { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px dashed rgb(243 245 238 / .25); padding-bottom: 7px; } .stations b { font-family: var(--font-display); font-size: 1.1rem; min-width: 8.5ch; color: var(--sun); } .theo { display: grid; gap: 22px; align-items: center; } @media (min-width: 860px) { .theo { grid-template-columns: 320px 1fr; gap: 40px; } } .theo figure { margin: 0; position: relative; } .theo figure img { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 360px; } .theo figure figcaption { position: absolute; right: -6px; bottom: 18px; background: var(--sun); color: var(--sun-ink); font-family: var(--font-hand); font-size: 1.5rem; padding: 4px 12px; border-radius: 8px; transform: rotate(-4deg); } .theo blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 3.6vw, 1.8rem); font-weight: 600; line-height: 1.25; } .publics { display: grid; gap: 12px; } @media (min-width: 640px) { .publics { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .publics { grid-template-columns: repeat(5, 1fr); } } .public { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sun); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); } .public b { font-family: var(--font-display); font-size: 1.15rem; } .public span { font-size: .92rem; color: var(--muted); } .public .go { margin-top: auto; color: var(--sky); font-weight: 700; } .logistique { display: grid; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; } @media (min-width: 980px) { .logistique { grid-template-columns: .85fr 1.4fr; align-items: center; padding: 34px; } } .logistique p { color: var(--muted); max-width: 52ch; } .logi-grille { display: grid; gap: 18px; } @media (min-width: 640px) { .logi-grille { grid-template-columns: 1fr 1fr; } } .logi-grille > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-content: start; } .logi-grille svg { grid-row: span 2; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--meadow-soft); color: var(--meadow); } .logi-grille span { color: var(--muted); font-size: .92rem; } .cta-fin { display: grid; gap: 24px; background: var(--meadow-soft); border-radius: var(--r); padding: 26px; } @media (min-width: 900px) { .cta-fin { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 36px; } } .etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .etapes li { counter-increment: etape; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; } .etapes li::before { content: counter(etape); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 800; display: grid; place-items: center; } .etapes li span { color: var(--muted); font-size: .92rem; } .confiance { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; } .confiance span { color: var(--muted); } .book details.faq { padding: 10px 12px; } .book details.faq .etapes { margin-top: 10px; } .forwho { display: grid; gap: 10px; } @media (min-width: 640px) { .forwho { grid-template-columns: 1fr 1fr; } } .forwho span { display: flex; gap: 10px; align-items: flex-start; } .forwho span::before { content: ""; flex: none; width: 18px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--sun); } .trust { display: grid; gap: 16px; } @media (min-width: 900px) { .trust { grid-template-columns: 1fr 1fr 1fr; } } .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; margin: 0; } .quote p { font-size: 1.05rem; } .quote footer { font-size: .88rem; color: var(--muted); } .partners { display: flex; flex-wrap: wrap; gap: 8px; } .partners-logos { display: flex; flex-direction: column; gap: 10px; } .partners-logos .partenaire { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; } body .partners-logos :is(.partenaire, figure.logo-partenaire, p) { margin: 0; } .partners-logos .logo-partenaire img { display: block; width: 112px; height: 48px; object-fit: contain; object-position: left center; } .partners-logos .partenaire p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; } .partners span { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 12px; font-weight: 700; color: var(--muted); font-size: .9rem; } /* Liste */ .list-head { position: relative; color: #fff; background: var(--night); overflow: hidden; } .list-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .list-head .wrap { position: relative; padding-block: 40px 28px; display: flex; flex-direction: column; gap: 6px; } .list-head .hand { color: var(--sun); } .list-layout { display: grid; gap: 20px; padding-block: 24px 56px; } @media (min-width: 900px) { .list-layout { grid-template-columns: 300px 1fr; align-items: start; } } .filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 18px; } @media (min-width: 900px) { .filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 74px); max-height: calc(100vh - 92px); overflow: auto; } } /* Mobile : les filtres s'ouvrent en plein écran ; une rangée d'activités reste visible au-dessus des résultats */ @media (max-width: 899px) { .filters { position: fixed; inset: 0; z-index: 15; border-radius: 0; border: 0; overflow: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); } .filters[data-open="false"] { display: none; } .list-head .wrap { padding-block: 26px 18px; } } .quickbar { display: none; gap: 8px; align-items: center; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); z-index: 4; background: var(--bg); padding-block: 8px; margin-top: -8px; } @media (max-width: 899px) { .quickbar { display: flex; } } .quickbar .btn { flex: none; padding: 8px 14px; } .sheetfoot { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .sheetfoot .btn { width: 100%; } @media (min-width: 900px) { .sheetfoot { display: none; } } .filters h3 { font-size: 1.15rem; } .fgroup { display: flex; flex-direction: column; gap: 8px; } .fgroup .hint { font-size: .82rem; color: var(--muted); } .fbody { display: flex; flex-direction: column; gap: 18px; } .ftoggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; } @media (min-width: 900px) { .ftoggle button { display: none; } } .results-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .tabs { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .tabs button { border: 0; background: transparent; padding: 8px 16px; cursor: pointer; font-weight: 700; } .tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); } .count { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; } .cards { display: grid; gap: 18px; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1120px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; } @media (prefers-reduced-motion: no-preference) { .card { transition: transform .2s, box-shadow .2s; } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgb(20 40 28 / .12); } } .card .media { position: relative; } .card .media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .card .badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; } .card .acts-ov { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; } .card .acts-ov span { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--meadow); display: grid; place-items: center; box-shadow: 0 2px 8px rgb(0 0 0 / .18); } .card .acts-ov span.main { background: var(--sun); color: var(--sun-ink); } .card .acts-ov svg { width: 20px; height: 20px; } .card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card .mood { font-family: var(--font-hand); font-size: 1.35rem; color: var(--meadow); line-height: 1.1; } .card .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: var(--muted); } .card .price { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; } .card .price b { font-family: var(--font-display); font-size: 1.3rem; } .card .next { font-size: .86rem; color: var(--meadow); font-weight: 700; } .card .next.none { color: var(--muted); font-weight: 600; } .empty { background: var(--surface); border: 1.5px dashed var(--muted); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; } .cal { display: flex; flex-direction: column; gap: 22px; } .cal h3 { text-transform: capitalize; border-bottom: 3px solid var(--sun); padding-bottom: 2px; display: inline-block; } .dep { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; text-decoration: none; color: var(--ink); } .dep img { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; } .dep .t { min-width: 0; } .dep .t b { display: block; } .dep .t small { display: block; color: var(--muted); } .dep .d { font-weight: 700; color: var(--meadow); font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .dep { grid-template-columns: 56px 1fr; } .dep img { width: 56px; height: 56px; } .dep .p { grid-column: 2; font-size: .9rem; } } /* Fiche */ .fiche-hero { position: relative; color: #fff; background: var(--night); } .fiche-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fiche-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 20 14 / .1) 30%, rgb(10 20 14 / .8)); } .fiche-hero .wrap { position: relative; z-index: 1; padding-block: 150px 26px; display: flex; flex-direction: column; gap: 10px; } @media (min-width: 900px) { .fiche-hero .wrap { padding-block: 220px 34px; } } .fiche-hero .crumbs { font-size: .9rem; } .fiche-hero .crumbs a { color: #fff; } .fiche-hero .hand { color: var(--sun); } .fiche-hero .chip { background: rgb(255 255 255 / .92); color: var(--ink); border-color: transparent; cursor: default; } .fiche-hero .chip[aria-pressed="true"] { background: var(--sun); color: var(--sun-ink); } .fiche-hero .chip[aria-pressed="true"] svg { color: var(--sun-ink); } .fiche-layout { display: grid; gap: 30px; padding-block: 26px 104px; } @media (min-width: 900px) { .fiche-layout { grid-template-columns: 1fr 360px; align-items: start; padding-bottom: 56px; } } .keyfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 640px) { .keyfacts { grid-template-columns: repeat(4, 1fr); } } .keyfacts div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .keyfacts b { font-family: var(--font-display); font-size: 1.2rem; } .keyfacts small { color: var(--muted); } .vivre { display: grid; gap: 10px; } @media (min-width: 640px) { .vivre { grid-template-columns: 1fr 1fr; } } .vivre span { background: var(--meadow-soft); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; } .vivre span::before { content: "✓"; color: var(--meadow); font-weight: 800; } .levels { display: grid; gap: 10px; } .level { display: grid; grid-template-columns: 100px auto 1fr; gap: 10px; align-items: center; font-size: .93rem; } .blazes { display: inline-flex; gap: 4px; } .blazes i { width: 20px; height: 9px; border-radius: 2px; background: var(--line); display: block; } .blazes i.on { background: var(--sun); } .level small { color: var(--muted); } .muted { color: var(--muted); text-decoration: line-through; } .access { border-left: 5px solid var(--sun); background: var(--surface); padding: 14px 16px; border-radius: 0 12px 12px 0; display: flex; flex-direction: column; gap: 6px; } .days { display: flex; flex-direction: column; border-left: 2px dashed var(--line); margin-left: 8px; } .dayitem { position: relative; padding: 0 0 18px 22px; } .dayitem::before { content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); } .dayitem b { display: block; } .incl { display: grid; gap: 16px; } @media (min-width: 640px) { .incl { grid-template-columns: 1fr 1fr; } } .incl ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .book { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 900px) { .book { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); } } .book .who { display: flex; gap: 12px; align-items: center; } .book .who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 25%; } .book label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; } .book input, .book select, .book textarea { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); width: 100%; } .book .alt { font-size: .88rem; color: var(--muted); } .book .done { background: var(--meadow-soft); color: var(--meadow); border-radius: 10px; padding: 10px; font-size: .92rem; font-weight: 600; } .stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .stickycta b { font-family: var(--font-display); font-size: 1.25rem; } @media (min-width: 900px) { .stickycta { display: none; } } footer.site { background: var(--night); color: rgb(243 245 238 / .75); font-size: .88rem; } footer.site b { color: var(--on-night); } footer.site .wrap { padding-block: 30px; display: grid; gap: 18px; } @media (min-width: 760px) { footer.site .wrap { grid-template-columns: 2fr 1fr 1fr; } } footer.site nav a { color: var(--on-night); text-decoration: none; } footer.site nav a:hover { text-decoration: underline; } footer.site .hand { color: var(--sun); } footer.site .mark-lg { --ink: #f3f5ee; --bg: var(--night); --surface: var(--night); } footer.site .mark-lg svg { width: 110px; height: 110px; } footer.site a { color: var(--on-night); } /* Logo */ .logo .mark svg { width: 168px; height: auto; display: block; } @media (max-width: 380px) { .logo .mark svg { width: 140px; } } .logo .mark img { display: block; height: var(--logo-h, 64px); width: auto; max-width: 60vw; object-fit: contain; } @media (max-width: 760px) { .logo .mark img { height: min(var(--logo-h, 64px), 56px); } } footer.site .mark-lg img { display: block; width: var(--logo-pied, 110px); height: var(--logo-pied, 110px); object-fit: contain; } /* Menu : sous-menus au survol sur ordinateur, tiroir repliable sur mobile */ .burger { display: none; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; } .burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } nav.main { align-items: center; } nav.main > a, .ddb { text-decoration: none; color: var(--ink); padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: .95rem; background: none; border: 0; cursor: pointer; } .ddb::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); } nav.main > a[aria-current="page"], .dd.current > .ddb { background: var(--meadow-soft); color: var(--meadow); } nav.main .navcta { color: var(--sun-ink); background: var(--sun); margin-left: 6px; } .dd { position: relative; } .dd .menu { display: none; flex-direction: column; background: var(--surface); } .dd .menu a { text-decoration: none; color: var(--ink); padding: 9px 14px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .dd .menu a small { color: var(--muted); font-weight: 400; margin-left: auto; padding-left: 12px; } .dd .menu a svg { width: 20px; height: 20px; color: var(--meadow); flex: none; } .dd .menu a:hover, .dd .menu a:focus-visible { background: var(--meadow-soft); } @media (min-width: 1040px) { .dd .menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 14px 40px rgb(20 40 28 / .16); z-index: 8; } .dd .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .dd:hover .menu, .dd:focus-within .menu, .dd.open .menu { display: flex; } } @media (max-width: 1039px) { .burger { display: inline-flex; } header.site .wrap { flex-wrap: wrap; } nav.main { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-block: 8px 14px; border-top: 1px solid var(--line); max-height: calc(100vh - 140px); overflow: auto; } header.site.open nav.main { display: flex; } nav.main > a, .ddb { text-align: left; border-radius: 10px; padding: 12px 10px; font-size: 1.05rem; width: 100%; } .ddb::after { float: right; margin-top: 8px; } .dd.open .menu { display: flex; padding: 0 0 8px 12px; } nav.main .navcta { margin: 8px 0 0; justify-content: center; } } /* Fil Instagram */ .insta { display: flex; flex-direction: column; gap: 18px; } .insta-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; } .insta-id { display: flex; gap: 12px; align-items: center; } .insta-id .ring { width: 58px; height: 58px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--sun), #e2593b, #c13584, var(--sun)); flex: none; } .insta-id .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 2px solid var(--surface); } .insta-id b { font-family: var(--font-display); font-size: 1.25rem; display: block; } .insta-id small { color: var(--muted); } .marquee { overflow: hidden; border-radius: var(--r); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .track { display: flex; gap: 10px; width: max-content; } @media (prefers-reduced-motion: no-preference) { .track { animation: defile var(--duree, 70s) linear infinite; } .track.rev { animation-direction: reverse; } .marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } } @keyframes defile { to { transform: translateX(-50%); } } .post { position: relative; width: clamp(150px, 22vw, 230px); aspect-ratio: 1; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--night); flex: none; } .post img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .post span { position: absolute; inset: auto 0 0 0; padding: 26px 10px 8px; font-size: .78rem; text-align: left; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .7)); opacity: 0; transition: opacity .25s; line-height: 1.3; } .post:hover img, .post:focus-visible img { transform: scale(1.06); } .post:hover span, .post:focus-visible span { opacity: 1; } .insta .note { font-size: .8rem; color: var(--muted); } .lightbox { position: fixed; inset: 0; z-index: 20; background: rgb(8 14 10 / .92); display: flex; align-items: center; justify-content: center; gap: 8px; padding: calc(16px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); } .lightbox[hidden] { display: none; } .lightbox figure { margin: 0; max-width: min(720px, 100%); display: flex; flex-direction: column; gap: 10px; } .lightbox img { max-height: 76vh; width: auto; max-width: 100%; border-radius: 12px; margin: 0 auto; } .lightbox figcaption { color: #eef2ea; font-size: .95rem; } .lb-nav, .lb-close { border: 0; background: rgb(255 255 255 / .14); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; flex: none; } .lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); } @media (max-width: 600px) { .lb-nav { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .lb-prev { left: 30%; } .lb-next { right: 30%; } } /* Pages Théo, Activités, Pratique, Journal, Contact */ .page-head { position: relative; color: #fff; background: var(--night); overflow: hidden; } .page-head > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; } .page-head .wrap { position: relative; padding-block: 64px 30px; display: flex; flex-direction: column; gap: 8px; } .page-head .hand { color: var(--sun); } .prose { max-width: 66ch; display: flex; flex-direction: column; gap: 14px; font-size: 1.05rem; } .timeline { display: grid; gap: 12px; } @media (min-width: 760px) { .timeline { grid-template-columns: repeat(4, 1fr); } } .timeline div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .timeline .hand { font-size: 1.4rem; } .act-rows { display: flex; flex-direction: column; gap: 28px; } .act-row { display: grid; gap: 18px; align-items: center; } @media (min-width: 820px) { .act-row { grid-template-columns: 1fr 1.2fr; } .act-row:nth-child(even) > img { order: 2; } } .act-row > img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } .act-row h2 { display: flex; align-items: center; gap: 10px; } .act-row h2 svg { width: 34px; height: 34px; color: var(--meadow); } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } table.tarifs { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; } table.tarifs th, table.tarifs td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); } table.tarifs th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } table.tarifs td.num { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; } details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; } details.faq summary { font-weight: 700; cursor: pointer; } details.faq p { margin-top: 8px; color: var(--muted); } .posts { display: grid; gap: 16px; } @media (min-width: 760px) { .posts { grid-template-columns: repeat(3, 1fr); } } .posts article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } .posts article img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .posts article div { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; } .contact-grid { display: grid; gap: 22px; padding-block: 28px 56px; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } } .channels { display: flex; flex-direction: column; gap: 12px; } .channels > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } /* Propositions de logo */ .logos { display: grid; gap: 18px; } @media (min-width: 760px) { .logos { grid-template-columns: repeat(2, 1fr); } } .logo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; } .logo-card .stage { display: grid; place-items: center; padding: 26px 16px; min-height: 230px; } .logo-card .stage.dark { background: var(--night); } .logo-card .stage.dark { --ink: #f3f5ee; --surface: #16231c; --bg: #16231c; } .logo-card .stage svg { max-width: 100%; height: auto; } .logo-card .t { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); } .sizes { display: flex; gap: 14px; align-items: flex-end; } .sizes span { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 8px; padding: 6px; } /* Compléments du thème (classes utilisées par les gabarits PHP) */ .fiche-accroche { font-size: 1.15rem; max-width: 62ch; } .fiche-note { align-self: flex-start; white-space: normal; line-height: 1.4; padding: 6px 10px; } .acces-hebergement { border-color: var(--meadow); } .hint { color: var(--muted); font-size: .9rem; } .photo-vide { display: block; aspect-ratio: 4 / 3; background: var(--meadow-soft); } .fiche-hero h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); } .list-head h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); } .book .who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } /* Avis Google (shortcode [theotour_avis]) */ .avis-google { display: flex; flex-direction: column; gap: 14px; } .avis-resume { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .avis-resume b { font-family: var(--font-display); font-size: 2rem; } .avis-resume span:last-child { color: var(--muted); } .etoiles { color: var(--sun); letter-spacing: 1px; } .etoiles .vides { color: var(--line); } .avis-liens { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .avis-mention, .avis-repli { color: var(--muted); font-size: .85rem; } .avis-liens .btn { margin: 0; } /* Rangée défilante : 1 carte et demie sur téléphone, 2 sur tablette, 3 sur ordinateur ; les suivantes au défilement. */ .avis-google .avis-rangee { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 2px 2px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } @media (min-width: 700px) { .avis-google .avis-rangee { grid-auto-columns: calc((100% - 16px) / 2); } } @media (min-width: 900px) { .avis-google .avis-rangee { grid-auto-columns: calc((100% - 32px) / 3); } } .avis-rangee:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: var(--r); } .avis-google .quote.avis { scroll-snap-align: start; } .quote.avis p.avis-texte { font-size: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; margin: 0; } .quote.avis p.avis-texte.ouvert { display: block; } .quote.avis footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; } .quote.avis footer .etoiles { font-size: 1.05rem; } .avis-fleches { display: flex; gap: 8px; margin-left: auto; } body .avis-google > *, body .avis-google > p { margin: 0; } .avis-fleches[hidden] { display: none; } body .avis-fleches button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.5rem; line-height: 1; padding: 0 0 3px; cursor: pointer; } body .avis-fleches button:disabled { opacity: .35; cursor: default; } body .avis-suite { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--sky); font: inherit; font-weight: 700; font-size: .9rem; text-decoration: underline; cursor: pointer; } /* Diplômes et partenaires (composition « Diplômes et partenaires ») */ body ul.pastilles.wp-block-list { list-style: none; margin: 0; padding: 0; padding-inline-start: 0; display: flex; flex-wrap: wrap; gap: 8px; } body .pastilles li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 12px; font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: 8px; } .pastilles li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); flex: none; } .partenaires-cartes { display: grid; gap: 16px; } @media (min-width: 760px) { .partenaires-cartes { grid-template-columns: repeat(3, 1fr); } } body .partenaires-cartes .partenaire-carte { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; } body .partenaire-carte figure.logo-partenaire { margin: 0; height: 52px; display: flex; align-items: center; } .partenaire-carte .logo-partenaire img { display: block; height: 48px; width: auto; max-width: min(170px, 100%); object-fit: contain; object-position: left center; } body .partenaire-carte p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; } body p.references { color: var(--muted); font-size: .92rem; margin: 0; } p.references strong { color: var(--ink); } /* Fil Instagram (extension Instagram Feed) : couleurs et boutons du site ; colonnes et nombre se règlent dans l'extension. */ #sb_instagram .sbi_header_text h3, #sb_instagram .sbi_feedtheme_header_text h3 { font-family: var(--font-display); color: var(--ink); } #sb_instagram .sbi_bio { color: var(--muted) !important; } #sb_instagram #sbi_load { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a { margin: 0; border-radius: 999px; padding: 10px 20px; font: 700 .95rem var(--font-body); box-shadow: none; } #sb_instagram #sbi_load .sbi_load_btn { background: var(--surface) !important; color: var(--ink) !important; border: 1.5px solid var(--line); } #sb_instagram .sbi_follow_btn a { background: var(--sun) !important; color: var(--ink) !important; } #sb_instagram .sbi_follow_btn a:hover, #sb_instagram #sbi_load .sbi_load_btn:hover { filter: brightness(.95); box-shadow: none; } /* Compositions de blocs (patterns/) : mêmes rendus que la maquette avec le balisage de l'éditeur */ .hero .hero-photo { margin: 0; } .hero .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } @media (max-width: 640px) { .hero .hero-photo img { position: relative; display: block; height: auto; aspect-ratio: 4 / 3; object-position: center 70%; } } .hero h1 .accent, .hero .wp-block-heading .accent { color: var(--sun); } .logi-grille .wp-block-group { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px; align-content: start; } .logi-grille .wp-block-group > * { margin: 0; } .cta-fin .wp-block-buttons { gap: 8px; } .theo .theo-citation { font-family: var(--font-display); font-size: clamp(1.35rem, 3.6vw, 1.8rem); font-weight: 600; line-height: 1.25; } .theo figure figcaption { position: absolute; right: -6px; bottom: 18px; background: var(--sun); color: var(--sun-ink); font-family: var(--font-hand); font-size: 1.5rem; padding: 4px 12px; border-radius: 8px; transform: rotate(-4deg); } .quick .chip input { display: none; } .quick label.chip { user-select: none; } /* Boutons de l'éditeur aux couleurs du thème */ .wp-block-button .wp-block-button__link { background: var(--sun); color: var(--sun-ink); border-radius: 999px; padding: 13px 22px; font-weight: 700; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } /* Intégration à Kadence (thème parent) */ /* Sections pleine largeur de la maquette dans le contenu d'une page */ .entry-content > .hero, .entry-content > .band, .entry-content > .wp-block-group.hero { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } body { overflow-x: clip; } /* Kadence impose une couleur aux titres : on rend celle du bloc parent sur fonds sombres */ .hero h1, .hero h2, .hero .lead, .list-head h1, .fiche-hero h1, .page-head h1, .nocar h2, footer.site h2 { color: #fff; } .hero h1 .accent, .hero .wp-block-heading .accent { color: var(--sun); } .entry-content h1, .entry-content h2, .entry-content h3 { font-family: var(--font-display); } body, .entry-content { font-family: var(--font-body); } .hand { font-family: var(--font-hand) !important; } /* Kadence nomme aussi sa zone principale « wrap » : on annule les règles de la maquette sur ce conteneur */ main.wrap.kt-clear { max-width: none; margin: 0; padding-left: 0; padding-right: 0; min-width: 0; width: 100%; } .entry-content > * { min-width: 0; } /* En-tête et pied de page de la maquette dans Kadence */ #site-header { position: sticky; top: 0; z-index: 20; } .admin-bar #site-header { top: 32px; } @media (max-width: 782px) { .admin-bar #site-header { top: 46px; } } #site-header .logo .mark svg { width: 168px; height: auto; display: block; } footer.site .mark-lg svg { width: 110px; height: 110px; } footer.site .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } /* Kadence peint « body.content-style-unboxed .site » en blanc : le pied de page porte aussi la classe « site » */ body footer.site, body.content-style-unboxed footer.site { background: var(--night); } /* Journal (archives Kadence) : titres lisibles dans les cartes */ .loop-entry .entry-title { font-size: 1.2rem; line-height: 1.25; letter-spacing: 0; } .loop-entry .entry-title a { color: var(--ink); text-decoration: none; } /* Formulaires Fluent Forms aux couleurs du thème */ .fluentform .ff-btn-submit { background: var(--sun) !important; color: var(--sun-ink) !important; border: 0 !important; border-radius: 999px !important; padding: 13px 22px !important; font-weight: 700; } .fluentform .ff-el-form-control { border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); } .fluentform .ff-el-input--label label { font-weight: 600; font-size: .9rem; } /* Journal : espace avant le pied de page */ body.blog .site-main, body.archive:not(.post-type-archive-sejour) .site-main { padding-bottom: 56px; } /* Blocs de l'éditeur (Kadence = thème classique) : WordPress enveloppe le contenu des groupes dans « .wp-block-group__inner-container ». On le rend transparent pour que les grilles et colonnes de la maquette s'appliquent directement aux blocs enfants, et on retire les marges ajoutées par l'éditeur. */ .entry-content .wp-block-group > .wp-block-group__inner-container { display: contents; } .entry-content :is(.stack, .theo, .logistique, .logi-grille, .cta-fin, .timeline, .act-rows, .act-row, .contact-grid, .channels, .nocar, .quote, .logi-grille > .wp-block-group, .timeline > .wp-block-group, .channels > .wp-block-group) > .wp-block-group__inner-container > * { margin-block: 0; } .entry-content :is(.stack, .theo, .logistique, .cta-fin, .act-row, .contact-grid, .channels, .nocar, .quote) > * { margin-block: 0; } .entry-content .wrap > .wp-block-group__inner-container > * + * { margin-block-start: 16px; } .entry-content .band p, .entry-content .band h2, .entry-content .band h3 { margin-top: 0; } .entry-content .wp-block-image { margin: 0; } .entry-content .wp-block-image img { border-radius: var(--r); } .page-head .wp-block-image img, .hero .wp-block-image img { border-radius: 0; } /* Sections en blocs : mêmes rendus que la maquette */ .page-head .page-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; } .page-head .page-photo { position: static; } .theo .wp-block-image { position: relative; } .theo .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; max-width: 360px; } .theo .wp-block-image figcaption { position: absolute; right: -6px; bottom: 18px; margin: 0; background: var(--sun); color: var(--sun-ink); font-family: var(--font-hand); font-size: 1.5rem; padding: 4px 12px; border-radius: 8px; transform: rotate(-4deg); } .act-row .wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } @media (min-width: 820px) { .act-row:nth-child(even) > .wp-block-group__inner-container > .wp-block-image { order: 2; } } .wp-block-table.tarifs { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin: 0; } .wp-block-table.tarifs table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; } .wp-block-table.tarifs :is(th, td) { padding: 10px 12px; text-align: left; border: 0; border-bottom: 1px solid var(--line); } .wp-block-table.tarifs th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .wp-block-table.tarifs thead { border: 0; } .wp-block-details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; } .wp-block-details.faq summary { font-weight: 700; cursor: pointer; } .wp-block-details.faq p { margin: 8px 0 0; color: var(--muted); } .timeline > .wp-block-group__inner-container > .wp-block-group, .channels > .wp-block-group__inner-container > .wp-block-group { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; } .timeline .hand { font-size: 1.4rem; } .nocar p { color: rgb(243 245 238 / .82); } .nocar .stations p { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px dashed rgb(243 245 238 / .25); padding-bottom: 7px; margin: 0; color: var(--on-night); } .nocar .stations strong { font-family: var(--font-display); font-size: 1.1rem; min-width: 8.5ch; color: var(--sun); } /* Cartes en blocs (parcours, logistique, canaux) : pas de marges de paragraphe entre les lignes */ .entry-content :is(.timeline, .logi-grille, .channels, .quote) p { margin: 0; } .logi-grille .wp-block-html, .logi-grille svg { grid-row: span 2; } /* Repli du fil Instagram tant que le compte n'est pas relié */ .insta-lien { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; } .insta-lien b { font-family: var(--font-display); font-size: 1.2rem; } /* Accueil : encart « Votre accompagnateur ». Titre d'abord, photo moyenne à côté du texte ; sur téléphone, petite photo ronde à côté de la citation, puis le reste en pleine largeur. */ .accomp { display: grid; gap: 14px 28px; align-items: start; } @media (min-width: 760px) { .accomp { grid-template-columns: 220px 1fr; } } .accomp figure { margin: 0; } .accomp figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); } .accomp-texte { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .accomp .citation { font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.3rem); font-weight: 600; line-height: 1.35; margin: 0; } .accomp .bio { color: var(--muted); max-width: 62ch; margin: 0; } @media (max-width: 759px) { .accomp { grid-template-columns: 88px 1fr; } .accomp figure img { aspect-ratio: 1; border-radius: 50%; object-position: center 25%; } .accomp-texte { display: contents; } .accomp .bio, .accomp .forwho, .accomp-texte > .btn, .accomp-texte > .wp-block-buttons { grid-column: 1 / -1; } } /* Version en blocs : liste « à qui s'adressent » et conteneurs de l'éditeur */ .entry-content .accomp > .wp-block-group__inner-container, .entry-content .accomp-texte > .wp-block-group__inner-container { display: contents; } .entry-content .accomp-texte > .wp-block-group__inner-container > * { margin: 0; } ul.forwho { list-style: none; margin: 0; padding: 0; } ul.forwho li { display: flex; gap: 10px; align-items: flex-start; } ul.forwho li::before { content: ""; flex: none; width: 18px; height: 8px; margin-top: 9px; border-radius: 2px; background: var(--sun); } @media (max-width: 759px) { .accomp-texte .wp-block-buttons { grid-column: 1 / -1; } } .entry-content ul.forwho { padding-left: 0; margin-left: 0; } @media (max-width: 759px) { .entry-content .accomp .wp-block-image img { border-radius: 50%; aspect-ratio: 1; object-position: center 25%; } } /* Titres de section plus souples : surtitre manuscrit incliné, trait de pinceau jaune sous le titre. Ne concerne que le surtitre suivi d'un titre (les étiquettes « Durée », « Prix »… restent sobres). */ .eyebrow:has(+ h2), .eyebrow:has(+ .wp-block-heading) { font-family: var(--font-hand); font-size: 1.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--meadow); display: inline-block; transform: rotate(-2deg); transform-origin: left center; margin-bottom: -2px; line-height: 1; } .eyebrow + h2, .eyebrow + .wp-block-heading, .cta-fin .hand + h2, .logistique .hand + h2 { display: inline-block; align-self: flex-start; padding-bottom: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 90 4, 120 6 S 175 10, 197 5' fill='none' stroke='%23f4b62a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / min(100%, 220px) 12px; } /* Kadence applique à tous les