:root {
    --ground:   #FFFFFF;
    --ink:      #241C19;
    --ink-2:    #5C4B44;
    --muted:    #7A675F;   /* assombri : 4,6:1 sur blanc (était #8E7C74, 3,97:1) */
    --brick:    #AB3722;
    --brick-bg: #FBF1EE;
    --rule:     #E4C8C1;
    --on-brick: #FFFFFF;   /* texte posé sur le terracotta */
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:   #17110F;
      --ink:      #F2EAE7;
      --ink-2:    #C9B6AE;
      --muted:    #9C8880;   /* AA sur le fond sombre et sur les cellules Flexi */
      --brick:    #E2775C;
      --brick-bg: #2A1A15;
      --rule:     #4A2F27;
      --on-brick: #17110F;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ground:   #17110F;
    --ink:      #F2EAE7;
    --ink-2:    #C9B6AE;
    --muted:    #9C8880;   /* AA sur le fond sombre et sur les cellules Flexi */
    --brick:    #E2775C;
    --brick-bg: #2A1A15;
    --rule:     #4A2F27;
    --on-brick: #17110F;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
    padding: 0 24px 72px;
    -webkit-font-smoothing: antialiased;
  }

  .sheet { max-width: 840px; margin: 0 auto; }

  /* ---------- rythme des sections ---------- */
  main > * { scroll-margin-top: 24px; }
  main > * + * { margin-top: clamp(48px, 7vw, 72px); }
  #tarifs > section + section { padding-top: clamp(34px, 5vw, 46px); }

  /* ---------- mosaïque ---------- */
  .mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 182 / 253;
    gap: 8px;
  }
  .mosaic figure { margin: 0; overflow: hidden; min-height: 0; min-width: 0; }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .t-logo { grid-column: 1 / 3; grid-row: 1 / 4; background: #AF371A; } /* couleur réelle du fichier logo.png */
  .t-logo img { object-fit: contain; }
  .t-facade { grid-column: 3 / 5; grid-row: 1 / 3; }
  .t-table  { grid-column: 3 / 5; grid-row: 3 / 6; }
  .t-1 { grid-column: 1; grid-row: 5; }
  .t-2 { grid-column: 2; grid-row: 5; }
  .t-3 { grid-column: 1; grid-row: 6; }
  .t-4 { grid-column: 2; grid-row: 6; }
  .t-5 { grid-column: 3; grid-row: 6; }
  .t-6 { grid-column: 4; grid-row: 6; }

  .t-text {
    grid-column: 1 / 3;
    grid-row: 4;
    background: var(--brick-bg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
  }
  .t-text .tt {
    margin: 0 0 6px;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.15;
    color: var(--brick);
  }
  .t-text .td {
    margin: 0;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--ink-2);
  }

  .web-cover {
    margin: 14px 0 0;
    font-weight: 600;
    font-size: clamp(.98rem, 3.4vw, 1.05rem);
    color: var(--brick);
    text-align: center;
  }

  /* ---------- sections ---------- */
  .label {
    font-weight: 700;
    font-size: clamp(1.02rem, 3.2vw, 1.12rem);
    letter-spacing: .02em;
    color: var(--brick);
    margin: 0 0 14px;
  }
  .intro { margin: 0 0 18px; max-width: 66ch; color: var(--ink-2); }

  /* ---------- tables ---------- */
  .tablewrap { overflow-x: auto; border: 1px solid var(--brick); }
  table { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
  thead th {
    background: var(--brick);
    color: var(--on-brick);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: right;
    padding: 13px 16px;
    white-space: nowrap;
    vertical-align: bottom;
  }
  thead th.l { text-align: left; }
  thead th .sup { display: block; font-size: .58rem; font-weight: 400; letter-spacing: .1em; opacity: .82; margin-bottom: 2px; }
  tbody td { padding: 15px 16px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; }
  tbody tr:last-child td { border-bottom: 0; }
  tbody td.l { text-align: left; }
  .bureau { font-weight: 600; font-size: .98rem; color: var(--ink); }
  .surface { color: var(--muted); font-size: .88rem; }
  .price { font-weight: 600; font-size: 1.08rem; color: var(--ink); }
  .price .cur { font-weight: 400; font-size: .84em; color: var(--muted); }
  td.hi { background: var(--brick-bg); }
  td.hi .price { color: var(--brick); }
  .none { color: var(--muted); }
  .foot-note { font-size: .82rem; color: var(--muted); margin: 10px 2px 0; text-align: right; }

  /* ---------- included ---------- */
  .included { columns: 2; column-gap: 40px; list-style: none; padding: 0; margin: 0; }
  .included li {
    break-inside: avoid;
    padding: 9px 0 9px 22px;
    position: relative;
    border-bottom: 1px solid var(--rule);
    font-size: .95rem;
  }
  .included li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.05em;
    width: 10px; height: 2px;
    background: var(--brick);
  }
  @media (max-width: 620px) { .included { columns: 1; } }

  /* ---------- conditions ---------- */
  .conds { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--brick); }
  .cond { padding: 20px; }
  .cond + .cond { border-left: 1px solid var(--brick); }
  .cond .k {
    display: block; font-size: .64rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brick); margin-bottom: 8px;
  }
  .cond .v { display: block; font-weight: 700; font-size: clamp(1.16rem, 4.4vw, 1.3rem); line-height: 1.15; color: var(--ink); }
  .cond .n { display: block; font-size: .85rem; color: var(--ink-2); margin-top: 5px; }

  /* ---------- roofline + contact ---------- */
  .roofline { line-height: 0; }
  .roofline svg { width: 100%; height: 26px; display: block; }
  .contact { border: 1px solid var(--brick); border-top: 0; display: grid; grid-template-columns: 104px 1fr 1.4fr; }
  .contact > div { padding: 20px; }
  .contact > div + div { border-left: 1px solid var(--brick); }
  .contact .num { font-weight: 300; font-size: clamp(2.3rem, 8vw, 2.9rem); line-height: 1; color: var(--brick); }
  .contact .addr { font-size: .95rem; color: var(--ink); line-height: 1.5; margin-top: 6px; }
  .contact .k {
    display: block; font-size: .64rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brick); margin-bottom: 8px;
  }
  .contact .who { font-size: .93rem; line-height: 1.75; }
  .contact .who a { white-space: nowrap; }
  .contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .contact a:hover { border-bottom-color: var(--brick); }
  a:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

  /* ---------- masquage visuel, lisible par les lecteurs d'écran ---------- */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .web { margin: 22px 0 0; font-weight: 600; font-size: clamp(.98rem, 3.4vw, 1.05rem); color: var(--brick); text-align: center; }
  .fineprint { margin-top: 22px; font-size: .81rem; color: var(--muted); line-height: 1.6; max-width: 76ch; }

  /* ============================================================
     RESPONSIVE
     ============================================================ */

  /* ---------- < 1000 px ---------- */
  @media (max-width: 1000px) {
    .contact { grid-template-columns: 88px 1fr 1.3fr; }
  }

  /* ---------- < 760 px : mosaïque reconstruite ---------- */
  @media (max-width: 760px) {
    .mosaic {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
      aspect-ratio: auto;
    }
    .mosaic > * { grid-column: auto; grid-row: auto; }

    /* rangée haute : le logo à gauche, la façade de nuit à droite.
       La façade n'a pas de ratio propre : elle épouse la hauteur du logo
       et se recadre d'elle-même (object-fit: cover) quelle que soit la largeur. */
    .t-logo { aspect-ratio: 3 / 4; }
    .t-logo img { object-fit: contain; }
    .t-facade { aspect-ratio: auto; height: 100%; }
    .t-facade img { object-position: 88% 50%; }

    .t-text {
      grid-column: 1 / -1;
      overflow: visible;
      padding: 18px 20px;
    }
    .t-text .tt { font-size: 1.08rem; }
    .t-text .td { font-size: .92rem; }

    .t-table { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
    .t-1, .t-2, .t-3, .t-4, .t-5, .t-6 { aspect-ratio: 1 / 1; }

    /* zone tactile de 44 px sans décoller le filet du texte */
    .contact .who { line-height: 1.45; }
    .contact .who a {
      display: inline-block;
      padding: 11px 0;
      border-bottom: 0;
      background-image: linear-gradient(var(--rule), var(--rule));
      background-repeat: no-repeat;
      background-size: 100% 1px;
      background-position: 0 calc(100% - 11px);
    }
    .contact .who a:hover { background-image: linear-gradient(var(--brick), var(--brick)); }
  }

  /* ---------- < 640 px : tableaux en fiches ---------- */
  @media (max-width: 640px) {
    .tablewrap { overflow-x: visible; border: 0; }
    table { min-width: 0; display: block; }

    thead {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    tbody, tbody tr, tbody td { display: block; }

    tbody tr { border: 1px solid var(--brick); }
    tbody tr + tr { margin-top: 14px; }

    tbody td {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 18px;
      padding: 12px 15px;
      white-space: normal;
      text-align: right;
      border-bottom: 1px solid var(--rule);
    }
    tbody td::before {
      content: attr(data-label);
      flex: 0 0 auto;
      text-align: left;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--brick);
    }
    tbody tr td:last-child { border-bottom: 0; }

    tbody td.bureau {
      display: block;
      text-align: left;
      background: var(--brick-bg);
      color: var(--brick);
      font-size: 1rem;
      letter-spacing: .04em;
      border-bottom: 1px solid var(--brick);
      padding: 12px 15px;
    }
    tbody td.bureau::before { content: none; }
    tbody td.surface { color: var(--ink-2); font-size: .95rem; }

    .foot-note { text-align: left; }
    .roofline svg { height: 18px; }
    .contact { grid-template-columns: 1fr; }
    .contact > div + div { border-left: 0; border-top: 1px solid var(--brick); }
    .contact > div:first-child { padding-bottom: 6px; }
    .conds { grid-template-columns: 1fr; }
    .cond + .cond { border-left: 0; border-top: 1px solid var(--brick); }
  }

  /* ---------- < 430 px ---------- */
  @media (max-width: 430px) {
    body { padding: 0 18px 72px; }
    .mosaic { gap: 6px; }
    .t-text { padding: 16px; }
    tbody td { padding: 11px 13px; gap: 12px; }
    tbody td.bureau { padding: 11px 13px; }
  }

  /* ============================================================
     BARRE DE CONTACT (mobile)
     ============================================================ */

  .cta-bar { display: none; }

  @media (max-width: 760px) {
    .cta-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      z-index: 20;
      min-height: 56px;
      padding: 0 18px env(safe-area-inset-bottom);
      background: var(--brick);
      color: var(--on-brick);
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      text-decoration: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .cta-bar:focus-visible { outline-offset: -6px; }
    .cta-bar.is-hidden { opacity: 0; transform: translateY(100%); pointer-events: none; }

    /* les mentions légales ne passent jamais sous la barre */
    body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  }

  /* ============================================================
     ANIMATIONS
     ============================================================ */

  /* --- à l'ouverture : la mosaïque se pose, tuile après tuile (~1 s) --- */
  @keyframes tuile-en-place {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  .js .mosaic > * {
    animation: tuile-en-place .45s cubic-bezier(.2, .7, .3, 1) both;
  }
  .js .t-logo   { animation-delay: 0s; }
  .js .t-facade { animation-delay: .06s; }
  .js .t-text   { animation-delay: .12s; }
  .js .t-table  { animation-delay: .18s; }
  .js .t-1 { animation-delay: .24s; }
  .js .t-2 { animation-delay: .30s; }
  .js .t-3 { animation-delay: .36s; }
  .js .t-4 { animation-delay: .42s; }
  .js .t-5 { animation-delay: .48s; }
  .js .t-6 { animation-delay: .54s; }

  /* --- au défilement : révélation des sections, une seule fois --- */
  .js .reveal { opacity: 0; transform: translateY(12px); }
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1);
  }

  /* --- mouvement réduit : plus rien ne bouge --- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
    .js .mosaic > *,
    .js .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }