/* Déménagements Moreel : feuille de style.
   Identité : le carton, la couverture et le camion. Fond blanc de caisse,
   lumière bleutée du ciel du Nord pour les sections d'appui, kraft des
   cartons, bleu des couvertures de déménagement pour l'action, bleu nuit
   pour le pied. Titres en Lexend Exa (large, comme le lettrage d'un camion),
   texte en Golos Text. Rayon 3 px, aucune ombre portée décorative. */

@font-face {
  font-family: "Lexend Exa";
  src: url("fonts/lexend-exa-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  src: url("fonts/golos-text-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Repli métrique : Arial élargi, pour que le titre ne saute pas au chargement. */
@font-face {
  font-family: "Titre repli";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 700;
  size-adjust: 118%;
  ascent-override: 88%;
  descent-override: 22%;
}

:root {
  --blanc: #FFFFFF;
  --ciel: #EDF2FA;
  --ciel-2: #DCE5F3;
  --kraft: #D2A56C;
  --kraft-clair: #EAD3AE;
  --kraft-fonce: #9C6B34;
  --contreplaque: #F1E3C8;
  --contreplaque-fil: #DCC59C;
  --encre: #161B26;
  --encre-douce: #4A5263;
  --trait: #D3DAE6;
  --trait-fort: #9AA4B5;
  --bleu: #0B63CE;
  --bleu-fonce: #084C9E;
  --bleu-pale: #E3EEFC;
  --couverture: #2A4A97;
  --couverture-fonce: #1D3772;
  --cabine: #1F3C88;
  --nuit: #0F1A3A;
  --nuit-2: #18264F;
  --sur-nuit: #EEF2FA;
  --sur-nuit-doux: #B9C6E0;
  --bleu-sur-nuit: #8CB8FF;
  --erreur: #B3261E;
  --erreur-nuit: #FF9C92;
  --police-titre: "Lexend Exa", "Titre repli", "Arial Black", Arial, sans-serif;
  --police-texte: "Golos Text", "Segoe UI", Arial, sans-serif;
  --pas--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.9rem);
  --pas-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --pas-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --pas-2: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --pas-3: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem);
  --pas-4: clamp(1.9rem, 1.2rem + 2.6vw, 3.25rem);
  --colonne: 1240px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(56px, 8vw, 112px);
  --rayon: 3px;
  --entete-h: 68px;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--entete-h) + var(--brnsg-barre, 0px) + 16px);
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--pas-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

img {
  height: auto;
}

a {
  color: var(--bleu);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--bleu-fonce);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

::selection {
  background: var(--kraft-clair);
  color: var(--encre);
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 650;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lien-evitement {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--rayon);
}

.lien-evitement:focus {
  top: calc(var(--brnsg-barre, 0px) + 8px);
  color: var(--blanc);
}

.colonne {
  width: 100%;
  max-width: calc(var(--colonne) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.icone {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: var(--pas-0);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--sortie);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton--plein {
  background: var(--bleu);
  color: var(--blanc);
}

.bouton--plein:hover {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

.bouton--contour {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}

.bouton--contour:hover {
  background: var(--encre);
  color: var(--blanc);
}

.bouton--sur-nuit {
  background: var(--bleu);
  color: var(--blanc);
}

.bouton--petit {
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--pas--1);
}

.bouton--large {
  width: 100%;
}

.bouton-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bleu);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.bouton-lien:hover {
  color: var(--bleu-fonce);
  text-decoration-thickness: 2px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 28px;
}

.actions--serrees {
  margin-top: 16px;
  gap: 10px 18px;
}

.lien-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  color: var(--encre);
  font-weight: 650;
  font-size: var(--pas-1);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.lien-tel .icone {
  color: var(--bleu);
}

.lien-tel:hover {
  color: var(--bleu);
}

.lien-tel--clair {
  color: var(--sur-nuit);
}

.lien-tel--clair .icone {
  color: var(--bleu-sur-nuit);
}

.lien-tel--clair:hover {
  color: var(--blanc);
}

.lien-fleche {
  margin-top: 22px;
  font-weight: 650;
}

.lien-fleche a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  text-decoration: none;
}

.lien-fleche a:hover .icone-fleche {
  transform: translateX(4px);
}

.icone-fleche {
  transition: transform 0.2s var(--sortie);
}

.lien-fleche--clair a {
  color: var(--bleu-sur-nuit);
}

.lien-fleche--clair a:hover {
  color: var(--blanc);
}

/* ------------------------------------------------------------------ */
/* En-tête                                                              */
/* ------------------------------------------------------------------ */

.entete {
  position: sticky;
  top: var(--brnsg-barre, 0px);
  z-index: 900;
  background: var(--blanc);
  border-bottom: 1px solid var(--trait);
}

.entete-grille {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--entete-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--encre);
  text-decoration: none;
  flex: none;
}

.logo:hover {
  color: var(--encre);
}

.logo-marque {
  width: 38px;
  height: 38px;
}

.logo-dessus {
  fill: #E9C995;
}

.logo-gauche {
  fill: var(--kraft);
}

.logo-droite {
  fill: #B7864A;
}

.logo-scotch {
  fill: none;
  stroke: #8A5A26;
  stroke-width: 2.4;
}

