/* ==========================================================================
   MANELYA AUTO — feuille de style
   Direction : atelier. Fond bitume, typo mécanique, rouge de l'enseigne.
   Aucune requête tierce : polices et scripts servis depuis ce dossier.
   ========================================================================== */

/* --- POLICES (Fontshare, auto-hébergées) -------------------------------- */
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('fonts/cabinet-grotesk-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('fonts/switzer-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('fonts/switzer-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('fonts/switzer-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

/* --- JETONS -------------------------------------------------------------- */
:root{
  /* Matières. Contrastes mesurés sur --bitume :
     craie 17,3 · acier 6,7 · feu-encre 6,0 · craie sur feu 5,2 */
  --bitume:      #0E0D0D;   /* fond principal                      */
  --fonte:       #191617;   /* sections alternées, fiches          */
  --fonte-clair: #221E1F;   /* surfaces surélevées                 */
  --craie:       #F4F1EE;   /* texte principal                     */
  --acier:       #9E9691;   /* texte secondaire                    */
  --feu:         #C8102E;   /* rouge de l'enseigne — surfaces      */
  --feu-sombre:  #9E0B23;   /* pressé                              */
  --feu-encre:   #FF4D63;   /* rouge lisible en petit texte        */

  --filet:       rgba(244,241,238,.10);  /* règle 1px               */
  --filet-fort:  rgba(244,241,238,.20);
  --voile:       rgba(244,241,238,.04);  /* fond de carte           */

  --display: 'Cabinet Grotesk','Arial Black','Helvetica Neue',sans-serif;
  --texte:   'Switzer','Helvetica Neue',Arial,sans-serif;

  --marge:   clamp(1.25rem, 5vw, 5rem);
  --largeur: 82rem;
  --mesure:  62ch;

  --barre-annonce: 2.25rem;
  --barre-nav:     4.5rem;
  --barre-mobile:  4.25rem;   /* barre d'action fixe en bas, mobile */

  --vite:  .18s;
  --base:  .32s;
  --lent:  .6s;
  --sortie: cubic-bezier(.22,1,.36,1);
}

/* --- SOCLE --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  /* décalage des ancres sous les barres fixes */
  scroll-padding-top:calc(var(--barre-annonce) + var(--barre-nav) + 1rem);
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--texte);
  font-size:1rem;line-height:1.6;
  background:var(--bitume);
  color:var(--craie);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}

::selection{background:var(--feu);color:var(--craie)}

:focus-visible{
  outline:2px solid var(--feu-encre);
  outline-offset:3px;
}

.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--feu);color:var(--craie);
  padding:.9rem 1.4rem;font-weight:600;text-decoration:none;
}
.saut-contenu:focus{left:.5rem;top:.5rem}

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

/* --- TYPOGRAPHIE --------------------------------------------------------- */
.titre-geant,.titre-section,.chiffre,.prix{
  font-family:var(--display);font-weight:800;
  letter-spacing:-.02em;line-height:.92;
  text-transform:uppercase;
}
/* interlignage à 1 et non .92 : en dessous, l'accent du É de « VÉHICULE »
   vient toucher la ligne du dessus — ce qui se voit tout de suite en français */
.titre-geant{font-size:clamp(2.75rem,8.5vw,7rem);line-height:1}
.titre-section{font-size:clamp(2rem,5vw,3.75rem)}

.etiquette{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.6875rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--feu-encre);
}
.etiquette::before{
  content:'';width:1.75rem;height:1px;background:var(--feu);flex:none;
}
.etiquette--nu::before{display:none}

.chapeau{
  font-size:clamp(1rem,1.6vw,1.125rem);
  color:var(--acier);max-width:var(--mesure);line-height:1.7;
}

/* --- BOUTONS ------------------------------------------------------------- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:3rem;padding:.9rem 1.75rem;
  font-family:var(--texte);font-size:.8125rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;border-radius:2px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background var(--base) ease,color var(--base) ease,
             border-color var(--base) ease,transform var(--vite) ease;
}
.bouton--plein{background:var(--feu);color:var(--craie);border-color:var(--feu)}
.bouton--plein:hover{background:var(--feu-sombre);border-color:var(--feu-sombre)}
.bouton--fantome{background:transparent;color:var(--craie);border-color:var(--filet-fort)}
.bouton--fantome:hover{border-color:var(--feu);background:rgba(200,16,46,.08)}
.bouton--craie{background:var(--craie);color:var(--bitume);border-color:var(--craie)}
.bouton--craie:hover{background:#fff}
.bouton:active{transform:translateY(1px)}
.bouton svg{width:1rem;height:1rem;flex:none}

/* lien fléché */
.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--craie);
  padding:.5rem 0;
}
.lien-fleche .fleche{
  display:inline-block;transition:transform var(--base) var(--sortie);
}
.lien-fleche:hover{color:var(--feu-encre)}
.lien-fleche:hover .fleche{transform:translateX(.35rem)}

