/* Maquette THILA : dispositions, couleurs et hiérarchie des pages fournies. */
.theme-text { color: var(--custom-text); }
.theme-text :where(h1,h2,h3,h4,p,em,b,cite,.lead,.eyebrow,.text-link,.keywords,.signature) { color: var(--custom-text) !important; }
.offer-image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 22px; }
.service-image { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 440px; object-fit: cover; margin-bottom: 32px; }
footer .brand-logo.brand-footer-light img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; mix-blend-mode: normal; }
.service-links { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 32px; }
.service-page h1 { font-size: clamp(36px, 4.5vw, 62px); overflow-wrap: anywhere; }
.service-page .eyebrow { margin-top: 28px; }
body { font-size: 16px; color: #3a3a3f; }
h1,h2,h3 { color: #1f3747; }
h1 em,h2 em { color: var(--blue); font-weight: 500; }
.header { background: #f7f5ee; }
html { scroll-padding-top: 112px; }
.brand-logo { display: block; position: relative; width: 160px; height: 112px; flex-shrink: 0; overflow: hidden; background: #002632; letter-spacing: normal; }
.brand-logo img { position: absolute; width: 190%; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.header .nav { padding-block: 8px; }
.header .brand-header { width: 180px; height: 76px; background: transparent; }
.header .brand-header img { position: static; width: 100%; height: 100%; object-fit: contain; transform: none; }
footer .brand-logo { width: 180px; height: 126px; margin-bottom: 20px; background: transparent; }
footer .brand-logo img { mix-blend-mode: lighten; }
@media(max-width:900px) { html { scroll-padding-top: 100px; } .header .brand-header { width: 140px; height: 56px; } }
.hero-grid { grid-template-columns: 1.15fr 1fr; min-height: 650px; gap: 62px; }
.hero h1 { font-size: clamp(48px, 5.25vw, 76px); max-width: 650px; }
.hero-visual { margin: 0; }
.hero-visual .portrait { object-position: center; }
.reference-caption { position: absolute; bottom: -12px; width: 100%; left: 0; text-align: center; font-size: 10px; letter-spacing: .03em; color: #5d6f7b; }
.hero-note { z-index: 3; }
.values > .container { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; }
.values b { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); font-weight: 600; }
.values span { color: #805b43; }
#vision { background: #fff; }
#vision .split { gap: 90px; }
#vision h2 { max-width: 640px; }
blockquote { background: #e6eff3; }
.offers { background: var(--ivory); }
.section-heading { text-align: left; max-width: none; margin: 0 0 44px; }
.section-heading h2 { max-width: 750px; }
.section-heading .lead { max-width: 750px; margin-inline: 0; }
.offer-card { background: #fff; padding: 34px 30px 28px; }
.offer-card:nth-child(2) { background: #edf4f7; }
.offer-card h3 { font-size: 33px; min-height: 80px; }
.offer-card > p:not(.eyebrow) { font-size: 14px; }
.offer-card .offer-number { font: 17px Cormorant,Georgia,serif; color: #805b43; margin-bottom: 28px; }
.offer-card .offer-cta { display: flex; justify-content: space-between; border-top: 1px solid #dde4e7; padding-top: 22px; margin-top: auto; font-size: 12px; }
.approach { background: #e8f1f5; }
.approach .section-heading h2 { max-width: 820px; }
.steps { gap: 42px; }
.steps article { text-align: left; padding: 22px 0 0; border-top: 1px solid #91afc2; }
.step-number { border: 0; width: auto; height: auto; margin-bottom: 18px; display: block; font: italic 35px/1 Cormorant,Georgia,serif; background: transparent; color: #805b43; }
.steps h3 { font-size: 31px; }
.steps p { font-size: 15px; }
.story { background: white; }
.story .split { grid-template-columns: .8fr 1.2fr; gap: 76px; align-items: start; }
.story-visual { width: 100%; position: relative; max-width: none; margin-top: 55px; min-height: 520px; overflow: hidden; background: #e6eff3; }
.story-monogram,.story-visual > img { border-radius: 0; height: 520px; border: 0; }
.story-monogram { background: radial-gradient(ellipse at 12% 30%,#f4f8f8 0 32%,transparent 32.5%),#e5eff3; position: relative; }
.story-monogram:after { content: ''; position: absolute; width: 500px; height: 500px; border: 1px solid #c89b7b88; border-radius: 50%; left: 90px; top: 190px; }
.story-monogram > span { font: 150px/1 Cormorant,Georgia,serif; color: #aac3d1; }
.story-caption { position: absolute; bottom: 20px; left: 20px; right: 20px; background: var(--ivory); padding: 22px; }
.story-caption .eyebrow { margin-bottom: 10px; }
.story-caption .rich-text p { font: italic 26px/1.2 Cormorant,Georgia,serif; color: var(--blue); margin-bottom: 0; }
.story-copy h2 { font-size: 57px; }
.story-copy p,.story-copy .rich-text { font-size: 15px; }
.signature { border-top: 1px solid #e9d5c6; text-align: left; font-style: italic; color: var(--blue); padding: 21px 0 10px; margin-top: 26px; }
.signature span { font-style: normal; }
.editorial-note { display: inline-block; padding: 5px 9px; border: 1px solid #bfd0da; background: #f1f6f8; color: #405f74; font-size: 10px !important; letter-spacing: .07em; line-height: 1.7; }
.demo-articles { margin: 24px 0 0; }
.story-copy > .text-link { display: block; margin-top: 18px; }
.journal { background: var(--ivory); }
.heading-row h2 { max-width: 820px; }
.article-card { border: 1px solid #d9e3e9; }
.article-card img { height: auto; aspect-ratio: 2.15; }
.article-info { padding: 26px; }
.article-info .article-title { font-size: 29px; }
.article-info .eyebrow { font-size: 9px; margin-bottom: 16px; }
.article-info > p:not(.eyebrow) { font-size: 14px; }
.article-link { display: flex; flex-direction: column; }
.article-info { display: flex; flex-direction: column; flex: 1; }
.article-info .text-link { margin-top: auto; padding-top: 8px; }
.contact { background: #214e6b; color: #e2ecf1; position: relative; overflow: hidden; }
.contact:before { content: ''; position: absolute; width: 550px; height: 550px; border: 1px solid #d2c1aa88; border-radius: 50%; top: -370px; left: -150px; pointer-events: none; }
.contact .split { position: relative; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact h2 { color: white; }
.contact .eyebrow { color: #e0c9b6; }
.contact .lead { color: #dae5ec; font-size: 17px; }
.contact-back { background: white; color: var(--blue); border-color: white; }
.contact-back:hover { background: var(--ivory); color: var(--blue); }
.contact-form { background: white; padding: 34px; color: #526574; }
.contact-form .form-row { margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input,textarea { border-color: #b8c8d1; background: white; }
label { font-size: 12px; color: var(--blue); }
.form-errors { margin: 8px 0 0; padding-left: 18px; color: #8b2d24; font-size: 13px; }
[aria-invalid=true] { border: 2px solid #9f3a2c; }
.form-note { color: #5b6d77; }
footer { background: #193e55; color: #dae5ec; padding-top: 42px; }
footer .brand { color: white; }
footer nav { gap: 25px; flex-wrap: wrap; }
footer nav a { font-size: 12px; }
footer a:hover { color: white; text-decoration: underline; }
.footer-top { align-items: center; padding-bottom: 28px; }
.footer-top p { color: #cadbe5; }
.footer-bottom { border-color: #426075; font-size: 11px; }
.blog-hero { background: linear-gradient(110deg,#e7eff3,var(--ivory)); padding-block: 60px 85px; position: relative; overflow: hidden; }
.blog-hero:after { content: ''; width: 440px; height: 440px; border: 1px solid #c89b7b88; border-radius: 50%; position: absolute; right: 3%; top: -180px; pointer-events: none; }
.blog-hero .container { position: relative; z-index: 1; }
.blog-hero .text-link { margin-bottom: 28px; }
.blog-hero h1 { max-width: 900px; font-size: clamp(45px,5vw,72px); }
.blog-hero h1 em { display: block; }
.blog-hero .lead { max-width: 640px; }
.blog-list { padding-top: 55px; padding-bottom: 90px; }
.filters { justify-content: flex-start; gap: 10px; }
.filters a { font-size: 11px; padding: 9px 16px; background: #f4f4f0; }
.filters a[aria-current] { background: #214e6b; }
.blog-feedback:not(.is-error) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pagination { gap: 20px; }
.pagination > span { font-size: 13px; }
.article-page { background: white; padding-block: 55px 85px; }
.article-reading { max-width: 780px; }
.article-header .text-link { margin-bottom: 25px; }
.article-header h1 { font-size: clamp(42px,4.8vw,62px); margin-bottom: 32px; }
.article-header .eyebrow { margin-top: 0; }
.article-header .lead { font-size: 16px; margin-bottom: 30px; }
.article-date { font-size: 12px; color: #5b6d77; margin-bottom: 24px; }
.article-page .article-cover { width: 100%; max-height: 450px; aspect-ratio: 2.15; object-fit: cover; margin: 0 0 35px; }
.article-body { font-size: 16px; line-height: 1.9; }
.article-body h2 { font-size: 37px; }
.article-end { display: flex; gap: 25px; align-items: center; flex-wrap: wrap; padding: 28px 0 0; margin-top: 30px; }
.preview-banner { background: #e7f0f4; color: var(--blue); padding: 16px; text-align: center; margin-bottom: 35px; font-size: 13px; }
.preview-banner a { text-decoration: underline; }
.legal-page .reading { max-width: 850px; }
.legal-page .page-intro { text-align: left; }
@media(max-width:1000px) {
    .hero-grid { gap: 35px; }
    #vision .split { gap: 40px; }
    .story .split { gap: 40px; }
    .story-copy h2 { font-size: 48px; }
    .contact .split { gap: 35px; }
    .contact-form { padding: 27px; }
}
@media(max-width:900px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 53px; }
    .offer-card { padding: 25px 22px; }
    .offer-card h3 { font-size: 29px; }
    .steps h3 { font-size: 29px; }
    .values > .container { grid-template-columns: auto 1fr; gap: 8px 15px; }
    .form-grid { grid-template-columns: 1fr; gap: 0; }
}
@media(max-width:650px) {
    body { font-size: 15px; }
    .hero-grid { grid-template-columns: 1fr; padding-block: 40px 55px; }
    .hero h1 { font-size: 46px; }
    .hero .eyebrow { font-size: 9px; }
    .hero-visual { margin: 15px auto 0; }
    .hero .button-row { gap: 10px; }
    .hero .button { padding: 12px 17px; }
    .hero-visual .portrait { height: 355px; }
    .reference-caption { bottom: -15px; font-size: 9px; }
    .section-heading h2 { font-size: 40px; }
    .offer-card { padding: 30px; }
    .offer-card h3 { font-size: 34px; min-height: auto; max-width: 260px; }
    .offer-card .offer-number { font-size: 18px; }
    .offer-card .offer-cta { font-size: 12px; }
    .steps { gap: 20px; }
    .steps article { display: block; padding-top: 20px; }
    .steps .step-number { width: auto; height: auto; margin-bottom: 15px; }
    .steps h3 { font-size: 32px; }
    .story .split,.contact .split { grid-template-columns: 1fr; }
    .story-copy { grid-row: 1; }
    .story-copy h2 { font-size: 42px; }
    .story-visual { width: 100%; min-height: 420px; margin: 0; }
    .story-monogram,.story-visual > img { height: 420px; }
    .story-caption .rich-text p { font-size: 26px; }
    .signature { font-size: 27px; }
    .journal .heading-row h2 { font-size: 40px; }
    .contact h2 { font-size: 42px; }
    .contact .lead { font-size: 15px; }
    .contact-form { padding: 25px; }
    .form-grid { grid-template-columns: 1fr; }
    .footer-top { align-items: flex-start; }
    footer nav { gap: 15px 25px; }
    .footer-bottom { gap: 20px; }
    .blog-hero { padding-block: 35px 55px; }
    .blog-hero h1 { font-size: 46px; }
    .blog-hero .lead { font-size: 16px; }
    .blog-list { padding-top: 35px; }
    .article-page { padding-block: 35px 55px; }
    .article-header h1 { font-size: 43px; }
    .article-body h2 { font-size: 34px; }
    .article-end { margin-inline: 0; }
}
/* Les cartes restent dans la largeur disponible, y compris à 320 px et au zoom. */
.offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-card,.article-card,.split > * { min-width: 0; }
.offer-card h3,.article-card .article-title,.article-body { overflow-wrap: anywhere; hyphens: auto; }
@media(max-width:650px) { .offer-grid { grid-template-columns: minmax(0, 1fr); } }