/* Bati Secure — feuille de styles du site
   Trois parties à la suite : fondations, composants, pages. */

@layer reset, tokens, base, layout, components, pages, utilities, motion;

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Police de repli calée sur les métriques d'Archivo : limite le décalage au chargement */
@font-face {
  font-family: 'Archivo Repli';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 101%;
  ascent-override: 87%;
  descent-override: 21%;
  line-gap-override: 0%;
}

/* Tailles fluides enregistrées : calculées une seule fois sur :root, puis héritées en longueur
   absolue. Un conteneur imbriqué (@container) ne rétrécit donc pas les titres qu'il contient. */
@property --fs-h1 {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h1-commune {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h2 {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h2-bandeau {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h2-compact {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h2-legal {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h3 {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h3-fort {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-h3-ville {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-faq {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-lead {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-lead-commune {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --fs-tel {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --section-y {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@property --gutter {
  syntax: '<length>';
  inherits: true;
  initial-value: 16px;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd,
  figure,
  fieldset,
  legend {
    margin: 0;
    padding: 0;
  }

  ul,
  ol {
    list-style: none;
  }

  img,
  svg,
  picture {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    border-radius: 0;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: start;
  }

  fieldset {
    border: 0;
    min-inline-size: 0;
  }

  table {
    border-collapse: collapse;
  }

  [hidden] {
    display: none;
  }
}

@layer tokens {
  :root {
    /* Couleurs : palette complète, aucune autre teinte */
    --c-nuit: #0b1f33;
    --c-marine: #0f2a47;
    --c-laiton: #c9a24b;
    --c-laiton-clair: #d7b978;
    --c-laiton-fonce: #836931;
    --c-laiton-20: #ebe2d1;
    --c-texte-sur-laiton-20: #5c4a22;
    --c-blanc-casse: #f3f2f2;
    --c-blanc: #fff;
    --c-marine-70: #53667a;
    --c-marine-30: #afb6bf;
    --c-marine-15: #d1d4d8;
    --c-marine-08: #e1e2e4;

    /* Teintes réservées aux illustrations */
    --c-illu-voyant: #1f7f55;
    --c-illu-fond: #0a1426;
    --c-illu-acier-sombre: #46505e;
    --c-illu-acier: #aeb6c1;
    --c-illu-acier-clair: #d3d9e1;
    --c-illu-or: #d9b86a;
    --c-illu-or-doux: #e2c98c;

    /* Typographie */
    --font: 'Archivo', 'Archivo Repli', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --fs-h1: clamp(min(2.375rem, 10.5cqi), 4.45cqi, 4rem);
    --fs-h1-commune: clamp(min(2.375rem, 10.5cqi), 4cqi, 3.625rem);
    --fs-h2: clamp(min(1.75rem, 9cqi), 2.8cqi, 2.5rem);
    --fs-h2-bandeau: clamp(min(1.875rem, 9.5cqi), 3.2cqi, 2.875rem);
    --fs-h2-compact: clamp(min(1.625rem, 8.5cqi), 2.4cqi, 2.125rem);
    --fs-h2-legal: clamp(1.375rem, 1.9cqi, 1.625rem);
    --fs-h3: clamp(1.125rem, 1.4cqi, 1.25rem);
    --fs-h3-fort: clamp(1.25rem, 1.7cqi, 1.5rem);
    --fs-h3-ville: clamp(1.5rem, 2cqi, 1.75rem);
    --fs-faq: clamp(1.0625rem, 1.35cqi, 1.1875rem);
    --fs-lead: clamp(1.0625rem, 1.4cqi, 1.25rem);
    --fs-lead-commune: clamp(1.0625rem, 1.35cqi, 1.1875rem);
    --fs-tel: clamp(1.75rem, 2.4cqi, 2.25rem);
    --fs-texte-l: 1.0625rem;
    --fs-texte: 1rem;
    --fs-texte-s: 0.9375rem;
    --fs-texte-xs: 0.875rem;
    --fs-mini: 0.8125rem;
    --fs-surtitre: 0.75rem;
    --stretch-titre: 112%;

    /* Espacements (8, 12, 16, 24, 32, 48, 64 px) */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --section-y: clamp(3.5rem, 5.5cqi, 5.5rem);
    --gutter: clamp(min(1.25rem, 5cqi), 6.6cqi, 6rem);
    --wrap: 78rem;

    /* Formes */
    --filet: 2px solid var(--c-marine);
    --filet-fin: 1px solid var(--c-marine-30);
    --filet-bandeau: 6px solid var(--c-laiton);
    --cible: 2.75rem;
    --bouton: 3.25rem;
    --header-h: 5.25rem;

    /* Mouvement */
    --ease-cle: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-rebond: cubic-bezier(0.3, 1.55, 0.5, 1);
  }
}

@layer base {
  html {
    background: var(--c-blanc-casse);
  }

  body {
    container: page / inline-size;
    min-block-size: 100svh;
    background: var(--c-blanc-casse);
    color: var(--c-nuit);
    font: 400 var(--fs-texte) / 1.5 var(--font);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background: var(--c-laiton-20);
    color: var(--c-nuit);
  }

  a {
    color: var(--c-marine);

    @media (hover: hover) {
      &:hover {
        color: var(--c-marine-70);
      }
    }
  }

  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  /* Focus clavier : anneau Laiton, doublé d'un liseré Nuit pour rester lisible sur fond clair */
  :focus-visible {
    outline: 2px solid var(--c-laiton);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--c-nuit);
  }

  :target {
    scroll-margin-block-start: calc(var(--header-h) + 1rem);
  }
}

@layer layout {
  .section {
    padding-block: var(--section-y);
    padding-inline: var(--gutter);

    &.section--filet {
      border-block-start: var(--filet);
    }

    &.section--filet-bas {
      border-block-end: var(--filet);
    }

    &.section--teinte {
      background: var(--c-marine-08);
    }

    &.section--serree {
      padding-block: clamp(3rem, 5cqi, 5rem);
    }
  }

  .wrap {
    max-inline-size: var(--wrap);
    margin-inline: auto;
  }

  .pile {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  /* Deux colonnes qui s'empilent d'elles-mêmes quand la place manque */
  .duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--duo-min, 26.25rem)), 1fr));
    gap: var(--duo-gap, var(--space-3) var(--space-7));
    align-items: var(--duo-align, start);

    & > * {
      min-inline-size: 0;
    }
  }

  .entete {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .entete-ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-3) var(--space-6);
  }

  .textes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nowrap {
    white-space: nowrap;
  }
}

/* Dernière couche : elle l'emporte sur toutes les autres, sans surenchère de spécificité */
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none;
      transition: none;
      scroll-behavior: auto;
    }
  }
}

@layer components {
  /* ------------------------------------------------------------ Textes récurrents */

  .surtitre {
    font: 600 var(--fs-surtitre) / 1.2 var(--font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-laiton-fonce);
  }

  /* Sur fond Marine 08, le Laiton foncé passe sous 4,5:1 : on prend la teinte « texte sur Laiton 20 » */
  :is(.section--teinte, .moyen:not(.sombre)) :is(.surtitre, h3) {
    --c-laiton-fonce: var(--c-texte-sur-laiton-20);
  }

  .titre-1 {
    font: 800 var(--fs-h1) / 1.02 var(--font);
    font-stretch: var(--stretch-titre);
    color: var(--c-marine);
    max-inline-size: 20ch;
    text-wrap: balance;
  }

  .titre-2 {
    font: 800 var(--fs-h2) / 1.08 var(--font);
    font-stretch: var(--stretch-titre);
    color: var(--c-marine);
    max-inline-size: var(--titre-max, 22ch);
    text-wrap: balance;
  }

  .titre-3 {
    font: 700 var(--fs-h3) / 1.25 var(--font);
    color: var(--c-marine);
  }

  .titre-3-fort {
    font: 800 var(--fs-h3-fort) / 1.2 var(--font);
    font-stretch: var(--stretch-titre);
    color: var(--c-marine);
  }

  .lead {
    font: 400 var(--fs-lead) / 1.5 var(--font);
    max-inline-size: 58ch;
  }

  .texte-l {
    font-size: var(--fs-texte-l);
    line-height: var(--texte-lh, 1.6);
    max-inline-size: var(--texte-max, none);
  }

  /* Fonds sombres : les textes et accents basculent */
  .sombre {
    color: var(--c-blanc-casse);

    & .surtitre {
      color: var(--c-laiton);
    }

    & :is(.titre-1, .titre-2, .titre-3, .titre-3-fort) {
      color: inherit;
    }

    & :is(.lead, .texte-l) {
      color: var(--c-marine-15);
    }
  }

  .lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: var(--cible);
    font: 700 var(--fs-texte) / 1.2 var(--font);
    color: var(--c-marine);
    text-decoration: underline;
    text-decoration-color: var(--c-laiton);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3125rem;
    align-self: flex-start;

    & svg {
      flex: none;
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }

  .ico {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    &.ico--laiton {
      color: var(--c-laiton);
    }
  }

  .skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 40;
    padding: var(--space-2) var(--space-3);
    background: var(--c-laiton);
    color: var(--c-nuit);
    font-weight: 700;
    translate: 0 -120%;

    &:focus-visible {
      translate: 0 0;
    }
  }

  /* ------------------------------------------------------------ Boutons */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    min-block-size: var(--bouton);
    max-inline-size: 100%;
    padding: 0.375rem min(1.25rem, 5cqi);
    border: 2px solid transparent;
    font: 700 var(--fs-texte) / 1.2 var(--font);
    text-decoration: none;
    text-align: start;
    transition:
      background-color 0.2s,
      color 0.2s;

    & :is(svg, img) {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }

    &.btn--appel {
      background: var(--c-laiton);
      color: var(--c-nuit);
    }

    &.btn--contour {
      border-color: var(--btn-contour, var(--c-marine));
      color: var(--btn-contour, var(--c-marine));
    }

    &.btn--plein {
      background: var(--c-marine);
      color: var(--c-blanc-casse);
    }

    &.btn--large {
      align-self: stretch;
      justify-content: space-between;
      min-block-size: 3.5rem;
      font-size: var(--fs-texte-l);
    }

    @media (hover: hover) {
      &.btn--appel:hover {
        background: var(--c-laiton-clair);
      }

      &.btn--contour:hover {
        background: var(--btn-contour-survol, var(--c-marine-08));
      }

      &.btn--plein:hover {
        background: var(--c-nuit);
      }
    }
  }

  .sombre {
    --btn-contour: var(--c-blanc-casse);
    --btn-contour-survol: var(--c-nuit);
  }

  .paire-appel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  /* ------------------------------------------------------------ Header */

  .site-header {
    --logo-h: 3.375rem;
    --u: calc(var(--logo-h) / 285);
    /* La clé de la maquette est dessinée à l'échelle d'un logo de 60 px */
    --ku: calc(3.75rem / 285);

    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    background: var(--c-marine);
    border-block-end: 2px solid var(--c-nuit);
  }

  .site-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2) 1.75rem;
    min-block-size: 5.25rem;
    padding-inline: clamp(1.25rem, 3.4cqi, 3rem);
  }

  .site-header__logo {
    position: relative;
    flex: none;
    display: block;

    & img {
      block-size: var(--logo-h);
      inline-size: auto;
    }
  }

  /* Clé sous le logo : même géométrie que celle du logo officiel (unités du SVG × échelle) */
  .cle {
    position: absolute;
    inset-block-start: calc(181 * var(--u));
    inset-inline-start: calc(24 * var(--u));
    z-index: 1;
    inline-size: var(--cle-w, calc(667 * var(--u)));
    block-size: calc(80 * var(--ku));
    pointer-events: none;
    transition: inline-size 0.5s var(--ease-cle);
    animation:
      cle-glisse 1s var(--ease-sortie) 0.45s backwards,
      cle-apparait 0.35s ease-out 0.45s backwards;

    & svg {
      position: absolute;
      inset-block-start: 0;
      fill: var(--c-laiton);
    }
  }

  .cle__anneau {
    inset-inline-start: 0;
    inline-size: calc(80 * var(--ku));
    block-size: calc(80 * var(--ku));
  }

  .cle__tige {
    position: absolute;
    inset-block-start: calc(33.2 * var(--ku));
    inset-inline: calc(76 * var(--ku)) calc(96 * var(--ku));
    block-size: calc(13.6 * var(--ku));
    background: var(--c-laiton);
  }

  .cle__panneton {
    inset-inline-end: 0;
    inline-size: calc(100 * var(--ku));
    block-size: calc(70 * var(--ku));
  }

  @keyframes cle-glisse {
    from {
      transform: translateX(calc(-100% - 6rem));
    }
  }

  @keyframes cle-apparait {
    from {
      opacity: 0;
    }
  }

  .site-nav {
    flex: none;
    margin-inline-start: auto;
  }

  .site-nav__liste {
    display: flex;
    gap: 0 1.375rem;

    & a {
      display: flex;
      align-items: center;
      min-block-size: 5.25rem;
      padding-block-end: 0.375rem;
      font: 600 var(--fs-texte-s) / 1.2 var(--font);
      color: var(--c-blanc-casse);
      text-decoration: none;
      white-space: nowrap;
      transition: color 0.2s;

      &[aria-current='page'],
      &:focus-visible {
        color: var(--c-laiton);
      }

      @media (hover: hover) {
        &:hover {
          color: var(--c-laiton);
        }
      }
    }

    & svg {
      display: none;
    }
  }

  .site-nav__appel {
    display: none;
  }

  .site-header__appel {
    flex: none;
    min-block-size: 3rem;
    padding-inline: 1rem;
    font-size: var(--fs-texte-s);
    white-space: nowrap;

    & :is(svg, img) {
      inline-size: 1.0625rem;
      block-size: 1.0625rem;
    }
  }

  .site-header__appel-mot,
  .site-header__burger {
    display: none;
  }

  .site-header__burger {
    flex: none;
    place-items: center;
    inline-size: var(--cible);
    block-size: var(--cible);
    border: 2px solid var(--c-blanc-casse);
    color: var(--c-blanc-casse);

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      stroke-width: 2.2;
      stroke-linecap: square;
    }

    &[aria-expanded='true'] {
      background: var(--c-nuit);

      & .site-header__burger-ouvrir {
        display: none;
      }
    }

    &[aria-expanded='false'] .site-header__burger-fermer {
      display: none;
    }
  }

  /* Conteneur étroit : logo + « Appeler » + burger, menu en panneau sous la barre.
     La navigation complète demande environ 1 150 px : en dessous, elle ne tient plus sur une ligne. */
  @container page (inline-size < 75rem) {
    .site-header {
      --logo-h: clamp(2rem, 11.3cqi, 2.75rem);
      --ku: var(--u);
    }

    .site-header__bar {
      gap: var(--space-1);
      min-block-size: 4rem;
      padding-inline: min(1rem, 4cqi) min(0.75rem, 3cqi);
    }

    .cle {
      animation: none;
    }

    .site-header__appel {
      min-block-size: var(--cible);
      margin-inline-start: auto;
      padding-inline: 0.75rem;
      gap: var(--space-1);
      line-height: 1;

      & :is(svg, img) {
        inline-size: 1rem;
        block-size: 1rem;
      }
    }

    .site-header__appel-num {
      display: none;
    }

    .site-header__appel-mot {
      display: inline;
    }

    .site-header__burger {
      display: grid;
    }

    .site-nav {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-block-size: calc(100dvh - 4rem);
      margin: 0;
      padding: var(--space-1) var(--space-3) var(--space-4);
      overflow-y: auto;
      background: var(--c-nuit);
      border-block-end: var(--filet-bandeau);
    }

    .js .site-nav:not(.est-ouvert) {
      display: none;
    }

    .site-nav__liste {
      flex-direction: column;

      & a {
        justify-content: space-between;
        min-block-size: 3.5rem;
        padding-block-end: 0;
        border-block-end: 1px solid var(--c-marine);
        font: 700 1.1875rem / 1.2 var(--font);
        white-space: normal;
      }

      & svg {
        display: block;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        color: var(--c-laiton);
      }
    }

    .site-nav__appel {
      display: flex;
    }

    /* Sans JavaScript : le menu reste déplié sous la barre */
    html:not(.js) {
      & .site-header__bar {
        flex-wrap: wrap;
      }

      & .site-header__burger {
        display: none;
      }

      & .site-nav {
        position: static;
        flex-basis: 100%;
        order: 3;
        max-block-size: none;
      }
    }
  }

  /* ------------------------------------------------------------ En-tête de page */

  .intro {
    padding: clamp(2.25rem, 3.6cqi, 3.5rem) var(--gutter) clamp(2.75rem, 4.4cqi, 4rem);
    border-block-end: var(--filet);
  }

  .intro__corps {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    & .paire-appel {
      padding-block-start: 0.375rem;
    }
  }

  .ariane {
    display: flex;
    flex-wrap: wrap;
    /* Liens de 44 px de haut : la marge négative garde le rythme vertical de la maquette */
    margin-block: -0.75rem;
    gap: 0 var(--space-1);
    font: 500 var(--fs-texte-xs) / 1.4 var(--font);
    color: var(--c-marine-70);

    & li {
      display: flex;
      align-items: center;
      gap: var(--space-1);
    }

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--cible);
      color: var(--c-marine);
      text-decoration: underline;
      text-decoration-color: var(--c-laiton);
      text-decoration-thickness: 2px;
      text-underline-offset: 0.25rem;
    }

    .sombre & {
      color: var(--c-marine-30);

      & a {
        color: var(--c-blanc-casse);
        text-decoration-thickness: auto;
      }
    }
  }

  /* ------------------------------------------------------------ Bandeau d'appel */

  .bandeau {
    padding: var(--section-y) var(--gutter);
    background: var(--c-marine);
    border-block-start: var(--filet-bandeau);
  }

  .bandeau__corps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5) var(--space-7);
  }

  .bandeau__texte {
    flex: 1 1 32.5rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    & h2 {
      font: 800 var(--fs-h2-bandeau) / 1.05 var(--font);
      font-stretch: var(--stretch-titre);
      max-inline-size: 20ch;
      text-wrap: balance;
    }

    & p:not(.surtitre) {
      font-size: var(--fs-texte-l);
      line-height: 1.55;
      color: var(--c-marine-15);
      max-inline-size: 54ch;
    }
  }

  .bandeau__actions {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .bandeau__devis {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--cible);
    font: 600 var(--fs-texte-s) / 1.2 var(--font);
    color: var(--c-blanc-casse);
    text-decoration: none;

    & svg {
      inline-size: 1.125rem;
      block-size: 1.125rem;
      stroke-width: 2.2;
      color: var(--c-laiton);
    }

    @media (hover: hover) {
      &:hover {
        color: var(--c-laiton);
      }
    }
  }

  /* ------------------------------------------------------------ Footer */

  .site-footer {
    container: pied / inline-size;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 3.4cqi, 3rem);
    padding: clamp(3rem, 4.4cqi, 4.5rem) var(--gutter) var(--space-4);
    background: var(--c-nuit);
    color: var(--c-marine-15);
  }

  .site-footer__haut {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
  }

  .site-footer__marque {
    flex: 1.6 1 23.75rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    & img {
      inline-size: 12.5rem;
    }

    & p:not(.site-footer__horaires) {
      line-height: 1.6;
      max-inline-size: 40ch;
    }
  }

  .site-footer__tel {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cible);
    font: 800 var(--fs-tel) / 1.1 var(--font);
    font-stretch: var(--stretch-titre);
    color: var(--c-laiton);
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        color: var(--c-laiton-clair);
      }
    }
  }

  /* Fiche Google : l'icône seule, qui pivote et grossit légèrement au survol */
  .site-footer__google {
    display: grid;
    place-items: center;
    inline-size: var(--cible);
    block-size: var(--cible);
    color: var(--c-laiton);

    & :is(svg, img) {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      transition:
        rotate 0.45s var(--ease-rebond),
        scale 0.45s var(--ease-rebond);
    }

    @media (hover: hover) {
      &:hover {
        color: var(--c-laiton-clair);

        & :is(svg, img) {
          rotate: -12deg;
          scale: 1.2;
        }
      }
    }
  }

  .site-footer__horaires {
    font: 600 var(--fs-surtitre) / 1.4 var(--font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-marine-30);
    overflow-wrap: anywhere;
  }

  .site-footer__colonnes {
    flex: 3 1 32.5rem;
    min-inline-size: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) 2.5rem;
  }

  .pied-col {
    flex: 1 1 10.625rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;

    & ul {
      display: flex;
      flex-direction: column;
      padding-block-end: var(--space-1);
    }

    & li a {
      display: flex;
      align-items: center;
      min-block-size: 2.5rem;
      line-height: 1.25;
      color: var(--c-marine-15);
      text-decoration: none;

      @media (hover: hover) {
        &:hover {
          color: var(--c-blanc-casse);
          text-decoration: underline;
          text-decoration-color: var(--c-laiton);
        }
      }
    }
  }

  .pied-col__titre {
    font: 700 var(--fs-mini) / 1.2 var(--font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-laiton);
  }

  .pied-col__bouton {
    display: none;
    inline-size: 100%;
    justify-content: space-between;
    align-items: center;
    min-block-size: 3.5rem;
    font: 700 var(--fs-texte-l) / 1.2 var(--font);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-blanc-casse);
  }

  .signe {
    flex: none;
    font: 400 1.625rem / 1 var(--font);
    color: var(--c-laiton);

    &::before {
      content: '+';
    }

    [aria-expanded='true'] > &::before {
      content: '−';
    }
  }

  @container pied (inline-size < 44rem) {
    /* Empilé : tout s'aligne à gauche */
    .site-footer__google {
      place-items: center start;
    }

    .site-footer .site-footer__bas > :is(p, ul) {
      flex-basis: 100%;
      justify-content: flex-start;
    }

    .site-footer__colonnes {
      gap: 0;
    }

    .pied-col {
      flex-basis: 100%;
      border-block-start: 1px solid var(--c-marine);
    }

    .js {
      & .pied-col__fixe {
        display: none;
      }

      & .pied-col__bouton {
        display: flex;
      }

      & .pied-col:has(.pied-col__bouton[aria-expanded='false']) ul {
        display: none;
      }
    }

    html:not(.js) .pied-col {
      padding-block-start: var(--space-3);
    }
  }

  /* Trois zones : mentions à gauche, fiche Google au milieu, liens légaux à droite.
     Les deux côtés ont la même largeur : le lien du milieu est donc centré. */
  .site-footer__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-5);
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--c-marine);
    font-size: var(--fs-texte-xs);
    color: var(--c-marine-30);

    & > :is(p, ul) {
      flex: 1 1 18rem;
    }

    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0 var(--space-4);
    }

    & ul a {
      display: flex;
      align-items: center;
      min-block-size: var(--cible);
      line-height: 1.2;
      color: var(--c-marine-15);
      text-decoration: underline;
      text-decoration-color: var(--c-marine-70);
      text-underline-offset: 0.25rem;
      transition:
        color 0.2s,
        text-decoration-color 0.2s;

      @media (hover: hover) {
        &:hover {
          color: var(--c-blanc-casse);
          text-decoration-color: var(--c-laiton);
        }
      }
    }
  }

  /* ------------------------------------------------------------ Accordéon FAQ */

  .faq {
    border-block-end: var(--filet);
    min-inline-size: 0;
  }

  .faq__item {
    border-block-start: var(--filet);
  }

  .faq__q {
    font: 700 var(--fs-faq) / 1.35 var(--font);
    color: var(--c-nuit);
  }

  .faq__bouton {
    inline-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    min-block-size: 4.25rem;
    padding-block: var(--space-3);
    cursor: pointer;

    @media (hover: hover) {
      &:hover {
        color: var(--c-marine-70);
      }
    }
  }

  .faq__signe {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: var(--filet);
    color: var(--c-marine);
    font: 500 1.375rem / 1 var(--font);

    &::before {
      content: '+';
    }
  }

  .faq__bouton[aria-expanded='true'] .faq__signe {
    background: var(--c-marine);
    color: var(--c-laiton);

    &::before {
      content: '−';
    }
  }

  .faq__a {
    padding: 0 3.25rem 1.375rem 0;
    line-height: 1.6;
    max-inline-size: 68ch;
  }

  .js .faq__item:has(.faq__bouton[aria-expanded='false']) .faq__a {
    display: none;
  }

  /* ------------------------------------------------------------ Cartes services */

  .services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--services-min, 17rem)), 1fr));
    gap: var(--space-3);

    & li {
      display: grid;
    }
  }

  .service {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.875rem;
    block-size: 100%;
    padding: 0.875rem 1.125rem 0.875rem 0.625rem;
    border: 2px solid var(--c-marine-15);
    background: var(--c-blanc);
    color: var(--c-nuit);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color 0.2s,
      translate 0.2s;

    &:focus-visible {
      border-color: var(--c-marine);
    }

    @media (hover: hover) {
      &:hover {
        border-color: var(--c-marine);
        color: var(--c-nuit);
        translate: 0 -2px;
      }
    }

    & h3 {
      margin-block-end: 0.25rem;
      font: 700 var(--fs-h3) / 1.2 var(--font);
      color: var(--c-marine);
      text-wrap: balance;
    }

    & p {
      font-size: var(--fs-texte-s);
      color: var(--c-marine-70);
    }
  }

  .service__illu {
    inline-size: 4.75rem;
    block-size: 5.9375rem;
    overflow: visible;

    & .a {
      transform-box: view-box;
    }
  }

  /* Chaque pièce animée porte sa propre animation ; elle ne joue qu'au déclenchement */
  .service.joue .a {
    animation: var(--anim);
  }

  @media (hover: hover) {
    .service:is(:hover, :focus-visible) .a {
      animation: var(--anim);
    }
  }

  .a-trousseau {
    transform-origin: 60px 8px;
    --anim: svc-swing 1.5s cubic-bezier(0.3, 0.6, 0.4, 1);
  }

  .a-cle1 {
    transform-origin: 60px 34px;
    --anim: svc-swing 1.3s 0.08s cubic-bezier(0.3, 0.6, 0.4, 1);
  }

  .a-cle2 {
    transform-origin: 60px 34px;
    --anim: svc-swing-alt 1.4s 0.03s cubic-bezier(0.3, 0.6, 0.4, 1);
  }

  .a-cle3 {
    transform-origin: 60px 34px;
    --anim: svc-swing 1.2s 0.12s cubic-bezier(0.3, 0.6, 0.4, 1) reverse;
  }

  .a-pene {
    --anim: svc-latch 1.3s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-bequille {
    transform-origin: 60px 56.5px;
    --anim: svc-lever 1.3s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-rotor {
    transform-origin: 60px 52px;
    --anim: svc-turn 1.5s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-point1 {
    --anim: svc-bolt 1.4s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-point2 {
    --anim: svc-bolt 1.4s 0.1s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-point3 {
    --anim: svc-bolt 1.4s 0.2s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-cadran {
    transform-origin: 50px 74px;
    --anim: svc-dial 1.7s cubic-bezier(0.45, 0, 0.3, 1);
  }

  .a-poignee {
    transform-origin: 84px 74px;
    --anim: svc-handle 1.7s cubic-bezier(0.45, 0, 0.3, 1);
  }

  .a-bouclier {
    transform-origin: 60px 75px;
    --anim: svc-pop 1.2s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-coche {
    stroke-dasharray: 46;
    stroke-dashoffset: 46;
    --anim: svc-check 1.6s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-tablier {
    transform-origin: 60px 32px;
    --anim: svc-roll 1.8s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-voyant {
    --anim: svc-led 1.9s linear;
  }

  .a-reflet {
    --anim: svc-shine 1.4s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-cremone {
    transform-origin: 84px 75px;
    --anim: svc-crem 1.4s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-vantail {
    --anim: svc-slide 1.6s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-lame {
    transform-origin: 52px 60px;
    --anim: svc-flip 1.6s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .service__illu .a-touche {
    transform-box: fill-box;
    transform-origin: center;
    --anim: svc-press 0.35s 0.95s ease-out;
  }

  .a-onde1 {
    opacity: 0;
    --anim: svc-wave 1.6s 0.9s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-onde2 {
    opacity: 0;
    --anim: svc-wave 1.6s 1s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-gache {
    --anim: svc-strike 1.6s 0.5s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .service__illu .a-vis1 {
    transform-box: fill-box;
    transform-origin: center;
    --anim: svc-screw 1.1s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .service__illu .a-vis2 {
    transform-box: fill-box;
    transform-origin: center;
    --anim: svc-screw 1.1s 0.15s cubic-bezier(0.4, 0, 0.3, 1);
  }

  .a-pene-dormant {
    --anim: svc-shoot 1.6s 0.55s cubic-bezier(0.4, 0, 0.3, 1);
  }

  @keyframes svc-swing {
    0% {
      transform: rotate(0);
    }
    12% {
      transform: rotate(15deg);
    }
    28% {
      transform: rotate(-11deg);
    }
    44% {
      transform: rotate(7deg);
    }
    60% {
      transform: rotate(-4deg);
    }
    76% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-swing-alt {
    0% {
      transform: rotate(0);
    }
    15% {
      transform: rotate(-12deg);
    }
    32% {
      transform: rotate(9deg);
    }
    50% {
      transform: rotate(-5deg);
    }
    70% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-lever {
    0% {
      transform: rotate(0);
    }
    22%,
    55% {
      transform: rotate(30deg);
    }
    76% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-latch {
    0% {
      transform: translateX(0);
    }
    22%,
    58% {
      transform: translateX(16px);
    }
    78%,
    100% {
      transform: translateX(0);
    }
  }

  @keyframes svc-turn {
    0% {
      transform: rotate(0);
    }
    30% {
      transform: rotate(97deg);
    }
    42% {
      transform: rotate(88deg);
    }
    52%,
    66% {
      transform: rotate(90deg);
    }
    86% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-bolt {
    0% {
      transform: translateX(0);
    }
    22%,
    46% {
      transform: translateX(-34px);
    }
    60% {
      transform: translateX(4px);
    }
    72% {
      transform: translateX(-2px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes svc-dial {
    0% {
      transform: rotate(0);
    }
    24% {
      transform: rotate(150deg);
    }
    48% {
      transform: rotate(-90deg);
    }
    68% {
      transform: rotate(60deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-handle {
    0%,
    66% {
      transform: rotate(0);
    }
    82% {
      transform: rotate(55deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-led {
    0%,
    52% {
      fill: var(--c-marine-70);
    }
    60%,
    94% {
      fill: var(--c-illu-voyant);
    }
    100% {
      fill: var(--c-marine-70);
    }
  }

  @keyframes svc-pop {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(1.07);
    }
    45% {
      transform: scale(0.97);
    }
    65% {
      transform: scale(1.02);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes svc-check {
    0% {
      stroke-dashoffset: 46;
    }
    35%,
    75% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 46;
    }
  }

  @keyframes svc-roll {
    0% {
      transform: scaleY(1);
    }
    35%,
    65% {
      transform: scaleY(0.3);
    }
    100% {
      transform: scaleY(1);
    }
  }

  @keyframes svc-crem {
    0% {
      transform: rotate(0);
    }
    30%,
    60% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-shine {
    0% {
      transform: translateX(0);
    }
    55% {
      transform: translateX(24px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes svc-slide {
    0% {
      transform: translateX(0);
    }
    30%,
    65% {
      transform: translateX(-30px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes svc-flip {
    0% {
      transform: rotate(0);
    }
    25%,
    45% {
      transform: rotate(-165deg);
    }
    70% {
      transform: rotate(8deg);
    }
    85% {
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes svc-press {
    0%,
    100% {
      transform: none;
    }
    50% {
      transform: scale(0.72);
      fill: var(--c-laiton);
    }
  }

  @keyframes svc-wave {
    0%,
    50% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    85% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes svc-screw {
    0% {
      transform: rotate(0);
    }
    40%,
    60% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes svc-strike {
    0%,
    100% {
      transform: translateY(0);
    }
    35%,
    65% {
      transform: translateY(-6px);
    }
  }

  @keyframes svc-shoot {
    0%,
    20% {
      transform: translateX(0);
    }
    45%,
    70% {
      transform: translateX(-22px);
    }
    100% {
      transform: translateX(0);
    }
  }

  /* ------------------------------------------------------------ Goupilles (étapes) */

  .goupilles {
    padding: var(--section-y) var(--gutter);
    background: var(--c-nuit);
  }

  .goupilles__corps {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 2.6cqi, 2.25rem);
  }

  .goupilles__scene {
    container: goupilles / inline-size;
    inline-size: 100%;
    max-inline-size: 60rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .goupilles__figure {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;

    & text {
      display: none;
      font: 600 15px var(--font);
      fill: var(--c-laiton);
      text-anchor: middle;
    }
  }

  .goupille__ressort {
    transform-box: fill-box;
    transform-origin: 50% 0;
  }

  .goupille__ressort,
  .goupille__pile {
    transition: transform 0.45s var(--ease-rebond);
  }

  .goupille {
    &:nth-of-type(1) {
      --levee: -26px;
      --tasse: 0.5357;
    }
    &:nth-of-type(2) {
      --levee: -14px;
      --tasse: 0.6818;
    }
    &:nth-of-type(3) {
      --levee: -32px;
      --tasse: 0.4839;
    }
    &:nth-of-type(4) {
      --levee: -20px;
      --tasse: 0.6;
    }
    &:nth-of-type(5) {
      --levee: -28px;
      --tasse: 0.5172;
    }
  }

  /* État final par défaut (sans JS ou mouvement réduit) ; « armé », chaque goupille attend son tour */
  :is(.goupilles:not([data-arme]) .goupille, .goupille.est-levee) {
    & .goupille__pile {
      transform: translateY(var(--levee));
    }

    & .goupille__ressort {
      transform: scaleY(var(--tasse));
    }
  }

  .goupilles__cisaillement {
    stroke: var(--c-laiton);
    stroke-width: 2.4;
    transition: stroke 0.3s;

    .goupilles[data-arme]:not(.est-ouvert) & {
      stroke: var(--c-marine-30);
      stroke-width: 2;
      stroke-dasharray: 10 6;
    }
  }

  .etapes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-1);
    text-align: center;
  }

  .etape {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: var(--space-2);
    row-gap: 0.125rem;
    align-content: start;
    padding: var(--space-1) 0.375rem;
    transition:
      opacity 0.3s,
      background-color 0.2s;

    .goupilles[data-arme] &:not(.est-levee) {
      opacity: 0.45;
    }

    @media (hover: hover) {
      .goupilles[data-arme] &:hover {
        background: var(--c-marine);
      }
    }

    & h3 {
      font: 700 1.125rem / 1.25 var(--font);
    }

    & p {
      font-size: var(--fs-texte-s);
      line-height: 1.45;
      color: var(--c-marine-15);
    }
  }

  .etape__num {
    font: 600 var(--fs-texte-xs) / 1.6 var(--font);
    color: var(--c-laiton);
  }

  .etape__rejouer {
    position: absolute;
    inset: 0;
    inline-size: 100%;
  }

  @container goupilles (inline-size < 40rem) {
    .goupilles__figure {
      margin-block-end: var(--space-3);

      & text {
        display: inline;
      }
    }

    .etapes {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-2);
      padding-block-start: var(--space-1);
      text-align: start;
    }

    .etape {
      grid-template-columns: 2rem minmax(0, 1fr);
    }

    .etape__num {
      grid-row: span 2;
    }
  }

  /* ------------------------------------------------------------ En attendant le serrurier */

  .attente__corps {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.4cqi, 2rem);
  }

  .conseils {
    container: conseils / inline-size;
  }

  .conseils__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: var(--space-3);
  }

  .conseil {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--c-blanc);
    border: 2px solid var(--c-marine-15);
    border-block-start: 4px solid var(--c-laiton);
  }

  .conseil__tete {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .conseil__ico {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--cible);
    block-size: var(--cible);
    background: var(--c-marine);
    color: var(--c-laiton);

    & :is(svg, img) {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }
  }

  .conseil__num {
    font: 800 var(--fs-texte-s) / 1 var(--font);
    color: var(--c-laiton-fonce);
  }

  .conseil__bouton {
    display: none;
  }

  @container conseils (inline-size < 34rem) {
    .js {
      & .conseils__liste {
        display: block;
        border-block-end: var(--filet);
      }

      & .conseil {
        display: block;
        padding: 0;
        background: none;
        border: 0;
        border-block-start: var(--filet);
      }

      & :is(.conseil__tete, .conseil__fixe) {
        display: none;
      }

      & .conseil__bouton {
        inline-size: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 3.75rem;
        padding-block: 0.625rem;
        font: 700 var(--fs-texte) / 1.3 var(--font);
        color: var(--c-marine);

        & .conseil__ico {
          inline-size: 2.25rem;
          block-size: 2.25rem;

          & :is(svg, img) {
            inline-size: 1.125rem;
            block-size: 1.125rem;
          }
        }

        & .conseil__libelle {
          flex: 1;
          min-inline-size: 0;
        }

        & .signe {
          font-size: 1.5rem;
        }
      }

      & .conseil__texte {
        padding: 0 0 var(--space-3) 3rem;
        font-size: var(--fs-texte-s);
      }

      & .conseil:has(.conseil__bouton[aria-expanded='false']) .conseil__texte {
        display: none;
      }
    }
  }

  /* ------------------------------------------------------------ Serrure animée (hero de l'accueil) */

  /* Le SVG est dessiné par serrure.js ; le ratio 4:3 réserve la place avant le script (pas de décalage) */
  .serrure {
    --serrure-police-plan: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

    container: serrure / inline-size;
    position: relative;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-illu-fond);

    /* data-bg="none" : le fond du hero passe à travers */
    &[data-bg='none'] {
      background: transparent;
    }

    & > svg {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* Fils des ressorts : spires arrière sombres, spires avant claires, reflet */
  .serrure__fil-arriere,
  .serrure__fil-avant,
  .serrure__fil-reflet,
  .serrure__lame,
  .serrure__lame-reflet {
    fill: none;
    stroke-linecap: round;
  }

  .serrure__fil-arriere {
    stroke: var(--c-illu-acier-sombre);
    stroke-width: 3.2;
    stroke-linejoin: round;

    &.serrure__fil--fin {
      stroke-width: 2.2;
    }
  }

  .serrure__fil-avant {
    stroke: var(--c-illu-acier-clair);
    stroke-width: 3.6;
    stroke-linejoin: round;

    &.serrure__fil--fin {
      stroke-width: 2.5;
    }
  }

  .serrure__fil-reflet {
    stroke: var(--c-blanc);
    stroke-opacity: 0.75;
    stroke-width: 1;

    &.serrure__fil--fin {
      stroke-width: 0.7;
    }
  }

  /* Ressorts à lame (gorges et fouillot) */
  .serrure__lame {
    stroke: var(--c-illu-acier);
    stroke-width: 3;
  }

  .serrure__lame-reflet {
    stroke: var(--c-blanc);
    stroke-opacity: 0.6;
    stroke-width: 0.9;
  }

  /* Tailles de texte en unités du dessin SVG (viewBox de 800 de large) :
     elles suivent l'échelle du visuel, elles ne sont pas figées. */

  /* Gravure « BATI SECURE » : police du site */
  .serrure__gravure {
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    font-stretch: 125%;
    letter-spacing: 0.32em;
  }

  /* Intro « plan technique » : le dessin se trace en lignes dorées, les légendes apparaissent,
     puis la matière prend le relais (géré par serrure.js). La classe est doublée pour l'emporter
     sur les styles des pièces copiées dans le plan (fils, lames, gravure). */
  .serrure__plan.serrure__plan * {
    fill: none;
    stroke: var(--c-illu-or);
    stroke-width: 0.9;
    stroke-opacity: 0.9;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .serrure__plan.serrure__plan text {
    stroke: none;
    fill: var(--c-illu-or);
    opacity: 0;
  }

  .est-trace .serrure__plan {
    & * {
      animation: serrure-trace 1.3s cubic-bezier(0.55, 0.1, 0.25, 1) forwards;
    }

    & :is(.serrure__plan-2, .serrure__plan-2 *) {
      animation-delay: 0.25s;
    }

    & :is(.serrure__plan-3, .serrure__plan-3 *) {
      animation-delay: 0.5s;
    }

    & :is(.serrure__plan-4, .serrure__plan-4 *) {
      animation-delay: 0.75s;
    }

    & text {
      --serrure-opacite: 0.55;

      animation: serrure-apparition 0.6s 1s ease forwards;
    }
  }

  /* Légendes et traits de rappel */
  .serrure__legendes {
    & path {
      fill: none;
      stroke: var(--c-illu-or-doux);
      stroke-width: 0.9;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }

    & circle {
      fill: var(--c-illu-or-doux);
      opacity: 0;
    }

    & text {
      font-family: var(--serrure-police-plan);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.14em;
      fill: var(--c-illu-or-doux);
      opacity: 0;
    }

    .est-trace & path {
      animation: serrure-trace 0.8s 1.2s cubic-bezier(0.55, 0.1, 0.25, 1) forwards;
    }

    .est-trace & :is(circle, text) {
      animation: serrure-apparition 0.5s 1.6s ease forwards;
    }
  }

  @keyframes serrure-trace {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes serrure-apparition {
    to {
      opacity: var(--serrure-opacite, 1);
    }
  }

  /* Bloc étroit : légendes illisibles, on garde seulement le tracé */
  @container serrure (inline-size < 32.5rem) {
    .serrure__legendes {
      display: none;
    }
  }

  /* ------------------------------------------------------------ Lampe de poche */

  .lampe {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr));
    align-items: center;
    gap: clamp(1.75rem, 4cqi, 3.5rem);
    padding: clamp(3.5rem, 6cqi, 6rem) var(--gutter);
    overflow: hidden;
    touch-action: pan-y;
    /* On promène la lampe à la souris ou au doigt : le texte ne doit pas se sélectionner au passage */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    border-block-start: var(--filet-bandeau);
    background: repeating-linear-gradient(90deg, var(--c-marine) 0 3.875rem, var(--c-nuit) 3.875rem 4rem);

    &.est-active {
      @media (pointer: fine) {
        cursor: none;
      }
    }
  }

  .lampe__texte {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-inline-size: 35rem;

    & h2 {
      font: 800 var(--fs-h2-bandeau) / 1.05 var(--font);
      font-stretch: var(--stretch-titre);
      text-wrap: balance;
    }

    & > p:not(.lampe__aide, .surtitre) {
      font-size: var(--fs-texte-l);
      line-height: 1.55;
      color: var(--c-marine-15);
      max-inline-size: 46ch;
    }
  }

  .lampe__numero {
    margin-block-start: 0.375rem;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
  }

  .lampe__aide {
    display: none;
    align-items: center;
    gap: var(--space-1);
    font: 600 var(--fs-surtitre) / 1.2 var(--font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-marine-30);

    .lampe.est-active & {
      display: flex;
    }

    & svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      color: var(--c-laiton);
    }

    @media (hover: none) {
      & .lampe__aide-souris {
        display: none;
      }
    }

    @media (hover: hover) {
      & .lampe__aide-doigt {
        display: none;
      }
    }
  }

  .lampe__porte {
    /* Décor : ni cliquable, ni déplaçable à la souris */
    pointer-events: none;
    -webkit-user-drag: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    text-align: center;

    & svg {
      inline-size: clamp(3.5rem, 6cqi, 5rem);
      block-size: auto;
    }

    & img {
      inline-size: clamp(10rem, 16cqi, 13.75rem);
    }

    & .surtitre {
      color: var(--c-laiton);
    }
  }

  .lampe__halo {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      circle var(--tr, 11.25rem) at var(--tx, 72%) var(--ty, 55%),
      rgb(215 185 120 / 0.16) 0%,
      rgb(215 185 120 / 0) 34%,
      rgb(3 8 14 / 0.985) 100%
    );
  }

  /* ------------------------------------------------------------ Avis Google (masqué tant qu'il n'y a pas de vrais avis) */

  .avis__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    align-items: start;
    gap: var(--space-4) var(--space-3);
  }

  .avis__item {
    position: relative;
    min-inline-size: 0;
    padding-block-start: 1.625rem;

    &::before {
      content: '';
      position: absolute;
      z-index: 1;
      inset-block-start: 0.125rem;
      inset-inline-start: calc(50% - 0.3125rem);
      inline-size: 0.625rem;
      block-size: 0.625rem;
      border-radius: 50%;
      background: var(--c-marine-70);
    }
  }

  .avis__balance {
    transform-origin: 50% -1.1875rem;

    .avis[data-arme] .avis__item:not(.est-entre) & {
      opacity: 0;
    }

    .avis__item.est-entre:not(.est-pose) & {
      animation: rvw-in 1.7s cubic-bezier(0.3, 0.6, 0.4, 1) calc(var(--i, 0) * 110ms) both;
    }

    .avis__item.rejoue & {
      animation: rvw-tap 1.5s cubic-bezier(0.3, 0.6, 0.4, 1);
    }
  }

  .avis__carte {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.625rem;
    padding: 1.875rem 1.125rem 1.125rem;
    background: var(--c-blanc);
    border: 2px solid var(--c-marine-15);
    border-block-start: 4px solid var(--c-marine);
    transform-origin: 50% -1.1875rem;

    /* Attache et œillet de l'étiquette */
    &::before {
      content: '';
      position: absolute;
      inset-block-start: -1.5rem;
      inset-inline-start: calc(50% - 0.5rem);
      inline-size: 1rem;
      block-size: 2.125rem;
      border: 2.5px solid var(--c-marine-70);
    }

    &::after {
      content: '';
      position: absolute;
      inset-block-start: 0.5rem;
      inset-inline-start: calc(50% - 0.375rem);
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border-radius: 50%;
      background: var(--c-blanc-casse);
      border: 1px solid var(--c-marine-30);
    }

    @media (hover: hover) {
      &:hover {
        animation: rvw-hover 1.4s cubic-bezier(0.3, 0.6, 0.4, 1);
      }
    }
  }

  .avis__rejouer {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  .avis__auteur {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.625rem;

    & strong {
      display: block;
      font: 700 var(--fs-texte-s) / 1.25 var(--font);
      color: var(--c-marine);
    }

    & small {
      font: 400 var(--fs-mini) / 1.3 var(--font);
      color: var(--c-marine-70);
    }
  }

  .avis__initiale {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    background: var(--c-marine);
    color: var(--c-laiton);
    font: 700 var(--fs-texte-s) / 1 var(--font);
  }

  .avis__etoiles {
    display: flex;
    gap: 0.125rem;
    color: var(--c-marine-15);

    & svg {
      inline-size: 0.9375rem;
      block-size: 0.9375rem;
      fill: currentColor;
    }

    & .pleine {
      color: var(--c-laiton);
    }
  }

  .avis__texte {
    font-size: var(--fs-texte-s);
    overflow-wrap: anywhere;
    white-space: pre-line;
  }

  @keyframes rvw-in {
    0% {
      transform: rotate(-9deg);
      opacity: 0;
    }
    8% {
      transform: rotate(-6deg);
      opacity: 1;
    }
    24% {
      transform: rotate(6deg);
    }
    42% {
      transform: rotate(-4deg);
    }
    60% {
      transform: rotate(2.5deg);
    }
    80% {
      transform: rotate(-1deg);
    }
    100% {
      transform: rotate(0);
      opacity: 1;
    }
  }

  @keyframes rvw-tap {
    0% {
      transform: rotate(0);
    }
    10% {
      transform: rotate(-8deg);
    }
    26% {
      transform: rotate(7deg);
    }
    42% {
      transform: rotate(-4.5deg);
    }
    58% {
      transform: rotate(2.5deg);
    }
    76% {
      transform: rotate(-1deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  @keyframes rvw-hover {
    0% {
      transform: rotate(0);
    }
    15% {
      transform: rotate(4deg);
    }
    35% {
      transform: rotate(-3deg);
    }
    55% {
      transform: rotate(2deg);
    }
    75% {
      transform: rotate(-1deg);
    }
    100% {
      transform: rotate(0);
    }
  }

  /* ------------------------------------------------------------ Tuiles (villes, communes) */

  .tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tuiles-min, 13.125rem)), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-1);

    & li {
      display: grid;
    }
  }

  .tuiles--pile {
    display: flex;
    flex-direction: column;
  }

  .tuile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    block-size: 100%;
    min-block-size: var(--tuile-h, 3.75rem);
    padding: 0.625rem var(--space-3);
    border: var(--filet);
    background: var(--c-blanc-casse);
    color: var(--c-marine);
    text-decoration: none;
    font: 700 var(--fs-texte) / 1.2 var(--font);
    transition:
      background-color 0.2s,
      color 0.2s;

    & svg {
      inline-size: 1.125rem;
      block-size: 1.125rem;
      stroke-width: 2.5;
      color: var(--c-laiton);
    }

    &.est-active {
      background: var(--c-marine);
      color: var(--c-blanc-casse);
    }

    @media (hover: hover) {
      &:hover {
        background: var(--c-marine);
        color: var(--c-blanc-casse);
      }
    }
  }

  .tuile__textes {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;

    & small {
      font: 500 var(--fs-mini) / 1.2 var(--font);
      opacity: 0.75;
    }
  }

  .tuile--ville {
    --tuile-h: 4.25rem;
    gap: var(--space-3);
    padding: var(--space-2) 1.25rem;

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }

    & .tuile__textes {
      font: 800 1.25rem / 1.2 var(--font);
      font-stretch: var(--stretch-titre);

      & small {
        font: 500 var(--fs-texte-xs) / 1.3 var(--font);
        font-stretch: 100%;
        opacity: 0.8;
      }
    }
  }

  /* ------------------------------------------------------------ Cartes SVG */

  .carte-image {
    inline-size: 100%;
    border: var(--filet);
    background: var(--c-blanc-casse);
  }

  .carte {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;

    & svg {
      inline-size: 100%;
      block-size: auto;
      border: var(--filet);
      background: var(--c-blanc-casse);
    }
  }

  .carte__zone {
    fill: var(--c-marine-08);
    stroke: var(--c-blanc-casse);
    stroke-width: 3;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.2s;

    &.est-active {
      fill: var(--c-marine);
    }
  }

  .carte__noms {
    font-family: var(--font);
    letter-spacing: 0.2px;
    pointer-events: none;

    & text {
      fill: var(--c-nuit);
      stroke: var(--c-marine-08);
      stroke-width: 4;
      stroke-linejoin: round;
      paint-order: stroke;

      &.est-active {
        fill: var(--c-blanc-casse);
        stroke: var(--c-marine);
        font-weight: 800;
      }
    }

    & .carte__source {
      fill: var(--c-marine-70);
      stroke: none;
    }
  }

  .carte__legende {
    min-block-size: 1.25rem;
    font: 500 var(--fs-texte-xs) / 1.4 var(--font);
    color: var(--c-marine-70);
  }

  /* ------------------------------------------------------------ Emplacements photo */

  .photo {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: var(--ratio, 4 / 3);
    min-inline-size: 0;
    background: var(--photo-fond, var(--c-marine-08));
    overflow: hidden;

    & picture,
    & > img {
      position: absolute;
      inset: 0;
    }

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* ------------------------------------------------------------ Blocs divers */

  .puces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .puce {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--cible);
    padding: 0.375rem var(--space-3);
    border: var(--filet);
    color: var(--c-marine);
    font: 600 var(--fs-texte-s) / 1.2 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color 0.2s,
      color 0.2s;

    &[aria-pressed='true'],
    :checked + & {
      background: var(--c-marine);
      color: var(--c-blanc-casse);
    }

    :focus-visible + & {
      outline: 2px solid var(--c-laiton);
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--c-nuit);
    }

    @media (hover: hover) {
      &:hover {
        background: var(--c-marine);
        color: var(--c-blanc-casse);
      }
    }
  }

  .etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);

    & li {
      display: flex;
      align-items: center;
      min-block-size: 2.5rem;
      padding: 0.25rem 0.875rem;
      background: var(--c-blanc-casse);
      border: var(--filet);
      font: 600 var(--fs-texte-xs) / 1.2 var(--font);
      color: var(--c-marine);
    }
  }

  .grille-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--points-min, 17.5rem)), 1fr));
    gap: var(--points-gap, var(--space-5));
  }

  .point {
    display: flex;
    flex-direction: column;
    gap: var(--point-gap, 0.625rem);
    padding-block-start: var(--space-3);
    border-block-start: 4px solid var(--c-marine);

    & p {
      text-wrap: pretty;
    }
  }
}

@layer pages {
  /* ------------------------------------------------------------ Accueil */

  .hero {
    padding: clamp(2.25rem, 4.4cqi, 4.5rem) var(--gutter) clamp(3rem, 5.5cqi, 5.5rem);
    background: var(--c-nuit);
  }

  .hero__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    align-items: center;
    gap: clamp(2rem, 4cqi, 3.5rem);
  }

  .hero__texte {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    min-inline-size: 0;

    & .titre-1 {
      max-inline-size: 16ch;
    }

    & .lead {
      max-inline-size: 48ch;
    }
  }

  .badge {
    align-self: flex-start;
    padding: 0.4375rem 0.6875rem;
    border: 2px solid var(--c-laiton);
    font: 700 var(--fs-surtitre) / 1.2 var(--font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-laiton);
  }

  .atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.75rem;
    padding-block-start: 1.125rem;
    border-block-start: 1px solid var(--c-marine);

    & li {
      display: flex;
      align-items: center;
      gap: var(--space-1);
      font: 500 var(--fs-texte-s) / 1.3 var(--font);
    }

    & svg {
      inline-size: 1rem;
      block-size: 1rem;
      stroke-width: 2.5;
      color: var(--c-laiton);
    }
  }

  .hero__visuel {
    border: var(--filet);
  }

  .zones-accueil {
    --duo-min: 27.5rem;
    --duo-gap: 2.5rem 3.5rem;
    --duo-align: center;
  }

  .zones-accueil__texte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-lh: 1.55;
      --texte-max: 52ch;
    }
  }

  .faq-courte {
    --duo-min: 23.75rem;
    --duo-gap: var(--space-5) var(--space-7);

    & .titre-2 {
      --titre-max: 16ch;
    }
  }

  .faq-courte__tete {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* ------------------------------------------------------------ Services & Tarifs */

  .pro {
    --duo-min: 23.75rem;
    --duo-gap: 2.5rem var(--space-7);
  }

  .pro__texte {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;

    & .titre-2 {
      --titre-max: 18ch;
    }

    & .texte-l {
      --texte-lh: 1.55;
      --texte-max: 50ch;
    }

    & .btn {
      align-self: flex-start;
    }
  }

  .pro__liste {
    --points-min: 15rem;
    --points-gap: 1.75rem var(--space-5);

    & .point {
      --point-gap: var(--space-1);

      border-block-start-width: 2px;
    }
  }

  .tarifs {
    container: tarifs / inline-size;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .tarifs__bloc {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .deplacements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: var(--space-2);

    & li {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-3);
      min-block-size: 8.25rem;
      padding: 1.25rem;
      background: var(--c-nuit);
      color: var(--c-marine-15);
      font: 500 var(--fs-texte-s) / 1.4 var(--font);
    }

    & strong {
      font: 800 2rem / 1 var(--font);
      font-stretch: var(--stretch-titre);
      color: var(--c-laiton);
    }
  }

  .prix {
    inline-size: 100%;
    line-height: 1.4;

    & thead tr {
      border-block-end: var(--filet);
    }

    & thead th {
      padding: 0.625rem var(--space-3) 0.625rem 0;
      font: 700 var(--fs-surtitre) / 1.2 var(--font);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: start;
      color: var(--c-marine-70);

      &:last-child {
        padding-inline-end: 0;
        text-align: end;
      }
    }

    & tbody tr {
      border-block-end: var(--filet-fin);
      vertical-align: baseline;
    }

    & tbody th {
      padding: 0.875rem var(--space-3) 0.875rem 0;
      font-weight: 500;
      text-align: start;
    }

    & td {
      padding-block: 0.875rem;
      font-weight: 700;
      text-align: end;
      white-space: nowrap;
      color: var(--c-marine);
    }
  }

  .tarifs__bouton {
    display: none;
  }

  @container tarifs (inline-size < 40rem) {
    .js {
      & .tarifs__fixe {
        display: none;
      }

      & .tarifs__bouton {
        inline-size: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        min-block-size: 4rem;
        padding: 0.875rem var(--space-3);
        border: var(--filet);
        background: var(--c-blanc-casse);
        color: var(--c-marine);
        font: 800 1.125rem / 1.25 var(--font);
        font-stretch: var(--stretch-titre);

        &[aria-expanded='true'] {
          background: var(--c-marine);
          color: var(--c-blanc-casse);
        }
      }

      & .tarifs__bloc:has(.tarifs__bouton[aria-expanded='false']) .prix {
        display: none;
      }
    }

    /* Colonne de prix : la mention « hors déplacement » passe sous le libellé */
    .prix thead th:last-child {
      max-inline-size: 9rem;
    }
  }

  .encarts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr));
    gap: var(--space-3);
  }

  .encart {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: clamp(1.25rem, 5cqi, 1.75rem);

    &.sombre {
      background: var(--c-marine);

      & p {
        line-height: 1.55;
        color: var(--c-marine-15);
      }
    }

    &.encart--contour {
      gap: var(--space-2);
      border: var(--filet);

      & p {
        line-height: 1.55;
      }

      & p + p {
        font-size: var(--fs-texte-s);
        color: var(--c-marine-70);
      }
    }
  }

  /* ------------------------------------------------------------ Zones desservies */

  .villes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr));
    align-items: start;
    gap: var(--space-4);
  }

  .ville {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 0;

    & h3 {
      font: 800 var(--fs-h3-ville) / 1.1 var(--font);
      font-stretch: var(--stretch-titre);
      color: var(--c-marine);
    }

    & .btn {
      align-self: flex-start;

      & svg {
        stroke-width: 2.5;
        color: var(--c-laiton);
      }
    }
  }

  .ville__tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);

    & .surtitre {
      letter-spacing: 0.12em;
    }
  }

  .ville__communes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.375rem), 1fr));
    gap: 0 var(--space-3);
    border-block-start: var(--filet);

    & li {
      border-block-end: var(--filet-fin);
    }

    & a {
      display: flex;
      align-items: center;
      min-block-size: var(--cible);
      font: 500 var(--fs-texte-s) / 1.25 var(--font);
      color: var(--c-nuit);
      text-decoration: none;

      @media (hover: hover) {
        &:hover {
          color: var(--c-marine);
          text-decoration: underline;
          text-decoration-color: var(--c-laiton);
          text-decoration-thickness: 2px;
        }
      }
    }
  }

  .ville__reste {
    font: 500 var(--fs-texte-s) / 1.4 var(--font);
    color: var(--c-marine-70);
  }

  /* ------------------------------------------------------------ Pages ville */

  .presentation .textes .texte-l {
    --texte-max: 56ch;
  }

  .secteur {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .secteur__corps {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) 2.5rem;

    & .carte {
      flex: 1 1 23.75rem;
      min-inline-size: 0;
    }

    & .tuiles {
      --tuile-h: 4.5rem;

      flex: 1.3 1 32.5rem;
      min-inline-size: 0;
    }
  }

  .anciennes {
    --duo-gap: 1.75rem var(--space-7);

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-max: 52ch;
    }
  }

  /* ------------------------------------------------------------ Pages commune */

  .commune-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-block-size: clamp(35rem, 46cqi, 42.5rem);
    padding: clamp(1.25rem, 4cqi, 3.5rem) clamp(0rem, 6.6cqi, 6rem) 0;
    background: var(--c-marine);
    border-block-end: var(--filet);
  }

  .commune-hero__photo {
    --photo-fond: var(--c-marine);

    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    place-items: center end;
    padding-inline-end: var(--gutter);

    /* Dégradé marine : dense en bas, où il rejoint le panneau, il s’efface vers le ciel */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--c-marine) 92%, transparent),
        color-mix(in srgb, var(--c-marine) 55%, transparent) 40%,
        transparent 80%
      );
    }
  }

  .commune-hero__panneau {
    position: relative;
    inline-size: 100%;
    max-inline-size: 45rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: clamp(1.75rem, 3cqi, 2.75rem) clamp(1.25rem, 3cqi, 2.75rem);
    background: var(--c-nuit);
    border-block-start: var(--filet-bandeau);

    & h1 {
      font-size: var(--fs-h1-commune);
      max-inline-size: 16ch;
    }

    & .lead {
      font-size: var(--fs-lead-commune);
      max-inline-size: 48ch;
    }
  }

  /* Étroit : le panneau prend toute la largeur et masquerait la photo, on l'empile donc dessous */
  @container page (inline-size < 48rem) {
    .commune-hero {
      flex-direction: column;
      align-items: stretch;
      min-block-size: 0;
      padding: 0;

      & .commune-hero__photo {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
      }

      & .commune-hero__panneau {
        max-inline-size: none;
      }
    }
  }

  .reperes {
    --duo-min: 27.5rem;
    --duo-gap: 2.5rem 3.5rem;
    --duo-align: center;
  }

  .reperes__texte {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-max: 52ch;
    }
  }

  .voisines {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;

    & .tuiles {
      --tuiles-min: 14.375rem;
    }
  }

  /* ------------------------------------------------------------ FAQ */

  /* Une seule colonne, limitée en largeur pour garder des lignes lisibles */
  .faq-page__listes {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    max-inline-size: 56rem;
  }

  .faq-groupe {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    & h2 {
      font: 800 var(--fs-h2-compact) / 1.1 var(--font);
      font-stretch: var(--stretch-titre);
      color: var(--c-marine);
    }
  }

  /* ------------------------------------------------------------ À propos */

  .apropos {
    --duo-min: 25rem;
    --duo-gap: 2.5rem var(--space-7);
  }

  .apropos__portrait {
    --ratio: 4 / 5;

    inline-size: 100%;
    max-inline-size: 32.5rem;
    border: var(--filet);
  }

  .apropos__texte {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-max: 60ch;
    }
  }

  .engagements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: var(--space-3);

    & li {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-4);
      background: var(--c-marine-08);
      border-block-start: 4px solid var(--c-marine);
    }
  }

  .engagement__ico {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    background: var(--c-marine);
    color: var(--c-laiton);

    & :is(svg, img) {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }

  /* ------------------------------------------------------------ Réalisations */

  .chantiers {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
    gap: var(--space-5) 1.25rem;

    & figure {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
    }

    & figcaption {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-2);
      font: 700 var(--fs-texte) / 1.35 var(--font);
      color: var(--c-marine);

      & .surtitre {
        flex: none;
        letter-spacing: 0.1em;
      }
    }
  }

  /* Paire avant / après : deux photos côte à côte, étiquetées */
  .avant-apres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;

    & .photo {
      --ratio: 3 / 4;
    }

    /* Photo seule : toute la largeur, même hauteur qu'une paire */
    & .photo:only-child {
      --ratio: 3 / 2;

      grid-column: 1 / -1;
    }
  }

  .avant-apres__etat {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-start: var(--space-1);
    padding: 0.25rem 0.5rem;
    background: var(--c-nuit);
    color: var(--c-blanc-casse);
    font: 600 var(--fs-surtitre) / 1.2 var(--font);
    letter-spacing: 0.14em;
    text-transform: uppercase;

    :is([data-etat='Après'], [data-etat='Détail']) > & {
      background: var(--c-laiton);
      color: var(--c-nuit);
    }
  }

  .galerie__zoom {
    position: absolute;
    inset-block-end: var(--space-1);
    inset-inline-end: var(--space-1);
    display: grid;
    place-items: center;
    inline-size: var(--cible);
    block-size: var(--cible);
    background: var(--c-nuit);
    color: var(--c-laiton);
    cursor: zoom-in;

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      stroke-linecap: square;
    }

    @media (hover: hover) {
      &:hover {
        background: var(--c-marine);
      }
    }
  }

  .visionneuse {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: var(--space-5) clamp(0.75rem, 6.6cqi, 6rem);
    border: 0;
    background: rgb(11 31 51 / 0.96);
    color: var(--c-blanc-casse);
    /* Les clics rapides sur précédent / suivant ne doivent pas sélectionner (surbrillance grise) */
    -webkit-user-select: none;
    user-select: none;

    &[open] {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
    }

    &::backdrop {
      background: var(--c-nuit);
    }

    & > * {
      inline-size: 100%;
      max-inline-size: 62.5rem;
    }
  }

  .visionneuse__barre,
  .visionneuse__legende {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
  }

  .visionneuse__compte {
    font: 600 var(--fs-texte-xs) / 1.2 var(--font);
    color: var(--c-marine-30);
  }

  .visionneuse__fermer {
    display: grid;
    place-items: center;
    inline-size: var(--bouton);
    block-size: var(--bouton);
    background: var(--c-laiton);
    color: var(--c-nuit);

    & svg {
      inline-size: 1.375rem;
      block-size: 1.375rem;
      stroke-width: 2.2;
    }
  }

  .visionneuse__scene {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    & .photo {
      --ratio: 3 / 2;
      --photo-fond: var(--c-marine);

      flex: 1;
      max-block-size: calc(100dvh - 14rem);

      & img {
        object-fit: contain;
      }
    }
  }

  .visionneuse__nav {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 2px solid var(--c-blanc-casse);
    color: var(--c-blanc-casse);

    & svg {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }

    @media (hover: hover) {
      &:hover {
        background: var(--c-marine);
      }
    }
  }

  .visionneuse__legende {
    align-items: baseline;
    font: 700 1.125rem / 1.35 var(--font);

    & .surtitre {
      letter-spacing: 0.1em;
      color: var(--c-laiton);
    }
  }

  /* ------------------------------------------------------------ Contact */

  .contact {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6) 3.5rem;

    & h2 {
      font: 800 var(--fs-h2-compact) / 1.1 var(--font);
      font-stretch: var(--stretch-titre);
      color: var(--c-marine);
    }
  }

  .joindre {
    flex: 1 1 25rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .joindre__liste {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .moyen {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: clamp(1.125rem, 5cqi, 1.5rem);
    background: var(--c-marine-08);
    border-block-start: 4px solid var(--c-marine);

    & h3 {
      font: 600 var(--fs-surtitre) / 1.2 var(--font);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-laiton-fonce);
    }

    & p:not(.moyen__valeur) {
      font-size: var(--fs-texte-s);
    }

    & .btn {
      align-self: flex-start;
      --btn-contour-survol: var(--c-blanc-casse);
    }

    &.sombre {
      background: var(--c-nuit);
      border-block-start: var(--filet-bandeau);

      & h3 {
        color: var(--c-laiton);
      }

      & p:not(.moyen__valeur) {
        color: var(--c-marine-15);
      }
    }
  }

  .moyen__valeur {
    font: 800 min(1.5rem, 6.4cqi) / 1.1 var(--font);
    font-stretch: var(--stretch-titre);
    color: var(--c-marine);
    overflow-wrap: anywhere;

    .sombre & {
      align-self: flex-start;
      font-size: clamp(1.75rem, 2.6cqi, 2.25rem);
      color: var(--c-blanc-casse);
      text-decoration: none;
    }
  }

  .formulaire {
    flex: 1.3 1 28.75rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding: clamp(1.25rem, 2.8cqi, 2.5rem);
    border: var(--filet);
  }

  .formulaire__message {
    padding: var(--space-3) 1.125rem;
    background: var(--c-laiton-20);
    color: var(--c-texte-sur-laiton-20);
    font: 600 var(--fs-texte-s) / 1.5 var(--font);

    &.formulaire__message--erreur {
      background: var(--c-nuit);
      color: var(--c-blanc-casse);

      & a {
        color: var(--c-laiton);
      }
    }
  }

  .champ {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
    font: 700 var(--fs-texte-s) / 1.2 var(--font);

    & :is(input, select, textarea) {
      inline-size: 100%;
      min-block-size: var(--bouton);
      padding: 0 0.875rem;
      border: var(--filet);
      background: var(--c-blanc);
      font: 400 var(--fs-texte) / 1.5 var(--font);
      color: var(--c-nuit);
    }

    & textarea {
      padding-block: 0.875rem;
      resize: vertical;
    }

    & ::placeholder {
      color: var(--c-marine-70);
      opacity: 1;
    }
  }

  .champ__libelle {
    font: 700 var(--fs-texte-s) / 1.2 var(--font);

    & small {
      font-size: inherit;
      font-weight: 400;
      color: var(--c-marine-70);
    }
  }

  legend.champ__libelle {
    padding-block-end: 0.625rem;
  }

  .champs-duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
    gap: var(--space-3);
  }

  .depot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-block-size: 4.5rem;
    padding: var(--space-2) var(--space-3);
    border: 2px dashed var(--c-marine-70);
    background: var(--c-blanc);
    cursor: pointer;

    &:has(:focus-visible) {
      outline: 2px solid var(--c-laiton);
      outline-offset: 2px;
      box-shadow: 0 0 0 2px var(--c-nuit);
    }

    @media (hover: hover) {
      &:hover {
        border-color: var(--c-marine);
      }
    }

    & input {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      opacity: 0;
      cursor: pointer;
    }
  }

  .depot__ico {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--cible);
    block-size: var(--cible);
    background: var(--c-marine);
    color: var(--c-laiton);

    & svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }

  .depot__textes {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
    font: 700 var(--fs-texte-s) / 1.3 var(--font);
    color: var(--c-marine);
    overflow-wrap: anywhere;

    & small {
      font: 400 var(--fs-texte-xs) / 1.3 var(--font);
      color: var(--c-marine-70);
    }
  }

  /* ------------------------------------------------------------ Pages légales */

  .legal {
    padding-block: clamp(3rem, 5cqi, 5rem) clamp(4rem, 6cqi, 6rem);
  }

  .legal__article {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-inline-size: 68ch;

    & section {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding-block-start: 1.25rem;
      border-block-start: var(--filet);
    }

    & h2 {
      font: 800 var(--fs-h2-legal) / 1.2 var(--font);
      font-stretch: var(--stretch-titre);
      color: var(--c-marine);
    }

    & section p {
      font-size: var(--fs-texte-l);
      line-height: 1.7;
    }
  }

  .legal__maj {
    font-size: var(--fs-texte-xs);
    color: var(--c-marine-70);
  }
}