.logo-texte {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-metier {
  font-family: var(--police-texte);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.logo-nom {
  font-family: var(--police-titre);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: 3px;
}

.nav {
  margin-left: auto;
}

.nav-liste {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  color: var(--encre);
  font-weight: 550;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: var(--rayon);
}

.nav-liste a:hover {
  color: var(--bleu);
  background: var(--ciel);
}

.nav-liste a[aria-current="page"] {
  color: var(--bleu);
  box-shadow: inset 0 -3px 0 var(--bleu);
  border-radius: 0;
}

.nav-long,
.nav-mobile-seulement {
  display: none;
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.entete-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--encre);
  text-decoration: none;
  min-height: 44px;
}

.entete-tel .icone {
  color: var(--bleu);
  width: 1.2em;
  height: 1.2em;
}

.entete-tel:hover {
  color: var(--bleu);
}

.entete-tel-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.entete-tel-numero {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entete-statut {
  font-size: 0.78rem;
  color: var(--encre-douce);
  white-space: nowrap;
}

.entete-statut[data-etat="ouvert"]::before,
.pied-statut [data-etat="ouvert"]::before,
.contact-statut [data-etat="ouvert"]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #2E8B57;
  vertical-align: 1px;
}

.menu-bouton {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.menu-bouton-traits {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.menu-bouton-traits::before,
.menu-bouton-traits::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s var(--sortie);
}

.menu-bouton-traits::before {
  top: -6px;
}

.menu-bouton-traits::after {
  top: 6px;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits {
  background: transparent;
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::before {
  transform: translateY(6px) rotate(45deg);
}

.menu-bouton[aria-expanded="true"] .menu-bouton-traits::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1080px) {
  .menu-bouton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    top: calc(var(--brnsg-barre, 0px) + var(--entete-h));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 899;
    margin: 0;
    padding: 18px var(--gouttiere) 120px;
    background: var(--blanc);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.25s var(--sortie), visibility 0s linear 0.25s;
  }

  .nav--ouverte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.25s var(--sortie), visibility 0s;
  }

  .nav-liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-liste a {
    min-height: 58px;
    padding: 0 4px;
    font-family: var(--police-titre);
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
  }

  .nav-liste a[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--bleu);
    padding-left: 14px;
  }

  .nav-long,
  .nav-mobile-seulement {
    display: block;
  }

  .nav-court {
    display: none;
  }

  .entete-actions {
    margin-left: auto;
  }

  body.menu-ouvert {
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  :root {
    --entete-h: 62px;
  }

  .entete-grille {
    gap: 10px;
  }

  .logo-marque {
    width: 32px;
    height: 32px;
  }

  .logo-nom {
    font-size: 1.05rem;
  }

  .logo-metier {
    font-size: 0.62rem;
  }

  .entete-devis {
    display: none;
  }

  .entete-tel .icone {
    display: none;
  }

  .entete-tel-numero {
    font-size: 0.95rem;
  }

  .entete-statut {
    font-size: 0.7rem;
  }

  .menu-bouton {
    padding: 0 10px;
  }

  .menu-bouton-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (max-width: 360px) {
  .logo-texte {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */

.section {
  padding: var(--section) 0;
}

.section--serre {
  padding-top: calc(var(--section) * 0.55);
}

.section--ciel {
  background: var(--ciel);
}

.section--nuit {
  background: var(--nuit);
  color: var(--sur-nuit);
}

.section--nuit a:not(.bouton) {
  color: var(--bleu-sur-nuit);
}

.section--nuit :focus-visible {
  outline-color: var(--bleu-sur-nuit);
}

.titre-section {
  font-size: var(--pas-3);
  margin-bottom: 0.6em;
}

.section-tete {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.section-tete .titre-section {
  margin-bottom: 0.45em;
}

.section-chapo {
  font-size: var(--pas-1);
  color: var(--encre-douce);
}

.section--nuit .section-chapo {
  color: var(--sur-nuit-doux);
}

.note {
  margin-top: 18px;
  font-size: var(--pas--1);
  color: var(--encre-douce);
}

.section--nuit .note {
  color: var(--sur-nuit-doux);
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.duo--inverse .duo-image {
  order: -1;
}

.duo--haut {
  align-items: start;
}

/* Les enfants de grille ne s'élargissent jamais à cause d'un tableau. */
.duo > *,
.tarifs-grille > *,
.zone-grille > *,
.faq-grille > *,
.formulaire-grille > *,
.checklist-grille > *,
.deroule-grille > *,
.hero-grille > *,
.camion-accueil > *,
.page-tete-grille > *,
.calc-grille > * {
  min-width: 0;
}

.duo-image img,
.duo-image picture {
  width: 100%;
  border-radius: var(--rayon);
}

.duo-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.duo-image--petite {
  margin-top: 28px;
}

.duo-texte > p {
  max-width: 62ch;
}

@media (max-width: 860px) {
  .duo {
    grid-template-columns: 1fr;
  }

  .duo--inverse .duo-image {
    order: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

.hero {
  padding: clamp(28px, 5vw, 64px) 0 0;
}

.hero-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero-titre {
  font-size: var(--pas-4);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.hero-chapo {
  margin-top: 22px;
  font-size: var(--pas-1);
  color: var(--encre-douce);
  max-width: 46ch;
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 50%;
  border-radius: var(--rayon);
}

/* Bande d'adhésif kraft posée sur la photo, comme sur un carton fermé. */
.hero-image::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 14%;
  width: 118px;
  height: 30px;
  background: linear-gradient(90deg, rgba(160, 112, 52, 0.18), transparent 12%, transparent 88%, rgba(160, 112, 52, 0.18)), #C9955A;
  opacity: 0.92;
  transform: rotate(-3deg);
  border-radius: 1px;
  pointer-events: none;
}

/* Les quatre preuves sur une bande kraft, comme l'adhésif qui ferme un carton. */
.hero-bande {
  margin-top: clamp(32px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 40%, rgba(120, 78, 30, 0.08)),
    var(--kraft-clair);
  border-top: 1px solid #D9BC8E;
  border-bottom: 1px solid #D9BC8E;
}

.hero-preuves {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
}

.hero-preuves li {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px 0;
}

.hero-preuves li + li {
  padding-left: 20px;
  border-left: 1px solid rgba(120, 78, 30, 0.25);
}

.hero-preuves strong {
  font-family: var(--police-titre);
  font-size: var(--pas-1);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero-preuves span {
  font-size: var(--pas--1);
  color: #4B3A26;
}

@media (max-width: 960px) {
  .hero-grille {
    grid-template-columns: 1fr;
  }

  .hero-image {
    order: -1;
  }

  .hero-image img {
    aspect-ratio: 16 / 10;
  }

  .hero-preuves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-preuves li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .hero-preuves li:nth-child(n + 3) {
    border-top: 1px solid rgba(120, 78, 30, 0.25);
  }

  .hero-preuves strong {
    font-size: 1rem;
    hyphens: manual;
  }
}

/* ------------------------------------------------------------------ */
/* Le camion en coupe                                                   */
/* ------------------------------------------------------------------ */

.camion-accueil {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.camion-accueil-texte > p {
  max-width: 52ch;
}

.camion-note {
  margin-top: 18px;
  font-size: var(--pas--1);
  color: var(--encre-douce);
}

@media (max-width: 960px) {
  .camion-accueil {
    grid-template-columns: 1fr;
  }

  .camion-accueil-dessin {
    order: -1;
  }
}

.presets,
.ajouts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.presets-titre {
  flex-basis: 100%;
  margin: 0 0 2px;
  font-size: var(--pas--1);
  font-weight: 650;
  color: var(--encre-douce);
}

.preset,
.ajout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.preset:hover,
.ajout:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.preset[aria-pressed="true"] {
  border-color: var(--bleu);
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
}

.preset-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.preset-texte {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--encre-douce);
}

.ajout .icone {
  color: var(--bleu);
}

.presets-vider {
  margin-left: auto;
}

.camion-panneau {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px 16px 14px;
}

.camion-scene {
  position: relative;
}

.camion-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 420;
  overflow: hidden;
}

/* Camion vide : le message s'inscrit dans la caisse ouverte. */
.camion-vide {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 45%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 3%;
  text-align: center;
  font-size: clamp(0.78rem, 0.7rem + 0.4vw, 0.95rem);
  font-weight: 650;
  line-height: 1.35;
  color: #6A4C27;
}

.camion-scene[data-vide="non"] .camion-vide {
  display: none;
}

/* Le véhicule */
.vehicule-sol {
  stroke: var(--trait-fort);
  stroke-width: 3;
}

.vehicule-chassis {
  fill: #3B4252;
}

.vehicule-attelage {
  stroke: #3B4252;
  stroke-width: 10;
  stroke-linecap: round;
}

.vehicule-carrosserie {
  fill: var(--blanc);
  stroke: var(--encre);
  stroke-width: 4;
  stroke-linejoin: round;
}

.vehicule-cabine {
  fill: var(--cabine);
  stroke: var(--encre);
  stroke-width: 4;
  stroke-linejoin: round;
}

.vehicule-fourgon .vehicule-carrosserie {
  fill: var(--blanc);
}

.vehicule-vitre {
  fill: #CFE0F5;
  stroke: var(--encre);
  stroke-width: 3;
  stroke-linejoin: round;
}

.vehicule-caisse {
  fill: var(--blanc);
  stroke: var(--encre);
  stroke-width: 4;
}

.vehicule-interieur {
  fill: var(--contreplaque);
}

.vehicule-rail {
  stroke: var(--contreplaque-fil);
  stroke-width: 4;
  stroke-dasharray: 10 8;
}

.vehicule-porte {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2.5;
}

.vehicule-lettrage {
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: var(--blanc);
}

.vehicule-fourgon .vehicule-lettrage {
  fill: var(--cabine);
}

.vehicule-parechoc {
  fill: #2B303B;
}

.vehicule-phare {
  fill: #E9EEF6;
  stroke: var(--encre);
  stroke-width: 2;
}

.vehicule-retro {
  fill: #2B303B;
}

.vehicule-bande {
  fill: var(--cabine);
}

.vehicule-hayon {
  fill: #8C95A6;
  stroke: var(--encre);
  stroke-width: 2;
}

.vehicule-roue {
  fill: #23272F;
}

.vehicule-jante {
  fill: #C9CFDA;
}

.vehicule-cote {
  font-family: var(--police-texte);
  font-size: 22px;
  font-weight: 600;
  fill: var(--encre-douce);
}

/* Les objets chargés */
.bloc {
  transform-box: view-box;
}

.bloc-forme {
  stroke-width: 1.6;
}

.bloc--meuble .bloc-forme {
  fill: var(--couverture);
  stroke: var(--couverture-fonce);
}

.bloc--literie .bloc-forme {
  fill: #DCE4F0;
  stroke: #8E9CB4;
}

.bloc-couture {
  stroke: #A9B6CC;
  stroke-width: 2;
}

.bloc--electro .bloc-forme {
  fill: #FBFCFE;
  stroke: #6B7484;
}

.bloc-porte {
  stroke: #9AA4B5;
  stroke-width: 2;
}

.bloc--exterieur .bloc-forme {
  fill: #98A2B0;
  stroke: #5F6875;
}

.bloc--carton .bloc-forme,
.bloc--carton-fragile .bloc-forme {
  fill: var(--kraft);
  stroke: var(--kraft-fonce);
}

.bloc--carton-fragile .bloc-forme {
  fill: #DDB37A;
}

.bloc-scotch {
  fill: #E7C590;
}

.bloc-etiquette {
  fill: var(--blanc);
}

.jauge {
  position: relative;
  height: 10px;
  margin-top: 10px;
  background: var(--ciel);
  border-radius: 2px;
  overflow: hidden;
}

.jauge-plein {
  position: absolute;
  inset: 0;
  background: var(--couverture);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.5s var(--sortie);
}

.jauge-graduations {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(255, 255, 255, 0.85) calc(10% - 1px), rgba(255, 255, 255, 0.85) 10%);
}

.camion-chiffres {
  display: grid;
  grid-template-columns: 0.8fr 1.1fr 1.1fr;
  gap: 12px;
  margin: 14px 0 0;
}

.camion-chiffre dt {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.camion-chiffre dd {
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
}

.camion-volume,
.camion-prix {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.camion-prix {
  color: var(--bleu-fonce);
}

.camion-vehicule {
  font-weight: 700;
  line-height: 1.25;
}

.camion-sous {
  font-size: 0.82rem;
  color: var(--encre-douce);
  line-height: 1.35;
}

.camion-reduire {
  display: none;
}

@media (max-width: 560px) {
  .camion-chiffres {
    grid-template-columns: 1fr 1.25fr;
  }

  .camion-chiffre--prix {
    grid-column: 1 / -1;
  }

  .camion-chiffre--prix dd {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
  }
}

/* ------------------------------------------------------------------ */
/* Calculateur (page devis)                                             */
/* ------------------------------------------------------------------ */

.page-tete--devis {
  padding-bottom: 8px;
}

.calculateur {
  padding: 8px 0 var(--section);
}

.calc-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.calc-cote {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 16px);
  max-height: calc(100vh - var(--brnsg-barre, 0px) - var(--entete-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.calc-etapes {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.calc-etape-tete {
  margin-bottom: 18px;
}

.titre-etape {
  font-size: var(--pas-2);
  margin-bottom: 0.35em;
}

.calc-aide {
  color: var(--encre-douce);
  max-width: 64ch;
}

.calc-sans-js {
  margin-top: 24px;
  font-weight: 600;
}

.calc-detail {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
}

@media (max-width: 1000px) {
  .calc-grille {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .calc-cote {
    display: contents;
  }

  .camion-panneau {
    order: 1;
  }

  .calc-etapes {
    order: 2;
  }

  .calc-detail {
    order: 3;
    margin-top: 0;
  }

  .calculateur .camion-panneau {
    position: sticky;
    top: calc(var(--brnsg-barre, 0px) + var(--entete-h) - 1px);
    z-index: 20;
    padding: 10px 12px 10px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    margin: 0 calc(-1 * var(--gouttiere));
    box-shadow: 0 10px 18px -16px rgba(15, 26, 58, 0.45);
  }

  .calculateur .camion-chiffres {
    margin-top: 8px;
    gap: 6px 12px;
  }

  .calculateur .camion-chiffre dt {
    font-size: 0.68rem;
  }

  .calculateur .camion-volume,
  .calculateur .camion-prix {
    font-size: 1.15rem;
  }

  .calculateur .camion-sous {
    font-size: 0.74rem;
  }

  .camion-reduire {
    position: absolute;
    top: 6px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--encre-douce);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    z-index: 2;
  }

  .camion-reduire span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .calc--reduit .camion-scene,
  .calc--reduit .jauge {
    display: none;
  }

  .calc--reduit .camion-reduire .icone {
    transform: rotate(180deg);
  }

  .calc--reduit .camion-chiffres {
    margin-top: 0;
    padding-right: 44px;
  }
}

@media (max-width: 1000px) and (max-height: 560px) {
  .calculateur .camion-panneau {
    position: relative;
    top: auto;
  }
}

/* Onglets des pièces */
.pieces-onglets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 26px;
}

.piece-onglet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.piece-onglet:hover {
  border-color: var(--bleu);
}

.piece-onglet[aria-selected="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.piece-onglet-compte {
  flex: none;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--ciel);
  color: var(--encre-douce);
  font-size: 0.8rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.piece-onglet--plein .piece-onglet-compte {
  background: var(--kraft-clair);
  color: var(--encre);
}

.piece-onglet[aria-selected="true"] .piece-onglet-compte {
  background: var(--kraft);
  color: var(--encre);
}

@media (max-width: 760px) {
  .pieces-onglets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .piece-onglet:last-child {
    grid-column: 1 / -1;
  }
}

.piece {
  margin-top: 16px;
}

.objets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  list-style: none;
}

.objet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait);
}

.objet-texte {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.objet-nom {
  font-weight: 600;
}

.objet-volume {
  font-size: 0.82rem;
  color: var(--encre-douce);
}

.objet--actif .objet-nom {
  color: var(--bleu-fonce);
}

@media (max-width: 760px) {
  .objets {
    grid-template-columns: 1fr;
  }
}

.compteur {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.compteur-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre);
  cursor: pointer;
}

.compteur-bouton:hover {
  background: var(--ciel);
}

.compteur-bouton--plus {
  color: var(--blanc);
  background: var(--bleu);
}

.compteur-bouton--plus:hover {
  background: var(--bleu-fonce);
}

.compteur-bouton .icone {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.compteur-valeur {
  min-width: 34px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cartons {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--rayon);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), var(--kraft-clair);
}

.cartons-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cartons-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cartons-rapides {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.cartons-rapide {
  min-height: 40px;
  padding: 6px 12px;
  border: 1.5px solid var(--kraft-fonce);
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.55);
  color: var(--encre);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.cartons-rapide span {
  font-variant-numeric: tabular-nums;
  color: #5E4220;
}

.cartons-rapide:hover {
  background: var(--blanc);
}

.cartons-rapide[aria-pressed="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.cartons-rapide[aria-pressed="true"] span {
  color: var(--kraft-clair);
}

.cartons-conseil {
  margin-top: 10px;
  font-size: 0.88rem;
  color: #4B3A26;
}

/* Trajet */
.adresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 760px) {
  .adresses {
    grid-template-columns: 1fr;
  }
}

.adresse {
  margin: 0;
  padding: 16px 16px 8px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  min-width: 0;
}

.adresse .champ-rangee--serree {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.adresse select {
  padding-right: 34px;
}

.adresse-titre {
  padding: 0 6px;
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.distance {
  margin-top: 18px;
}

.distance-estimee {
  font-size: var(--pas-1);
}

.distance-estimee strong {
  font-family: var(--police-titre);
  letter-spacing: -0.03em;
}

/* Formules */
.formules-choix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 760px) {
  .formules-choix {
    grid-template-columns: 1fr;
  }
}

.formule-choix {
  position: relative;
  display: block;
  cursor: pointer;
}

.formule-choix input {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bleu);
}

.formule-choix-corps {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  height: 100%;
  padding: 13px 14px 14px 44px;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.formule-choix:hover .formule-choix-corps {
  border-color: var(--bleu);
}

.formule-choix input:checked + .formule-choix-corps {
  border-color: var(--bleu);
  box-shadow: inset 0 0 0 1px var(--bleu);
  background: var(--bleu-pale);
}

.formule-choix input:focus-visible + .formule-choix-corps {
  outline: 3px solid var(--bleu);
  outline-offset: 2px;
}

.formule-choix-nom {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.formule-choix-prix {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-fonce);
  white-space: nowrap;
}

.formule-choix-resume {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--encre-douce);
}

.options {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.options-titre {
  margin-bottom: 6px;
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.option-groupe .option-detail {
  margin: 0 0 8px 34px;
}

.option-prix {
  display: block;
  font-size: 0.84rem;
  color: var(--encre-douce);
}

.option-inclus {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
  font-size: 0.8rem;
  font-weight: 650;
}

/* Détail du prix */
.detail-prix-titre {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.detail-prix-titre::-webkit-details-marker {
  display: none;
}

.detail-prix-titre::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--sortie);
}

.detail-prix[open] .detail-prix-titre::after {
  transform: rotate(-135deg) translateY(-2px);
}

.detail-lignes {
  list-style: none;
  margin-top: 6px;
}

.detail-lignes li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--trait);
  font-size: 0.94rem;
}

.detail-libelle {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
}

.detail-precision {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--encre-douce);
  overflow-wrap: anywhere;
}

.detail-montant {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.detail-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 0;
  font-weight: 700;
}

.detail-total strong {
  font-family: var(--police-titre);
  font-size: var(--pas-2);
  letter-spacing: -0.04em;
  color: var(--bleu-fonce);
}

.detail-tva {
  font-size: 0.85rem;
  color: var(--encre-douce);
  text-align: right;
}

.detail-alerte {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--kraft-fonce);
  background: #FBF3E6;
  font-size: 0.9rem;
}

.ges-titre {
  margin: 12px 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--trait);
  font-size: 0.88rem;
}

.ges-lien {
  font-size: 0.82rem;
}

.ges {
  margin-top: 28px;
}

.ges-texte {
  font-size: 0.9rem;
  color: var(--encre-douce);
}

/* ------------------------------------------------------------------ */
/* Formulaires                                                          */
/* ------------------------------------------------------------------ */

.formulaire-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .formulaire-grille {
    grid-template-columns: 1fr;
  }
}

.formulaire-carte {
  padding: clamp(18px, 3vw, 32px);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.formulaire-intro > p {
  max-width: 54ch;
}

.champ {
  margin-bottom: 16px;
  min-width: 0;
}

.champ label,
.champ legend {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  line-height: 1.35;
}

.champ-optionnel {
  font-weight: 400;
  color: var(--encre-douce);
}

.champ-aide {
  margin: -2px 0 8px;
  font-size: 0.84rem;
  color: var(--encre-douce);
}

.champ input[type="text"],
.champ input[type="tel"],
.champ input[type="email"],
.champ input[type="number"],
.champ input[type="date"],
.champ select,
.champ textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--trait-fort);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: max(16px, 1rem);
  line-height: 1.4;
}

.champ textarea {
  resize: vertical;
  min-height: 110px;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--encre-douce);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--bleu);
  outline: 2px solid var(--bleu);
  outline-offset: 0;
}

