/* ==========================================================================
   My Coach Informatique – feuille de style
   Charte : bleu #2F5BE0 (boutons), rouge #E11C1A (appel), bleu nuit #030C48
   ========================================================================== */

@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --blue: #2F5BE0;
  --blue-hover: #2449C2;
  --blue-deep: #1B3AA6;
  --blue-soft: #EAF0FF;
  --blue-line: #C9D7FF;
  --blue-light: #93B1FF;
  --red: #E11C1A;
  --red-hover: #BF1613;
  --red-soft: #FDECEC;
  --navy: #030C48;
  --navy-2: #0A175E;
  --ground: #F3F5FA;
  --surface: #FFFFFF;
  --ink: #0D1433;
  --ink-2: #464F70;
  --ink-3: #6B7392;
  --line: #DEE3EF;

  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Barlow Semi Condensed", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgb(3 12 72 / .06), 0 2px 10px rgb(3 12 72 / .05);
  --shadow: 0 2px 6px rgb(3 12 72 / .06), 0 14px 34px rgb(3 12 72 / .10);
  --shadow-lg: 0 6px 12px rgb(3 12 72 / .08), 0 28px 60px rgb(3 12 72 / .18);

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 128px;
  --header-h-compact: 96px;
  --topbar-h: 0px;
  --section-y: clamp(44px, 5.5vw, 80px);
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h-compact) + 16px); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h-compact) + 76px); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--blue-hover); }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.65rem); font-weight: 700; }
h3 { font-size: clamp(1.22rem, 1.12rem + .4vw, 1.42rem); font-weight: 600; line-height: 1.2; }
strong, b { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.site-header :focus-visible, .page-hero :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: #fff; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 600; }
.skip-link:focus { top: 16px; color: #fff; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Boutons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .7em 1.35em;
  border: 2px solid transparent; border-radius: 999px;
  font: 600 1rem/1.2 var(--font-body); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgb(225 28 26 / .28); }
.btn-red:hover { background: var(--red-hover); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-hover); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--blue-soft); color: var(--navy); }
.btn-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
.btn-ghost:hover { background: rgb(255 255 255 / .12); border-color: #fff; color: #fff; }
.btn-outline { background: #fff; color: var(--blue); border-color: var(--blue-line); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-hover); }
.nav-actions .btn, .action-bar .btn { white-space: nowrap; }
.btn-static, .btn-static:hover { cursor: default; transform: none; }
.btn-light.btn-static:hover { background: #fff; }
.btn-sm { min-height: 42px; padding: .5em 1.05em; font-size: .95rem; }
.btn-lg { min-height: 56px; padding: .8em 1.6em; font-size: 1.08rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--blue); text-decoration: none; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

.eyebrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* En-tête ----------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: background-color .3s, box-shadow .3s; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; background: linear-gradient(rgb(3 12 72 / .6), transparent); pointer-events: none; transition: opacity .3s; }
.site-header.is-scrolled { background: rgb(3 12 72 / .94); box-shadow: 0 8px 28px rgb(3 12 72 / .2); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); }
.site-header.is-scrolled::before { opacity: 0; }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: 24px; transition: height .3s; }
.is-scrolled .header-inner { height: var(--header-h-compact); }
.brand { display: flex; align-items: center; flex: none; }
.brand-logo { width: auto; height: 104px; filter: drop-shadow(0 3px 10px rgb(0 0 0 / .35)); transition: height .3s; }
.is-scrolled .brand-logo { height: 78px; }
/* Entre 1024 et 1279 px, l'en-tête doit loger le logo, six entrées de menu en capitales et deux
   boutons texte : c'est trop. Mesuré au navigateur, le pire cas est vers 1185 px de large, là où
   les boutons passent en pleine largeur (312 px) avant que le conteneur n'atteigne son maximum —
   même le logo d'origine de 84 px y cassait le menu sur deux lignes.
   On masque donc le bouton « Prendre RDV » de la barre dans cette seule plage : le bouton d'appel
   reste (c'est l'action prioritaire pour notre public), et chaque page compte par ailleurs sept
   autres liens de prise de rendez-vous. Le logo tient alors jusqu'à 110 px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-actions .nav-rdv { display: none; }
}
/* 1024-1079 px reste la largeur la plus serrée : même sans le bouton RDV, la navigation s'y
   comprime dès 96 px de logo (mesuré). On y descend à 88 px — toujours plus que les 84 px
   d'origine. Au-dessus de 1080 px, le logo de 104 px passe partout, jusqu'à 1440 px vérifié. */
@media (min-width: 1024px) and (max-width: 1079px) {
  :root { --header-h: 112px; --header-h-compact: 90px; }
  .brand-logo { height: 88px; }
  .is-scrolled .brand-logo { height: 70px; }
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-list { list-style: none; display: flex; gap: 2px; }
.nav-list a { display: block; padding: .5em .72em; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; letter-spacing: .045em; text-transform: uppercase; transition: background-color .2s; }
.nav-list a:hover { background: rgb(255 255 255 / .12); color: #fff; }
.nav-list a[aria-current="page"] { background: rgb(255 255 255 / .16); }
.nav-actions { display: flex; gap: 10px; }
.nav-panel-info, .header-call, .nav-toggle { display: none; }

/* Barre d'infos au-dessus du menu (ordinateur uniquement, masquée au défilement) */
.topbar { display: none; }
.open-status.is-compact { padding: 0; border: 0; background: none; font-size: inherit; }
@media (min-width: 1024px) {
  :root { --topbar-h: 40px; }
  .topbar { display: block; height: var(--topbar-h); overflow: hidden; border-bottom: 1px solid rgb(255 255 255 / .12); font-size: .88rem; color: rgb(255 255 255 / .82); transition: height .3s, opacity .25s, border-color .3s; }
  .is-scrolled .topbar { height: 0; opacity: 0; border-color: transparent; }
  .topbar-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .topbar-list { list-style: none; display: flex; align-items: center; gap: 24px; }
  .topbar-list li { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
  .topbar .icon { width: 1.05em; height: 1.05em; color: var(--blue-light); }
  .topbar a { color: inherit; text-decoration: none; }
  .topbar a:hover { color: #fff; text-decoration: underline; }
  .topbar-mail { display: none !important; }
}
@media (min-width: 1200px) { .topbar-mail { display: inline-flex !important; } }

@media (max-width: 1023px) {
  :root { --header-h: 90px; --header-h-compact: 76px; }
  .brand-logo { height: 68px; }
  .is-scrolled .brand-logo { height: 58px; }
  .header-call, .nav-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; }
  .header-call { margin-left: auto; background: var(--red); }
  .nav-toggle { background: rgb(255 255 255 / .16); }
  .header-call .icon { width: 22px; height: 22px; }
  .nav-toggle .icon { width: 26px; height: 26px; }
  .nav-toggle .icon-close, .nav-open .nav-toggle .icon-open { display: none; }
  .nav-open .nav-toggle .icon-close { display: block; }
  .nav-open .site-header { background: var(--navy); }
  .nav-open body { overflow: hidden; }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%);
    margin: 0; padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch; gap: 24px; overflow-y: auto;
    background: var(--navy); visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .25s, transform .25s, visibility 0s linear .25s;
  }
  .nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { padding: .95em .4em; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 1.15rem; }
  .nav-list a[aria-current="page"] { background: none; color: var(--blue-light); }
  .nav-actions { flex-direction: column; }
  .nav-actions .btn { min-height: 54px; font-size: 1.05rem; }
  .nav-panel-info { display: grid; gap: 10px; color: rgb(255 255 255 / .75); font-size: .98rem; }
  .nav-panel-info p { display: flex; gap: .6em; align-items: flex-start; }
  .nav-panel-info .icon { margin-top: .2em; color: var(--blue-light); }
}

/* Héros accueil ----------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(580px, 84svh, 800px); padding: calc(var(--header-h) + var(--topbar-h) + 32px) 0 56px; background: var(--navy); color: #fff; }
.hero-media, .hero-media picture, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img { object-fit: cover; object-position: 70% 50%; }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.hero::after { background: linear-gradient(90deg, rgb(3 12 72 / .95) 0%, rgb(3 12 72 / .84) 38%, rgb(3 12 72 / .4) 72%, rgb(3 12 72 / .2) 100%), linear-gradient(180deg, rgb(3 12 72 / .5) 0%, transparent 28%, transparent 78%, rgb(3 12 72 / .55) 100%); }
.hero-content { max-width: 740px; }
.hero .eyebrow, .page-hero .eyebrow { color: #fff; padding: .4em .95em; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: rgb(255 255 255 / .1); }
.hero .eyebrow .icon { color: var(--red); width: 1.1em; height: 1.1em; }
.hero h1 { margin-top: 20px; }
.hero h1 .accent { color: var(--blue-light); }
.hero-lead { margin-top: 18px; max-width: 60ch; font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); color: rgb(255 255 255 / .88); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .16); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 640px; }
.hero-facts li { display: flex; align-items: center; gap: .65em; font-weight: 500; color: rgb(255 255 255 / .92); }
.hero-facts .icon { color: var(--blue-light); }

@media (max-width: 767px) {
  .hero { min-height: 0; padding: calc(var(--header-h) + 36px) 0 48px; }
  .hero::after { background: linear-gradient(180deg, rgb(3 12 72 / .8) 0%, rgb(3 12 72 / .78) 55%, rgb(3 12 72 / .92) 100%); }
  .hero-media img { object-position: 60% 50%; }
}
@media (max-width: 479px) {
  .hero .eyebrow { font-size: .72rem; letter-spacing: .08em; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* Héros des pages intérieures ---------------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header-h) + var(--topbar-h) + clamp(28px, 4vw, 52px)) 0 clamp(36px, 4.5vw, 56px); background: var(--navy); color: #fff; }
.page-hero::after { background: linear-gradient(90deg, rgb(3 12 72 / .94) 0%, rgb(3 12 72 / .78) 50%, rgb(3 12 72 / .5) 100%), linear-gradient(180deg, rgb(3 12 72 / .55), transparent 45%); }
.page-hero-inner { display: grid; justify-items: start; gap: 14px; }
.page-hero h1 { max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.7vw, 3.3rem); }
.page-hero .hero-lead { margin-top: 0; }
.page-hero .hero-actions { margin-top: 10px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: .92rem; color: rgb(255 255 255 / .7); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .35em; }
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: #fff; }
.breadcrumb .icon { width: 1em; height: 1em; opacity: .6; }

/* Sections ---------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section-alt { background: var(--ground); }
.section-tight { padding-block: clamp(36px, 4vw, 52px); }
.section-head { display: grid; gap: 10px; max-width: 780px; margin-bottom: clamp(22px, 3vw, 36px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p { font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem); color: var(--ink-2); }
.section-foot { margin-top: clamp(22px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lead { font-size: 1.15rem; color: var(--ink-2); }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 24px; }

/* Grilles ----------------------------------------------------------------- */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Cartes illustrées -------------------------------------------------------- */
/* Deux univers de l'accueil : ordinateur et téléphone, à égalité */
.univers-grid { display: grid; gap: clamp(16px, 2.2vw, 24px); grid-template-columns: 1fr; margin-bottom: clamp(24px, 3vw, 36px); }
@media (min-width: 900px) { .univers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.univers-card { display: grid; overflow: hidden; border: 1px solid var(--blue-line); border-radius: calc(var(--radius) + 4px); background: var(--surface); box-shadow: var(--shadow); }
.univers-media { overflow: hidden; aspect-ratio: 16 / 9; background: var(--blue-soft); }
.univers-media picture, .univers-media img { width: 100%; height: 100%; object-fit: cover; }
.univers-body { display: grid; justify-items: start; gap: 12px; padding: clamp(20px, 2.4vw, 30px); }
.univers-body h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.85rem); }
.univers-body > p { color: var(--ink-2); }
.univers-body .checklist { gap: 8px; }
.univers-body .btn { margin-top: 6px; }
.univers-note { display: flex; align-items: center; gap: .6em; margin-bottom: 18px; font-weight: 600; color: var(--ink-2); }
.univers-note .icon { color: var(--blue); }

.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s, border-color .25s; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-soft); }
.card-media picture { width: 100%; height: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.card-body p { color: var(--ink-2); font-size: 1rem; }
.card-body .link-arrow { margin-top: auto; padding-top: 4px; }
.card-clickable:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-line); }
.card-clickable:hover .card-media img { transform: scale(1.05); }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card-clickable:has(.card-link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Carte panne (horizontale) */
.panne-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .panne-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panne-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.panne { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h-compact) + 80px); }
.panne picture, .panne img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.panne h3 { margin-bottom: 6px; }
.panne p { color: var(--ink-2); font-size: 1rem; }
.panne:target { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft), var(--shadow); }
@media (min-width: 600px) { .panne { grid-template-columns: 150px minmax(0, 1fr); padding: 18px; } }

/* Cartes à icône */
.icon-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.icon-card p { color: var(--ink-2); font-size: 1rem; }
.icon-badge { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.icon-badge .icon { width: 26px; height: 26px; }
.section-alt .icon-card { box-shadow: none; }
.h3-like { font-size: clamp(1.22rem, 1.12rem + .4vw, 1.42rem); font-weight: 600; line-height: 1.2; }

/* Exemples de coût et conditions du crédit d'impôt ---------------------------
   Le lecteur de ce site est souvent âgé : on montre les deux montants côte à côte
   plutôt que noyés dans une phrase, et on ne réduit jamais ce texte à du « petit ».
   Les deux chiffres sont affichés à la MÊME taille : la somme réellement déboursée
   au moment de la séance reste aussi lisible que le coût après remboursement. */
.cout-card .cout-quoi { color: var(--ink-2); font-size: 1rem; }
.cout-chiffres { margin-top: auto; padding-top: 14px; display: grid; gap: 6px; }
.cout-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-sm); background: var(--ground); }
.cout-ligne dt { color: var(--ink-2); font-size: 1rem; }
.cout-ligne dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  line-height: 1.1; color: var(--ink); white-space: nowrap; }
.cout-net { background: var(--blue-soft); }
.cout-net dt { color: var(--blue-deep); font-weight: 600; }
.cout-net dd { color: var(--blue-deep); }