@layer pages {
  .attente__corps > .duo {
    --duo-align: end;

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-lh: 1.55;
      --texte-max: 52ch;
    }
  }
}

@layer pages {
  .section:has(> .contact) {
    padding-block-start: clamp(3rem, 5cqi, 5rem);
  }

  .categorie__tete {
    --duo-align: end;

    & .titre-2 {
      --titre-max: 20ch;
    }

    & .texte-l {
      --texte-lh: 1.55;
      --texte-max: 56ch;
    }
  }

  .services--volets-chassis {
    --services-min: 26rem;
  }

  :is(.conditions, .interventions, .commune-intro .duo) {
    --duo-gap: var(--space-4) var(--space-7);

    & .titre-2 {
      --titre-max: 20ch;
    }
  }

  .titre-2--libre {
    --titre-max: none;
  }

  .point__num {
    font: 800 var(--fs-texte-s) / 1 var(--font);
    color: var(--c-laiton-fonce);
  }

  .commune-quartiers .reperes {
    --duo-align: start;
    --duo-min: 26.25rem;
    --duo-gap: var(--space-4) var(--space-7);
  }
}

@layer pages {
  /* À propos : métiers sur fond teinté, filets fins comme le bloc Professionnels */
  .metiers {
    --points-min: 17.5rem;
    --points-gap: 1.75rem var(--space-5);

    & .point {
      --point-gap: var(--space-1);

      border-block-start-width: 2px;
    }
  }
}