.champ input[aria-invalid="true"] {
  border-color: var(--erreur);
}

.champ--court input,
.champ--court .select-enveloppe {
  max-width: 220px;
}

.select-enveloppe {
  position: relative;
}

.select-enveloppe select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.select-enveloppe::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--encre);
  border-bottom: 2px solid var(--encre);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.champ-rangee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.champ-rangee--serree {
  gap: 0 12px;
}

@media (max-width: 560px) {
  .champ-rangee {
    grid-template-columns: 1fr;
  }

  .champ-rangee--serree {
    grid-template-columns: 1fr 1fr;
  }
}

.champ-radios {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.radio,
.case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

.radio input,
.case input,
.consentement input,
.tache input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--bleu);
  cursor: pointer;
}

.case input:disabled + span {
  color: var(--encre-douce);
}

.champ-erreur {
  margin: 6px 0 0;
  color: var(--erreur);
  font-size: 0.88rem;
  font-weight: 600;
}

.formulaire-erreur:empty {
  display: none;
}

.formulaire-erreur {
  margin-top: 14px;
}

.champ-piege {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.consentement {
  display: flex;
  gap: 10px;
  margin: 18px 0 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

.resume-envoi {
  margin: 8px 0 4px;
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--ciel);
}

.resume-envoi-titre {
  margin: 0 0 6px;
  font-weight: 700;
}

.resume-envoi-liste {
  list-style: none;
  font-size: 0.88rem;
  line-height: 1.5;
}

.resume-envoi-liste li + li {
  margin-top: 4px;
}

.formulaire-succes {
  padding: clamp(18px, 3vw, 32px);
  background: var(--blanc);
  border: 2px solid var(--bleu);
  border-radius: var(--rayon);
}

.formulaire-succes:focus {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
}

.formulaire-succes-titre {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: var(--pas-1);
  letter-spacing: -0.03em;
}

.comment {
  margin-top: 28px;
}

.comment-titre {
  font-size: var(--pas-1);
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------ */
/* Listes, tableaux, encadrés                                           */
/* ------------------------------------------------------------------ */

.liste-coches {
  list-style: none;
}

.liste-coches li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
}

.liste-coches .icone {
  margin-top: 0.3em;
  color: var(--bleu);
  stroke-width: 2.4;
}

.section--nuit .liste-coches .icone {
  color: var(--bleu-sur-nuit);
}

.liste-croix {
  list-style: none;
}

.liste-croix li {
  position: relative;
  padding: 8px 0 8px 28px;
  border-bottom: 1px solid var(--trait);
}

.liste-croix li::before,
.liste-croix li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.05em;
  width: 14px;
  height: 2px;
  background: var(--erreur);
  transform: rotate(45deg);
}