/* --- BARRE D'ANNONCE ----------------------------------------------------- */
.barre-annonce{
  position:fixed;inset:0 0 auto 0;z-index:120;
  height:var(--barre-annonce);
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  padding:0 1rem;
  background:var(--feu);color:var(--craie);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;
  text-align:center;
}
.barre-annonce svg{width:.9rem;height:.9rem;flex:none}
.barre-annonce strong{font-weight:600}
.barre-annonce a{
  color:var(--craie);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap;
}
.barre-annonce a:hover{text-decoration-thickness:2px}

/* --- NAVIGATION ---------------------------------------------------------- */
.nav{
  position:fixed;left:0;right:0;top:var(--barre-annonce);z-index:110;
  height:var(--barre-nav);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 var(--marge);
  background:rgba(14,13,13,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--filet);
  transition:background var(--base) ease,border-color var(--base) ease;
}
.nav.est-collee{background:rgba(14,13,13,.96);border-bottom-color:rgba(200,16,46,.35)}

.logo{
  font-family:var(--display);font-weight:800;
  font-size:1.375rem;letter-spacing:.01em;text-transform:uppercase;
  text-decoration:none;color:var(--craie);white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.28em;
}
.logo em{font-style:normal;color:var(--feu-encre)}

.nav-liens{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-liens a{
  position:relative;
  font-size:.8125rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acier);text-decoration:none;
  padding:.35rem 0;transition:color var(--base) ease;
}
.nav-liens a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--feu);transform:scaleX(0);transform-origin:right;
  transition:transform var(--base) var(--sortie);
}
.nav-liens a:hover{color:var(--craie)}
.nav-liens a:hover::after{transform:scaleX(1);transform-origin:left}

.nav-tel{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.65rem 1.15rem;border:1px solid var(--filet-fort);border-radius:2px;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-decoration:none;color:var(--craie);white-space:nowrap;
  transition:border-color var(--base) ease,background var(--base) ease;
}
.nav-tel:hover{border-color:var(--feu);background:rgba(200,16,46,.1)}
.nav-tel svg{width:.95rem;height:.95rem;color:var(--feu-encre);flex:none}

/* burger */
.burger{
  display:none;position:relative;
  width:2.75rem;height:2.75rem;margin-right:-.6rem;
  background:none;border:none;cursor:pointer;
}
.burger span{
  position:absolute;left:.65rem;width:1.45rem;height:2px;
  background:var(--craie);border-radius:1px;
  transition:transform var(--base) var(--sortie),top var(--base) var(--sortie),
             opacity var(--vite) ease;
}
.burger span:nth-child(1){top:1rem}
.burger span:nth-child(2){top:1.3125rem}
.burger span:nth-child(3){top:1.625rem}
.burger[aria-expanded="true"] span:nth-child(1){top:1.3125rem;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:1.3125rem;transform:rotate(-45deg)}

/* menu plein écran mobile */
.menu-mobile{
  position:fixed;inset:calc(var(--barre-annonce) + var(--barre-nav)) 0 0 0;
  z-index:105;background:var(--bitume);
  display:flex;flex-direction:column;
  padding:2rem var(--marge) calc(2rem + env(safe-area-inset-bottom));
  overflow-y:auto;
  visibility:hidden;opacity:0;
  transition:opacity var(--base) ease,visibility 0s linear var(--base);
}
.menu-mobile.est-ouvert{
  visibility:visible;opacity:1;
  transition:opacity var(--base) ease,visibility 0s linear 0s;
}
.menu-mobile a{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--filet);
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:-.01em;
  text-decoration:none;color:var(--craie);
}
.menu-mobile a .num{
  font-family:var(--texte);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;color:var(--feu-encre);
}
.menu-mobile .menu-pied{margin-top:auto;padding-top:2rem}
.menu-mobile .menu-pied .bouton{width:100%}
.menu-mobile .menu-adresse{
  margin-top:1.25rem;font-size:.8125rem;color:var(--acier);line-height:1.7;
}

/* --- HERO ---------------------------------------------------------------- */
.hero{
  position:relative;
  padding:calc(var(--barre-annonce) + var(--barre-nav) + clamp(2.5rem,6vw,5rem))
          var(--marge) clamp(2rem,4vw,3rem);
  background:
    linear-gradient(90deg,rgba(14,13,13,.92) 0%,rgba(14,13,13,.74) 52%,rgba(14,13,13,.46) 100%),
    url("img/hero-1800.jpg") center / cover no-repeat;
}
.hero-inner{max-width:var(--largeur);margin:0 auto}
.hero-bas{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:end;
  margin-top:clamp(2rem,4vw,3.25rem);
}
.hero-texte{min-width:0}

.hero-titre{margin:1.5rem 0 0}
/* chaque ligne est masquée par sa boîte : le JS ne fait que translater.
   Les marges internes laissent passer accents et jambages sans rognage. */
.ligne{display:block;overflow:hidden;padding-bottom:.09em;padding-top:.03em}
.ligne > span{display:block}
.hero-titre em{font-style:normal;color:var(--feu-encre)}

.hero-chapeau{margin-top:1.75rem;max-width:34rem}

.hero-actions{
  display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;
  margin-top:2.25rem;
}