.aide-impot { margin-top: 26px; display: grid; gap: 18px; grid-template-columns: 1fr;
  padding: clamp(20px, 3vw, 30px); background: var(--blue-soft); border: 1px solid var(--blue-line);
  border-radius: var(--radius); }
@media (min-width: 860px) { .aide-impot { grid-template-columns: 1fr 1fr; gap: 30px; } }
.aide-liste { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.aide-liste li { position: relative; padding-left: 22px; font-size: 1.02rem; line-height: 1.55;
  color: var(--ink-2); }
.aide-liste li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--blue); }
.aide-liste strong { color: var(--ink); }
.fineprint-date { margin-top: 16px; font-size: .95rem; color: var(--ink-3); }
.panel-title { font-size: 1.4rem; }

/* Problèmes (accueil) */
.problems { list-style: none; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .problems { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problem { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; transition: border-color .2s, box-shadow .2s, transform .2s; }
.problem:hover { color: var(--ink); border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.problem-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.problem .chev { margin-left: auto; width: 1.1em; height: 1.1em; color: var(--ink-3); transition: transform .2s, color .2s; }
/* Onglets (pannes téléphone / ordinateur) */
.tablist { display: inline-flex; gap: 6px; margin-bottom: clamp(20px, 2.5vw, 30px); padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.tab { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .5em 1.2em; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 1rem var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.tab:hover { color: var(--blue); }
.tab[aria-selected="true"] { background: var(--blue); color: #fff; }
.tab .icon { width: 1.15em; height: 1.15em; }
.tabpanel:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: var(--radius); }
.tabpanel + .tabpanel { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 559px) {
  .tablist { display: flex; width: 100%; }
  .tab { flex: 1; justify-content: center; padding: .5em .5em; font-size: .92rem; }
}

/* Liens vers les pages de marques du catalogue (page Services) */
.marques-liees { font-size: .95rem; color: var(--ink-2); line-height: 1.8; }
.marques-liees a { font-weight: 600; }

/* Demandes les plus fréquentes (page Services) : téléphone et ordinateur mélangés, avec l'appareil concerné */
@media (min-width: 700px) { .demandes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.problem-text { display: grid; gap: 2px; min-width: 0; }
.problem-title { font-weight: 600; }
.problem-sub { font-size: .88rem; color: var(--ink-3); }
.problem-tag { flex: none; margin-left: auto; padding: .25em .7em; border-radius: 999px; background: var(--ground); color: var(--ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.problem-tag.is-phone { background: var(--blue-soft); color: var(--blue-deep); }
.problem-tag.is-both { background: #FCEAEA; color: #A31413; }
.demandes .chev { margin-left: 8px; }
@media (max-width: 479px) { .problem-tag { display: none; } }
.problem:hover .chev { color: var(--blue); transform: translateX(3px); }

/* Blocs texte + image ------------------------------------------------------ */
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-reverse > :first-child { order: 2; }
}
.split-text { display: grid; gap: 18px; justify-items: start; }
.split-text > p { color: var(--ink-2); }
.media-stack { position: relative; padding: 0 0 36px; }
.media-stack .media-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.media-stack .media-inset { position: absolute; right: -4px; bottom: 0; width: 36%; overflow: hidden; border: 6px solid #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.media-stack .media-inset img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.media-single img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; }
.media-caption { margin-top: 10px; font-size: .9rem; color: var(--ink-3); }
/* Vidéo verticale de la vitrine : hauteur bornée pour ne pas étirer la section */
.video-frame { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
/* Mobile : la vidéo occupe la largeur utile ; ordinateur : hauteur bornée pour ne pas étirer la section */
.shop-video { display: block; width: min(100%, 340px); height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; background: var(--navy); }
@media (min-width: 900px) { .shop-video { width: auto; height: clamp(380px, 34vw, 560px); } }
@media (prefers-reduced-motion: reduce) { .shop-video { height: auto; max-height: 560px; } }
@media (max-width: 899px) {
  .media-single img { max-height: 420px; }
  .media-stack { max-width: 640px; }
}

.checklist { list-style: none; display: grid; gap: 10px; }
.checklist li { display: flex; align-items: flex-start; gap: .65em; }
.checklist .icon { margin-top: .22em; width: 1.15em; height: 1.15em; color: var(--blue); }
.checklist-2 { gap: 10px 28px; }
@media (min-width: 600px) { .checklist-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Atouts */
.why { display: grid; gap: 18px 24px; }
@media (min-width: 600px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why-item { display: grid; gap: 6px; align-content: start; }
.why-item .icon-badge { width: 46px; height: 46px; border-radius: 12px; }
.why-item h3 { font-size: 1.2rem; }
.why-item p { color: var(--ink-2); font-size: 1rem; }

/* Étapes ------------------------------------------------------------------- */
/* Étapes numérotées. Flex plutôt que grid : quand le nombre d'étapes ne remplit pas
   la dernière ligne (5 étapes sur 4 colonnes), celle-ci est centrée au lieu de laisser un trou.
   Les largeurs sont figées en pourcentage pour que l'étape orpheline garde la taille des autres. */
.steps { list-style: none; counter-reset: step; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.step { counter-increment: step; flex: 0 1 100%; display: grid; gap: 10px; align-content: start; padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.section-alt .step { box-shadow: none; }
@media (min-width: 600px) { .step { flex-basis: calc(50% - 8px); } }
@media (min-width: 1024px) { .step { flex-basis: calc(25% - 12px); } }
/* Le numéro est aligné avec le titre : la carte gagne en hauteur et la lecture est plus directe. */
.step h3 { display: flex; align-items: center; gap: 13px; font-size: 1.1rem; font-weight: 600; line-height: 1.25; }
.step h3::before { content: counter(step); flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font: 700 1.15rem/1 var(--font-display); }
.step p { color: var(--ink-2); font-size: 1rem; }

/* Pastilles ----------------------------------------------------------------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .42em .95em; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: .98rem; }
.chip .icon { width: 1em; height: 1em; color: var(--blue); }
.chip-main { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip-main .icon { color: #fff; }
.badge { display: inline-flex; align-items: center; gap: .4em; align-self: flex-start; padding: .3em .8em; border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.badge .icon { width: 1em; height: 1em; }
.badge-red { background: var(--red-soft); color: var(--red-hover); }
.badge-blue { background: var(--blue-soft); color: var(--blue-deep); }

/* Encadré ------------------------------------------------------------------- */
.panel { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel p { color: var(--ink-2); }
.panel-blue { background: var(--blue-soft); border-color: var(--blue-line); box-shadow: none; }
.panel-head { display: flex; align-items: center; gap: 14px; }
.note { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.note picture { flex: none; width: 130px; }
.note img { width: 130px; }
.note p { color: var(--ink-2); font-size: 1rem; }
.note p + p { margin-top: 6px; }
@media (max-width: 599px) { .note { flex-direction: column; align-items: flex-start; } }
.fine-print { margin-top: 16px; font-size: .92rem; color: var(--ink-3); }
.fine-print p + p { margin-top: 6px; }
.fine-print strong { color: var(--ink-2); }

/* Bandeau Services à la Personne (50 % de réduction d'impôt) ------------------------ */
.sap-wrap { margin-top: clamp(28px, 4vw, 40px); }
.sap-banner {
  position: relative; overflow: hidden; display: grid; gap: 22px 36px; align-items: center;
  padding: clamp(24px, 4vw, 40px); border-radius: calc(var(--radius) + 6px); color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(520px 280px at 0% 50%, rgb(225 28 26 / .25), transparent 70%), linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue-deep) 100%);
}
@media (min-width: 900px) { .sap-banner { grid-template-columns: auto minmax(0, 1fr) auto; } }
.sap-figure { display: grid; place-content: center; justify-items: center; width: 164px; height: 164px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 10px rgb(225 28 26 / .18), 0 16px 40px rgb(225 28 26 / .35); text-align: center; line-height: 1; }
.sap-amount { font: 700 3.7rem/1 var(--font-display); letter-spacing: -.02em; }
.sap-amount span { margin-left: 2px; font-size: .55em; }
.sap-figure-label { margin-top: 6px; max-width: 11ch; font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.sap-text { display: grid; gap: 10px; justify-items: start; }
.sap-banner .eyebrow { color: var(--blue-light); }
.sap-title { font: 700 clamp(1.45rem, 1.1rem + 1.2vw, 2rem)/1.15 var(--font-display); text-wrap: balance; }
.sap-text > p:not(.eyebrow):not(.sap-title):not(.sap-example) { max-width: 62ch; color: rgb(255 255 255 / .82); }
.sap-example { display: flex; align-items: flex-start; gap: .55em; padding: .6em .95em; border-radius: 10px; background: rgb(255 255 255 / .08); font-size: .98rem; }
.sap-example .icon { margin-top: .15em; color: var(--blue-light); }
.sap-example strong { color: #fff; }
.sap-side { display: grid; gap: 14px; justify-items: center; }
.sap-logo { display: block; padding: 10px 14px; border-radius: 12px; background: #fff; }
.sap-logo img { width: 150px; }
@media (max-width: 899px) {
  .sap-figure { width: 128px; height: 128px; }
  .sap-amount { font-size: 2.8rem; }
  .sap-side { justify-items: start; }
}

/* Bannière de renvoi vers le site formation / coaching ------------------------------ */
.promo-banner {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  border-radius: calc(var(--radius) + 8px); color: #fff; box-shadow: 0 24px 60px rgb(47 91 224 / .35);
  background: linear-gradient(115deg, #2A55DB 0%, #3F72F5 48%, var(--blue-deep) 100%);
}
.promo-banner::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; left: -140px; bottom: -220px; border: 56px solid rgb(255 255 255 / .07); border-radius: 50%; pointer-events: none; }
@media (min-width: 900px) { .promo-banner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); min-height: 360px; } }
.promo-content { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(28px, 4.5vw, 52px); }
.promo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.promo-tag { padding: .35em .9em; border-radius: 999px; background: var(--red); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 16px rgb(225 28 26 / .4); }
.promo-kicker { display: inline-flex; align-items: center; gap: .45em; font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .9); }
.promo-kicker .icon { width: 1.2em; height: 1.2em; }
.promo-title { max-width: 18ch; font: 700 clamp(1.9rem, 1.3rem + 2.4vw, 3rem)/1.05 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.promo-title span { background: linear-gradient(transparent 62%, rgb(225 28 26 / .85) 62%, rgb(225 28 26 / .85) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.promo-text { max-width: 46ch; font-size: 1.08rem; color: rgb(255 255 255 / .88); }
.promo-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 8px; }
.promo-points li { display: inline-flex; align-items: center; gap: .45em; padding: .4em .85em; border-radius: 999px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .22); font-weight: 600; font-size: .95rem; }
.promo-points .icon { width: 1.05em; height: 1.05em; }
.promo-media { position: relative; min-height: 220px; }
.promo-media picture, .promo-media img { width: 100%; height: 100%; }
.promo-media img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 900px) { .promo-media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } }
@media (max-width: 899px) { .promo-media { order: -1; height: 240px; } }

/* FAQ ----------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--blue-line); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.1rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--blue); transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq-answer { padding: 0 22px 20px; color: var(--ink-2); }
.faq-layout { display: grid; gap: 24px 56px; align-items: start; }
.faq-layout .faq { max-width: none; margin: 0; }
.faq-intro .section-head { margin-bottom: 20px; }
.faq-contact { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
  .faq-intro { position: sticky; top: calc(var(--header-h-compact) + 24px); }
}

/* Bandeau d'appel à l'action -------------------------------------------------- */
.section-cta { padding-block: 0 var(--section-y); }
.section-alt + .section-cta, .section-cta.after-alt { padding-top: var(--section-y); }
.cta-band { position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: calc(var(--radius) + 6px); background: linear-gradient(125deg, var(--blue) 0%, var(--blue-deep) 70%, var(--navy-2) 100%); color: #fff; }
.cta-band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border: 40px solid rgb(255 255 255 / .06); border-radius: 50%; pointer-events: none; }
.cta-text { display: grid; gap: 10px; position: relative; z-index: 1; }
.cta-text p { color: rgb(255 255 255 / .85); max-width: 56ch; }
.cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1024px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 479px) { .cta-actions .btn { flex: 1 1 100%; } }

/* Sous-navigation ------------------------------------------------------------- */
.subnav { position: sticky; top: var(--header-h-compact); z-index: 30; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.subnav ul { list-style: none; display: flex; gap: 6px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: flex; align-items: center; min-height: 44px; padding: .45em 1em; border-radius: 999px; color: var(--ink-2); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .95rem; transition: background-color .2s, color .2s; }
.subnav a:hover, .subnav a.is-active { background: var(--blue-soft); color: var(--blue-deep); }

/* Tarifs ------------------------------------------------------------------- */
.price-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.price-card h3 { font-size: 1.45rem; }
/* Alignement des cartes côte à côte : on réserve la place des éléments que seules certaines cartes ont
   (pastille, sous-titre) et on fixe la hauteur des titres sur deux lignes. */
@media (min-width: 1024px) {
  .price-grid:has(.badge) .price-card { padding-top: 64px; }
  .price-grid:has(.badge) .price-card > .badge { position: absolute; top: 26px; left: 26px; }
  .price-card h3 { min-height: 2.4em; }
  .price-grid:has(.price-sub) .price-card > h3:not(:has(+ .price-sub)) { margin-bottom: calc(1.5em - 16px); }
}
.price-sub { margin-top: -8px; color: var(--ink-3); font-size: .98rem; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .5em; font-variant-numeric: tabular-nums; }
.price-amount { font: 700 2.4rem/1 var(--font-display); color: var(--blue); }
.price-unit { font-weight: 500; color: var(--ink-2); }
/* Coût réel après crédit d'impôt : information secondaire, jamais un prix barré (le client règle bien le prix affiché) */
.price-after { margin-top: 2px; font-size: .92rem; font-weight: 500; color: var(--blue); }
.price-row-label .price-after { display: block; font-weight: 500; }
.price-rows { display: grid; gap: 12px; padding-block: 14px; border-block: 1px solid var(--line); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.price-row-label { font-weight: 600; }
.price-row .price-amount { font-size: 1.9rem; }
.price-card .checklist { font-size: 1rem; color: var(--ink-2); }
.price-foot { margin-top: auto; padding-top: 4px; font-size: .95rem; color: var(--ink-2); }
.price-foot strong { color: var(--ink); }
.price-card-ht .price-amount { color: var(--navy); }

/* Contact ------------------------------------------------------------------ */
.contact-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); } }
.contact-aside { display: grid; gap: 20px; }
@media (min-width: 1024px) { .contact-aside { position: sticky; top: calc(var(--header-h-compact) + 20px); } }
.info-list { list-style: none; display: grid; gap: 14px; }
.info-list li { display: flex; align-items: flex-start; gap: 14px; }
.info-list .icon-badge { width: 42px; height: 42px; margin: 0; border-radius: 11px; }
.info-list .icon-badge .icon { width: 20px; height: 20px; }
.info-label { display: block; font-size: .85rem; color: var(--ink-3); }
.info-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.info-list a:hover { color: var(--blue); text-decoration: underline; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: 8px 0; border-bottom: 1px solid var(--line); font-weight: 500; text-align: left; }
.hours-table td { text-align: right; color: var(--ink-2); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--blue); font-weight: 700; }
.transport-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .transport-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.transport-stops { list-style: none; display: grid; gap: 12px; }
.transport-stops li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.transport-lines { display: flex; gap: 6px; }
.transport-lines img { width: 30px; height: 30px; }

/* Contenus externes (après consentement) -------------------------------------- */
.embed { position: relative; overflow: hidden; min-height: var(--embed-h, 480px); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); }
.embed.is-loaded { background: #fff; }
.embed iframe { width: 100%; height: var(--embed-h, 480px); border: 0; }
.embed .calendly-inline-widget { width: 100%; height: var(--embed-h, 700px); min-width: 280px; }
.embed-elfsight.is-loaded { min-height: 0; border: 0; background: transparent; }
/* Contenus chargés automatiquement : pas de cadre, le module externe a déjà le sien */
.embed[data-embed-auto] { border-color: transparent; background: transparent; }
.embed[data-embed-auto] .embed-placeholder { background: none; }
.embed-calendly.is-loaded { min-height: 0; overflow: visible; border-radius: 0; }
/* Hauteur de secours ; si Calendly gère data-resize, il l'ajuste lui-même au contenu */
.embed-calendly .calendly-inline-widget { height: 700px; }
@media (max-width: 767px) { .embed-calendly .calendly-inline-widget { height: 1050px; } }
.embed-placeholder { min-height: var(--embed-h, 480px); display: grid; place-content: center; justify-items: center; gap: 12px; padding: 32px 24px; text-align: center; background: repeating-linear-gradient(135deg, transparent 0 18px, rgb(47 91 224 / .03) 18px 36px); }
.embed-placeholder > .icon { width: 46px; height: 46px; color: var(--blue); }
.embed-title { font: 700 1.4rem/1.2 var(--font-display); }
.embed-placeholder p { max-width: 48ch; color: var(--ink-2); }
.embed-placeholder .embed-note { font-size: .88rem; color: var(--ink-3); }
.embed-maps { --embed-h: 420px; }
@media (max-width: 599px) { .embed-maps { --embed-h: 340px; } }

/* Texte long (pages légales) ----------------------------------------------------- */
.prose { max-width: 78ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); margin: 2.2em 0 .7em; scroll-margin-top: calc(var(--header-h-compact) + 16px); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-bottom: 1em; color: var(--ink-2); }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose strong { color: var(--ink); }
.prose .updated { margin-top: 2.5em; font-size: .92rem; color: var(--ink-3); }
.credits { max-width: var(--container); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.credits-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.credits-table th, .credits-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.credits-table th { background: var(--ground); color: var(--ink); font-weight: 600; }

/* Pré-pied de page ----------------------------------------------------------------- */
.prefooter { padding-block: clamp(32px, 4vw, 48px); background: var(--ground); border-top: 1px solid var(--line); }
.prefooter-grid { display: grid; gap: 24px 32px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .prefooter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prefooter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Note Google */
.rating { display: inline-flex; align-items: center; gap: .6em; padding: .45em .95em; border-radius: 999px; font-size: .95rem; text-decoration: none; }
.rating-stars { display: inline-flex; gap: 1px; color: #FBBF24; }
.rating-stars .icon { width: 1em; height: 1em; fill: currentColor; }
.rating-hero { margin-top: 18px; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); color: #fff; }
.rating-hero:hover { background: rgb(255 255 255 / .16); color: #fff; }
.about-summary { padding: 16px 18px; border-left: 3px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--blue-soft); color: var(--ink-2); }
.about-summary strong { color: var(--ink); }
.prefooter-item { display: flex; align-items: flex-start; gap: 16px; }
.prefooter-icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.prefooter-icon .icon { width: 28px; height: 28px; }
.prefooter-title { margin-bottom: 4px; font: 600 1.2rem/1.25 var(--font-display); }
.prefooter-item p:not(.prefooter-title) { color: var(--ink-2); font-size: 1rem; }

/* Pied de page --------------------------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden;
  background: radial-gradient(900px 420px at 0% 0%, rgb(47 91 224 / .22), transparent 65%), radial-gradient(700px 360px at 100% 100%, rgb(225 28 26 / .08), transparent 60%), var(--navy);
  color: rgb(255 255 255 / .72); font-size: .98rem;
}
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 55%, var(--red) 100%); }
.site-footer a, .site-footer .link-button { color: inherit; text-decoration: none; transition: color .2s; }
.site-footer a:hover, .site-footer .link-button:hover { color: #fff; }
.site-footer ul { list-style: none; }

.footer-main { display: grid; gap: 40px 32px; padding-block: clamp(52px, 6vw, 80px) clamp(40px, 5vw, 60px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand, .footer-col-services { grid-column: 1 / -1; }
  .footer-col-services .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
}
@media (min-width: 1024px) {
  .footer-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, .9fr); }
  .footer-brand, .footer-col-services { grid-column: auto; }
  .footer-col-services .footer-links { grid-template-columns: minmax(0, 1fr); }
}

.footer-brand { display: grid; gap: 20px; align-content: start; }
.footer-brand-text { display: grid; gap: 18px; justify-items: start; }
.footer-logo { display: inline-flex; }
.footer-logo-img { width: auto; height: 76px; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .35)); }
.footer-pitch { max-width: 40ch; color: rgb(255 255 255 / .78); }
.footer-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-cta .btn { box-shadow: none; }

.open-status { display: inline-flex; align-items: center; gap: .55em; padding: .35em .85em; border-radius: 999px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); font-size: .9rem; font-weight: 500; color: #fff; }
.open-dot { width: 8px; height: 8px; border-radius: 50%; background: #9AA3C7; }
.open-status.is-open .open-dot { background: #3DDC84; box-shadow: 0 0 0 4px rgb(61 220 132 / .18); }
.open-status.is-closed .open-dot { background: #FF7A73; box-shadow: 0 0 0 4px rgb(255 122 115 / .16); }

.footer-title { margin-bottom: 18px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); }

.footer-contact { display: grid; gap: 18px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 14px; }
.footer-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgb(255 255 255 / .07); color: var(--blue-light); }
.footer-icon .icon { width: 18px; height: 18px; }
.footer-contact li > span:last-child { display: grid; gap: 2px; }
.site-footer .footer-strong { color: #fff; font-weight: 500; line-height: 1.45; }
.footer-sub { font-size: .9rem; color: rgb(255 255 255 / .6); }
.footer-sub a { color: rgb(255 255 255 / .8); }
.site-footer .footer-sublink { display: inline-flex; align-items: center; gap: .25em; justify-self: start; margin-top: 2px; font-size: .9rem; font-weight: 600; color: var(--blue-light); }
.footer-sublink .icon { width: 1em; height: 1em; transition: transform .2s; }
.footer-sublink:hover .icon { transform: translate(2px, -2px); }

.hours { display: grid; gap: 4px; margin-bottom: 16px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 12px; margin-inline: -12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.hours dt { font-weight: 500; }
.hours dd { color: #fff; }
.hours .is-today { background: rgb(255 255 255 / .08); box-shadow: inset 3px 0 0 var(--blue-light); }
.hours .is-today dt { color: #fff; font-weight: 600; }
.footer-note { display: flex; align-items: center; gap: .5em; font-size: .9rem; color: rgb(255 255 255 / .6); }
.footer-note .icon { width: 1.05em; height: 1.05em; color: var(--blue-light); }

.footer-links { display: grid; gap: 10px; }
.footer-links a { display: inline-flex; align-items: center; gap: .5em; }
.footer-links a::before { content: ""; width: 6px; height: 2px; border-radius: 2px; background: var(--blue-light); opacity: .6; transition: width .2s, opacity .2s; }
.footer-links a:hover::before { width: 14px; opacity: 1; }

.footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); background: rgb(0 0 0 / .18); font-size: .88rem; color: rgb(255 255 255 / .55); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 20px calc(20px + env(safe-area-inset-bottom)); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 767px) {
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}

/* Barre d'actions mobile ------------------------------------------------------------ */
.action-bar { display: none; }
@media (max-width: 1023px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .action-bar { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .96); box-shadow: 0 -6px 24px rgb(3 12 72 / .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .action-bar .btn { min-height: 50px; box-shadow: none; }
  .nav-open .action-bar { display: none; }
}

/* Bandeau cookies ------------------------------------------------------------------- */
.consent { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; display: flex; pointer-events: none; }
@media (max-width: 1023px) { .consent { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); } }
.consent-box { pointer-events: auto; width: 100%; max-width: 580px; display: grid; gap: 14px; padding: 22px; max-height: calc(100dvh - 120px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.consent-title { font: 700 1.3rem/1.2 var(--font-display); }
.consent-box > p { font-size: .96rem; color: var(--ink-2); }
.consent-options { display: grid; gap: 10px; }
.switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.switch:has(input:checked) { border-color: var(--blue-line); background: var(--blue-soft); }
.switch input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--blue); }
.switch span { display: grid; font-size: .95rem; color: var(--ink-2); }
.switch strong { color: var(--ink); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-actions .btn { flex: 1 1 auto; min-height: 44px; padding-inline: 1em; }

/* Page 404 ------------------------------------------------------------------------- */
.error-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Menu : 5 entrées sur les petits ordinateurs */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-list a { padding: .5em .6em; font-size: .88rem; letter-spacing: .05em; }
  .nav-actions .btn-light { display: none; }
}

/* Catalogue de réparation de téléphones ----------------------------------------------- */
.page-hero-catalogue { z-index: 5; overflow: visible; }
.page-hero-catalogue .hero-media { overflow: hidden; }
.phone-search { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 660px; margin-top: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); }
.phone-search > .icon { color: var(--ink-3); }
.phone-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1.05rem var(--font-body); color: var(--ink); }
.phone-search input::placeholder { color: var(--ink-3); }
.phone-search .btn { min-height: 46px; box-shadow: none; }
.phone-search:focus-within { box-shadow: 0 0 0 3px var(--blue-light), var(--shadow-lg); }
.phone-search-results { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; list-style: none; padding: 6px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }
.phone-search-results a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.phone-search-results a:hover, .phone-search-results a:focus-visible { background: var(--blue-soft); color: var(--blue-deep); }
.phone-search-results .is-empty { padding: 10px 14px; font-size: .95rem; color: var(--ink-3); }
@media (max-width: 599px) {
  .phone-search { flex-wrap: wrap; padding: 10px 12px; border-radius: 18px; }
  .phone-search input { flex-basis: calc(100% - 40px); padding: 6px 0; }
  .phone-search .btn { flex: 1 1 100%; }
}
.phone-search-results a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.phone-search-results small { flex: none; font-size: .88rem; font-weight: 500; color: var(--ink-3); }
.find-model { width: 100%; max-width: 660px; font-size: .95rem; color: rgb(255 255 255 / .9); }
.find-model summary { display: inline-flex; align-items: center; gap: .45em; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .4); text-underline-offset: 3px; }
.find-model summary::-webkit-details-marker { display: none; }
.find-model summary .icon { width: 1.1em; height: 1.1em; color: var(--blue-light); }
.find-model ul { display: grid; gap: 6px; margin-top: 10px; padding: 14px 18px 14px 34px; border: 1px solid rgb(255 255 255 / .18); border-radius: 14px; background: rgb(3 12 72 / .6); }
.find-model li::marker { color: var(--blue-light); }
.find-model strong { color: #fff; }

/* Barre de filtre et séries (page marque) */
.catalogue-toolbar { position: sticky; top: var(--header-h-compact); z-index: 30; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.catalogue-toolbar-inner { display: flex; align-items: center; gap: 10px 18px; padding-block: 12px; }
.model-filter { flex: 0 0 min(100%, 320px); display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-3); }
.model-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1rem var(--font-body); color: var(--ink); }
.model-filter:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.series-nav { flex: 1; min-width: 0; }
.series-nav ul { list-style: none; display: flex; gap: 8px; padding-block: 2px; overflow-x: auto; scrollbar-width: none; }
.series-nav ul::-webkit-scrollbar { display: none; }
.series-nav a { display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); font-size: .92rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.series-nav a:hover { border-color: var(--blue); color: var(--blue); }
html:has(.catalogue-toolbar) { scroll-padding-top: calc(var(--header-h-compact) + 88px); }
@media (max-width: 767px) {
  .catalogue-toolbar-inner { flex-wrap: wrap; padding-block: 10px; }
  .model-filter { flex-basis: 100%; }
  .series-nav { flex-basis: 100%; margin-inline: calc(var(--gutter) * -1); }
  .series-nav ul { padding-inline: var(--gutter); }
  html:has(.catalogue-toolbar) { scroll-padding-top: calc(var(--header-h-compact) + 130px); }
}
.section-models { padding-top: clamp(28px, 4vw, 48px); }
.model-group-text { margin: -6px 0 14px; color: var(--ink-3); }
.model-links { list-style: none; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.model-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; }
.model-links a:hover { border-color: var(--blue); color: var(--blue); }
.model-links a::after { content: "›"; font-size: 1.3em; line-height: 1; color: var(--ink-3); }
.brand-grid-more { margin-top: 16px; }
.repair-types { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.repair-type { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.repair-type .icon-badge { flex: none; width: 44px; height: 44px; margin: 0; }
.repair-type h3 { font-size: 1.12rem; }
.repair-type p { margin-top: 2px; font-size: .93rem; color: var(--ink-2); }
.all-models { display: grid; gap: 10px; }
.all-models-brand { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.all-models-brand summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; font: 700 1.15rem/1.2 var(--font-display); }
.all-models-brand summary::-webkit-details-marker { display: none; }
.all-models-brand summary .brand-count { margin-left: auto; font: 500 .92rem var(--font-body); }
.all-models-brand summary .icon { color: var(--blue); transition: transform .2s; }
.all-models-brand[open] summary .icon { transform: rotate(45deg); }
.all-models-brand .model-links { padding: 0 18px 18px; }
.filter-empty:not([hidden]) { display: grid; justify-items: start; gap: 14px; padding: 22px; border-radius: var(--radius); background: var(--blue-soft); }

.brand-grid { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.brand-card { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.brand-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: var(--ink); }
/* Logo officiel de la marque, affiché sans modification (ni recoloration ni déformation) */
.brand-mark { flex: none; display: grid; place-items: center; width: 76px; height: 48px; }
.brand-mark img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.marques-mention { margin-top: 14px; font-size: .85rem; line-height: 1.5; color: var(--ink-3); }

/* Le téléphone emblématique de la marque, dessiné par nos soins (utilisé quand aucun logo libre n'existe) */
.brand-visual { flex: none; display: grid; place-items: center; width: 56px; height: 80px; border-radius: 12px; background: linear-gradient(160deg, var(--blue-soft), #fff 85%); }
.brand-visual img { width: auto; max-width: 100%; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 8px rgb(3 12 72 / .16)); }
.brand-text { display: grid; gap: 2px; min-width: 0; }
.brand-name { font: 700 1.1rem/1.2 var(--font-display); }
.brand-count { font-size: .9rem; color: var(--ink-3); }
/* Carte sans complément de gamme (le logo dit tout) : le nombre de modèles porte seul l'information */
.brand-text.is-solo .brand-count { font-size: 1rem; font-weight: 600; color: var(--ink-2); }
.brand-card > .icon { flex: none; margin-left: auto; color: var(--blue); }
.brand-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.brand-section-head .section-head { margin-bottom: 0; }

.model-grid { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.model-card a { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .25s, transform .25s; }
.model-card a:hover { border-color: var(--blue-line); box-shadow: var(--shadow); transform: translateY(-3px); color: var(--ink); }
.model-visual { display: grid; place-items: center; height: 150px; padding: 14px; overflow: hidden; background: linear-gradient(160deg, var(--blue-soft), #fff 80%); }
.model-visual img { width: auto; max-width: 100%; height: 122px; object-fit: contain; filter: drop-shadow(0 8px 14px rgb(3 12 72 / .18)); }
.photo-credit { margin-top: 6px; font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
.photo-credit a { color: inherit; }
.model-info { display: grid; gap: 3px; align-content: start; padding: 12px 14px 14px; }
.model-name { font: 700 1.08rem/1.2 var(--font-display); }
.model-year { font-size: .85rem; color: var(--ink-3); }
.model-prices { display: grid; gap: 2px; margin-top: 4px; font-size: .9rem; color: var(--ink-2); }
.model-prices strong { color: var(--blue); }
.model-group + .model-group { margin-top: clamp(28px, 4vw, 44px); }
.model-group h2 { margin-bottom: 16px; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); }

/* Fiche modèle : en-tête produit */
.page-hero-model { padding-bottom: clamp(28px, 4vw, 52px); }
.model-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 48px; }
.model-hero-text { display: grid; justify-items: start; gap: 16px; min-width: 0; }
.model-hero h1 { max-width: 20ch; font-size: clamp(1.85rem, 1.2rem + 2.5vw, 3.1rem); }
.model-hero h1 span { display: block; margin-top: .15em; font-size: .56em; color: rgb(255 255 255 / .8); }
.model-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.model-facts li { display: grid; gap: 3px; min-width: 112px; padding: 10px 16px; border: 1px solid rgb(255 255 255 / .2); border-radius: 14px; background: rgb(255 255 255 / .1); }
.model-facts span { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.model-facts strong { font: 700 1.4rem/1.1 var(--font-display); color: #fff; }
.model-hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.model-hero-trust .rating-hero { margin-top: 0; }
.model-hero .hero-actions { margin-top: 4px; }
.model-hero-visual { position: relative; display: grid; place-items: center; width: clamp(96px, 24vw, 320px); }
.model-hero-visual::before { content: ""; position: absolute; inset: 6% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(106 147 255 / .5), transparent); }
.model-hero-visual img { position: relative; width: auto; max-width: 100%; height: clamp(150px, 28vw, 360px); object-fit: contain; filter: drop-shadow(0 24px 36px rgb(0 0 0 / .45)); }
@media (max-width: 767px) {
  .model-hero { grid-template-columns: minmax(0, 1fr) 84px; align-items: start; gap: 12px 14px; }
  .model-hero-text { display: contents; }
  .model-hero-text > * { grid-column: 1 / -1; }
  .model-hero h1 { grid-column: 1; grid-row: 2; align-self: center; }
  .model-hero-visual { grid-column: 2; grid-row: 2; width: 84px; }
  .model-hero-visual img { height: 132px; }
  .model-facts li { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
  .model-facts strong { font-size: 1.15rem; }
  .model-hero .hero-actions { display: none; }
}

/* Fiche modèle : tarifs et sélection */
.section-model { padding-top: clamp(28px, 4vw, 64px); }
/* Mobile : les prix remontent (la consigne est portée par les boutons « Ajouter » et la barre de réservation) */
@media (max-width: 767px) { .section-model .section-head .eyebrow, .section-model .section-head p { display: none; } }
.model-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) {
  .model-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .model-aside { position: sticky; top: calc(var(--header-h-compact) + 24px); }
}
.model-about { display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.model-about h2 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.model-about p { color: var(--ink-2); }
.model-independent { font-size: .88rem; color: var(--ink-3); }

.repair-list { display: grid; gap: 14px; }
.repair { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.repair-diagnostic { border-style: dashed; border-color: var(--blue-line); background: linear-gradient(135deg, var(--blue-soft), #fff 70%); }
.repair-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 12px; }
.repair-head > div { flex: 1; min-width: 0; }
.repair-head .icon-badge { flex: none; width: 44px; height: 44px; margin: 0; }
.repair-head h3 { font-size: 1.25rem; }
.repair-head p { margin-top: 2px; font-size: .95rem; color: var(--ink-2); }
.repair-help { margin-top: 8px; font-size: .93rem; }
.repair-help summary { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; list-style: none; font-weight: 600; color: var(--blue); }
.repair-help summary::-webkit-details-marker { display: none; }
.repair-help summary .icon { width: 1.05em; height: 1.05em; }
.repair-help > div { display: grid; gap: 8px; margin-top: 10px; padding: 14px 16px; border-radius: 12px; background: var(--ground); }
.repair-help > div p { margin: 0; }
.repair-options { list-style: none; }
.repair-option { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 18px; padding: 12px 20px; border-top: 1px solid var(--line); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.repair-option:hover { background: #F7F9FF; }
.repair-option.is-selected { background: var(--blue-soft); box-shadow: inset 4px 0 0 var(--blue); }
.repair-option-label { display: grid; gap: 2px; }
.repair-quality { font-weight: 600; }
.repair-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: var(--ink-3); }
.repair-meta span { display: inline-flex; align-items: center; gap: .3em; }
.repair-meta .icon { width: 1em; height: 1em; }
.repair-price { font: 700 1.6rem/1 var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.repair-price small { margin-left: 4px; font: 500 .8rem var(--font-body); color: var(--ink-3); }
.repair-price.is-quote { font-size: 1.15rem; color: var(--ink-2); }
.repair-add { min-width: 118px; justify-content: center; }
.repair-add[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.repair-add[aria-pressed="true"] svg:first-of-type, .repair-add[aria-pressed="false"] svg:nth-of-type(2) { display: none; }
@media (max-width: 599px) {
  .repair-head { padding: 16px 16px 10px; }
  .repair-option { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label add" "price add"; gap: 4px 12px; padding: 12px 16px; }
  .repair-option-label { grid-area: label; }
  .repair-price { grid-area: price; font-size: 1.35rem; }
  .repair-add { grid-area: add; min-width: 0; }
}
.catalogue-empty { padding: 20px; border-radius: var(--radius); background: var(--blue-soft); }

.booking-card { display: grid; gap: 14px; padding: 22px; border: 1px solid var(--blue-line); border-radius: calc(var(--radius) + 4px); background: #fff; box-shadow: var(--shadow); }
.booking-title { display: flex; align-items: center; gap: .5em; font: 700 1.3rem/1.2 var(--font-display); }
.booking-title .icon { color: var(--blue); }
.booking-empty { padding: 12px 14px; border-radius: 12px; background: var(--ground); font-size: .95rem; color: var(--ink-3); }
.booking-items:not([hidden]) { list-style: none; display: grid; gap: 8px; }
.booking-items li { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.booking-items strong { white-space: nowrap; }
.booking-subtotal:not([hidden]) { display: flex; align-items: baseline; justify-content: space-between; font-size: .95rem; color: var(--ink-3); }
.booking-remise:not([hidden]) { display: flex; align-items: center; gap: .5em; padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-deep); font-size: .95rem; font-weight: 600; }
.booking-remise strong { margin-left: auto; white-space: nowrap; }
.booking-remise .icon { flex: none; width: 1.1em; height: 1.1em; }
/* Rappel de la remise « pack » au-dessus de la liste des réparations */
.pack-note { display: flex; align-items: flex-start; gap: .7em; margin-bottom: 16px; padding: 14px 16px; border: 1px dashed var(--blue-line); border-radius: var(--radius); background: var(--blue-soft); font-size: .97rem; color: var(--ink-2); }
.pack-note .icon { flex: none; margin-top: .15em; color: var(--blue); }
.pack-note strong { color: var(--ink); }
/* Mobile : version courte, pour que le premier prix reste haut dans la page */
@media (max-width: 767px) {
  .pack-note { margin-bottom: 12px; padding: 10px 12px; font-size: .9rem; }
  .pack-note-detail { display: none; }
}
.booking-total:not([hidden]) { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 600; }
.booking-total strong { font: 700 1.7rem/1 var(--font-display); color: var(--blue); }
.booking-actions { display: grid; gap: 10px; }
.booking-actions .btn { width: 100%; justify-content: center; }
.booking-points { list-style: none; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.booking-points li { display: flex; align-items: flex-start; gap: .55em; }
.booking-points .icon { flex: none; margin-top: .15em; color: var(--blue); }
.booking-bar { display: none; }
@media (max-width: 1023px) {
  .booking-bar:not([hidden]) { position: fixed; inset: auto 0 0; z-index: 41; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97); box-shadow: 0 -6px 24px rgb(3 12 72 / .14); }
  .booking-bar-sum { display: grid; line-height: 1.2; }
  .booking-bar-sum span { font-size: .85rem; color: var(--ink-3); }
  .booking-bar-sum strong { font: 700 1.35rem/1.1 var(--font-display); color: var(--blue); }
  .booking-bar .btn { min-height: 50px; padding-inline: 26px; box-shadow: none; }
  .has-booking-bar .action-bar { display: none; }
}

/* Impression ----------------------------------------------------------------------- */
@media print {
  .site-header, .action-bar, .consent, .subnav, .embed, .cta-band, .catalogue-toolbar, .booking-bar, .repair-add { display: none !important; }
  .page-hero, .hero { color: #000; background: none; padding-top: 0; }
  .hero-media, .page-hero::after, .hero::after { display: none; }
}