/* ===================================================================== Naicha Conseils — feuille de style du thème Les couleurs / rayons / polices variables viennent de tokens.json, imprimés dans (inc/tokens.php) : --brand, --page, --alt, --accent2, --serif, --sans, --hw, --fs-NN, --r-block, --r-card, --r-hero-photo… ===================================================================== */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); color: #3E322A; background: var(--page); -webkit-font-smoothing: antialiased; line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: #B5764F; text-decoration: none; transition: color .25s ease, background .25s ease, opacity .25s ease; } a:hover { color: var(--accent2); } ::selection { background: #DCC7B0; color: #3E322A; } input, textarea, select, button { font-family: var(--sans); font-size: inherit; } ul, ol { list-style: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto; background: #fff; color: #3E322A; padding: 10px 14px; border-radius: 8px; z-index: 100000; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .site { padding: 18px; overflow-x: hidden; } .center { text-align: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* ---------- typographie ---------- */ .t { font-family: var(--serif); font-weight: var(--hw); color: var(--brand); line-height: 1.12; text-wrap: pretty; } .accent { font-style: italic; color: #B5764F; } .t3 { font-family: var(--serif); font-weight: 600; color: #B5764F; margin-bottom: 9px; line-height: 1.25; } .t3--brand { color: var(--brand); } .t3--accent2 { color: var(--accent2); } .serif { font-family: var(--serif); } .fs-68 { font-size: var(--fs-68); } .fs-54 { font-size: var(--fs-54); } .fs-46 { font-size: var(--fs-46); } .fs-44 { font-size: var(--fs-44); } .fs-42 { font-size: var(--fs-42); } .fs-40 { font-size: var(--fs-40); } .fs-38 { font-size: var(--fs-38); } .fs-36 { font-size: var(--fs-36); } .fs-34 { font-size: var(--fs-34); } .fs-24 { font-size: var(--fs-24); } .fs-23 { font-size: 23px; } .fs-22 { font-size: var(--fs-22); } .fs-21 { font-size: var(--fs-21); } .kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #B5764F; margin-bottom: 14px; } .kicker--accent2 { color: var(--accent2); } .kicker--light { color: #C98A64; margin-bottom: 16px; } .kicker--band { color: var(--band-kicker); margin-bottom: 12px; } .kicker--warm { color: #C98A64; letter-spacing: .18em; } .lead { font-size: 18px; line-height: 1.8; color: var(--brand); margin-bottom: 20px; text-wrap: pretty; } .lead--md { font-size: 16.5px; margin-bottom: 18px; } .p-body { font-size: 17px; line-height: 1.85; color: #7A6858; margin-bottom: 20px; text-wrap: pretty; } .p-body--md { font-size: 16.5px; line-height: 1.8; } .p-body:last-child { margin-bottom: 0; } .section-text { font-size: 16px; line-height: 1.7; color: #7A6858; max-width: 560px; margin-bottom: 40px; text-wrap: pretty; } .link-more { font-size: 15px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 8px; } .link-more--sm { font-size: 13px; font-weight: 700; } .empty { font-size: 16px; color: #7A6858; font-style: italic; } .closing { font-family: var(--serif); font-style: italic; font-size: 24px; color: #B5764F; text-align: center; margin-top: 56px; } .mb-10 { margin-bottom: 10px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mt-54 { margin-top: 54px; } /* ---------- mise en page ---------- */ .container { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; } .container--narrow { max-width: 760px; } .container--mid { max-width: 860px; } .container--video { max-width: 1000px; } .block { border-radius: var(--r-block); padding: 74px 60px; } .block--alt { background: var(--alt); } .block--tight { padding: 60px; } .block--contact { padding: 66px 60px; } .block > .container { padding-left: 0; padding-right: 0; } .mt-56 { margin-top: 56px; } .mt-60 { margin-top: 60px; } .mt-78 { margin-top: 78px; } .mt-84 { margin-top: 84px; } .mt-86 { margin-top: 86px; } .mt-90 { margin-top: 90px; } .mt-96 { margin-top: 96px; } .grid { display: grid; gap: 18px; } .grid--5 { grid-template-columns: repeat(5, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; } .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid--2 { grid-template-columns: repeat(2, 1fr); gap: 26px; } .grid--gap-52 { gap: 52px; } .grid--gap-26 { gap: 26px; } .grid--gap-22 { gap: 22px; } .grid--start { align-items: start; } .stack { display: flex; flex-direction: column; gap: 18px; } .stack--12 { gap: 12px; } /* ---------- boutons ---------- */ .btn { display: inline-block; background: #B5764F; color: #F7F1E6; padding: 14px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; text-align: center; line-height: 1.2; white-space: nowrap; } .btn:hover { color: #F7F1E6; background: #A56841; } .btn--lg { padding: 15px 28px; font-size: 14.5px; } .btn--sm { padding: 11px 20px; font-size: 12.5px; } .btn--block { display: block; width: 100%; padding: 14px; white-space: normal; } .btn--brand { background: var(--brand); } .btn--brand:hover { background: var(--brand); opacity: .9; } .btn--cream { background: #F7F1E6; color: var(--brand); } .btn--cream:hover { background: #fff; color: var(--brand); } .btn--accent2 { background: var(--accent2); } .btn--accent2:hover { background: var(--accent2); opacity: .9; } .btn--outline { background: transparent; border: 1.5px solid rgba(247,241,230,.35); color: #F7F1E6; padding: 14px 26px; } .btn--outline:hover { background: rgba(247,241,230,.08); color: #F7F1E6; } .btn--outline-dark { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); } .btn--outline-dark:hover { background: var(--brand); color: #F7F1E6; } .btn-round { width: 46px; height: 46px; border-radius: 50%; background: #C98A64; color: #F7F1E6; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .btn-round:hover { color: #F7F1E6; background: #B5764F; } .btn-round--sm { width: 38px; height: 38px; font-size: 15px; } /* ---------- en-tête coloré ---------- */ .masthead { background: var(--brand); border-radius: var(--r-block); padding: 22px 26px 0; position: relative; overflow: hidden; } .masthead__circle { position: absolute; border-radius: 50%; pointer-events: none; } .masthead__circle--1 { inset: auto auto -150px -130px; width: 430px; height: 430px; border: var(--circle-1); } .masthead__circle--2 { inset: -130px -110px auto auto; width: 350px; height: 350px; border: 1.5px solid rgba(var(--accent2-rgb), .2); } .nav { position: relative; display: flex; align-items: center; gap: 18px; padding: 6px 6px 0; } .nav__brand, .nav__brand:hover { color: #F7F1E6; flex-shrink: 0; } .brand { display: inline-flex; align-items: center; gap: 12px; color: #F7F1E6; } .brand__mark { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand__mark span { position: absolute; width: 21px; height: 21px; border: 1.4px solid #C98A64; border-radius: 50% 0 50% 0; transform: rotate(-45deg); } .brand__mark span:nth-child(2) { border-color: rgba(var(--accent2-rgb), .85); transform: rotate(45deg); } .brand__mark span:nth-child(3) { width: 4px; height: 4px; border: 0; border-radius: 50%; background: #C98A64; transform: none; } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--serif); font-size: 23px; font-weight: 500; } .brand__sub { font-size: 8.5px; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: #C98A64; margin-top: 4px; } .nav__links { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; margin-left: auto; scrollbar-width: none; } .nav__links::-webkit-scrollbar { display: none; } .nav__link { white-space: nowrap; flex-shrink: 0; font-weight: 600; } .nav-pills .nav__link { padding: 9px 16px; border-radius: 999px; font-size: 12.5px; background: #F7F1E6; color: var(--brand); } .nav-pills .nav__link:hover { background: #fff; color: var(--brand); } .nav-pills .nav__link.is-active { background: #B5764F; color: #F7F1E6; } .nav-tabs .nav__links { gap: 20px; } .nav-tabs .nav__link { padding: 9px 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,241,230,.72); border-bottom: 1.5px solid transparent; } .nav-tabs .nav__link:hover { color: #F7F1E6; } .nav-tabs .nav__link.is-active { color: #F7F1E6; border-bottom-color: var(--nav-tab-active); } .nav__cta { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .nav__toggle { display: none; } /* hero (accueil) */ .hero__grid { position: relative; display: grid; grid-template-columns: 1fr .78fr; gap: 44px; align-items: end; padding: 34px 6px 0; } .hero__body { padding-bottom: 74px; } .hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid rgba(201,138,100,.5); border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #DCC7B0; margin-bottom: 30px; } .hero__dot { color: #C98A64; } .hero__title { font-family: var(--serif); font-weight: var(--hw); font-size: var(--fs-68); line-height: 1.01; letter-spacing: -.015em; color: #F7F1E6; margin-bottom: 24px; text-wrap: pretty; } .hero__title .accent { color: #C98A64; } .hero__title .accent:nth-of-type(2) { color: var(--accent2-soft); } .hero__text { font-size: 17px; line-height: 1.7; color: #D6C4B2; max-width: 460px; margin-bottom: 34px; text-wrap: pretty; } .hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .photo { background-color: #E3D3C0; background-size: cover; background-position: center; overflow: hidden; } .photo--hero { height: 560px; border-radius: var(--r-hero-photo); background-color: var(--photo-bg); } .photo--about { height: 500px; border-radius: var(--r-photo-about); } .photo--portrait { height: 470px; border-radius: var(--r-photo-portrait); } .photo--accomp { height: 440px; border-radius: var(--r-photo-accomp); } .hero__stat { position: relative; background: #F7F1E6; border-radius: var(--r-stat); padding: 16px 26px; display: inline-flex; align-items: center; gap: 26px; flex-wrap: wrap; } .hero__stat-item { display: flex; align-items: center; gap: 14px; } .hero__stat-number { font-family: var(--serif); font-size: 32px; color: var(--accent2); line-height: 1; } .hero__stat-label { font-size: 12.5px; font-weight: 600; color: #57493F; line-height: 1.35; } .hero__stat-sep { width: 1px; height: 34px; background: rgba(var(--brand-rgb), .14); } .hero__stat-small { font-size: 11px; color: #8B7867; font-weight: 600; } .hero__stat-big { font-family: var(--serif); font-size: 17px; color: #B5764F; font-weight: 600; } /* en-tête des pages intérieures */ .page-head { position: relative; max-width: 820px; margin: 0 auto; padding: 56px 20px 78px; text-align: center; } .page-head__title { font-family: var(--serif); font-weight: var(--hw); font-size: var(--fs-54); line-height: 1.06; color: #F7F1E6; margin-bottom: 20px; text-wrap: pretty; } .page-head__intro { font-size: 17.5px; line-height: 1.75; color: #D6C4B2; text-wrap: pretty; } /* ---------- cartes & motifs ---------- */ .card { background: #fff; border-radius: var(--r-card); padding: 32px 26px; text-align: left; } .card--lift { transition: transform .3s ease, box-shadow .3s ease; } .card--lift:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px rgba(var(--brand-rgb), .35); } .card--tight { padding: 30px 26px; } .card--row { padding: 26px 28px; } .card--row .t3 { margin-bottom: 8px; } .card--md { border-radius: var(--r-card-md); padding: 32px 28px; } .card--faq { padding: 26px 30px; } .card__text { font-size: 14.5px; line-height: 1.7; color: #7A6858; } .card__text--faq { line-height: 1.75; } .medaillon { width: 46px; height: 46px; border: 1.5px solid #C98A64; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; } .medaillon__leaf { width: 15px; height: 15px; border: 1.5px solid #C98A64; border-radius: 50% 0 50% 0; display: block; } .medaillon--sm { width: 42px; height: 42px; margin-bottom: 18px; } .medaillon--sm .medaillon__leaf { width: 14px; height: 14px; } .medaillon--accent2, .medaillon--accent2 .medaillon__leaf { border-color: var(--accent2); } .leaf { width: 13px; height: 13px; border: 1.4px solid var(--accent2); border-radius: 50% 0 50% 0; flex-shrink: 0; display: inline-block; } .leaf--sm { width: 11px; height: 11px; border-width: 1.3px; margin-top: 5px; } .pilier__desc { font-size: 13.5px; line-height: 1.7; color: #7A6858; } .pilier__desc--sm { font-size: 13px; } /* ---------- accueil ---------- */ .piliers { padding: 86px 22px 0; text-align: center; } .piliers > .container { padding-left: 0; padding-right: 0; } .piliers__text { font-size: 16px; line-height: 1.7; color: #7A6858; max-width: 560px; margin: 16px auto 52px; text-wrap: pretty; } .histoire__grid { display: grid; grid-template-columns: .8fr 1fr; gap: 66px; align-items: center; } .histoire__title { margin-bottom: 24px; line-height: 1.1; } .histoire__p { font-size: 16.5px; line-height: 1.8; color: #7A6858; margin-bottom: 18px; max-width: 520px; text-wrap: pretty; } .histoire__p:last-of-type { margin-bottom: 32px; } .offres__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; } .offres__head .kicker { margin-bottom: 12px; } .offres__head .t { line-height: 1.1; } .offres__text { font-size: 15px; color: #7A6858; max-width: 320px; line-height: 1.65; } .offer { background: #fff; border-radius: var(--r-card-lg); overflow: hidden; display: flex; flex-direction: column; } .offer__img { display: block; height: 250px; position: relative; background: #E3D3C0 center 35% / cover no-repeat; } .offer__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--brand-rgb), .82), rgba(var(--brand-rgb), .05) 62%); } .offer__title { position: absolute; left: 26px; right: 26px; bottom: 22px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.14; color: #F7F1E6; } .offer__body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; gap: 20px; } .offer__body p { font-size: 14.5px; line-height: 1.7; color: #7A6858; flex: 1; } /* bandeau guide */ .band { background: var(--accent2); border-radius: var(--r-block-lg); padding: 54px 58px; display: grid; grid-template-columns: 1.25fr .85fr; gap: 48px; align-items: center; color: #F7F1E6; position: relative; overflow: hidden; } .band__circle { position: absolute; inset: auto -70px -90px auto; width: 280px; height: 280px; background: rgba(247,241,230,.09); border-radius: 50%; } .band__content { position: relative; } .band__title { color: #F7F1E6; margin-bottom: 16px; line-height: 1.1; } .band__text { font-size: 16px; line-height: 1.7; color: var(--band-text); max-width: 440px; margin-bottom: 28px; } .guide-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 460px; position: relative; } .guide-form__input { flex: 1; min-width: 200px; padding: 15px 20px; border-radius: 999px; border: 0; font-size: 15px; color: #3E322A; background: #F7F1E6; } .guide-form__input:focus { outline: 2px solid #F7F1E6; outline-offset: 2px; } .guide-form .btn { padding: 15px 26px; } .guide-form__msg { font-size: 12.5px; color: var(--band-kicker); margin-top: 12px; min-height: 16px; } .band__book-wrap { position: relative; display: flex; justify-content: center; } .band__book { width: 190px; aspect-ratio: 3 / 4; background: rgba(247,241,230,.14); border-radius: 8px 14px 14px 8px; border-left: 6px solid rgba(var(--brand-rgb), .45); box-shadow: 0 30px 50px -22px rgba(0,0,0,.35); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; } .band__book-title { font-family: var(--serif); font-style: italic; font-size: 26px; color: #F7F1E6; line-height: 1.15; } .band__book-note { font-size: 10px; color: var(--band-kicker); margin-top: 14px; letter-spacing: .1em; } .band__cover { width: 190px; border-radius: 8px 14px 14px 8px; box-shadow: 0 30px 50px -22px rgba(0,0,0,.35); } /* ---------- à propos ---------- */ .portrait { display: grid; grid-template-columns: .62fr 1fr; gap: 60px; align-items: center; } .prose-block h2 { margin-bottom: 20px; } .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .tag { padding: 9px 18px; border-radius: 999px; background: var(--alt); color: #57493F; font-size: 14px; font-weight: 600; } .quote { border-left: 2px solid #B5764F; padding: 6px 0 6px 26px; margin: 34px 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--brand); } .oser { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; } .oser li { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-size: 21px; color: var(--brand); } .vision__head { text-align: center; margin-bottom: 40px; } .vision__text { font-size: 16px; line-height: 1.7; color: #7A6858; max-width: 600px; margin: 14px auto 0; text-wrap: pretty; } .cta-dark { background: var(--brand); border-radius: var(--r-block-lg); padding: 60px 56px; text-align: center; color: #F7F1E6; position: relative; overflow: hidden; } .cta-dark--quote { padding: 66px 56px; } .cta-dark__circle { position: absolute; inset: auto auto -80px -70px; width: 260px; height: 260px; border: 1.5px solid rgba(181,118,79,.3); border-radius: 50%; } .cta-dark__content { position: relative; } .cta-dark__quote { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1.4; max-width: 720px; margin: 0 auto 26px; text-wrap: pretty; } .cta-dark__sub { font-size: 15.5px; color: #D6C4B2; margin-bottom: 32px; } .cta-dark__title { color: #F7F1E6; margin-bottom: 16px; } .cta-dark__text { font-size: 16px; line-height: 1.7; color: #D6C4B2; max-width: 520px; margin: 0 auto 30px; } /* ---------- ateliers ---------- */ .formule { border-radius: var(--r-block); padding: 42px 40px; display: flex; flex-direction: column; gap: 22px; } .formule--light { background: #fff; --f-ink: var(--brand); --f-body: #7A6858; --f-accent: #B5764F; --f-btn-bg: #B5764F; --f-btn-fg: #F7F1E6; } .formule--dark { background: var(--brand); --f-ink: #F7F1E6; --f-body: #D6C4B2; --f-accent: #C98A64; --f-btn-bg: #F7F1E6; --f-btn-fg: var(--brand); } .formule__kicker { color: var(--f-accent); letter-spacing: .18em; margin-bottom: 12px; } .formule__title { color: var(--f-ink); margin-bottom: 14px; } .formule__desc { font-size: 15.5px; line-height: 1.7; color: var(--f-body); } .formule__points { display: flex; flex-direction: column; gap: 11px; } .formule__points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--f-body); } .formule__points .leaf { border-color: var(--f-accent); } .formule__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .formule__price { font-family: var(--serif); font-size: 26px; color: var(--f-ink); } .formule__btn, .formule__btn:hover { background: var(--f-btn-bg); color: var(--f-btn-fg); } .formule__btn:hover { opacity: .9; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; } .badge { padding: 8px 16px; border-radius: 999px; background: var(--alt); color: var(--accent2); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; } .atelier { background: #fff; border-radius: var(--r-card-xl); overflow: hidden; display: flex; flex-direction: column; } .atelier__img { height: 270px; position: relative; background: #E3D3C0 center 40% / cover no-repeat; } .atelier__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--brand-rgb), .84), rgba(var(--brand-rgb), .05) 60%); } .atelier__tarif { position: absolute; top: 20px; left: 22px; background: #F7F1E6; color: var(--brand); padding: 7px 15px; border-radius: 999px; font-size: 12px; font-weight: 700; } .atelier__title { position: absolute; left: 24px; right: 24px; bottom: 22px; font-family: var(--serif); font-weight: 500; font-size: 29px; line-height: 1.14; color: #F7F1E6; } .atelier__body { padding: 26px 28px 28px; flex: 1; display: flex; flex-direction: column; gap: 18px; } .atelier__desc { font-size: 14.5px; line-height: 1.7; color: #7A6858; flex: 1; } .atelier__desc p + p { margin-top: 10px; } .atelier__dates { font-size: 12px; color: var(--accent2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* ---------- accompagnement ---------- */ .accomp-intro { display: grid; grid-template-columns: 1fr .62fr; gap: 60px; align-items: center; } .accomp-intro h2 { margin-bottom: 20px; } .accomp-intro__text { line-height: 1.8; max-width: 520px; margin-bottom: 30px; } .etape__num { font-family: var(--serif); font-size: 34px; color: #DCC7B0; line-height: 1; margin-bottom: 18px; } .etape .t3 { margin-bottom: 10px; } .etape__desc { font-size: 14px; line-height: 1.7; color: #7A6858; } .duo { border-radius: var(--r-block); padding: 46px 44px; } .duo--dark { background: var(--brand); color: #F7F1E6; } .duo--light { background: #fff; } .duo__title { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.12; margin-bottom: 16px; } .duo--light .duo__title { color: var(--brand); } .duo__text { font-size: 15.5px; line-height: 1.7; margin-bottom: 28px; } .duo--dark .duo__text { color: #D6C4B2; } .duo--light .duo__text { color: #7A6858; } .duo .btn { padding: 13px 24px; } /* ---------- business ---------- */ .video { border-radius: var(--r-block); overflow: hidden; background: var(--brand); aspect-ratio: 16 / 9; position: relative; } .video video, .video iframe { width: 100%; height: 100%; display: block; object-fit: cover; border: 0; } .video--embed > * { width: 100%; height: 100%; } .video--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; } .video__bg { position: absolute; inset: 0; background: center 20% / cover no-repeat; opacity: .28; } .video__play { position: relative; width: 76px; height: 76px; border-radius: 50%; background: rgba(247,241,230,.92); display: flex; align-items: center; justify-content: center; color: #B5764F; font-size: 24px; } .video__label { position: relative; text-align: center; } .video__title { font-family: var(--serif); font-style: italic; font-size: 26px; color: #F7F1E6; } .video__note { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: #D6C4B2; margin-top: 8px; } .repere .t3 { margin-bottom: 10px; } .contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; } .contact__title { margin-bottom: 18px; line-height: 1.1; } .contact__text { font-size: 16px; line-height: 1.75; color: #7A6858; margin-bottom: 26px; text-wrap: pretty; } .contact__quote { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent2); line-height: 1.45; } .form { display: flex; flex-direction: column; gap: 15px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .input { width: 100%; padding: 15px 18px; border-radius: var(--r-input); border: 1px solid rgba(var(--accent2-rgb), .35); font-size: 15px; background: #fff; color: #3E322A; } .input::placeholder { color: #9C8B7B; } .input--select { color: #7A6858; appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B5764F' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; } textarea.input { resize: vertical; min-height: 120px; } .input:focus { outline: 2px solid #B5764F; outline-offset: 1px; } .form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: #7A6858; cursor: pointer; } .form__consent input { margin-top: 3px; accent-color: #B5764F; } .form .btn--block { padding: 16px; font-size: 15px; } .form__msg { font-size: 12.5px; color: var(--accent2); text-align: center; min-height: 16px; } .form__msg--error { color: #B5764F; font-weight: 600; } /* ---------- témoignages ---------- */ .temoignage { background: #fff; border-radius: var(--r-card-lg); padding: 34px 32px; } .temoignage__mark { font-family: var(--serif); font-size: 48px; color: #DCC7B0; line-height: .6; margin-bottom: 18px; } .temoignage__quote { font-size: 15.5px; line-height: 1.8; color: #57493F; margin-bottom: 24px; text-wrap: pretty; } .temoignage__author { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(var(--accent2-rgb), .18); padding-top: 20px; } .temoignage__avatar { width: 42px; height: 42px; border-radius: 50%; background: #E3D3C0 center / cover no-repeat; flex-shrink: 0; } .temoignage__name { font-size: 14.5px; font-weight: 700; color: var(--brand); } .temoignage__role { font-size: 12.5px; color: var(--accent2); font-weight: 600; } /* ---------- ressources ---------- */ .ressource { padding: 34px 32px; display: flex; flex-direction: column; gap: 14px; } .ressource__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .ressource__head .medaillon { margin-bottom: 0; } .ressource__kind { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent2); } .ressource__title { line-height: 1.2; margin: 0; } .ressource__title a { color: inherit; } .ressource__desc { font-size: 13.5px; line-height: 1.7; color: #7A6858; flex: 1; } /* ---------- pied de page ---------- */ .footer { background: var(--brand); color: #D6C4B2; border-radius: var(--r-block); margin-top: 96px; padding: 60px 60px 40px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; padding: 0; } .brand--footer { margin-bottom: 16px; } .brand--footer .brand__name { color: #F7F1E6; } .footer__tagline { font-size: 14.5px; line-height: 1.7; color: #C4B4A3; max-width: 320px; } .footer__title { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent2); margin-bottom: 16px; } .footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; } .footer__links a { color: #D6C4B2; } .footer__links a:hover { color: #F7F1E6; } .footer__bottom { margin-top: 44px; padding: 24px 0 0; border-top: 1px solid rgba(214,196,178,.18); font-size: 12.5px; color: #9C8B7B; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer__legal a { color: #9C8B7B; } .footer__legal a:hover { color: #F7F1E6; } /* ---------- pages simples & fiches (contenu Gutenberg) ---------- */ .prose { font-size: 17px; line-height: 1.85; color: #7A6858; } .prose h2 { font-family: var(--serif); font-weight: var(--hw); font-size: var(--fs-34); color: var(--brand); margin: 40px 0 16px; line-height: 1.15; } .prose h3 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-22); color: #B5764F; margin: 30px 0 12px; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p, .prose ul, .prose ol, .prose figure, .prose table { margin-bottom: 20px; } .prose ul { list-style: disc; padding-left: 22px; } .prose ol { list-style: decimal; padding-left: 22px; } .prose blockquote { border-left: 2px solid #B5764F; padding: 6px 0 6px 26px; margin: 34px 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--brand); } .prose blockquote p { margin: 0; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose img { border-radius: var(--r-card); } .prose__cover { width: 100%; max-height: 460px; object-fit: cover; margin-bottom: 30px; border-radius: var(--r-card-lg); } .prose__meta { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); } .prose__back { margin-top: 40px; } .prose .wp-block-button__link { display: inline-block; background: #B5764F; color: #F7F1E6; padding: 14px 26px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; } .prose table { width: 100%; border-collapse: collapse; font-size: 15px; } .prose td, .prose th { border-bottom: 1px solid rgba(var(--accent2-rgb), .25); padding: 10px 8px; text-align: left; } /* ===================================================================== Responsive — maquettes dessinées en 1440 px ===================================================================== */ @media (max-width: 1100px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .hero__grid { grid-template-columns: 1fr .72fr; gap: 30px; } .hero__title { font-size: calc(var(--fs-68) * .8); } .block { padding: 56px 40px; } .block--tight, .block--contact { padding: 50px 40px; } .footer { padding: 50px 40px 30px; } .band { padding: 44px 40px; } .formule { padding: 34px 30px; } .contact { gap: 36px; } } @media (max-width: 820px) { .site { padding: 12px; } .masthead { padding: 16px 18px 0; } .nav { flex-wrap: wrap; gap: 12px; } .nav__toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; margin-left: auto; background: transparent; border: 1.5px solid rgba(247,241,230,.35); border-radius: 50%; cursor: pointer; padding: 0; order: 3; } .nav__toggle span { display: block; width: 18px; height: 1.5px; background: #F7F1E6; transition: transform .25s ease, opacity .25s ease; } .nav--open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav--open .nav__toggle span:nth-child(2) { opacity: 0; } .nav--open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav__cta { order: 2; margin-left: auto; } .nav__cta .btn-round { display: none; } .nav__links { display: none; flex-direction: column; align-items: stretch; flex-basis: 100%; order: 4; gap: 6px; padding: 12px 0 8px; overflow: visible; margin-left: 0; } .nav--open .nav__links { display: flex; } .nav-pills .nav__link { text-align: center; padding: 12px 16px; } .nav-tabs .nav__links { gap: 4px; } .nav-tabs .nav__link { border-bottom: 0; padding: 12px 6px; text-align: center; border-radius: 8px; } .nav-tabs .nav__link.is-active { background: rgba(247,241,230,.1); } .hero__grid { grid-template-columns: 1fr; gap: 26px; padding: 26px 0 0; } .hero__body { padding-bottom: 26px; } .hero__badge { margin-bottom: 22px; } .hero__title { font-size: clamp(36px, 9vw, 44px); } .photo--hero { height: 420px; } .hero__stat { margin-top: 18px; } .page-head { padding: 36px 8px 52px; } .page-head__title { font-size: clamp(32px, 8vw, 42px); } .page-head__intro { font-size: 16px; } .fs-46, .fs-44, .fs-42, .fs-40, .fs-38, .fs-36 { font-size: clamp(28px, 7vw, 34px); } .fs-34 { font-size: clamp(26px, 6.5vw, 30px); } .histoire__grid, .portrait, .accomp-intro, .contact, .grid--2 { grid-template-columns: 1fr; } .histoire__grid { gap: 30px; } .accomp-intro > .photo { order: -1; } .grid--3 { grid-template-columns: 1fr 1fr; } .photo--about, .photo--portrait, .photo--accomp { height: 380px; } .block { padding: 44px 22px; } .block--tight, .block--contact { padding: 40px 22px; } .band { grid-template-columns: 1fr; padding: 34px 24px; } .band__book-wrap { display: none; } .footer { padding: 44px 22px 24px; } .footer__grid { grid-template-columns: 1fr; gap: 28px; } .cta-dark, .cta-dark--quote { padding: 44px 24px; } .cta-dark__quote { font-size: 26px; } .duo { padding: 34px 26px; } .formule { padding: 30px 24px; } .mt-96, .mt-90, .mt-86, .mt-84 { margin-top: 64px; } .mt-78 { margin-top: 56px; } .mt-60, .mt-56 { margin-top: 44px; } .piliers { padding: 64px 0 0; } .closing { font-size: 21px; margin-top: 40px; } .oser li { font-size: 19px; } } @media (max-width: 600px) { .site { padding: 10px; } .grid--5, .grid--4, .grid--3 { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } .hero__actions .btn-round { display: none; } .hero__actions .btn { flex: 1 1 auto; } .photo--hero { height: 340px; } .hero__stat { display: flex; width: 100%; gap: 18px; } .guide-form .btn { width: 100%; } .offres__head { align-items: flex-start; } .section-head { align-items: flex-start; } .formule__foot .btn { width: 100%; } .lead, .p-body { font-size: 16px; } }