.hero-reperes{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  margin-top:2rem;font-size:.8125rem;color:var(--acier);
}
.hero-reperes .point{width:3px;height:3px;border-radius:50%;background:var(--feu);flex:none}

/* panneau photo */
.hero-photo{
  display:none;
  position:relative;
  border:1px solid var(--filet);
  background:var(--fonte);
  overflow:hidden;
}
.hero-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(200,16,46,.16),transparent 45%);
}
.hero-photo img{
  /* 16/9 = le format exact du recadrage : aucune rognure supplémentaire */
  width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;
  filter:saturate(.85) contrast(1.04) brightness(.86);
}
.hero-photo-legende{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;
  background:linear-gradient(to top,rgba(14,13,13,.92),transparent);
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--craie);
}
.hero-photo-legende .lieu{color:var(--acier)}

/* bandeau de chiffres */
.hero-chiffres{
  max-width:var(--largeur);margin:clamp(3rem,6vw,4.5rem) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--filet);
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
.chiffre-bloc{
  background:var(--bitume);
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;gap:.35rem;
}
.chiffre{font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1;color:var(--craie)}
.chiffre .unite{color:var(--feu-encre)}
.chiffre-legende{
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acier);
}

/* --- BANDEAU DÉFILANT ---------------------------------------------------- */
.bandeau{
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  background:var(--fonte);
  padding:.9rem 0;
}
/* Le fondu porte sur la fenêtre, pas sur le bandeau : sinon les filets du haut
   et du bas s'effacent aussi et la bande semble inachevée sur les côtés. */
.bandeau-fenetre{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
}
.bandeau-piste{
  display:flex;width:max-content;
  animation:defile 42s linear infinite;
}
.bandeau-groupe{
  display:flex;align-items:center;flex:none;
  padding-right:0;
}
.bandeau-item{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:0 1.75rem;
  font-family:var(--display);font-weight:700;font-size:.9375rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--craie);
  white-space:nowrap;
}
.bandeau-item .puce{width:5px;height:5px;background:var(--feu);flex:none;transform:rotate(45deg)}
@keyframes defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.bandeau:hover .bandeau-piste{animation-play-state:paused}

/* --- SECTIONS ------------------------------------------------------------ */
.section{padding:clamp(4rem,9vw,7.5rem) var(--marge)}
.section--fonte{background:var(--fonte)}
.section-inner{max-width:var(--largeur);margin:0 auto}

.section-tete{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3rem);
}
.section-tete .titre-section{margin:.75rem 0 .5rem}

/* numéro de section discret */
.section-num{
  font-family:var(--display);font-weight:700;font-size:.75rem;
  letter-spacing:.2em;color:var(--acier);
}

/* --- CATALOGUE ----------------------------------------------------------- */
.outils{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 0;margin-bottom:1.5rem;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
.recherche{position:relative;flex:1 1 16rem;min-width:0;max-width:24rem}
.recherche svg{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1.05rem;height:1.05rem;color:var(--acier);pointer-events:none;
}
.recherche input{
  width:100%;min-height:2.75rem;
  background:transparent;border:none;border-bottom:1px solid var(--filet-fort);
  color:var(--craie);font-family:var(--texte);font-size:.9375rem;
  padding:.5rem 0 .5rem 1.75rem;outline:none;
  transition:border-color var(--base) ease;
}
.recherche input::placeholder{color:var(--acier)}
.recherche input:focus{border-bottom-color:var(--feu)}

.compteur{font-size:.8125rem;color:var(--acier);letter-spacing:.03em}
.compteur strong{color:var(--craie);font-weight:600}

.tri{display:flex;align-items:center;gap:.65rem;margin-left:auto}
.tri label{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acier);
}
.tri select{
  min-height:2.75rem;
  background:transparent;border:1px solid var(--filet-fort);border-radius:2px;
  color:var(--craie);font-family:var(--texte);font-size:.875rem;
  padding:.5rem 2.25rem .5rem .9rem;cursor:pointer;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239E9691' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right .7rem center;
  transition:border-color var(--base) ease;
}
.tri select:hover{border-color:var(--feu)}
.tri select option{background:var(--fonte);color:var(--craie)}

/* filtres : rangée qui défile sur mobile plutôt que de se casser */
.filtres{
  display:flex;gap:.5rem;flex-wrap:wrap;
}
.filtre{
  min-height:2.5rem;padding:.5rem 1.1rem;
  background:transparent;border:1px solid var(--filet-fort);border-radius:2px;
  color:var(--acier);cursor:pointer;white-space:nowrap;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:color var(--base) ease,border-color var(--base) ease,background var(--base) ease;
}
.filtre:hover{color:var(--craie);border-color:var(--filet-fort)}
.filtre[aria-pressed="true"]{
  color:var(--craie);border-color:var(--feu);background:var(--feu);
}

/* Grille. Les filets sont portés par les fiches elles-mêmes (ombre de 1 px
   dans l'écart de 1 px) et non par le conteneur : une rangée incomplète ne
   laisse ainsi pas de grande case vide encadrée à la fin du catalogue. */
.grille-autos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  gap:1px;
}

