/* ══════════════════════════════════════════════════════════════════════
   ESSAI DE DIRECTIONS — page locale, jamais publiée (apercu-*.html est
   écarté par le .gitignore). Chaque direction est une couche posée sur
   le site actuel, sous html[data-mise-en-page].
   ══════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════ APLAT DE COULEUR ═════════════════════
   La teinte de marque devient
   une surface. Angles vifs partout : une tôle ne s'arrondit pas. Plus de
   voile sombre sur les photos, plus de cartes. */

html[data-mise-en-page="aplat"] {
  --rayon: 0px;
  --rayon-s: 0px;
  --ombre: none;
  --ombre-forte: none;
}
html[data-mise-en-page="aplat"] .section--sombre { --accent-lisible: #8fa8ff; }

/* En-tête blanc : casse le réflexe « barre anthracite + filet bleu ». */
html[data-mise-en-page="aplat"] .entete {
  background: #fff; color: var(--p-anthracite);
  border-bottom: 1px solid rgba(15, 22, 34, .12);
  backdrop-filter: none;
  --texte: var(--p-anthracite);
  --texte-doux: #3c4754;
  --lisere-fort: rgba(15, 22, 34, .25);
}
html[data-mise-en-page="aplat"] .entete .menu a { color: #3c4754; }
html[data-mise-en-page="aplat"] .entete .menu a.est-actif,
html[data-mise-en-page="aplat"] .entete .menu a:hover { color: var(--p-anthracite); }
html[data-mise-en-page="aplat"] .entete .marque__mot b { color: var(--p-anthracite); }
html[data-mise-en-page="aplat"] .entete .marque__mot i { color: #56636d; }
/* Le signe du logo est blanc sur anthracite : il garde son fond. */
html[data-mise-en-page="aplat"] .entete .marque__signe,
html[data-mise-en-page="photos"] .entete .marque__signe { background: var(--p-anthracite); }
html[data-mise-en-page="aplat"] .choix-langue__bouton { color: var(--p-anthracite); border-color: rgba(15,22,34,.25); }
html[data-mise-en-page="aplat"] .bouton { border-radius: 0; letter-spacing: .01em; }
/* Le bouton d'appel de l'en-tête garde ses marges : agrandi comme les
   autres, il devenait en mobile un large rectangle à côté d'une croix carrée. */
html[data-mise-en-page="aplat"] .bouton:not(.entete__appel) { padding: 1rem 1.6rem; }

/* Le héros se coupe en deux : un aplat bleu qui PORTE le titre, la
   photo intacte à côté. Aucun voile, aucun texte sur l'image. */
html[data-mise-en-page="aplat"] .hero {
  background: var(--p-bleu-surface);
  padding: 0;
}
html[data-mise-en-page="aplat"] .hero__voile { display: none; }
html[data-mise-en-page="aplat"] .hero__fond { left: 46%; }
html[data-mise-en-page="aplat"] .hero__dedans {
  max-width: none; padding: 0;
  grid-template-columns: 46% 1fr;
  grid-template-rows: 1fr auto;
  gap: 0;
}
html[data-mise-en-page="aplat"] .hero__texte {
  grid-column: 1; grid-row: 1;
  max-width: none;
  align-self: center;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vh, 4rem) max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge)));
}
html[data-mise-en-page="aplat"] .titre-hero {
  font-size: clamp(2.5rem, 4.4vw, 4.9rem);
  line-height: .98; letter-spacing: -.025em; font-weight: 700;
}
html[data-mise-en-page="aplat"] .hero__texte .chapo--hero { color: #fff; opacity: .92; }
html[data-mise-en-page="aplat"] .hero .bouton--accent { background: #fff; color: var(--p-bleu-surface); }
html[data-mise-en-page="aplat"] .hero .bouton--clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
html[data-mise-en-page="aplat"] .hero__commande {
  grid-column: 2; grid-row: 1; align-self: end;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}
/* Les repères quittent la photo : une réglette anthracite, en pied de héros. */
html[data-mise-en-page="aplat"] .reperes {
  grid-column: 1 / -1; grid-row: 2;
  background: var(--p-anthracite);
  border-top: 0;
  padding: clamp(1.4rem, 3vh, 2.2rem) max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge)));
}

/* Les quatre métiers : une LISTE, pas une grille de cartes. Chaque ligne
   porte sa photo en vignette ; la ligne entière se laque de bleu au
   survol. */
