/* =========================================================================
   Microlev — Composants partagés
   Hero, bandeau de chiffres, cartes machine, tableau comparatif,
   FAQ, bandeau de rappel, encadrés.
   ========================================================================= */

/* ================================================================== HERO */
.hero {
  position: relative;
  background: var(--brand-900);
  color: #fff;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La photo est désormais pré-recadrée en 2:1 (voir _build/hero.js), centrée
     sur le panier. Il reste un léger ajustement vertical pour que la tête de
     l'opérateur ne soit pas rognée sur les cadres très panoramiques. */
  object-position: center 8%;
}
/* La nacelle est dans la moitié gauche de la photo : le voile est donc dense à
   droite, derrière le texte, et s'efface vers la gauche pour laisser voir la
   machine. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left,
    rgba(5, 49, 78, .95) 0%,
    rgba(5, 49, 78, .88) 36%,
    rgba(5, 49, 78, .45) 70%,
    rgba(5, 49, 78, .30) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
}

.hero-content { max-width: 40rem; margin-left: auto; }

/* Sous 1000px le texte occupe toute la largeur et passe donc devant la photo.
   Plutôt que de noyer l'image sous un voile opaque, on recadre sur la haie et
   la machine — les zones sombres — au lieu du ciel. Le voile peut alors rester
   plus léger tout en gardant un texte blanc très lisible. */
@media (max-width: 1000px) {
  /* En portrait, toute la hauteur de la photo tient : seul le cadrage
     horizontal compte, calé sur la machine. */
  .hero-media img { object-position: 28% center; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(5, 49, 78, .78) 0%,
      rgba(5, 49, 78, .86) 55%,
      rgba(5, 49, 78, .90) 100%);
  }
  .hero-content { margin-left: 0; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .85rem .4rem .5rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.4rem;
}
/* Sous 620px, le libellé passait sur deux lignes et la pastille occupait
   toute la largeur : elle ne se lisait plus comme une étiquette. */
@media (max-width: 620px) {
  .hero-eyebrow {
    font-size: .72rem;
    letter-spacing: .05em;
    padding: .35rem .8rem .35rem .45rem;
  }
}

.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hi);
  box-shadow: 0 0 0 4px rgba(241, 88, 38, .3);
}

.hero h1 {
  color: #fff;
  margin-bottom: .55em;
}
.hero h1 em {
  font-style: normal;
  color: var(--hi);
}

.hero-lead {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, .88);
  max-width: 34rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .78);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust span::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--hi);
  transform: rotate(45deg);
}

/* Hero compact pour les pages internes */
.hero--page .hero-inner { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.hero--page h1 { font-size: var(--fs-2xl); }
.hero--flat { background: var(--brand-900); }
.hero--flat .hero-media { display: none; }

/* ============================================= Bandeau de chiffres clés */
.figure-strip {
  background: var(--hi);
  color: var(--on-hi);
}
.figure-strip-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.figure-item {
  padding: 1.5rem 1rem 1.5rem 0;
  border-right: 1px solid rgba(5, 32, 47, .22);
}
.figure-item:last-child { border-right: 0; }
.figure-item:not(:first-child) { padding-left: 1.5rem; }

.figure-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.figure-label {
  display: block;
  margin-top: .4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(5, 32, 47, .82);
}

@media (max-width: 780px) {
  .figure-strip-inner { grid-template-columns: 1fr 1fr; }
  .figure-item:nth-child(2) { border-right: 0; }
  .figure-item:nth-child(-n+2) { border-bottom: 1px solid rgba(5, 32, 47, .22); }
  .figure-item:nth-child(odd) { padding-left: 0; }
  .figure-item:nth-child(even) { padding-left: 1.25rem; }
}

/* ========================================================= Grille 2 colonnes */
.split {
  display: grid;
  /* La colonne photos est la plus large des deux. */
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--reverse .split-media { order: -1; }

/* Photos empilées sur toute la largeur de la colonne, chacune dans son format
   d'origine : rien n'est recadré et elles occupent environ 2,5 fois plus de
   surface que l'ancienne disposition en deux vignettes côte à côte. */
.split-media {
  /* <figure> conserve sinon les marges par defaut du navigateur
     (40px de chaque cote), qui amputaient la largeur des photos. */
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.split-media img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
}
.split-media img:first-child  { aspect-ratio: 1 / 1; }
.split-media img:nth-child(2) { aspect-ratio: 3 / 2; }

/* Variante à une seule photo (page Occasion). Le sélecteur cible :first-child
   pour l'emporter sur la règle ci-dessus, qui a la même spécificité. */
.split-media--single img:first-child { aspect-ratio: 4 / 3; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
}

/* ============================================================ Cartes machine */
.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.machine-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.machine-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
}

.machine-card-media {
  position: relative;
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.machine-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.machine-card:hover .machine-card-media img { transform: scale(1.04); }

.machine-card-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
}

.machine-card-body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.machine-card h3 {
  font-size: 1.16rem;
  margin-bottom: .3rem;
}
.machine-card h3 a { text-decoration: none; }
.machine-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.machine-card { position: relative; }

.machine-card-sub {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-bottom: 1rem;
}

.machine-specs {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: .85rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem .9rem;
  font-size: var(--fs-sm);
}
.machine-specs li { margin: 0; }
.machine-specs dt, .machine-spec-label {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.machine-spec-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.machine-card-foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.machine-price {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.machine-price small {
  font-size: .62em;
  font-weight: 600;
  color: var(--ink-400);
  letter-spacing: .04em;
}
.machine-card-foot .link-arrow { position: relative; z-index: 1; }

/* ======================================================= Tableau comparatif */
.compare-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare caption {
  text-align: left;
  padding: 1.1rem 1.25rem;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  border-bottom: 1px solid var(--line);
}
.compare th, .compare td {
  padding: .9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.compare thead th {
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
}
.compare tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.compare tbody th a { text-decoration: none; }
.compare tbody th a:hover { text-decoration: underline; text-decoration-color: var(--hi); text-decoration-thickness: 2px; }
.compare tbody th small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0;
  text-transform: none;
}
.compare td { font-variant-numeric: tabular-nums; color: var(--ink-700); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover { background: var(--paper); }
.compare .col-price { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

.table-hint {
  display: none;
  margin-top: .65rem;
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
@media (max-width: 760px) {
  .table-hint { display: block; }
}

/* ==================================================== Cartes usage / atouts */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.35rem;
}

.feature {
  padding: 1.6rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--hi);
}
.feature h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.feature p { font-size: var(--fs-sm); color: var(--ink-700); margin: 0; }

.section--ink .feature {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  border-top-color: var(--hi);
}
.section--ink .feature p { color: var(--ink-200); }

/* Numérotées */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.step {
  counter-increment: step;
  padding-top: 1.1rem;
  border-top: 2px solid var(--line);
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--brand);
  margin-bottom: .5rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.step p { font-size: var(--fs-sm); color: var(--ink-700); margin: 0; }
.section--ink .step { border-top-color: rgba(255, 255, 255, .2); }
.section--ink .step p { color: var(--ink-200); }
.section--ink .step::before { color: #fff; }

/* ==================================================================== FAQ */
.faq { max-width: 60rem; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: .45em;
  border-right: 2.5px solid var(--hi-600);
  border-bottom: 2.5px solid var(--hi-600);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--ink-700); }
.faq-answer {
  padding: 0 0 1.4rem;
  max-width: 68ch;
  color: var(--ink-700);
}

/* ====================================================== Bandeau de rappel */
.cta-band {
  background: var(--brand);
  color: #fff;
}
.cta-band-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
.cta-band h2 {
  color: #fff;
  font-size: var(--fs-xl);
  margin-bottom: .4rem;
  max-width: 28ch;
}
.cta-band p {
  color: var(--ink-200);
  margin: 0;
  max-width: 46ch;
}
.cta-band .btn-row { margin-top: 0; }

/* ========================================================== Encadré info */
.callout {
  padding: 1.35rem 1.5rem;
  background: var(--hi-100);
  border-left: 4px solid var(--hi);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm);
  color: var(--ink-800);
}
.callout strong { display: block; margin-bottom: .25rem; }
.callout p:last-child { margin-bottom: 0; }

/* ====================================================== Contenu éditorial */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.9rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }

/* ------------------------------------------------- Renvoi vers le groupe */
.group-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--hi);
  border-radius: var(--radius);
}
.group-band-text { flex: 1 1 32rem; }
.group-band h2 {
  font-size: var(--fs-lg);
  margin-bottom: .55rem;
}
.group-band p {
  color: var(--ink-700);
  max-width: 62ch;
  margin: 0;
}
.group-band .btn { flex-shrink: 0; }

/* Sous 620px, le libellé du bouton est plus large que le cadre :
   on le passe pleine largeur et on l'autorise à revenir à la ligne. */
@media (max-width: 620px) {
  .group-band { border-left-width: 3px; }
  .group-band .btn {
    width: 100%;
    padding-inline: 1rem;
    text-align: center;
  }
}

/* --------------------------------------- Ligne de liens vers les fiches
   Rappel discret des 5 machines en fin de page d'accueil : du texte seul,
   sans photo ni prix, pour ne pas rallonger la page. */
.model-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.5rem;
}
.model-links-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
.model-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.model-links li { margin: 0; }
.model-links a {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.model-links a:hover { color: var(--brand); border-bottom-color: var(--hi); }

.model-links-all a { color: var(--brand); }
.model-links-all a::after { content: "\00a0\2192"; }

/* Sur petit écran, le groupe de boutons du bandeau se dimensionnait sur son
   contenu (252px) et restait collé à gauche, plus étroit que le texte. On lui
   donne toute la largeur : les boutons s'alignent alors exactement sur le
   titre et le paragraphe, comme ceux du hero. La mise en pleine largeur des
   boutons eux-mêmes vient de la règle générale de base.css. */
@media (max-width: 620px) {
  .cta-band .btn-row { width: 100%; }
}

/* ===================================================== Consentement cookies
   Les deux boutons sont volontairement identiques : même taille, même style,
   même poids visuel. La CNIL exige que refuser soit aussi simple qu'accepter,
   ce qui exclut de mettre en avant « Accepter » par la couleur ou la taille. */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--brand);
  border-top: 3px solid var(--hi);
  box-shadow: 0 -8px 32px rgba(6, 40, 63, .25);
}
.cookies[hidden] { display: none; }

.cookies-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.cookies-titre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .3rem;
}
.cookies-texte {
  color: var(--ink-200);
  font-size: var(--fs-sm);
  max-width: 68ch;
  margin: 0;
}
.cookies-texte a { color: #fff; }

.cookies-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  flex-shrink: 0;
}
.cookies-actions .btn {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .6);
  min-width: 11rem;
  font-size: 1rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
}
.cookies-actions .btn:hover {
  --btn-bg: #fff;
  --btn-fg: var(--brand);
  --btn-bd: #fff;
}

@media (max-width: 620px) {
  .cookies-actions { width: 100%; }
  .cookies-actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* Lien « Gérer les cookies » du pied de page : un <button> qu'on habille
   comme les liens voisins. */
.lien-cookies {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--ink-200);
  text-align: left;
  cursor: pointer;
}
.lien-cookies:hover { color: #fff; text-decoration: underline; }