.fiche{
  position:relative;display:flex;flex-direction:column;
  background:var(--bitume);
  border:none;text-align:left;width:100%;
  cursor:pointer;overflow:hidden;
  box-shadow:0 0 0 1px var(--filet);
  transition:background var(--base) ease,box-shadow var(--base) ease;
}
.section--fonte .fiche{background:var(--fonte)}
.fiche::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:var(--feu);transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--sortie);
}
.fiche-photo{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,#1c1819,#252021);
  display:flex;align-items:center;justify-content:center;
}
.fiche-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--lent) var(--sortie),filter var(--base) ease,
             opacity var(--base) ease;
}
/* la photo arrive après le texte : elle se fond au lieu d'apparaître d'un coup */
.fiche-photo img.entre{opacity:0}
.fiche-photo img.entre.est-la{opacity:1}
.fiche-photo .sansphoto{font-size:2.5rem;opacity:.35}
.fiche.a-photo .fiche-photo .sansphoto{opacity:0}

.fiche-etiquette{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:var(--feu);color:var(--craie);
  font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.3rem .6rem;
}
.fiche-corps{
  display:flex;flex-direction:column;flex:1;
  padding:1.35rem 1.35rem 1.25rem;
}
.fiche-nom{
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.01em;line-height:1.15;
}
.fiche-annee{font-size:.8125rem;color:var(--acier);margin-top:.2rem}
.fiche-specs{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  margin:1rem 0 1.25rem;font-size:.8125rem;color:var(--acier);
}
.fiche-specs span{display:inline-flex;align-items:center;gap:.4rem}
.fiche-specs span+span::before{
  content:'';width:3px;height:3px;border-radius:50%;
  background:var(--filet-fort);margin-right:.5rem;
}
.fiche-pied{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--filet);
}
.prix{font-size:1.75rem;color:var(--craie);letter-spacing:-.01em}
.prix .ttc{
  font-family:var(--texte);font-size:.6875rem;font-weight:500;
  letter-spacing:.1em;color:var(--acier);margin-left:.15rem;
}
.fiche-voir{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acier);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color var(--base) ease;
}
.fiche-voir .fleche{transition:transform var(--base) var(--sortie);display:inline-block}

/* survols élaborés : pointeur fin uniquement, en CSS pur */
@media (min-width:64rem) and (pointer:fine){
  .fiche:hover::before,.fiche:focus-visible::before{transform:scaleX(1)}
  .fiche:hover .fiche-photo img,.fiche:focus-visible .fiche-photo img{transform:scale(1.05)}
  .fiche:hover .fiche-voir,.fiche:focus-visible .fiche-voir{color:var(--feu-encre)}
  .fiche:hover .fiche-voir .fleche,.fiche:focus-visible .fiche-voir .fleche{transform:translateX(.3rem)}
}

/* véhicule vendu */
.fiche.est-vendue .fiche-photo img{filter:grayscale(.92) brightness(.55)}
.fiche.est-vendue .prix{color:var(--acier);font-size:1.375rem;letter-spacing:.04em}
.tampon-vendu{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:rgba(14,13,13,.88);border:1px solid var(--filet-fort);
  color:var(--craie);
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .6rem;
}

/* squelette de chargement */
.squelette{background:var(--bitume);padding-bottom:1.25rem;box-shadow:0 0 0 1px var(--filet)}
.section--fonte .squelette{background:var(--fonte)}
.squelette .barre{
  background:linear-gradient(90deg,var(--voile) 25%,rgba(244,241,238,.09) 50%,var(--voile) 75%);
  background-size:200% 100%;animation:miroite 1.4s linear infinite;
}
.squelette .visuel{aspect-ratio:16/10}
.squelette .ligne-txt{height:.9rem;margin:0 1.35rem .6rem;border-radius:2px}
.squelette .ligne-txt:first-of-type{margin-top:1.35rem;width:60%}
.squelette .ligne-txt:nth-of-type(2){width:32%}
.squelette .ligne-txt:nth-of-type(3){width:45%;height:1.5rem;margin-top:1.25rem}
@keyframes miroite{from{background-position:200% 0}to{background-position:-200% 0}}

/* état vide */
.vide{
  grid-column:1/-1;background:var(--bitume);
  box-shadow:0 0 0 1px var(--filet);
  padding:clamp(3rem,8vw,5rem) 1.5rem;text-align:center;
}
.section--fonte .vide{background:var(--fonte)}
.vide-titre{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.5rem;
}
.vide p{font-size:.9375rem;color:var(--acier);max-width:34ch;margin:0 auto}

/* --- FICHE DÉTAIL (plein écran) ------------------------------------------ */
/* `visibility` n'est pas interpolable : mise dans la transition, elle bascule
   à mi-parcours et l'élément reste invisible ~160 ms — assez pour que le
   `focus()` d'ouverture ne prenne pas. On la commute donc sèchement, tout de
   suite à l'ouverture, et seulement après le fondu à la fermeture. */