.liste-croix li::after {
  transform: rotate(-45deg);
}

.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
}

.tableau-enveloppe:focus-visible {
  outline: 3px solid var(--bleu);
}

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tableau th,
.tableau td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}

.tableau thead th {
  font-family: var(--police-titre);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--ciel);
  white-space: nowrap;
}

.tableau tbody tr:last-child th,
.tableau tbody tr:last-child td {
  border-bottom: 0;
}

.tableau tbody th {
  font-weight: 600;
}

.tableau--formules td {
  text-align: center;
  vertical-align: middle;
}

.tableau--formules thead th:not(.tableau-coin) {
  text-align: center;
}

.tableau--formules tbody tr:last-child {
  background: var(--bleu-pale);
}

.tableau--formules tbody tr:last-child strong {
  font-family: var(--police-titre);
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--bleu-fonce);
}

.marque-oui .icone {
  margin: 0 auto;
  width: 22px;
  height: 22px;
  color: var(--bleu);
  stroke-width: 2.6;
}

.marque-option {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--kraft-fonce);
}

.marque-non {
  font-size: 0.85rem;
  color: var(--encre-douce);
}

@media (max-width: 640px) {
  .tableau--formules .tableau {
    font-size: 0.84rem;
    table-layout: fixed;
  }

  .tableau--formules th,
  .tableau--formules td {
    padding: 10px 6px;
  }

  .tableau--formules thead th {
    font-family: var(--police-texte);
    font-size: 0.74rem;
    letter-spacing: 0;
    white-space: normal;
    hyphens: auto;
  }

  .tableau--formules .tableau-coin {
    width: 40%;
  }

  .tableau--formules tbody tr:last-child strong {
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .marque-option,
  .marque-non {
    font-size: 0.74rem;
  }
}

.prix-liste {
  margin: 0;
}

.prix-liste > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trait);
}

