
/* La Clé du Rhône — thème clair, photos du site original. */
:root {
  color-scheme: light;
  --bg:#fff;
  --ink:#203542;
  --ink-soft:#566873;
  --line:#e0e5e7;
  --accent:#9a6a30;
  --tint:#f8f9fa;
  --warm:#fbf8f3;
  --shadow:0 14px 45px rgba(18,41,57,.065);
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:86px}
body {margin:0;background:#fff;color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a {color:inherit;text-decoration:none}
img {max-width:100%}
button,input,textarea {font:inherit}
p {margin:0 0 1.12rem;color:var(--ink-soft)}
h1,h2,h3 {margin:0 0 .9rem;line-height:1.18;letter-spacing:-.028em;color:var(--ink)}
h1 {font-size:clamp(2.45rem,4.45vw,4.45rem);font-weight:750;max-width:13ch}
h2 {font-size:clamp(1.9rem,3vw,3rem);font-weight:730;max-width:22ch}
h3 {font-size:1.28rem;font-weight:720}
:focus-visible {outline:3px solid #c99047;outline-offset:4px}
.skip-link {position:absolute;transform:translateY(-130%);left:16px;z-index:50;background:#fff;padding:8px 14px;border:2px solid var(--ink)}
.skip-link:focus {transform:none}
.top {background:#fff;border-bottom:1px solid var(--line);padding:16px max(24px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 3px 15px rgba(32,53,66,.025)}
.brand {display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:850;letter-spacing:.07em;font-size:.9rem}
.brand-symbol {display:grid;place-items:center;width:39px;height:39px;border:1px solid #ba945e;color:var(--accent);font-size:1.4rem;border-radius:50%;font-weight:500}
.top nav {display:flex;align-items:center;gap:clamp(12px,2vw,29px);font-size:.9rem;font-weight:600}
.top nav a:hover,.textlink:hover,.footer a:hover {color:var(--accent)}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 25px;background:var(--ink);border:1px solid var(--ink);border-radius:6px;color:#fff;font-weight:760;min-height:48px;text-align:center;cursor:pointer;line-height:1.15;transition:transform .16s,background .16s}
.btn:hover {background:#37566b;transform:translateY(-1px)}
.btn.small {min-height:43px;font-size:.89rem;padding:12px 17px;white-space:nowrap}
.btn.ghost {background:#fff;color:var(--ink);border-color:#bdc9cf}
.btn.ghost:hover {background:var(--tint)}
.eyebrow {color:var(--accent);font-size:.75rem;letter-spacing:.16em;font-weight:800;margin:0 0 16px;text-transform:uppercase}
.hero,.feature,.lifestyle,.handover,.area,.cta {max-width:1180px;margin:0 auto;display:grid;gap:clamp(26px,4vw,70px);align-items:center}
.hero {grid-template-columns:1.08fr .92fr;padding:clamp(55px,7vw,100px) 24px 85px}
.hero-copy .lead {font-size:1.13rem;max-width:53ch;line-height:1.75;margin:0 0 26px}
.actions {display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.trust {display:flex;flex-wrap:wrap;gap:12px 21px;color:#57706a;font-size:.81rem;font-weight:650}
.hero-aside {border:1px solid #e8e2d8;background:var(--warm);padding:clamp(27px,3.5vw,50px);border-radius:15px;box-shadow:var(--shadow)}
.hero-aside h2 {font-size:clamp(1.55rem,2.4vw,2.45rem);max-width:16ch}
.hero-aside p {font-size:.96rem}
.hero-aside-stats {margin-top:27px;border-top:1px solid #e4ddd1}
.hero-aside-stats>div {display:grid;grid-template-columns:35px 1fr;gap:1px 13px;padding:16px 0;border-bottom:1px solid #e4ddd1}
.stat-icon {grid-row:span 2;color:var(--accent);font-weight:800;font-size:.78rem;letter-spacing:.08em;margin-top:2px}
.hero-aside-stats strong {font-size:.95rem;line-height:1.4}
.hero-aside-stats small {color:var(--ink-soft);line-height:1.5;font-size:.85rem}
.section {max-width:1180px;margin:0 auto;padding:85px 24px}
.section>h2 {margin-bottom:33px}
.cards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cards article {border:1px solid var(--line);background:#fff;border-radius:11px;padding:29px 23px 26px;min-height:234px;box-shadow:0 2px 12px rgba(18,41,57,.015)}
.cards article p {font-size:.93rem;line-height:1.7}
.cards article h3 {font-size:1.18rem}
.ico {font-size:.88rem;color:var(--accent);letter-spacing:.13em;font-weight:800;padding-bottom:28px}
.feature {grid-template-columns:1fr 1fr;padding:45px 24px 95px}
.feature>div:last-child>p:not(.eyebrow) {font-size:1rem}
.feature .diagnostic-card {background:#fff;border:1px solid #e5e4de;border-radius:14px;padding:clamp(28px,4vw,50px);box-shadow:var(--shadow)}
.feature .diagnostic-card h3 {font-size:clamp(1.5rem,2.5vw,2.3rem)}
.feature .diagnostic-card>p:not(.eyebrow) {font-size:.97rem}
.feature .diagnostic-card ol {margin:26px 0 0;padding:0;list-style:none;counter-reset:note}
.diagnostic-card li {counter-increment:note;display:grid;grid-template-columns:1fr;gap:2px;border-top:1px solid var(--line);padding:13px 0 0;margin-top:13px}
.diagnostic-card li strong {display:flex;align-items:center;gap:12px;font-size:.98rem}
.diagnostic-card li strong:before {content:"0"counter(note);color:var(--accent);font-size:.78rem;letter-spacing:.08em}
.diagnostic-card li span {padding-left:31px;font-size:.88rem;color:var(--ink-soft);line-height:1.65}
.textlink {color:#785222;font-weight:740;border-bottom:1px solid #c9ab81;padding-bottom:3px}
.lifestyle {grid-template-columns:1.08fr .92fr;padding:65px 24px 90px;border-top:1px solid var(--line)}
.lifestyle .service-note {border-left:3px solid #bd945b;padding:22px 26px;background:var(--warm);border-radius:0 9px 9px 0}
.lifestyle .service-note h3 {font-size:1.55rem}
.handover {grid-template-columns:.9fr 1.1fr;padding:70px 24px 100px;border-top:1px solid var(--line)}
.handover-panel {display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:34px;min-height:300px;justify-content:center}
.handover-panel p {font-size:.94rem;margin:0}
.handover-line {color:var(--accent);font-size:.77rem;letter-spacing:.12em;font-weight:800}
.handover-number {font-size:2.2rem;color:#718d7b}
.handover-panel strong {font-size:1.55rem;line-height:1.2;letter-spacing:-.025em}
.area {grid-template-columns:1fr auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:55px 24px;gap:25px}
.area p:not(.eyebrow) {max-width:78ch;margin-bottom:0}
.area h2 {margin-bottom:13px}
.faq {padding-top:90px;padding-bottom:95px}
.faq-list {border-top:1px solid var(--line);max-width:930px}
.faq details {border-bottom:1px solid var(--line);padding:19px 4px}
.faq summary {cursor:pointer;font-weight:700;font-size:1.03rem;line-height:1.4;padding-right:34px;list-style:none;position:relative}
.faq summary::-webkit-details-marker {display:none}
.faq summary::after {content:"+";position:absolute;right:4px;font-size:1.4rem;top:-5px;color:var(--accent);font-weight:400}
.faq details[open] summary:after {content:"−"}
.faq details p {max-width:72ch;font-size:.96rem;margin:13px 0 0}
.cta {grid-template-columns:1fr 1fr;padding:70px 24px 95px;border-top:1px solid var(--line)}
.cta .phone-big {display:inline-block;margin-top:4px;color:var(--ink);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;border-bottom:2px solid #b68c55}
.cta form {border:1px solid var(--line);border-radius:12px;padding:29px;background:#fff;box-shadow:var(--shadow);display:grid;gap:12px}
.cta label {font-size:.89rem;font-weight:700;color:var(--ink);display:grid;gap:5px}
.cta input,.cta textarea {width:100%;padding:12px 13px;border:1px solid #cdd6d9;border-radius:6px;background:#fff;color:var(--ink);resize:vertical;min-width:0}
.cta input:focus,.cta textarea:focus {outline:2px solid #d0b087;outline-offset:1px}
.cta form .btn {margin-top:5px}
.form-privacy {font-size:.82rem;line-height:1.5;margin:0 0 5px}
.formmsg {margin:0;font-size:.89rem}
.form-output {border:1px solid #dadfd9;padding:15px;border-radius:6px;white-space:pre-wrap;line-height:1.6;font-size:.88rem;background:#f9faf8}
.form-output[hidden] {display:none}
.copy-btn {cursor:pointer;background:#fff;border:1px solid #b8c6cc;border-radius:6px;padding:9px 15px;color:var(--ink);font-weight:650}
footer {border-top:1px solid var(--line);max-width:1180px;margin:auto;padding:30px 24px 85px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;font-size:.9rem}
footer>div {display:flex;flex-direction:column}
.footer-brand {display:flex;gap:6px}
.footer-brand strong {font-weight:800}
footer span {color:var(--ink-soft)}
footer a {font-weight:700}
footer>div:last-child {align-items:flex-end}
.mobile-call {display:none}
@media (max-width:1000px) {
 .top {padding-inline:20px}
 .top nav {gap:12px}
 .cards {grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero {grid-template-columns:1fr 1fr}
}
@media (max-width:740px) {
 html {scroll-padding-top:130px}
 .top {position:relative;flex-wrap:wrap;padding:13px 18px;gap:11px}
 .top .brand {font-size:.83rem}
 .top nav {order:3;flex-basis:100%;display:flex;justify-content:space-between;gap:8px;font-size:.78rem}
 .top .btn.small {font-size:.78rem;padding:10px}
 .brand-symbol {width:34px;height:34px}
 .hero,.feature,.lifestyle,.handover,.area,.cta {grid-template-columns:1fr}
 .hero {padding:53px 20px 55px;gap:35px}
 .hero h1 {font-size:clamp(2.25rem,10vw,3.15rem)}
 .hero .trust {gap:7px 14px}
 .section {padding:60px 20px}
 .cards {gap:12px}
 .cards article {min-height:230px;padding:22px 18px}
 .feature {padding:28px 20px 60px}
 .lifestyle,.handover {padding:55px 20px}
 .area {padding:50px 20px}
 .cta {padding:55px 20px 90px}
 footer {grid-template-columns:1fr 1fr;padding:28px 20px 100px}
 footer>div:last-child {grid-column:1 / -1;align-items:flex-start}
 .mobile-call {display:block;position:fixed;z-index:25;left:0;right:0;bottom:0;background:var(--ink);color:#fff;font-weight:750;text-align:center;padding:14px 18px;box-shadow:0 -5px 18px rgba(24,42,58,.16);padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (max-width:440px) {
 .top .btn.small {max-width:135px;font-size:.73rem}
 .cards {grid-template-columns:1fr}
 .cards article {min-height:auto}
 .actions .btn {flex:1 1 100%}
 .cta form {padding:19px}
 footer {grid-template-columns:1fr;gap:12px}
 footer>div:last-child {grid-column:auto}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}.btn {transition:none}}

.hero-photo img,.lifestyle-photo,.handover-image {width:100%;display:block;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
.hero-photo img {aspect-ratio: 4 / 4.2}
.lifestyle-photo {aspect-ratio:4 / 3.5}
.handover-image {aspect-ratio:4 / 3.2}
.brand-logo,.footer-logo {width:40px;height:40px;object-fit:cover;border-radius:5px;flex-shrink:0}
.footer-brand {flex-direction:row;align-items:center;gap:10px}
@media(max-width:740px){.hero-photo img {aspect-ratio:4 / 3}.lifestyle-photo,.handover-image {aspect-ratio: 4 / 3}}


/* Mise à jour du logo officiel fourni (fond transparent). */
.top {padding-block:9px}
.brand {flex-shrink:0;letter-spacing:normal}
.brand-logo {width:154px;height:74px;object-fit:contain;object-position:left center;display:block;border-radius:0}
.footer-logo {width:116px;height:61px;object-fit:contain;object-position:left center;display:block;border-radius:0}
.top nav {gap:clamp(10px,1.7vw,25px)}
/* Six prestations réparties sur trois colonnes sans changer l'identité générale. */
.cards {grid-template-columns:repeat(3,minmax(0,1fr))}
.cards article {min-height:220px}
/* Bloc tarifs : montants volontairement non renseignés jusqu'à validation. */
.pricing {border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing>h2 {max-width:24ch;margin-bottom:16px}
.pricing-intro {max-width:78ch;margin-bottom:28px}
.pricing-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.price-card {background:#fff;border:1px solid var(--line);padding:23px 22px 25px;border-radius:11px;display:flex;flex-direction:column;min-height:250px}
.price-card h3 {font-size:1.16rem;margin-bottom:9px}
.price-category {color:var(--accent);font-size:.72rem;font-weight:800;letter-spacing:.13em;margin-bottom:12px}
.price-detail {font-size:.88rem;line-height:1.5;margin-bottom:auto;padding-bottom:20px}
.price-value {font-weight:800;color:var(--ink);font-size:1.2rem;letter-spacing:-.02em}
.price-hint,.price-ttc {font-size:.78rem;color:var(--ink-soft)}
.price-ttc {margin-top:3px}
.pricing-disclaimer {max-width:89ch;margin:21px 0 18px;background:#fcf9f3;border-left:3px solid #c99a57;padding:14px 17px;font-size:.88rem;color:#5c554c}
.pricing-call {margin-top:3px}
@media(max-width:1000px) {
 .pricing-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .brand-logo {width:120px;height:66px}
 .top nav {font-size:.83rem;gap:10px}
}
@media(max-width:740px) {
 .top {padding-top:10px;padding-bottom:10px}
 .brand-logo {width:112px;height:56px}
 .top nav {font-size:.76rem;gap:5px}
 .footer-logo {width:104px;height:55px}
 .cards {grid-template-columns:repeat(2,minmax(0,1fr))}
 .pricing-grid {grid-template-columns:1fr 1fr}
 .price-card {min-height:230px;padding:20px 17px}
}
@media(max-width:470px) {
 .top .btn.small {max-width:145px;font-size:.72rem}
 .top nav {flex-wrap:wrap;justify-content:center;column-gap:17px;row-gap:9px}
 .cards,.pricing-grid {grid-template-columns:1fr}
 .cards article,.price-card {min-height:unset}
}

/* Tarifs exacts fournis dans la grille de La Clé du Rhône, octobre 2026. */
.pricing-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.pricing .price-card {min-height:169px;padding:22px 20px;background:var(--warm);border-color:#e9e1d5;display:flex}
.pricing .price-card h3 {font-size:1rem;line-height:1.36;min-height:3em;margin-bottom:16px}
.pricing .price-value {font-size:1.65rem;font-weight:800;color:#18384e}
.pricing .price-value span {font-size:.84rem;font-weight:650}
.pricing .price-ttc {color:var(--ink-soft);font-size:.84rem;margin-top:5px;margin-bottom:0;line-height:1.45}
.pricing-tax-note {margin:19px 0 22px;font-size:.86rem;max-width:95ch}
.tariff-expander {border:1px solid #cddadf;background:#fff;border-radius:11px;margin:17px 0 26px;overflow:hidden}
.tariff-expander>summary {cursor:pointer;font-weight:780;padding:17px 22px;background:#eff5f6;color:#17364a}
.tariff-expander[open]>summary {border-bottom:1px solid #dbe5e9}
.tariff-details {padding:4px 20px 20px}
.tariff-group {margin:22px 0}
.tariff-group h3 {font-size:1.18rem;margin-bottom:12px}
.tariff-table-scroll {max-width:100%;overflow-x:auto}
.tariff-table {width:100%;border-collapse:collapse;font-size:.89rem;line-height:1.38}
.tariff-table th,.tariff-table td {padding:10px 12px;border-bottom:1px solid #e3e8eb;vertical-align:top}
.tariff-table thead {background:#eaf1f5}
.tariff-table thead th {text-align:left;color:#17364a}
.tariff-table tbody tr:nth-child(2n){background:#f9fbfc}
.tariff-table th:first-child {width:62%;font-weight:550;text-align:left}
.tariff-table td {white-space:nowrap;font-variant-numeric:tabular-nums}
.tariff-table-note {font-size:.82rem;margin:0}
.pricing-conditions {padding:25px 28px;background:#f6f8f9;border:1px solid #e1e9ed;border-radius:11px;margin-bottom:22px}
.pricing-conditions h3 {font-size:1.3rem}
.pricing-conditions ul {margin:0;padding-left:20px;display:grid;gap:12px}
.pricing-conditions li {line-height:1.63;font-size:.91rem}
.pricing-conditions .pricing-source-note {font-size:.84rem;margin:20px 0 0}
@media(max-width:1050px){.pricing-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pricing-grid{grid-template-columns:1fr 1fr;gap:9px}.pricing .price-card {min-height:155px;padding:14px 12px}.pricing .price-card h3 {font-size:.92rem}.pricing .price-value{font-size:1.28rem}.pricing .price-ttc{font-size:.77rem}.tariff-details{padding:4px 9px 14px}.tariff-table{font-size:.77rem}.tariff-table th,.tariff-table td{padding:9px 6px}.tariff-table th:first-child{width:auto}.pricing-conditions{padding:20px 18px}}
@media(max-width:360px){.pricing-grid {grid-template-columns:1fr}}