.detail{
  position:fixed;inset:0;z-index:200;
  background:var(--bitume);overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  transition:opacity var(--base) ease,visibility 0s linear var(--base);
}
.detail.est-ouvert{
  visibility:visible;opacity:1;
  transition:opacity var(--base) ease,visibility 0s linear 0s;
}
.detail-barre{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--barre-nav);padding:0 var(--marge);
  background:rgba(14,13,13,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--filet);
}
.detail-retour{
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:2.75rem;background:none;border:none;cursor:pointer;
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--craie);transition:color var(--base) ease;
}
.detail-retour:hover{color:var(--feu-encre)}
.detail-corps{
  max-width:74rem;margin:0 auto;
  padding:clamp(2rem,5vw,3.5rem) var(--marge)
          calc(clamp(3rem,6vw,5rem) + env(safe-area-inset-bottom));
}
.detail-grille{
  display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
/* Un élément de grille vaut `min-width:auto` par défaut, c'est-à-dire la
   largeur minimale de son contenu : la bande de vignettes (415 px) imposait
   sa taille à la colonne et débordait de l'écran. */
.detail-grille > *,
.hero-bas > *,
.apropos-grille > *,
.contact-grille > *{min-width:0}

.detail-visuel{border:1px solid var(--filet);background:var(--fonte)}
.detail-cadre{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:#131011;cursor:zoom-in;
}
.detail-cadre img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity var(--base) ease,transform var(--lent) var(--sortie);
}
@media (min-width:64rem) and (pointer:fine){
  .detail-cadre:hover img{transform:scale(1.03)}
}
.detail-cadre .sansphoto{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4rem;opacity:.3;
}
.detail-zoom{
  position:absolute;right:.75rem;bottom:.75rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;background:rgba(14,13,13,.82);
  border:1px solid var(--filet-fort);
  font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--craie);pointer-events:none;
}
.detail-zoom svg{width:.8rem;height:.8rem}
.detail-cadre.est-en-attente .detail-zoom{
  left:.75rem;right:auto;letter-spacing:.1em;
}
.detail-cadre.est-en-attente .sansphoto{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:.12}}

/* vignettes : défilement horizontal, jamais de casse verticale */
.vignettes{
  display:flex;gap:.5rem;padding:.65rem;
  overflow-x:auto;scrollbar-width:thin;
  scroll-snap-type:x proximity;
  background:rgba(0,0,0,.28);
}
.vignette{
  flex:none;width:5.5rem;height:3.6rem;padding:0;
  border:2px solid transparent;background:none;cursor:pointer;
  overflow:hidden;scroll-snap-align:start;
  transition:border-color var(--base) ease;
}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette[aria-current="true"]{border-color:var(--feu)}
.vignette:hover{border-color:var(--filet-fort)}

.detail-titre{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.875rem,4vw,2.75rem);line-height:1;
  letter-spacing:-.02em;text-transform:uppercase;margin:.6rem 0 .35rem;
}
.detail-annee{font-size:1rem;color:var(--acier)}
.detail-prix{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.25rem,5vw,3.25rem);line-height:1;letter-spacing:-.02em;
  color:var(--craie);margin:1.25rem 0;
}
.detail-prix .ttc{
  font-family:var(--texte);font-size:.8125rem;font-weight:500;
  letter-spacing:.1em;color:var(--acier);margin-left:.3rem;
}
.detail-prix.est-vendue{color:var(--acier);font-size:clamp(1.75rem,4vw,2.25rem)}

.detail-specs{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--filet);border:1px solid var(--filet);margin-bottom:1.5rem;
}
.detail-spec{background:var(--bitume);padding:.9rem 1rem}
.detail-spec dt{
  font-size:.625rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acier);margin-bottom:.3rem;
}
.detail-spec dd{font-size:.9375rem;font-weight:500}

.detail-rubrique{
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acier);margin-bottom:.6rem;
}
.detail-desc{
  font-size:.9375rem;color:var(--acier);line-height:1.75;
  margin-bottom:1.75rem;white-space:pre-line;
}
/* description saisie en liste : on rend de vraies puces */
.detail-desc.en-liste{white-space:normal}
.detail-desc.en-liste p{margin-bottom:.75rem}
.detail-desc.en-liste ul{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.35rem .5rem;
}
.detail-desc.en-liste li{
  position:relative;padding-left:1rem;line-height:1.55;
}
.detail-desc.en-liste li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:4px;height:4px;background:var(--feu);transform:rotate(45deg);
}
.detail-actions{display:flex;flex-direction:column;gap:.65rem}
.detail-actions .bouton{width:100%}
.detail-mention{
  margin-top:1rem;font-size:.75rem;color:var(--acier);line-height:1.6;
}

.note-vendue{
  border:1px solid var(--filet);background:var(--voile);padding:1.35rem;
}
.note-vendue h3{
  font-family:var(--display);font-weight:700;font-size:1.125rem;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:.5rem;
}
.note-vendue p{font-size:.875rem;color:var(--acier);line-height:1.65;margin-bottom:1rem}