.prix-liste dt {
  flex: 1 1 45%;
  font-weight: 500;
}

.prix-liste dd {
  flex: 1 1 55%;
  margin: 0;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.prix-liste--parc dd {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--encre-douce);
  max-width: 60%;
}

.prix-liste--parc dt {
  font-weight: 650;
}

.encadre-loi .liste-coches li {
  padding: 9px 0;
  border-bottom: 1px solid var(--ciel-2);
}

.source-ligne {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
}

.lien-source {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Accueil : déroulé, avis, zone, FAQ, contact                          */
/* ------------------------------------------------------------------ */

.deroule-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.deroule-image {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 24px);
}

.deroule-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}

.deroule {
  list-style: none;
  margin-top: 8px;
}

.deroule-etape {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 4px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--ciel-2);
}

.deroule-quand {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  padding-top: 0.2em;
  font-weight: 700;
  color: var(--kraft-fonce);
  font-size: 0.92rem;
}

.deroule-titre {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--pas-1);
}

.deroule-texte {
  grid-column: 2;
  grid-row: 2;
  color: var(--encre-douce);
}

@media (max-width: 860px) {
  .deroule-grille {
    grid-template-columns: 1fr;
  }

  .deroule-image {
    position: static;
  }

  .deroule-image img {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 520px) {
  .deroule-etape {
    grid-template-columns: 1fr;
  }

  .deroule-quand,
  .deroule-titre,
  .deroule-texte {
    grid-column: 1;
    grid-row: auto;
    padding-top: 0;
  }
}

.avis-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 32px;
}

