/* Astuce PC — style.css (DA v4 « glacée électrique », grammaire drdrone.fr en bleu). Mobile-first, sans framework. Dépend de tokens.css. */

/* 1. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { --panel-inset: 0.75rem; --panel-radius: 2.5rem; margin: 0; font-family: var(--font-text); font-size: var(--text-1); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; }
[hidden] { display: none; }
.field__error[hidden], .form__status[hidden], .faq__a[hidden] { display: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
address { font-style: normal; }
p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
ul, ol { padding-inline-start: 1.4em; }
li + li { margin-top: var(--space-2); }
strong, b { font-weight: var(--weight-bold); }
small { font-size: var(--text-1); }
a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--brand-400); }
a:hover, a:focus-visible { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.on-dark :focus-visible { outline-color: var(--electric-400); }
button, input, select, textarea { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
/* 2. Typographie */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: var(--weight-black); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); color: var(--brand-900); margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: clamp(var(--text-5), 6vw, var(--text-7)); }
h2 { font-size: clamp(var(--text-4), 4.5vw, 4rem); }
h3 { font-size: var(--text-3); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-family: var(--font-display); font-size: var(--text-2); font-weight: var(--weight-bold); letter-spacing: -0.01em; line-height: var(--leading-snug); margin: 0 0 var(--space-3); }
.lede { font-size: var(--text-2); line-height: 1.6; max-width: var(--measure); color: var(--color-text-soft); }
.measure { max-width: var(--measure); }
.text-soft { color: var(--color-text-soft); }
.service p > a:only-child, .reviews p > a:only-child, .mount figcaption a, .lede a, .external-note a { padding-block: 0.75rem; }
.hl { padding: 0 0.22em; border-radius: 0.3em; background: var(--gradient-cta-on-dark); color: var(--paper-50); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--space-4); padding: 0.35rem 1rem 0.35rem 0.4rem; border-radius: var(--radius-pill); background: var(--paper-0); border: 1px solid var(--brand-100); box-shadow: var(--shadow-card); font-family: var(--font-display); font-size: var(--text-1); font-weight: var(--weight-bold); letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; color: var(--brand-700); }
.kicker::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; background: var(--gradient-cta); }
.on-dark .kicker { background: rgba(250, 249, 247, 0.08); border-color: rgba(250, 249, 247, 0.16); box-shadow: none; color: var(--paper-50); }
.on-dark .kicker::before { background: var(--gradient-cta-on-dark); }
.signature { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2); letter-spacing: -0.01em; color: var(--brand-800); }
.list-check, .list-dash { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.list-check li, .list-dash li { position: relative; padding-left: 2.75rem; }
.list-check li + li, .list-dash li + li { margin-top: var(--space-3); }
.list-check li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.85rem; height: 1.85rem; border-radius: 0.6rem; background: var(--gradient-cta); }
.list-check li::after { content: ""; position: absolute; left: 0.66rem; top: 0.38rem; width: 0.42rem; height: 0.8rem; border: solid var(--paper-50); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.on-dark .list-check li::before { background: var(--gradient-cta-on-dark); }
.list-dash li::before { content: ""; position: absolute; left: 0.3rem; top: 0.75em; width: 1.25rem; height: 3px; border-radius: 2px; background: var(--brand-300); }
.todo { display: inline-block; padding: 0.1em 0.6em; border: 1px dashed var(--todo-fg); border-radius: var(--radius-pill); background: var(--todo-bg); color: var(--todo-fg); font-family: var(--font-text); font-size: var(--text-1); font-weight: var(--weight-semibold); font-style: normal; letter-spacing: 0.02em; line-height: 1.4; text-transform: uppercase; vertical-align: middle; }
/* 3. Mise en page : sections claires et panneaux sombres arrondis */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-bg-alt); }
.section--brand { background: var(--color-surface-tint); }
.on-dark { background-color: var(--color-dark); background-image: var(--dots), var(--glow-hero); color: var(--color-on-dark); }
.section--dark { margin: 0 var(--panel-inset); border-radius: var(--panel-radius); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--color-on-dark); }
.on-dark .lede, .on-dark .text-soft, .on-dark p { color: var(--color-on-dark-soft); }
.on-dark .signature { color: var(--brand-100); }
.on-dark a:not(.btn) { color: var(--color-on-dark); text-decoration-color: var(--brand-300); }
.section__head { margin-bottom: var(--space-6); }
.section__head .lede { margin-bottom: 0; }
.section__head--center { text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.skip-link { position: absolute; left: var(--space-3); top: -100%; z-index: 100; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); background: var(--brand-900); color: var(--paper-50); font-weight: var(--weight-semibold); }
.skip-link:focus { top: var(--space-3); }
.service, .offer, .parts-grid li, .programme li, .audience__col, .phone-fallback, .contact__aside > div, .reviews__box, .local, .delays__table, .faq__item, .steps li, .reassurance li { background: var(--color-surface); border: 1px solid rgba(10, 30, 58, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.service.on-dark, .offer.on-dark, .visit.on-dark { background-color: var(--color-dark); background-image: var(--dots), var(--glow-hero); border-color: transparent; }
/* 4. Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; min-height: var(--control-h); padding: 0.6rem 1.75rem; border: 1.5px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-display); font-size: var(--text-1); font-weight: var(--weight-bold); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s; }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--cta { padding-right: 0.5rem; background: var(--gradient-cta); color: var(--paper-50); box-shadow: var(--glow-cta); }
.btn--cta::after { content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--paper-50) var(--arrow) center / 55% no-repeat; }
.btn--cta:hover, .btn--cta:focus-visible { background: var(--gradient-cta-hover); transform: translateY(-2px); }
.btn--primary { background: var(--brand-800); border-color: var(--brand-800); color: var(--paper-50); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--brand-900); border-color: var(--brand-900); }
.btn--secondary { background: var(--paper-0); border-color: var(--brand-200); color: var(--brand-800); }
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--brand-700); }
.on-dark .btn--cta { background: var(--gradient-cta-on-dark); border-color: rgba(250, 249, 247, 0.35); }
.on-dark .btn--secondary { background: transparent; border-color: var(--color-on-dark-rule-strong); color: var(--paper-50); }
.on-dark .btn--secondary:hover, .on-dark .btn--secondary:focus-visible { background: var(--color-on-dark-hover); border-color: var(--paper-50); }
.on-dark .btn--primary { background: var(--paper-50); border-color: var(--paper-50); color: var(--brand-900); }
.btn--lg { min-height: 4rem; padding: 0.75rem 2.25rem; font-size: var(--text-2); }
.btn--lg.btn--cta { padding-right: 0.6rem; }
.btn--lg.btn--cta::after { width: 2.6rem; height: 2.6rem; }
.site-header .btn { box-shadow: none; }
/* 5. En-tête : barre flottante arrondie */
.site-header { position: sticky; top: var(--panel-inset); z-index: 50; margin: var(--panel-inset) auto 0; width: calc(100% - 2 * var(--panel-inset)); max-width: calc(var(--container-wide) - 2 * var(--panel-inset)); background: var(--paper-0); border: 1px solid rgba(10, 30, 58, 0.06); border-radius: 1.75rem; box-shadow: var(--shadow-card); }
.site-header .container { max-width: none; padding-inline: 1rem; }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 4.5rem; }
.brand { display: inline-flex; align-items: center; flex: none; min-height: var(--tap-min); margin-right: auto; text-decoration: none; }
.brand svg { height: 2.25rem; width: auto; max-width: none; }
.header-phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap-min); padding: 0 0.9rem; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--brand-900); text-decoration: none; }
.header-phone svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--electric-500); }
.header-phone:hover, .header-phone:focus-visible { background: var(--brand-50); }
.nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap-min); padding: 0 1rem; border: 1.5px solid var(--brand-200); border-radius: var(--radius-pill); background: transparent; font-family: var(--font-display); font-weight: var(--weight-bold); cursor: pointer; }
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }
.site-nav { flex-basis: 100%; padding-block: var(--space-3) var(--space-4); border-top: 1px solid var(--color-rule); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.site-nav li { margin: 0; }
.site-nav a { display: flex; align-items: center; min-height: var(--control-h); padding: 0 1rem; border-radius: var(--radius-pill); color: var(--brand-900); font-family: var(--font-display); font-weight: var(--weight-semibold); text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--brand-50); font-weight: var(--weight-bold); color: var(--brand-700); }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--brand-50); }
.header-cta { display: inline-flex; }
@media (max-width: 47.99em) { .header-cta { flex-basis: 100%; } }
@media (min-width: 64em) {
  .site-header__inner { gap: 0 var(--space-4); min-height: 4.5rem; }
  .brand { order: 1; }
  .brand svg { height: 2.5rem; }
  .header-phone { order: 2; }
  .header-cta { order: 3; }
  .nav-toggle { display: none; }
  .site-nav { order: 4; flex-basis: 100%; margin: 0; padding: 0 0 var(--space-2); border-top: 0; }
  .site-nav[hidden] { display: block; }
  .site-nav ul { flex-direction: row; gap: var(--space-1); margin-left: -0.75rem; }
  .site-nav a { min-height: 3rem; padding: 0 0.75rem; }
  html { scroll-padding-top: 10rem; }
}
@media (min-width: 96em) {
  .site-header__inner { flex-wrap: nowrap; min-height: 5rem; }
  .brand { margin-right: 0; }
  .site-nav { order: 2; flex-basis: auto; margin-left: auto; margin-right: var(--space-2); padding: 0; border: 0; }
  .site-nav ul { margin-left: 0; }
  .header-phone { order: 3; }
  .header-cta { order: 4; }
  html { scroll-padding-top: 7rem; }
}
/* 6. Héros */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero__note { margin: var(--space-4) 0 0; color: var(--color-text-soft); }
.hero-dark { position: relative; overflow: hidden; margin: var(--panel-inset) var(--panel-inset) 0; padding: clamp(var(--space-7), 8vw, var(--space-9)) 0 var(--space-7); border-radius: var(--panel-radius) var(--panel-radius) 0 0; }
.hero-dark::after { content: "ASTUCE PC"; position: absolute; left: -1%; bottom: -0.12em; z-index: 0; font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(6rem, 21vw, 19rem); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(250, 249, 247, 0.1); pointer-events: none; }
.hero-dark__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.hero-dark h1 { font-size: clamp(var(--text-5), 5.5vw, var(--text-8)); color: var(--color-on-dark); }
.hero-dark .hero__note { color: var(--brand-200); }
.hero-dark--solo { border-radius: var(--panel-radius); margin-bottom: var(--space-2); }
.hero-split + .reassurance { border-radius: var(--panel-radius); margin-top: var(--space-2); }
.hero-dark__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 0 0 1px rgba(250, 249, 247, 0.14), var(--shadow-photo); }
@media (min-width: 64em) { .hero-dark__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); } .hero-dark__media img { aspect-ratio: 4 / 5; } }
.hero-split { padding-block: clamp(var(--space-7), 9vw, var(--space-9)); }
.hero-split .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.hero-split__text h1 { font-size: clamp(var(--text-5), 4.2vw, var(--text-6)); max-width: 16ch; }
.hero-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
@media (min-width: 64em) { .hero-split .container { grid-template-columns: 7fr 5fr; gap: var(--space-7); } .hero-split__media img { border-radius: var(--radius-xl); } .hero-split--portrait .hero-split__media img { aspect-ratio: 4 / 5; } }
/* 7. Accueil */
.reassurance { margin: 0 var(--panel-inset); padding: 0 0 var(--space-7); border-radius: 0 0 var(--panel-radius) var(--panel-radius); background-image: none; }
.reassurance p { color: inherit; }
.reassurance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.reassurance li { margin: 0; padding: var(--space-4); background: rgba(250, 249, 247, 0.06); border-color: rgba(250, 249, 247, 0.12); box-shadow: none; }
.reassurance__value { display: block; font-family: var(--font-display); font-size: var(--text-4); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1.05; color: var(--paper-50); }
.reassurance__label { display: block; margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-1); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-200); }
@media (min-width: 48em) { .reassurance ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .reassurance__value { font-size: var(--text-5); } }
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); counter-reset: svc; }
.service { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-4); }
.service::before { counter-increment: svc; content: "0" counter(svc); display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: var(--gradient-cta); color: var(--paper-50); font-family: var(--font-display); font-size: var(--text-1); font-weight: var(--weight-black); }
.service figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.service h3, .service p { margin: 0; }
.service .price { margin-top: var(--space-2); }
.service .btn { align-self: flex-start; margin-top: auto; }
.service--featured { border-color: transparent; }
.service--featured::before { background: var(--gradient-cta-on-dark); }
.service--featured .price { color: var(--color-on-dark); }
.service--featured .price small { color: var(--brand-200); }
@media (min-width: 64em) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .service { padding: var(--space-5); } }
.price { display: block; font-family: var(--font-display); font-size: var(--text-3); font-weight: var(--weight-black); letter-spacing: -0.02em; line-height: 1.2; color: var(--brand-800); }
.price small { display: block; margin-top: var(--space-1); font-family: var(--font-text); font-size: var(--text-1); font-weight: var(--weight-regular); letter-spacing: 0; line-height: var(--leading-body); color: var(--color-text-soft); }
.mount { position: relative; }
.mount img { width: 100%; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.mount figcaption { padding: var(--space-3) var(--space-1) 0; color: var(--color-text-soft); }
.on-dark .mount figcaption { color: var(--brand-200); }
@media (min-width: 64em) { .mount img { border-radius: var(--radius-xl); } }
.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.feature__media::before { content: ""; position: absolute; inset: 1.5rem -1rem -1rem 1.5rem; border-radius: var(--radius-xl); background: var(--gradient-cta); opacity: 0.9; z-index: 0; }
.feature__media img { position: relative; z-index: 1; aspect-ratio: 4 / 3; }
.feature__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.feature__meta > div { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid rgba(10, 30, 58, 0.06); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.meta__value { display: block; font-family: var(--font-display); font-size: var(--text-3); font-weight: var(--weight-black); letter-spacing: -0.02em; line-height: 1.1; color: var(--brand-800); }
.meta__label { display: block; margin-top: var(--space-1); color: var(--color-text-soft); }
@media (min-width: 64em) { .feature { grid-template-columns: 5fr 6fr; gap: var(--space-8); } }
.method { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.method__portrait { max-width: 20rem; }
.method__portrait img { aspect-ratio: 4 / 5; }
.method__list { list-style: none; margin: 0; padding: 0; counter-reset: method; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.method__item { margin: 0; padding: var(--space-5); background: rgba(250, 249, 247, 0.06); border: 1px solid rgba(250, 249, 247, 0.12); border-radius: var(--radius-lg); }
.method__item h3 { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.method__item h3::before { counter-increment: method; content: counter(method); flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: var(--gradient-cta-on-dark); color: var(--paper-50); font-size: var(--text-2); letter-spacing: 0; }
.method__item p { margin: 0; max-width: var(--measure); color: var(--color-on-dark-soft); }
.container > .method__list { max-width: 52rem; }
@media (min-width: 64em) { .method { grid-template-columns: 4fr 7fr; gap: var(--space-8); } }
.parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.parts__media img { aspect-ratio: 3 / 2; }
.external-note { display: block; margin-top: var(--space-3); color: var(--color-text-soft); }
@media (min-width: 64em) { .parts { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.reviews { text-align: center; }
.reviews__box { max-width: 40rem; margin-inline: auto; padding: var(--space-6) var(--space-5); }
.reviews__box p:last-child { margin-bottom: 0; }
.reviews__score { display: block; margin-bottom: 0; font-family: var(--font-display); font-size: var(--text-8); font-weight: var(--weight-black); letter-spacing: -0.04em; line-height: 1; color: var(--brand-800); }
.reviews__score > span { display: inline-block; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reviews__score small { font-family: var(--font-display); font-size: var(--text-3); font-weight: var(--weight-bold); color: var(--color-text-soft); }
.stars { display: inline-flex; gap: 0.25rem; margin: var(--space-3) auto; color: var(--electric-500); }
.stars svg { width: 2rem; height: 2rem; }
.reviews__count { font-size: var(--text-2); margin-bottom: var(--space-2); }
.local { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); }
.big-phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap-min); font-family: var(--font-display); font-size: clamp(var(--text-3), 2.9vw, var(--text-5)); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.1; color: var(--brand-900); text-decoration: none; }
.big-phone svg { width: 0.75em; height: 0.75em; flex: none; color: var(--electric-500); }
.big-phone:hover, .big-phone:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.15em; text-decoration-color: var(--electric-400); }
.local .big-phone { font-size: clamp(var(--text-4), 4vw, var(--text-6)); }
.hours { width: 100%; border-collapse: collapse; }
.hours caption { text-align: left; font-weight: var(--weight-semibold); padding-bottom: var(--space-2); }
.hours th, .hours td { text-align: left; padding: 0.6rem 0; border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.hours th { font-weight: var(--weight-semibold); padding-right: var(--space-4); white-space: nowrap; }
.local__map img { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
@media (min-width: 64em) { .local { grid-template-columns: 1fr 1fr; gap: var(--space-8); padding: var(--space-6); } }
/* 8. Landing */
.audience { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.audience__col { padding: var(--space-5); border-top: 4px solid transparent; border-image: var(--gradient-line) 1; border-image-slice: 1; border-radius: 0; }
.audience__col--no { border-image: none; border-top-color: var(--brand-200); }
.audience__col p:last-child, .audience__col ul:last-child { margin-bottom: 0; }
@media (min-width: 48em) { .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.programme { list-style: none; counter-reset: prog; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.programme li { counter-increment: prog; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: var(--space-4); }
.programme li::before { content: counter(prog); display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.9rem; background: var(--gradient-cta); color: var(--paper-50); font-family: var(--font-display); font-size: var(--text-2); font-weight: var(--weight-black); }
.programme h3 { font-size: var(--text-2); margin-bottom: var(--space-1); }
.programme p { margin: 0; }
@media (min-width: 48em) { .programme { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .programme li { padding: var(--space-5); } }
@media (min-width: 64em) { .programme--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.steps li { margin: 0; padding: var(--space-5); }
.steps__value { display: block; margin-bottom: var(--space-3); font-family: var(--font-display); font-size: var(--text-5); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1.05; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.steps h3 { font-size: var(--text-2); margin-bottom: var(--space-2); }
.steps p { margin: 0; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }
.offers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.offer { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.offer h3 { margin: 0; }
.offer--pack { border-color: transparent; }
.offer--pack .offer__price { color: var(--color-on-dark); }
.offer--pack .offer__price small { color: var(--brand-200); }
.offer__tag { align-self: flex-start; padding: 0.3em 0.9em; border-radius: var(--radius-pill); background: var(--gradient-cta-on-dark); color: var(--paper-50); font-family: var(--font-display); font-weight: var(--weight-bold); }
.offer__price { display: block; margin: var(--space-2) 0; font-family: var(--font-display); font-size: var(--text-6); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1; color: var(--brand-800); }
.offer__price small { display: block; margin-top: var(--space-2); font-family: var(--font-text); font-size: var(--text-1); font-weight: var(--weight-regular); letter-spacing: 0; line-height: var(--leading-body); color: var(--color-text-soft); }
.offer .list-check { margin: 0; }
.offer .btn { align-self: flex-start; margin-top: auto; }
@media (min-width: 48em) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; } }
@media (min-width: 64em) { .offer { padding: var(--space-6); } }
.booking { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.embed-placeholder { display: grid; place-content: center; gap: var(--space-3); min-height: 28rem; padding: var(--space-5); border: 2px dashed var(--brand-300); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; }
.embed-placeholder p { margin: 0; max-width: 30rem; }
.phone-fallback { padding: var(--space-5); }
.phone-fallback p:last-child { margin-bottom: 0; }
@media (min-width: 64em) { .booking { grid-template-columns: 7fr 5fr; gap: var(--space-6); align-items: start; } }
.faq { max-width: 52rem; display: grid; gap: var(--space-3); }
.faq__item { padding: 0 var(--space-4); border-radius: var(--radius-md); }
.faq__q { margin: 0; }
.faq__btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 4.5rem; padding: var(--space-3) 0; border: 0; background: none; text-align: left; font-family: var(--font-display); font-size: var(--text-2); font-weight: var(--weight-bold); letter-spacing: -0.01em; line-height: 1.3; color: var(--brand-900); cursor: pointer; }
.faq__btn:hover, .faq__btn:focus-visible { color: var(--brand-600); }
.faq__btn svg { flex: none; width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); transition: transform 0.2s; }
.faq__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { padding: 0 0 var(--space-4); max-width: var(--measure); }
.faq__a p:last-child { margin-bottom: 0; }
.section--dark.cta-final { margin: 0; background: var(--color-bg); color: var(--color-text); border-radius: 0; }
.cta-final { text-align: center; }
.cta-final .container { position: relative; overflow: hidden; padding-block: var(--space-7); border-radius: var(--panel-radius); }
.cta-final .lede { margin-inline: auto; }
.cta-final .hero__actions { justify-content: center; }
/* 9. Pièces détachées */
.parts-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.parts-grid li { margin: 0; padding: var(--space-5); }
.parts-grid h3 { font-size: var(--text-2); margin-bottom: var(--space-2); }
.parts-grid p { margin: 0; }
.delays { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.delays__table { padding: var(--space-4); }
.delays__table caption { padding: 0 0 var(--space-3); }
@media (min-width: 48em) { .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .delays { grid-template-columns: 5fr 6fr; gap: var(--space-8); } .delays__table { padding: var(--space-5); } }
/* 10. Contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.contact__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.contact__aside > div { padding: var(--space-5); }
.contact__aside > div > :last-child { margin-bottom: 0; }
.contact__aside > .visit { border-color: transparent; }
.visit .todo { color: var(--todo-fg); }
.contact__aside h2, .contact__aside h3, .visit h2 { font-size: var(--text-3); letter-spacing: -0.02em; line-height: 1.15; margin-bottom: var(--space-3); }
@media (min-width: 64em) { .contact { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; } }
.form { display: grid; gap: var(--space-4); max-width: 40rem; }
.field { display: grid; gap: var(--space-2); }
.field label { font-weight: var(--weight-semibold); }
.field__hint { margin: 0; color: var(--color-text-soft); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--control-h); padding: 0.75rem 1.25rem; border: 1.5px solid var(--color-rule-strong); border-radius: var(--radius-md); background: var(--paper-0); color: var(--brand-900); }
.field textarea { min-height: 10rem; resize: vertical; }
.field select { appearance: none; padding-right: 3.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123A70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 1.5rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--electric-500); outline: 3px solid var(--color-focus); outline-offset: 2px; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--error-600); }
.field__error { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; color: var(--error-600); font-weight: var(--weight-semibold); }
.field__error svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15em; }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); }
.field--check input { width: 1.75rem; height: 1.75rem; min-height: 0; margin: 0.4rem 0 0; padding: 0; accent-color: var(--brand-700); }
.field--check label { display: block; font-weight: var(--weight-regular); min-height: var(--tap-min); padding-top: 0.5rem; }
.field--check .field__error { grid-column: 1 / -1; }
.form__status { margin: 0; padding: var(--space-4); border: 2px solid var(--error-600); border-radius: var(--radius-md); color: var(--brand-900); font-weight: var(--weight-semibold); }
.form__status--ok { border-color: var(--ok-600); background: var(--ok-50); }
.form__status:empty { display: none; }
.legal { max-width: var(--measure); }
.legal h2 { font-size: var(--text-3); margin-top: var(--space-6); }
.legal ul { margin-bottom: var(--space-4); }
/* 11. Pied de page : panneau sombre arrondi */
.site-footer { position: relative; overflow: hidden; margin: var(--space-6) var(--panel-inset) var(--panel-inset); padding-block: var(--space-8) var(--space-5); border-radius: var(--panel-radius); }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradient-line); }
.site-footer a { color: var(--color-on-dark); text-decoration-color: var(--brand-300); }
.site-footer h2 { margin-bottom: var(--space-3); font-family: var(--font-display); font-size: var(--text-1); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-200); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.site-footer p { margin-bottom: var(--space-3); }
.site-footer address { color: var(--color-on-dark-soft); }
.site-footer .hours th, .site-footer .hours td { border-bottom-color: var(--color-rule-dark); }
.footer-phone { display: inline-flex; align-items: center; min-height: var(--tap-min); font-family: var(--font-display); font-size: var(--text-3); font-weight: var(--weight-black); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-decoration: none; }
.footer-phone:hover, .footer-phone:focus-visible { text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-rule-dark); }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.site-footer__bottom .site-footer__bzh { margin-left: auto; font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--brand-200); }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 12. Utilitaires */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-5 { margin-top: var(--space-5); }
.mb-0 { margin-bottom: 0; }
@media (min-width: 64em) { body { --panel-inset: 1rem; } }
@media print { .reviews__score > span, .steps__value { background: none; color: var(--brand-800); -webkit-text-fill-color: var(--brand-800); } .on-dark { background: none !important; color: var(--brand-900) !important; } }