/* --- VISIONNEUSE --------------------------------------------------------- */
.visionneuse{
  position:fixed;inset:0;z-index:300;
  /* le flou achève de détacher la photo de la fiche restée derrière */
  background:rgba(8,7,8,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  visibility:hidden;opacity:0;
  transition:opacity var(--base) ease,visibility 0s linear var(--base);
}
.visionneuse.est-ouverte{
  visibility:visible;opacity:1;
  transition:opacity var(--base) ease,visibility 0s linear 0s;
}
.visionneuse img{
  max-width:100%;max-height:82vh;object-fit:contain;
  transition:opacity var(--vite) ease;
}
.visionneuse-fermer{
  position:absolute;top:1rem;right:1rem;
  width:2.75rem;height:2.75rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,241,238,.06);border:1px solid var(--filet-fort);
  color:var(--craie);font-size:1.25rem;cursor:pointer;border-radius:2px;
  transition:background var(--base) ease;
}
.visionneuse-fermer:hover{background:rgba(244,241,238,.14)}
.visionneuse-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:2.75rem;height:3.5rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(244,241,238,.06);border:1px solid var(--filet-fort);
  color:var(--craie);font-size:1.5rem;cursor:pointer;border-radius:2px;
  transition:background var(--base) ease;
}
.visionneuse-nav:hover{background:rgba(200,16,46,.3)}
.visionneuse-nav.prec{left:.75rem}
.visionneuse-nav.suiv{right:.75rem}
.visionneuse-rang{
  position:absolute;left:0;right:0;bottom:1.25rem;text-align:center;
  font-size:.75rem;letter-spacing:.14em;color:var(--acier);
}

/* --- À PROPOS ------------------------------------------------------------ */
.apropos-grille{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.apropos-visuel{position:relative}
.apropos-photo{
  position:relative;overflow:visible;
  border:1px solid var(--filet);
}
.apropos-photo img{
  display:block;width:auto;max-width:100%;height:auto;aspect-ratio:auto;object-fit:initial;
  filter:saturate(.9) contrast(1.03);
}
.apropos-sceau{
  position:absolute;right:-.75rem;bottom:-.75rem;z-index:2;
  width:6.5rem;height:6.5rem;background:var(--feu);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.15rem;
}
.apropos-sceau .n{
  font-family:var(--display);font-weight:800;font-size:1.875rem;line-height:1;
}
.apropos-sceau .t{
  font-size:.5625rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;opacity:.9;line-height:1.3;padding:0 .5rem;
}

.apropos-texte p{
  color:var(--acier);line-height:1.8;margin-top:1.25rem;max-width:var(--mesure);
}
.valeurs{list-style:none;display:flex;flex-direction:column;gap:1px;
  margin-top:2rem;background:var(--filet);border:1px solid var(--filet)}
.valeur{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.1rem 1.25rem;background:var(--bitume);
}
.section--fonte .valeurs{background:rgba(244,241,238,.07)}
.section--fonte .valeur{background:var(--fonte)}
.valeur .n{
  font-family:var(--display);font-weight:800;font-size:1.375rem;
  color:var(--feu-encre);line-height:1.1;min-width:1.75rem;flex:none;
}
.valeur strong{display:block;font-size:.9375rem;font-weight:600;margin-bottom:.2rem}
.valeur span{font-size:.875rem;color:var(--acier);line-height:1.6}

/* --- CARTE GRISE --------------------------------------------------------- */
.cg-tete{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:2rem;margin-bottom:clamp(2rem,4vw,3rem);
}
.cg-agrement{
  flex:none;display:flex;flex-direction:column;align-items:center;
  gap:.5rem;padding:1.35rem 1.75rem;text-align:center;
  border:2px solid var(--feu);background:rgba(200,16,46,.08);
}
.cg-agrement .pastille{
  width:2.5rem;height:2.5rem;border-radius:50%;background:var(--feu);
  display:flex;align-items:center;justify-content:center;color:var(--craie);
}
.cg-agrement .pastille svg{width:1.25rem;height:1.25rem}
.cg-agrement .t{
  font-family:var(--display);font-weight:800;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--craie);
}
.cg-agrement .s{
  font-size:.625rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acier);
}

.cg-grille{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--filet);border:1px solid var(--filet);
}
.cg-carte{
  background:var(--bitume);padding:1.75rem 1.5rem;
  position:relative;
  transition:background var(--base) ease;
}
.cg-carte::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--feu);transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--sortie);
}
.cg-carte:hover{background:var(--fonte-clair)}
.cg-carte:hover::before{transform:scaleX(1)}
.cg-carte .n{
  font-family:var(--display);font-weight:800;font-size:1.25rem;
  color:var(--feu-encre);line-height:1;margin-bottom:.75rem;
}
.cg-carte h3{
  font-family:var(--display);font-weight:700;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:-.005em;margin-bottom:.6rem;
}
.cg-carte p{font-size:.875rem;color:var(--acier);line-height:1.65}

.cg-appel{
  margin-top:1px;background:var(--feu);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1.25rem;padding:1.75rem clamp(1.5rem,3vw,2.5rem);
}
.cg-appel h3{
  font-family:var(--display);font-weight:800;font-size:1.375rem;
  text-transform:uppercase;letter-spacing:-.01em;
}
.cg-appel p{font-size:.9375rem;opacity:.9;margin-top:.2rem}