.avis-entete .titre-section {
  margin: 0;
}

.avis-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.avis-note-chiffre {
  font-family: var(--police-titre);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.avis-note-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.avis-note-texte {
  font-size: 0.88rem;
  color: var(--encre-douce);
}

.avis-note-sur {
  font-weight: 700;
}

.avis-score {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 2px;
  background: var(--encre);
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.avis-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 2px solid var(--encre);
}

.avis-liste--complete {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avis-carte {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px 0;
  border-bottom: 1px solid var(--ciel-2);
}

.avis-carte + .avis-carte {
  padding-left: 22px;
  border-left: 1px solid var(--ciel-2);
}

.avis-liste--complete .avis-carte:nth-child(3n + 1) {
  padding-left: 0;
  border-left: 0;
}

.avis-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--encre-douce);
}

.avis-texte {
  margin: 0;
  flex: 1;
}

.avis-auteur {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
  line-height: 1.35;
}

.avis-nom {
  font-weight: 700;
}

.avis-lieu {
  font-size: 0.86rem;
  color: var(--encre-douce);
}

@media (max-width: 900px) {
  .avis-liste,
  .avis-liste--complete {
    grid-template-columns: 1fr;
  }

  .avis-carte,
  .avis-carte + .avis-carte {
    padding: 20px 0;
    border-left: 0;
  }
}

.zone-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.zone-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
}

.zone-groupes {
  margin: 20px 0 0;
}

.zone-groupes > div {
  padding: 12px 0;
  border-top: 1px solid var(--trait);
}

.zone-groupes dt {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.zone-groupes dd {
  margin: 2px 0 0;
  color: var(--encre-douce);
}

@media (max-width: 860px) {
  .zone-grille {
    grid-template-columns: 1fr;
  }
}

.faq-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 860px) {
  .faq-grille {
    grid-template-columns: 1fr;
  }
}

.faq-item {
  border-bottom: 1px solid var(--trait);
}

.faq-item:first-child {
  border-top: 1px solid var(--trait);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--bleu);
}

.faq-signe {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq-signe::before,
.faq-signe::after {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s var(--sortie);
}

.faq-signe::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-signe::after {
  transform: rotate(0deg);
}

.faq-reponse {
  padding: 0 0 18px;
  color: var(--encre-douce);
  max-width: 68ch;
}

.contact-bloc {
  padding: clamp(20px, 3vw, 32px);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.section--ciel .formulaire-intro .contact-bloc {
  margin-top: 24px;
}

.contact-tel {
  margin-bottom: 4px;
}

.contact-tel a {
  font-family: var(--police-titre);
  font-size: var(--pas-2);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--encre);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.contact-tel a:hover {
  color: var(--bleu);
}

.contact-statut {
  font-weight: 600;
}

.liste-horaires {
  list-style: none;
  margin: 12px 0;
}

.liste-horaires li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--trait);
}