@layer pages {
  /* Zones desservies : message pour les communes hors liste */
  .peripherie {
    align-items: flex-start;

    & p {
      max-inline-size: 68ch;
    }
  }
}

@layer pages {
  /* ------------------------------------------------------------ Page avis (hors navigation, envoyée après une intervention) */

  .page-avis {
    display: flex;
    flex-direction: column;

    & main {
      flex: 1;
    }
  }

  .avis-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding: 0.875rem var(--gutter);
    background: var(--c-marine);

    & .surtitre {
      color: var(--c-laiton);
    }
  }

  .avis-tete__logo img {
    inline-size: auto;
    block-size: clamp(2.5rem, 4cqi, 3.25rem);
  }

  .avis-hero {
    border-block-end: var(--filet-bandeau);
  }

  .avis-hero__grille {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26.25rem), 1fr));

    & .titre-1 {
      max-inline-size: 14ch;
    }
  }

  /* Cinq étoiles qui s'allument en cascade ; sans animation, elles sont simplement allumées */
  .etoiles {
    display: flex;
    gap: clamp(0.375rem, 0.8cqi, 0.625rem);
    padding-block-start: 0.25rem;

    & svg {
      inline-size: clamp(2.125rem, 3.4cqi, 2.875rem);
      block-size: auto;
      fill: var(--c-laiton);
      animation:
        etoile-taille 0.55s var(--ease-rebond) both,
        etoile-teinte 0.3s ease both;
      animation-delay: calc(0.35s + var(--rang, 0) * 0.13s);
    }

    & svg:nth-child(2) {
      --rang: 1;
    }

    & svg:nth-child(3) {
      --rang: 2;
    }

    & svg:nth-child(4) {
      --rang: 3;
    }

    & svg:nth-child(5) {
      --rang: 4;
    }
  }

  @keyframes etoile-taille {
    from {
      scale: 0.62;
    }
  }

  @keyframes etoile-teinte {
    from {
      fill: color-mix(in srgb, var(--c-marine-70) 30%, var(--c-marine));
    }
  }

  .avis-action {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 0;
  }

  .qr-carte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem var(--space-4);
    padding: clamp(1.25rem, 2.4cqi, 2rem);
    background: var(--c-blanc-casse);
    color: var(--c-nuit);
    border-block-start: var(--filet-bandeau);
  }

  .qr-carte__code {
    flex: none;
    inline-size: clamp(9.375rem, 14cqi, 12.5rem);
    padding: 0.625rem;
    background: var(--c-blanc);
    border: var(--filet);
    box-sizing: content-box;
  }

  .qr-carte__texte {
    flex: 1 1 12.5rem;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);

    & .surtitre {
      font-weight: 800;
      font-size: var(--fs-mini);
    }

    & .titre-3-fort {
      color: var(--c-marine);
    }

    & p:not(.surtitre) {
      font-size: var(--fs-texte-s);
    }
  }

  .qr-carte__etroit {
    display: none;
  }

  .avis-action__bouton {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;

    & .btn {
      min-block-size: 4rem;
      padding-inline: 1.375rem;
      font-weight: 800;
    }
  }

  .avis-action__libelle {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    & svg {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }
  }

  .avis-action__note {
    font-size: var(--fs-mini);
    color: var(--c-marine-30);
  }

  /* Étroit : le bouton passe au-dessus, le QR code sert pour un autre appareil */
  @container page (inline-size < 47.5rem) {
    .avis-action {
      flex-direction: column-reverse;
    }

    .qr-carte__code {
      inline-size: 8rem;
    }

    .qr-carte__large {
      display: none;
    }

    .qr-carte__etroit {
      display: inline;
    }
  }

  .gestes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr));
    gap: clamp(1.25rem, 2.4cqi, 2rem);
  }

  .geste {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-block-start: var(--space-3);
    border-block-start: 4px solid var(--c-marine);

    & p {
      line-height: 1.55;
    }
  }

  .geste__num {
    font: 800 clamp(2.25rem, 3.4cqi, 3rem) / 1 var(--font);
    font-stretch: 125%;
    color: var(--c-laiton);
  }

  .souci {
    --c-laiton-fonce: var(--c-texte-sur-laiton-20);

    background: var(--c-laiton-20);

    & .titre-2 {
      --titre-max: 18ch;
    }

    & .texte-l {
      --texte-max: 52ch;
    }
  }

  .souci__corps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 23.75rem), 1fr));
    align-items: end;
    gap: var(--space-4) var(--space-7);
  }

  .souci__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    & .btn {
      font-size: var(--fs-texte-l);
      overflow-wrap: anywhere;
    }

    & .btn--plein {
      justify-content: flex-start;
      font-weight: 800;
    }

    & .btn--contour {
      min-block-size: 3.25rem;
    }

    @media (hover: hover) {
      & .btn--contour:hover {
        background: var(--c-blanc-casse);
      }
    }
  }

  .avis-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding: 1.25rem var(--gutter);
    background: var(--c-nuit);
    color: var(--c-marine-30);
    font-size: var(--fs-texte-xs);

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1.25rem;
    }

    & a {
      display: inline-flex;
      align-items: center;
      min-block-size: var(--cible);
      color: var(--c-blanc-casse);
      text-decoration: underline;
      text-decoration-color: var(--c-laiton);
      text-underline-offset: 0.25rem;
    }
  }
}