/* --- FINANCEMENT --------------------------------------------------------- */
.services{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--filet);border:1px solid var(--filet);
  margin-top:clamp(2rem,4vw,3rem);
}
.service{
  background:var(--bitume);padding:2rem 1.75rem;
  position:relative;transition:background var(--base) ease;
}
.section--fonte .services{background:rgba(244,241,238,.07)}
.section--fonte .service{background:var(--fonte)}
.service::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--feu);transform:scaleX(0);transform-origin:left;
  transition:transform var(--base) var(--sortie);
}
.service:hover::before{transform:scaleX(1)}
.service-icone{
  width:2.5rem;height:2.5rem;color:var(--feu-encre);margin-bottom:1.25rem;
  display:flex;align-items:center;justify-content:center;
}
.service-icone svg{width:100%;height:100%;stroke-width:1.4}
.service h3{
  font-family:var(--display);font-weight:700;font-size:1.1875rem;
  text-transform:uppercase;letter-spacing:-.005em;margin-bottom:.6rem;
}
.service p{font-size:.9375rem;color:var(--acier);line-height:1.7}

/* --- CONTACT ------------------------------------------------------------- */
.contact-grille{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
  margin-top:clamp(2rem,4vw,3rem);
}
.coords{list-style:none;display:flex;flex-direction:column;gap:1px;
  background:var(--filet);border:1px solid var(--filet)}
.coord{display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.25rem;background:var(--bitume)}
.coord-icone{
  flex:none;width:2.5rem;height:2.5rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,16,46,.35);background:rgba(200,16,46,.1);
  color:var(--feu-encre);
}
.coord-icone svg{width:1.05rem;height:1.05rem}
.coord dt{
  font-size:.625rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--feu-encre);margin-bottom:.3rem;
}
.coord dd{font-size:.9375rem;line-height:1.6}
.coord dd a{text-decoration:none;border-bottom:1px solid var(--filet-fort)}
.coord dd a:hover{border-bottom-color:var(--feu)}
.coord .gros{font-size:1.25rem;font-weight:600;letter-spacing:.01em;border:none}

/* plan : chargé au clic, donc aucune requête Google tant qu'on ne demande pas */
.plan{
  position:relative;border:1px solid var(--filet);
  background:var(--fonte);overflow:hidden;
}
.plan-substitut{
  display:none;
  position:relative;width:100%;aspect-ratio:4/3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;padding:2rem 1.5rem;text-align:center;
  border:none;background:
    repeating-linear-gradient(45deg,rgba(244,241,238,.02) 0 12px,transparent 12px 24px),
    var(--fonte);
  color:var(--craie);cursor:pointer;font-family:var(--texte);
  transition:background-color var(--base) ease;
}
.plan-substitut:hover{background-color:var(--fonte-clair)}
.plan-substitut .epingle{
  width:3rem;height:3rem;border-radius:50%;
  background:var(--feu);display:flex;align-items:center;justify-content:center;
  color:var(--craie);
}
.plan-substitut .epingle svg{width:1.35rem;height:1.35rem}
.plan-substitut .t{
  font-family:var(--display);font-weight:700;font-size:1.0625rem;
  text-transform:uppercase;letter-spacing:-.005em;
}
.plan-substitut .s{font-size:.8125rem;color:var(--acier);max-width:30ch;line-height:1.6}
.plan iframe{display:block;width:100%;aspect-ratio:4/3;border:0;filter:grayscale(.35) contrast(1.05)}

/* --- PIED DE PAGE -------------------------------------------------------- */
.pied{
  background:var(--fonte);border-top:1px solid var(--filet);
  padding:clamp(2.5rem,5vw,3.5rem) var(--marge)
          calc(clamp(2.5rem,5vw,3.5rem) + var(--barre-mobile));
}
.pied-inner{
  max-width:var(--largeur);margin:0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:2rem;
}
/* `flex` et non `inline-flex` : en inline, le badge venait se coller
   à la suite du logo sur la même ligne */
.pied-agrement{
  display:flex;width:fit-content;align-items:center;gap:.55rem;margin-top:1rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--feu-encre);
}
.pied-agrement svg{width:.9rem;height:.9rem;flex:none}
.pied-droite{display:flex;flex-direction:column;align-items:flex-end;
  gap:.6rem;text-align:right}
.pied-copie{font-size:.8125rem;color:var(--acier);line-height:1.7}
.pied-liens{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;justify-content:flex-end}
.pied-liens a{
  font-size:.8125rem;color:var(--acier);text-decoration:none;
  transition:color var(--base) ease;
}
.pied-liens a:hover{color:var(--craie)}

/* --- BARRE D'ACTION MOBILE ----------------------------------------------- */
.barre-action{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.5rem;
  background:rgba(14,13,13,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--filet);
}
.barre-action .bouton{flex:1;min-height:3rem;font-size:.75rem;padding:.75rem .5rem}

/* --- RIDEAU D'OUVERTURE -------------------------------------------------- */
.rideau{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--bitume);
  pointer-events:none;
}
.rideau-logo{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,5vw,2.5rem);letter-spacing:.02em;text-transform:uppercase;
  display:inline-flex;align-items:baseline;gap:.3em;
}
.rideau-logo em{font-style:normal;color:var(--feu-encre)}
.rideau-jauge{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;background:var(--feu);
}
/* le rideau n'existe que si le JS tourne (voir html.js plus bas) */
html:not(.js) .rideau{display:none}