.contact-note {
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.contact-adresse {
  margin: 16px 0 8px;
  font-style: normal;
  font-weight: 650;
}

.contact-ligne {
  margin-bottom: 6px;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------ */
/* Pages intérieures                                                    */
/* ------------------------------------------------------------------ */

.page-tete {
  padding: clamp(32px, 5vw, 72px) 0 clamp(28px, 4vw, 56px);
}

.page-tete-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.page-tete--simple .page-tete-grille {
  grid-template-columns: minmax(0, 1fr);
}

.page-titre {
  font-size: var(--pas-4);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.page-chapo {
  margin-top: 18px;
  font-size: var(--pas-1);
  color: var(--encre-douce);
  max-width: 58ch;
}

.page-tete-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rayon);
}

.page-tete--large .page-tete-grille {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

@media (max-width: 860px) {
  .page-tete-grille,
  .page-tete--large .page-tete-grille {
    grid-template-columns: 1fr;
  }

  .page-tete-image {
    order: -1;
  }

  .page-tete-image img {
    aspect-ratio: 16 / 10;
  }
}

.code-erreur {
  font-weight: 700;
  color: var(--kraft-fonce);
}

.page-tete--404 {
  padding: clamp(64px, 12vw, 160px) 0;
}

/* Tarifs */
.tarifs-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px);
}

@media (max-width: 860px) {
  .tarifs-grille {
    grid-template-columns: 1fr;
  }
}

.tarifs-titre {
  margin: 26px 0 10px;
  font-size: var(--pas-1);
}

.tarifs-bloc > .tarifs-titre:first-child {
  margin-top: 0;
}

.exemples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.exemple {
  padding: 20px;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

.exemple:nth-child(2) {
  border-top: 4px solid var(--kraft);
}

.exemple:nth-child(3) {
  border-top: 4px solid var(--couverture);
}

.exemple-titre {
  font-size: var(--pas-1);
}

.exemple-resume {
  margin: 6px 0 4px;
  font-size: 0.88rem;
  color: var(--encre-douce);
}

@media (max-width: 960px) {
  .exemples {
    grid-template-columns: 1fr;
  }
}

/* Garde-meubles */
.parcours {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  counter-reset: etape;
}

.parcours-etape {
  padding: 18px 18px 0 0;
  border-top: 3px solid var(--kraft);
}

.parcours-etape + .parcours-etape {
  padding-left: 18px;
}

.parcours-titre {
  font-size: var(--pas-1);
  margin-bottom: 8px;
}

.parcours-etape p {
  color: var(--encre-douce);
}

@media (max-width: 960px) {
  .parcours {
    grid-template-columns: 1fr;
  }

  .parcours-etape,
  .parcours-etape + .parcours-etape {
    padding: 16px 0;
  }
}

.calcul-garde {
  padding: clamp(18px, 3vw, 28px);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-top: 4px solid var(--kraft);
  border-radius: var(--rayon);
}

.calcul-garde-titre {
  font-size: var(--pas-2);
  margin-bottom: 8px;
}

.calcul-garde-texte {
  color: var(--encre-douce);
}

.calcul-garde-resultat {
  margin-top: 12px;
  font-size: var(--pas-1);
}

.calcul-garde-resultat strong {
  font-family: var(--police-titre);
  letter-spacing: -0.03em;
  color: var(--bleu-fonce);
}

.calcul-garde-total {
  display: block;
  margin-top: 6px;
  font-size: var(--pas-0);
  color: var(--encre-douce);
}

/* Conseils : check-list */
.checklist-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.checklist-cote {
  position: sticky;
  top: calc(var(--brnsg-barre, 0px) + var(--entete-h) + 24px);
}

@media (max-width: 900px) {
  .checklist-grille {
    grid-template-columns: 1fr;
  }

  .checklist-cote {
    position: static;
  }
}

.checklist-date {
  margin-top: 8px;
  padding: 18px;
  border-radius: var(--rayon);
  background: var(--kraft-clair);
}

.checklist-date-titre {
  font-size: var(--pas-1);
  margin-bottom: 6px;
}

.checklist-date p {
  font-size: 0.92rem;
}

.checklist-date .champ {
  margin: 12px 0 0;
}

.checklist-progression {
  margin: 20px 0 8px;
  font-weight: 600;
}

.checklist-progression strong {
  font-family: var(--police-titre);
  font-size: var(--pas-2);
  letter-spacing: -0.04em;
}

.checklist-barre {
  height: 8px;
  background: var(--ciel);
  border-radius: 2px;
  overflow: hidden;
}

.checklist-barre span {
  display: block;
  height: 100%;
  background: var(--bleu);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.4s var(--sortie);
}

.liens-utiles {
  list-style: none;
  margin-top: 22px;
  font-size: 0.9rem;
}

.liens-utiles li {
  padding: 8px 0;
  border-top: 1px solid var(--trait);
}

.checklist {
  list-style: none;
}

.checklist-etape {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 6px 24px;
  padding: 18px 0;
  border-top: 2px solid var(--encre);
}

.checklist-etape + .checklist-etape {
  border-top: 1px solid var(--trait);
}

.checklist-quand {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.25;
}

.checklist-j {
  font-family: var(--police-titre);
  font-size: var(--pas-2);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.checklist-sous {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--encre-douce);
}

.checklist-etape--faite .checklist-j {
  color: var(--bleu);
}

.checklist-taches {
  list-style: none;
}

.tache {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  cursor: pointer;
}

.tache input:checked + span {
  color: var(--encre-douce);
  text-decoration: line-through;
  text-decoration-color: var(--kraft-fonce);
  text-decoration-thickness: 2px;
}

@media (max-width: 560px) {
  .checklist-etape {
    grid-template-columns: 1fr;
  }

  .checklist-quand {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}

.astuces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
  margin: 0;
}

.astuces > div {
  padding: 18px 0;
  border-top: 1px solid var(--trait);
}

.astuces dt {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.astuces dd {
  margin: 0;
  color: var(--encre-douce);
}

@media (max-width: 860px) {
  .astuces {
    grid-template-columns: 1fr;
  }
}

/* Équipe */
.portraits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  list-style: none;
}

.portrait-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--rayon);
}