html[data-mise-en-page="aplat"] .bloc-titre--centre, html[data-mise-en-page="aplat"] .bloc-titre--centre > * { text-align: left; margin-inline: 0; }
html[data-mise-en-page="aplat"] .bloc-titre--centre .chapo { margin-inline: 0; }
html[data-mise-en-page="aplat"] .titre-section { letter-spacing: -.02em; font-weight: 700; }
html[data-mise-en-page="aplat"] .tuiles {
  grid-template-columns: 1fr; gap: 0;
  border-top: 2px solid var(--p-anthracite);
}
html[data-mise-en-page="aplat"] .tuile {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: clamp(8rem, 13vw, 12.5rem) 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.1rem;
  background: transparent;
  border-bottom: 1px solid rgba(15, 22, 34, .16);
  overflow: visible;
  transition: background .3s cubic-bezier(.2,.7,.3,1), color .3s;
}
html[data-mise-en-page="aplat"] .tuile__photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 3 / 2; overflow: hidden; }
html[data-mise-en-page="aplat"] .tuile__voile { display: none; }
html[data-mise-en-page="aplat"] .tuile__corps {
  position: static; color: var(--p-anthracite); padding: 0 1.5rem 0 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: center; gap: 0 2rem;
}
html[data-mise-en-page="aplat"] .tuile__rang { color: var(--p-bleu-surface); font-size: 1rem; }
html[data-mise-en-page="aplat"] .tuile__corps b { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
html[data-mise-en-page="aplat"] .tuile__corps i { color: #3c4754; max-width: 40ch; }
html[data-mise-en-page="aplat"] .tuile__lien { margin: 0; color: var(--p-anthracite); }
html[data-mise-en-page="aplat"] .tuile__lien { white-space: nowrap; font-size: .9rem; }
html[data-mise-en-page="aplat"] .tuile__lien .ic { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
  html[data-mise-en-page="aplat"] .tuile:hover { background: var(--p-bleu-surface); }
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__corps,
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__corps i,
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__lien,
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__rang { color: #fff; }
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__photo img { transform: scale(1.06); }
}

/* Les duos : la photo touche le bord de l'écran, sans cadre ni ombre. */
html[data-mise-en-page="aplat"] .duo__image { border-radius: 0; box-shadow: none; margin-left: calc(-1 * max(var(--marge), (100vw - var(--large)) / 2 + var(--marge))); }
html[data-mise-en-page="aplat"] .duo__dedans--inverse .duo__image,
html[data-mise-en-page="aplat"] .duo--inverse .duo__image { margin-left: 0; margin-right: calc(-1 * max(var(--marge), (100vw - var(--large)) / 2 + var(--marge))); }
/* La photo touche AUSSI le haut et le bas de sa section. Débordant sur le
   côté mais flottant au milieu de la marge de section, elle laissait deux
   bandes blanches de 120 px au-dessus et au-dessous — on la croyait mal
   posée. C'est le texte, désormais, qui garde le souffle de la section. */
html[data-mise-en-page="aplat"] .section:has(.duo__dedans) { padding-block: 0; }
html[data-mise-en-page="aplat"] .duo__dedans { align-items: stretch; }
html[data-mise-en-page="aplat"] .duo__image { display: flex; }
html[data-mise-en-page="aplat"] .duo__image img { min-height: 30rem; height: 100%; width: 100%; object-fit: cover; }
html[data-mise-en-page="aplat"] .duo__texte { align-self: center; padding-block: var(--section-y); }
/* UNE ligne verticale pour toute la page : celle du héros, à 46 % de la
   largeur. Chaque section photo | texte coupe au même endroit, que la photo
   soit à gauche (elle prend 46 %) ou à droite (54 %, comme dans le héros).
   Asymétrique, mais cohérent d'une section à l'autre — auparavant, la
   coupure tombait avant l'écart de grille quand la photo était à gauche et
   après quand elle était à droite : deux sections superposées se
   décalaient de ~65 px.
   Le texte s'aligne sur la marge du titre du héros (--bord). */
@media (min-width: 901px) {
  html[data-mise-en-page="aplat"] {
    --bord: max(var(--marge), calc((100vw - var(--large)) / 2 + var(--marge)));
    --souffle: clamp(2rem, 4vw, 4.5rem);
  }
  html[data-mise-en-page="aplat"] .duo__dedans {
    max-width: none; padding: 0; gap: 0; grid-template-columns: 46% 54%;
  }
  html[data-mise-en-page="aplat"] .duo__image,
  html[data-mise-en-page="aplat"] .duo--inverse .duo__image,
  html[data-mise-en-page="aplat"] .duo__dedans--inverse .duo__image { margin: 0; }
  /* photo à gauche, texte dans la colonne de droite */
  html[data-mise-en-page="aplat"] .duo__texte { padding-inline: var(--souffle) var(--bord); }
  /* photo à droite, texte dans la colonne de gauche — aligné sur le titre du héros */
  html[data-mise-en-page="aplat"] .duo--inverse .duo__texte,
  html[data-mise-en-page="aplat"] .duo__dedans--inverse .duo__texte { padding-inline: var(--bord) var(--souffle); }
}

/* Les avis : une bande qui défile, citations en grand, sans cartes. */
html[data-mise-en-page="aplat"] .avis__grille {
  /* align-items: start : étirées à la hauteur de la plus longue, les
     cartes courtes laissaient un grand vide sous leur citation. */
  display: flex; align-items: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  border-top: 1px solid rgba(255,255,255,.2);
  scrollbar-width: thin;
}
html[data-mise-en-page="aplat"] .avis {
  flex: 0 0 min(26rem, 82vw); scroll-snap-align: start;
  background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.14);
  padding: 2rem 2rem 1rem 0; margin-right: 2rem;
}
html[data-mise-en-page="aplat"] .avis blockquote p { font-family: var(--titre-police); font-size: 1.35rem; line-height: 1.35; color: #fff; }
html[data-mise-en-page="aplat"] .avis figcaption { border-top: 0; }
html[data-mise-en-page="aplat"] .pagination { display: none !important; }
html[data-mise-en-page="aplat"] .avis.hors-page { display: flex !important; }

html[data-mise-en-page="aplat"] .vehicule { border-radius: 0; }
html[data-mise-en-page="aplat"] .vehicule__prix { border-radius: 0; background: var(--p-bleu-surface); }
html[data-mise-en-page="aplat"] .vehicule__faits li { border-radius: 0; }

html[data-mise-en-page="aplat"] .partenaires { background: #fff; border-top: 1px solid rgba(15,22,34,.12); }
html[data-mise-en-page="aplat"] .appel { background: var(--p-bleu-surface); }
html[data-mise-en-page="aplat"] .appel .titre-section { font-size: clamp(2.4rem, 5vw, 5rem); }
html[data-mise-en-page="aplat"] .appel .bouton--accent { color: var(--p-bleu-surface); }

@media (max-width: 900px) {
  html[data-mise-en-page="aplat"] .hero { display: flex; flex-direction: column; min-height: 0; }
  html[data-mise-en-page="aplat"] .hero__dedans { display: contents; }
  html[data-mise-en-page="aplat"] .hero__texte { order: 1; padding: 2.5rem var(--marge) 2.2rem; }
  /* Le cadre au format des photos (4:3) : à 62vw, on n'en voyait que 83 %
     — les photos du haut de page sont toutes en 4:3, sauf l'atelier (2:1),
     seul à perdre un peu sur les côtés. */
  html[data-mise-en-page="aplat"] .hero__fond { order: 2; position: relative; inset: auto; left: 0; height: auto; aspect-ratio: 4 / 3; z-index: 0; }
  html[data-mise-en-page="aplat"] .reperes { order: 3; }
  html[data-mise-en-page="aplat"] .hero__commande { display: none; }
  html[data-mise-en-page="aplat"] .reperes { padding: 1.4rem var(--marge); }
  /* En colonne : vignette à gauche, puis titre, texte et lien l'un sous
     l'autre. Le texte du métier RESTE (il est modifiable) ; le lien peut
     aller à la ligne — sur une seule ligne, il faisait déborder la page
     de 97 px à 390 px de large. */
  html[data-mise-en-page="aplat"] .tuile { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1rem .75rem; }
  html[data-mise-en-page="aplat"] .tuile__corps { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 0; min-width: 0; text-align: left; }
  html[data-mise-en-page="aplat"] .tuile__rang { display: none; }
  html[data-mise-en-page="aplat"] .tuile__corps b { font-size: 1.35rem; }
  html[data-mise-en-page="aplat"] .tuile__corps i { font-size: .88rem; line-height: 1.45; }
  html[data-mise-en-page="aplat"] .tuile__lien { white-space: normal; margin-top: .2rem; }
  html[data-mise-en-page="aplat"] .duo__image { margin-inline: calc(-1 * var(--marge)) !important; }
  /* En colonne : la photo pleine largeur, le texte avec un souffle réduit. */
  html[data-mise-en-page="aplat"] .duo__image img { min-height: 16rem; height: 62vw; }
  html[data-mise-en-page="aplat"] .duo__texte { padding-block: 2.25rem 3rem; }
  /* l'écart de la grille s'ajoutait à la marge du texte : ~75 px sous la photo */
  html[data-mise-en-page="aplat"] .duo__dedans { row-gap: 0; }
}


/* ═════════════════════════ GRANDES PHOTOS ════════════════════════════
   Blanc, précis, photographique. La photo passe en pleine largeur et
   devient le décor ; la typographie se fait très grande et très légère ;
   le bleu n'est plus qu'un trait. Référence : les fiches des
   constructeurs, pas les sites de garage. */

html[data-mise-en-page="photos"] {
  --rayon: 2px;
  --rayon-s: 2px;
  --ombre: none;
  --ombre-forte: none;
}
/* Seules les sections sombres À PHOTO passent en blanc : la photo y porte
   déjà le contraste. Les autres (avis, garanties, étapes, formulaire)
   gardent l'anthracite — sans elles, la page n'avait plus aucun rythme. */
html[data-mise-en-page="photos"] .section--sombre:has(.duo__dedans) {
  --fond: #fff; --fond-carte: #fff; --texte: var(--p-anthracite);
  --texte-doux: #3c4754; --texte-faible: #5b6671;
  --lisere: rgba(15,22,34,.12); --lisere-fort: rgba(15,22,34,.25);
  background: #fff; color: var(--p-anthracite);
}
html[data-mise-en-page="photos"] .titre-hero,
html[data-mise-en-page="photos"] .titre-section { font-weight: 400; letter-spacing: -.035em; }
html[data-mise-en-page="photos"] .titre-section { font-size: clamp(2.2rem, 4.6vw, 4.8rem); line-height: 1; }
html[data-mise-en-page="photos"] .bouton { border-radius: 0; background-image: none; }
html[data-mise-en-page="photos"] .bouton--contour { border: 0; border-bottom: 1px solid currentColor; padding-inline: 0; }

html[data-mise-en-page="photos"] .entete { background: rgba(255,255,255,.96); color: var(--p-anthracite); border-bottom: 1px solid rgba(15,22,34,.1); --texte: var(--p-anthracite); }
html[data-mise-en-page="photos"] .entete .menu a { color: #3c4754; }
html[data-mise-en-page="photos"] .entete .menu a.est-actif { color: var(--p-anthracite); }
html[data-mise-en-page="photos"] .entete .marque__mot b { color: var(--p-anthracite); }
html[data-mise-en-page="photos"] .entete .marque__mot i { color: #56636d; }
html[data-mise-en-page="photos"] .choix-langue__bouton { color: var(--p-anthracite); border-color: rgba(15,22,34,.25); }

/* Le héros : la photo seule, sans voile sur les trois quarts. Le titre
   descend au pied, sur une bande de dégradé courte, en très grand. */
html[data-mise-en-page="photos"] .hero__voile {
  /* Le titre tombe entre 30 et 55 % de la hauteur : le voile y reste
     assez dense pour un texte blanc posé sur un ciel clair. */
  background: linear-gradient(to top, rgba(9,13,20,.9) 0%, rgba(9,13,20,.72) 40%, rgba(9,13,20,.45) 68%, rgba(9,13,20,.12) 92%), linear-gradient(to right, rgba(9,13,20,.4), transparent 65%);
}
html[data-mise-en-page="photos"] .hero__dedans { grid-template-rows: 1fr auto auto; }
html[data-mise-en-page="photos"] .hero__texte { align-self: end; max-width: none; }
html[data-mise-en-page="photos"] .titre-hero { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .95; max-width: 16em; }
html[data-mise-en-page="photos"] .hero__texte .chapo--hero { margin-top: 1rem; }
html[data-mise-en-page="photos"] .hero .bouton--accent { background: #fff; color: var(--p-anthracite); }
html[data-mise-en-page="photos"] .hero .bouton--clair { background: transparent; color: #fff; border: 0; border-bottom: 1px solid #fff; padding-inline: 0; }
html[data-mise-en-page="photos"] .hero__boutons { gap: 2rem; margin-top: 1.6rem; }
html[data-mise-en-page="photos"] .reperes { border-top-color: rgba(255,255,255,.35); }
html[data-mise-en-page="photos"] .repere > b { font-weight: 400; letter-spacing: -.02em; }
html[data-mise-en-page="photos"] .titre-hero { font-weight: 500; }

/* Les métiers : quatre panneaux verticaux, bord à bord, sans espace. */
html[data-mise-en-page="photos"] .section:has(.tuiles) .conteneur { max-width: none; padding-inline: 0; }
html[data-mise-en-page="photos"] .section:has(.tuiles) .bloc-titre { max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); text-align: left; }
html[data-mise-en-page="photos"] .section:has(.tuiles) .chapo { margin-inline: 0; }
html[data-mise-en-page="photos"] .tuiles { grid-template-columns: repeat(4, 1fr); gap: 1px; background: #fff; }
html[data-mise-en-page="photos"] .tuile { aspect-ratio: 3 / 4.4; border-radius: 0; }
html[data-mise-en-page="photos"] .tuile__rang { display: none; }
html[data-mise-en-page="photos"] .tuile__corps i { font-size: .9rem; }
html[data-mise-en-page="photos"] .tuile { container-type: inline-size; }
/* Calée sur la largeur du panneau (cqi) : à 2,2 vw, « Tweedehandswagens »
   dépassait de 125 px d'un panneau de 360 px. */
html[data-mise-en-page="photos"] .tuile__corps b { font-weight: 500; font-size: min(clamp(1.5rem, 2.2vw, 2.1rem), 8.5cqi); }

/* Les duos : moitié d'écran photo, moitié texte ; la photo touche les bords. */
html[data-mise-en-page="photos"] .duo, html[data-mise-en-page="photos"] .section--sombre:has(.duo__dedans) { padding-block: 0; }
html[data-mise-en-page="photos"] .duo__dedans { max-width: none; padding: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
html[data-mise-en-page="photos"] .duo__image { border-radius: 0; box-shadow: none; }
html[data-mise-en-page="photos"] .duo__image img { min-height: 38rem; height: 100%; }
html[data-mise-en-page="photos"] .duo__texte { padding: clamp(3rem, 7vw, 7rem) clamp(1.5rem, 6vw, 6rem); align-self: center; max-width: 44rem; }
/* Blanc, jamais gris : un fond gris pâle fait « formulaire administratif ». */
html[data-mise-en-page="photos"] .section--sombre:has(.duo__dedans) { background: #fff; }

/* Les avis : en colonnes de journal, citations sans cadre. */
html[data-mise-en-page="photos"] .avis__grille { display: block; columns: 3 18rem; column-gap: 3rem; }
html[data-mise-en-page="photos"] .avis { break-inside: avoid; background: none; border: 0; border-top: 1px solid var(--lisere); padding: 1.4rem 0 2.2rem; }
html[data-mise-en-page="photos"] .avis blockquote p { font-family: var(--titre-police); font-size: 1.3rem; line-height: 1.35; color: var(--texte); }
html[data-mise-en-page="photos"] .avis figcaption { border-top: 0; }
html[data-mise-en-page="photos"] .bloc-titre--centre, html[data-mise-en-page="photos"] .bloc-titre--centre > * { text-align: left; margin-inline: 0; }
html[data-mise-en-page="photos"] .bloc-titre--centre .chapo { margin-inline: 0; }

html[data-mise-en-page="photos"] .vehicule { border-radius: 0; border: 0; background: none; }
html[data-mise-en-page="photos"] .vehicule__corps { padding-inline: 0; }
html[data-mise-en-page="photos"] .vehicule__prix { border-radius: 0; }
html[data-mise-en-page="photos"] .vehicule__faits li { border-radius: 0; background: none; padding: 0; }
/* Le séparateur en FIN d'élément : placé au début, il ouvrait la ligne
   suivante quand la liste passait à la ligne (« · 136 ch »). */
html[data-mise-en-page="photos"] .vehicule__faits li:not(:last-child)::after { content: " ·"; }

html[data-mise-en-page="photos"] .partenaires { background: #fff; }
/* Le bandeau final prend la couleur de la palette, comme dans les deux
   autres mises en page. Anthracite, il se fondait dans le pied de page ;
   blanc, la page finissait sans appel visible. */
html[data-mise-en-page="photos"] .appel .bouton--accent { background: #fff; color: var(--p-bleu-surface); }

@media (max-width: 900px) {
  html[data-mise-en-page="photos"] .tuiles { grid-template-columns: 1fr 1fr; }
  html[data-mise-en-page="photos"] .duo__dedans { grid-template-columns: 1fr; }
  html[data-mise-en-page="photos"] .duo__image img { min-height: 18rem; height: 60vw; }
  html[data-mise-en-page="photos"] .duo__texte { padding: 2.5rem var(--marge) 3.5rem; }
}
@media (max-width: 520px) {
  html[data-mise-en-page="photos"] .tuiles { grid-template-columns: 1fr; }
  html[data-mise-en-page="photos"] .tuile { aspect-ratio: 4 / 3; }
}


/* ══════════════════════════ LE MOUVEMENT ══════════════════════════════
   Règles tenues partout :
   - l'état caché n'existe que sous html.mvt, posé par le script : sans
     script, tout est visible ;
   - jamais de découpe du titre en mots (le CMS écrit le H1 entier) : les
     titres entrent par un RIDEAU sur le bloc (clip-path) ;
   - courbes « expo » sans rebond ; rien au-delà de 1,4 s ;
   - prefers-reduced-motion : rien ne bouge. */

:root { --expo: cubic-bezier(.16, 1, .3, 1); --quart: cubic-bezier(.25, 1, .5, 1); }

@keyframes rideau {
  from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); }
  to   { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; }
}
@keyframes monte { from { opacity: 0; transform: translateY(22px); } }
@keyframes volet-gauche { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes volet-droite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes volet-bas    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes recule { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes eclaire { from { transform: scale(1.14); filter: brightness(.55); } to { transform: scale(1); filter: none; } }
@keyframes trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Titres de section : le rideau, au défilement ─────────────────── */
html.mvt[data-mise-en-page="aplat"] .titre-section[data-mvt],
html.mvt[data-mise-en-page="photos"] .titre-section[data-mvt] { clip-path: inset(0 0 100% 0); }
html.mvt[data-mise-en-page="aplat"] .titre-section[data-mvt].en-vue,
html.mvt[data-mise-en-page="photos"] .titre-section[data-mvt].en-vue { animation: rideau 1s var(--expo) both; }
html.mvt[data-mise-en-page="aplat"] .bloc-titre .chapo[data-mvt],
html.mvt[data-mise-en-page="photos"] .bloc-titre .chapo[data-mvt] { opacity: 0; }
html.mvt[data-mise-en-page="aplat"] .bloc-titre .chapo[data-mvt].en-vue,
html.mvt[data-mise-en-page="photos"] .bloc-titre .chapo[data-mvt].en-vue { opacity: 1; animation: monte .9s var(--expo) .15s both; }

/* ── Les véhicules : ils arrivent quand l'API répond, un par un ──── */
html.mvt[data-mise-en-page="aplat"] .occasions__grille.en-vue .vehicule,
html.mvt[data-mise-en-page="photos"] .occasions__grille.en-vue .vehicule { animation: monte .8s var(--expo) both; }
html:not([data-mise-en-page="classique"]) .occasions__grille.en-vue .vehicule:nth-child(2) { animation-delay: .07s !important; }
html:not([data-mise-en-page="classique"]) .occasions__grille.en-vue .vehicule:nth-child(3) { animation-delay: .14s !important; }
html:not([data-mise-en-page="classique"]) .occasions__grille.en-vue .vehicule:nth-child(4) { animation-delay: .21s !important; }
html:not([data-mise-en-page="classique"]) .occasions__grille.en-vue .vehicule:nth-child(5) { animation-delay: .28s !important; }
html:not([data-mise-en-page="classique"]) .occasions__grille.en-vue .vehicule:nth-child(6) { animation-delay: .35s !important; }
html[data-mise-en-page="aplat"] .vehicule__photo img,
html[data-mise-en-page="photos"] .vehicule__photo img { transition: transform .8s var(--expo); }
@media (hover: hover) and (pointer: fine) {
  html[data-mise-en-page="aplat"] .vehicule:hover,
  html[data-mise-en-page="photos"] .vehicule:hover { transform: none; box-shadow: none; }
  html[data-mise-en-page="aplat"] .vehicule:hover .vehicule__photo img,
  html[data-mise-en-page="photos"] .vehicule:hover .vehicule__photo img { transform: scale(1.06); }
}

/* ═════════ Aplat de couleur — le volet ═════════
   Le héros s'ouvre comme une porte d'atelier : la photo glisse de la
   droite sur l'aplat, en reculant ; le titre sort du rideau ensuite. */
html.mvt[data-mise-en-page="aplat"] .hero__fond { animation: volet-gauche 1.25s var(--expo) .05s both; }
html.mvt[data-mise-en-page="aplat"] .hero__vue { animation: recule 1.6s var(--expo) .05s both; }
html.mvt[data-mise-en-page="aplat"] .hero__texte > .titre-hero { animation: rideau 1s var(--expo) .35s both; }
html.mvt[data-mise-en-page="aplat"] .hero__texte > .chapo { animation: monte .9s var(--expo) .55s both; }
html.mvt[data-mise-en-page="aplat"] .hero__texte > .hero__boutons { animation: monte .9s var(--expo) .65s both; }
html.mvt[data-mise-en-page="aplat"] .hero .reperes { animation: monte .9s var(--expo) .8s both; }
html.mvt[data-mise-en-page="aplat"] .hero__commande { animation: monte .8s var(--expo) 1.1s both; }

/* La liste des métiers : le filet de tête se trace, puis les lignes. */
html[data-mise-en-page="aplat"] .tuiles { position: relative; border-top: 0; }
html[data-mise-en-page="aplat"] .tuiles::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--p-anthracite); transform-origin: left;
}
html.mvt[data-mise-en-page="aplat"] .tuiles[data-mvt]::before { transform: scaleX(0); }
html.mvt[data-mise-en-page="aplat"] .tuiles[data-mvt].en-vue::before { animation: trait 1.1s var(--expo) both; }
html[data-mise-en-page="aplat"] .tuiles { padding-top: 2px; }
/* Au survol, la ligne se laque de gauche à droite au lieu de changer
   d'un coup. */
html[data-mise-en-page="aplat"] .tuile { position: relative; isolation: isolate; }
html[data-mise-en-page="aplat"] .tuile::before {
  /* Le fond reste ENTRE les filets, jamais au-delà : débordant de la
     liste, il dépassait du trait noir de tête et des filets gris. Le
     souffle autour de la vignette vient du retrait intérieur de la ligne. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--p-bleu-surface);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--expo);
}
html[data-mise-en-page="aplat"] .tuile__lien .ic { transition: transform .45s var(--expo); }
@media (hover: hover) and (pointer: fine) {
  html[data-mise-en-page="aplat"] .tuile:hover { background: transparent !important; }
  html[data-mise-en-page="aplat"] .tuile:hover::before { transform: scaleX(1); }
  html[data-mise-en-page="aplat"] .tuile:hover .tuile__lien .ic { transform: translateX(-8px) rotate(-45deg); }
  html[data-mise-en-page="aplat"] .tuile .tuile__corps,
  html[data-mise-en-page="aplat"] .tuile .tuile__corps * { transition: color .35s var(--quart); }
}

/* Les photos des duos s'ouvrent depuis le bord de l'écran qu'elles
   touchent. */
html.mvt[data-mise-en-page="aplat"] .duo__image[data-mvt] { clip-path: inset(0 100% 0 0); }
html.mvt[data-mise-en-page="aplat"] .duo__image[data-mvt].en-vue { animation: volet-droite 1.3s var(--expo) both; }
html.mvt[data-mise-en-page="aplat"] .duo__dedans--inverse .duo__image[data-mvt],
html.mvt[data-mise-en-page="aplat"] .duo--inverse .duo__image[data-mvt] { clip-path: inset(0 0 0 100%); }
html.mvt[data-mise-en-page="aplat"] .duo__dedans--inverse .duo__image[data-mvt].en-vue,
html.mvt[data-mise-en-page="aplat"] .duo--inverse .duo__image[data-mvt].en-vue { animation: volet-gauche 1.3s var(--expo) both; }
html.mvt[data-mise-en-page="aplat"] .duo__image[data-mvt].en-vue img { animation: recule 1.7s var(--expo) both; }

/* ═════════ Grandes photos — la lumière ═════════
   Le héros s'allume : la photo sort de la pénombre en reculant, comme
   un projecteur d'atelier qu'on enclenche. */
html.mvt[data-mise-en-page="photos"] .hero__fond { animation: eclaire 1.8s var(--expo) both; }
html.mvt[data-mise-en-page="photos"] .hero__texte > .titre-hero { animation: rideau 1.1s var(--expo) .35s both; }
html.mvt[data-mise-en-page="photos"] .hero__texte > .hero__boutons { animation: monte .9s var(--expo) .6s both; }
html.mvt[data-mise-en-page="photos"] .hero .reperes { animation: monte .9s var(--expo) .75s both; }
html[data-mise-en-page="photos"] .reperes { position: relative; }

/* Les quatre panneaux se lèvent l'un après l'autre (le rang vient du
   script existant, qui pose transition-delay). */
html.js[data-mise-en-page="photos"] .tuile[data-entre] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
html.js[data-mise-en-page="photos"] .tuile[data-entre].est-vue {
  clip-path: inset(0);
  transition: clip-path 1.2s var(--expo);
}
html.js[data-mise-en-page="photos"] .tuile[data-entre] .tuile__photo img { transform: scale(1.25); }
html.js[data-mise-en-page="photos"] .tuile[data-entre] .tuile__photo { transition-delay: inherit; }
html.js[data-mise-en-page="photos"] .tuile[data-entre].est-vue .tuile__photo img {
  transform: scale(1);
  transition: transform 1.6s var(--expo);
  transition-delay: inherit;
}
html[data-mise-en-page="photos"] .tuile__corps { transition: transform .6s var(--expo); }
html[data-mise-en-page="photos"] .tuile__corps i { transition: opacity .5s var(--expo); }
@media (hover: hover) and (pointer: fine) {
  html[data-mise-en-page="photos"] .tuile:hover .tuile__corps { transform: translateY(-10px); }
  html.js[data-mise-en-page="photos"] .tuile.est-vue:hover .tuile__photo img { transform: scale(1.06); transition-delay: 0s; }
}

/* Les duos : la photo glisse plus lentement que la page (parallaxe
   pilotée par le défilement, sans script). */
@supports (animation-timeline: view()) {
  html.mvt[data-mise-en-page="photos"] .duo__image { overflow: hidden; }
  html.mvt[data-mise-en-page="photos"] .duo__image img {
    animation: parallaxe linear both;
    animation-timeline: view();
  }
  @keyframes parallaxe {
    from { transform: scale(1.16) translateY(-6%); }
    to   { transform: scale(1.16) translateY(6%); }
  }
}

/* Les avis : la ligne du dessus se trace, avis après avis. */
html[data-mise-en-page="photos"] .avis { position: relative; border-top-color: transparent; }
html[data-mise-en-page="photos"] .avis::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--lisere-fort); transform-origin: left;
}
html.js[data-mise-en-page="photos"] .avis[data-entre]::before { transform: scaleX(0); }
html.js[data-mise-en-page="photos"] .avis[data-entre].est-vue::before { transform: scaleX(1); transition: transform 1s var(--expo); transition-delay: inherit; }

@media (prefers-reduced-motion: reduce) {
  html.mvt [data-mvt], html.mvt [data-mvt].en-vue,
  html.mvt .hero *, html.mvt .hero__fond,
  html.js[data-mise-en-page] .tuile[data-entre] { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── Retouches communes aux deux mises en page ──────────────────────── */
/* Les mots longs du néerlandais et de l'allemand (« Tweedehandswagens »,
   « Gebrauchtwagen ») sortaient de leur colonne : césure selon la langue
   de la page (<html lang>), et coupe franche en dernier recours. */
html:not([data-mise-en-page="classique"]) :is(.titre-hero, .titre-section, .tuile__corps b, .tuile__corps i) {
  overflow-wrap: break-word;
}
/* La césure pour le néerlandais et l'allemand SEULEMENT : en français, elle
   coupait le titre du haut de page en « carrosse-rie » sans nécessité. */
html:is(:lang(nl), :lang(de)):not([data-mise-en-page="classique"]) :is(.titre-hero, .titre-section, .tuile__corps b, .tuile__corps i) {
  hyphens: auto;
}
/* Dans les TITRES, seulement les mots très longs : sans limite, « Karosserie »
   devenait « Ka-rosserie » dans le titre du haut de page, sans nécessité. */
html:is(:lang(nl), :lang(de)):not([data-mise-en-page="classique"]) :is(.titre-hero, .titre-section, .tuile__corps b) {
  hyphenate-limit-chars: 12 5 5;
}
/* Le haut de page occupe tout l'écran sous l'en-tête, sur les six pages :
   la version classique réduisait les pages intérieures à 74 %. */
html:not([data-mise-en-page="classique"]) .hero,
html:not([data-mise-en-page="classique"]) .hero--compact {
  min-height: calc(100svh - var(--haut-entete) - var(--barre-appel));
}
/* Les angles vifs valent partout, mosaïque comprise (10 px en dur). */
html:not([data-mise-en-page="classique"]) .mosaique__case { border-radius: 0; }
html:not([data-mise-en-page="classique"]) .vehicule__nouveau { border-radius: 0; }
html:not([data-mise-en-page="classique"]) :is(.filtres button, .champ--tri .select-habille__bouton, .choix-langue__bouton, .pagination button) { border-radius: 0; }
/* Le texte d'un duo collait à son titre. */
html:not([data-mise-en-page="classique"]) .duo__texte .bloc-titre { margin-bottom: 1.3rem; }

/* ── Le menu mobile suit l'en-tête : blanc ───────────────────────────
   L'en-tête des deux mises en page est blanc ; le tiroir restait
   anthracite, et le menu ouvert juxtaposait les deux. */
html:not([data-mise-en-page="classique"]) .tiroir {
  background: #fff; color: var(--p-anthracite);
  border-top: 1px solid rgba(15, 22, 34, .1);
}
html:not([data-mise-en-page="classique"]) .tiroir ::-webkit-scrollbar-thumb { background: rgba(15, 22, 34, .2); }
html:not([data-mise-en-page="classique"]) .tiroir__nav a { color: var(--p-anthracite); border-bottom-color: rgba(15, 22, 34, .1); }
html:not([data-mise-en-page="classique"]) .tiroir__nav a::after { border-color: rgba(15, 22, 34, .35); }
html:not([data-mise-en-page="classique"]) .tiroir__nav a.est-actif { color: var(--p-bleu); }
html:not([data-mise-en-page="classique"]) .tiroir__nav a.est-actif::after { border-color: var(--p-bleu); }
html:not([data-mise-en-page="classique"]) .tiroir__appel {
  background: color-mix(in srgb, var(--p-bleu) 7%, #fff);
  border-color: color-mix(in srgb, var(--p-bleu) 28%, transparent);
  border-radius: 0; color: var(--p-anthracite);
}
html:not([data-mise-en-page="classique"]) .tiroir__appel-texte i { color: #56636d; }
html:not([data-mise-en-page="classique"]) .tiroir__adresse { color: #56636d; }
html:not([data-mise-en-page="classique"]) .tiroir__langues a,
html:not([data-mise-en-page="classique"]) .tiroir__langues span {
  border-color: rgba(15, 22, 34, .2); color: #3c4754; border-radius: 0;
}
html:not([data-mise-en-page="classique"]) .tiroir__langues span { background: rgba(15, 22, 34, .07); border-color: transparent; color: var(--p-anthracite); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-mise-en-page="classique"]) .tiroir__langues a:hover { border-color: var(--p-anthracite); color: var(--p-anthracite); }
}

/* Sur téléphone, le titre du haut de page revient à la taille de la
   classique (36 px à 390 px) : à 40–45 px, « Tweedehandswagens » ne tenait
   plus sur sa ligne et se coupait en « Tweedehandswa-gens ». */
@media (max-width: 520px) {
  html:not([data-mise-en-page="classique"]) .titre-hero { font-size: clamp(2rem, 9.2vw, 2.4rem); }
}

/* ── Le mode édition : tout est là, tout de suite ───────────────────────
   Limité aux deux mises en page ajoutées : la classique garde exactement
   son comportement d'origine, mode édition compris. */
html:not([data-mise-en-page="classique"]) body.edit-mode [data-mvt],
html:not([data-mise-en-page="classique"]) body.edit-mode .hero__texte > *,
html:not([data-mise-en-page="classique"]) body.edit-mode .hero .reperes,
html:not([data-mise-en-page="classique"]) body.edit-mode .hero__commande,
html:not([data-mise-en-page="classique"]) body.edit-mode .hero__fond,
html:not([data-mise-en-page="classique"]) body.edit-mode .hero__vue,
html:not([data-mise-en-page="classique"]) body.edit-mode .tuile[data-entre],
html:not([data-mise-en-page="classique"]) body.edit-mode .tuile[data-entre] .tuile__photo img,
html:not([data-mise-en-page="classique"]) body.edit-mode .duo__image img,
html:not([data-mise-en-page="classique"]) body.edit-mode .vehicule {
  animation: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Les photos agrandies pour leur entrée reprennent leur taille. */
html:not([data-mise-en-page="classique"]) body.edit-mode .tuile[data-entre] .tuile__photo img,
html:not([data-mise-en-page="classique"]) body.edit-mode .hero__vue { transform: none !important; }