/* ==========================================================================
   FILET DE SÉCURITÉ — rien n'est masqué tant que le JS n'a pas répondu
   ========================================================================== */
html.js .anim-monte{opacity:0;transform:translateY(1.75rem)}
html.js .anim-ligne > span{transform:translateY(120%)}
/* pourcentages des deux côtés : GSAP interpole mal 0 contre 0% */
html.js .anim-volet{clip-path:inset(0% 0% 100% 0%)}

/* rideau déjà vu dans cette session : il ne doit pas réapparaître au rechargement */
html.rideau-vu .rideau{display:none}

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

/* --- Tablette ------------------------------------------------------------ */
@media (max-width:70rem){
  .hero-bas{grid-template-columns:1fr;gap:2.5rem}
  .hero-chiffres{grid-template-columns:repeat(2,1fr)}
  .cg-grille{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:1fr}
  .apropos-grille{grid-template-columns:1fr;gap:2.5rem}
  .contact-grille{grid-template-columns:1fr}
  .detail-grille{grid-template-columns:1fr;gap:2rem}
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width:56.25rem){
  :root{--barre-nav:4rem}

  .nav-liens,.nav-tel{display:none}
  .burger{display:block}
  .barre-action{display:flex}

  .barre-annonce{
    height:auto;min-height:var(--barre-annonce);
    padding:.4rem .75rem;font-size:.6875rem;line-height:1.35;
    flex-wrap:wrap;
  }
  .barre-annonce .long{display:none}

  /* la hauteur de la barre d'annonce n'est plus fixe : on la mesure en JS
     et on la reporte dans --barre-annonce (voir script.js) */

  .hero{padding-top:calc(var(--barre-annonce) + var(--barre-nav) + 2.5rem)}
  .hero-chiffres{grid-template-columns:repeat(2,1fr)}

  /* Colonne + `wrap` = colonne MULTI-LIGNES : chaque ligne prend la largeur de
     son élément le plus large et `stretch` s'aligne sur la ligne, pas sur le
     conteneur — la rangée de filtres imposait ainsi 713 px à toute la page.
     `nowrap` ramène à une seule ligne, dont la largeur est celle du conteneur. */
  .section-tete{flex-direction:column;flex-wrap:nowrap;align-items:stretch}

  /* les filtres défilent au doigt au lieu de casser sur 3 lignes */
  .filtres{
    min-width:0;
    flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x proximity;
    padding-bottom:.35rem;
    margin-inline:calc(var(--marge) * -1);
    padding-inline:var(--marge);
    scrollbar-width:none;
  }
  .filtres::-webkit-scrollbar{display:none}
  .filtre{scroll-snap-align:start}

  .outils{gap:.85rem}
  .recherche{flex:1 1 100%;max-width:none}
  .tri{margin-left:0;width:100%;justify-content:space-between}
  .tri select{flex:1;max-width:14rem}
  .compteur{order:3;width:100%}

  .grille-autos{grid-template-columns:1fr}

  .cg-grille{grid-template-columns:1fr}
  .cg-tete{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .cg-agrement{width:100%;flex-direction:row;justify-content:flex-start;text-align:left}
  .cg-agrement .txt{display:flex;flex-direction:column}
  .cg-appel{flex-direction:column;align-items:flex-start}
  .cg-appel .bouton{width:100%}

  .apropos-sceau{width:5rem;height:5rem;right:-.5rem;bottom:-.5rem}
  .apropos-sceau .n{font-size:1.375rem}
  .apropos-sceau .t{font-size:.5rem}

  .detail-specs{grid-template-columns:1fr}
  .vignette{width:4.5rem;height:3rem}
  .visionneuse-nav{width:2.5rem;height:3rem}

  .pied-inner{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .pied-droite{align-items:stretch;text-align:left}
  .pied-liens{justify-content:flex-start}

  .bandeau-fenetre{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);
  }
  .bandeau-piste{animation-duration:28s}
  .bandeau-item{font-size:.8125rem;padding:0 1.1rem}
}

/* deux colonnes de chiffres tiennent encore à 390 px : on ne repasse sur une
   seule colonne que pour les très petits écrans */
@media (max-width:22rem){
  .hero-chiffres{grid-template-columns:1fr}
}
@media (max-width:26rem){
  .hero-actions .bouton{width:100%}
}

/* --- Mouvement réduit : on supprime, on ne raccourcit pas ---------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .bandeau-piste{animation:none;transform:none}
  html.js .anim-monte{opacity:1;transform:none}
  html.js .anim-ligne > span{transform:none}
  html.js .anim-volet{clip-path:none}
  .rideau{display:none}
}

/* --- Impression ---------------------------------------------------------- */
@media print{
  .barre-annonce,.nav,.menu-mobile,.barre-action,.rideau,
  .bandeau,.visionneuse{display:none!important}
  body{background:#fff;color:#000}
  .section{padding:1.5rem 0}
}