.portrait-nom {
  margin-top: 16px;
  font-size: var(--pas-1);
}

.portrait-role {
  margin: 4px 0 10px;
  font-weight: 600;
  color: var(--kraft-fonce);
}

.portrait > p:last-child {
  color: var(--encre-douce);
  font-size: 0.95rem;
}

@media (max-width: 960px) {
  .portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .portraits {
    grid-template-columns: 1fr;
  }
}

.histoire {
  list-style: none;
}

.histoire li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--ciel-2);
}

.histoire-annee {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--bleu-fonce);
}

/* Le parc à l'échelle */
.parc {
  list-style: none;
  display: grid;
  gap: 18px;
}

.parc-vehicule {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--trait);
}

.parc-dessin {
  display: block;
  flex: none;
  max-width: 100%;
}

.parc-nom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px;
  min-width: 12rem;
  flex: 1 1 12rem;
}

.parc-nom strong {
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.parc-nom span {
  font-size: 0.9rem;
  color: var(--encre-douce);
}

/* Appel de fin de page */
.appel-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 48px;
  align-items: center;
}

.appel-grille .actions {
  margin-top: 0;
  justify-content: flex-end;
}

.section--appel .titre-section {
  color: var(--blanc);
}

.section--appel p {
  color: var(--sur-nuit-doux);
  max-width: 56ch;
}

@media (max-width: 860px) {
  .appel-grille {
    grid-template-columns: 1fr;
  }

  .appel-grille .actions {
    justify-content: flex-start;
  }
}

/* Pages légales */
.texte-legal {
  max-width: 820px;
}

.texte-legal h2 {
  font-size: var(--pas-2);
  margin: 36px 0 12px;
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal p {
  color: #2C3342;
}

/* ------------------------------------------------------------------ */
/* Pied de page et barre d'actions mobile                               */
/* ------------------------------------------------------------------ */

.pied {
  padding: clamp(48px, 7vw, 88px) 0 calc(28px + 64px);
  background: var(--nuit);
  color: var(--sur-nuit-doux);
  font-size: 0.95rem;
}

.pied a {
  color: var(--sur-nuit);
}

.pied a:hover {
  color: var(--blanc);
}

.pied :focus-visible {
  outline-color: var(--bleu-sur-nuit);
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.05fr 1.3fr 0.85fr 1.1fr;
  gap: 32px clamp(24px, 4vw, 56px);
}

@media (max-width: 960px) {
  .pied-grille {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .pied-grille {
    grid-template-columns: 1fr;
  }
}

.logo--pied {
  color: var(--sur-nuit);
  margin-bottom: 18px;
}

.logo--pied:hover {
  color: var(--blanc);
}

.logo--pied .logo-metier {
  color: var(--sur-nuit-doux);
}

.pied-adresse {
  font-style: normal;
  margin-bottom: 8px;
}

.pied-tel a {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.pied-titre {
  margin-bottom: 12px;
  font-family: var(--police-titre);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sur-nuit);
}

.pied-horaires {
  list-style: none;
  margin-bottom: 10px;
}

.pied-horaires li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(185, 198, 224, 0.18);
}

.pied-statut {
  color: var(--sur-nuit);
  font-weight: 600;
}

.pied-note {
  font-size: 0.86rem;
}

.pied-liens {
  list-style: none;
}

.pied-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(185, 198, 224, 0.2);
  font-size: 0.86rem;
}

.pied-legal p {
  margin: 0;
}

.barre-actions {
  display: none;
}

@media (max-width: 760px) {
  .barre-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--brnsg-onglet, 0px);
    z-index: 800;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--trait);
  }

  .barre-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--rayon);
    font-weight: 650;
    text-decoration: none;
  }

  .barre-actions-tel {
    border: 1.5px solid var(--encre);
    color: var(--encre);
  }

  .barre-actions-tel .icone {
    color: var(--bleu);
  }

  .barre-actions-devis {
    background: var(--bleu);
    color: var(--blanc);
  }

  .barre-actions-devis:hover {
    color: var(--blanc);
    background: var(--bleu-fonce);
  }

  .pied {
    padding-bottom: calc(28px + 80px + var(--brnsg-onglet, 0px));
  }
}

/* ------------------------------------------------------------------ */
/* États horaires                                                       */
/* ------------------------------------------------------------------ */

[data-brnsg-horaires] {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Mouvement : états de départ seulement avec html.js-motion            */
/* ------------------------------------------------------------------ */

.js-motion .duo-image,
.js-motion .zone-image,
.js-motion .deroule-image {
  overflow: hidden;
  border-radius: var(--rayon);
}

/* La bande d'adhésif se pose sur la photo, d'un geste. */
.js-motion .hero-image::after {
  animation: scotch 0.55s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 0 50%;
}

@keyframes scotch {
  from {
    transform: rotate(-3deg) scaleX(0);
  }

  to {
    transform: rotate(-3deg) scaleX(1);
  }
}

.js-motion [data-titre-anime] {
  visibility: hidden;
}

/* Seul le haut de l'accueil attend le mouvement : sa photo est l'élément le
   plus grand de l'écran, le texte peut entrer après. Les pages intérieures
   s'affichent tout de suite. */
.js-motion .hero-chapo,
.js-motion .hero-actions,
.js-motion .hero-preuves li {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion [data-titre-anime] {
    visibility: visible;
  }
}

/* ------------------------------------------------------------------ */
/* Impression de la check-list                                          */
/* ------------------------------------------------------------------ */

@media print {
  .brnsg-barre,
  .brnsg-onglet,
  .entete,
  .pied,
  .barre-actions,
  .page-tete-image,
  .page-conseils .section:not([data-checklist]),
  .checklist-cote .actions,
  .liens-utiles {
    display: none !important;
  }

  body {
    font-size: 11pt;
  }

  .section {
    padding: 0;
  }

  .checklist-grille {
    grid-template-columns: 1fr;
  }

  .checklist-cote {
    position: static;
  }

  .checklist-etape {
    break-inside: avoid;
  }
}