/* =====================================================================
   EVENTYS — feuille de style unique.

   Charte reprise des affiches de Yanis : crème, bordeaux, rouge
   terracotta, titres en Didone (Bodoni Moda à l'écran, équivalent du
   Bodoni MT des vidéos).

   Refonte du 2026-10-22, après audit : cinq photos sur toute la page,
   un seul espacement de section, trois tailles de titre rapprochées,
   une seule liste de prix. Pas d'ombre, pas de coins arrondis, pas de
   filet, pas de dégradé (sauf le voile de l'accroche).
   ===================================================================== */

:root {
  /* Fond blanc franc, et l'accent pris sur le logo (le Y terracotta,
     #BF5755) plutôt que sur le bordeaux sombre : la page est plus claire
     et la couleur plus vive. Le bordeaux reste pour les deux bandes
     pleines, qui tiennent la page aux deux bouts. */
  --creme:      #FFFFFF;
  --creme-2:    #FAF6F5;
  --bordeaux:   #6F2F2F;
  --accent:     #C24B47;
  --accent-2:   #A93A36;
  --rouge:      #BF5755;
  --encre:      #2B2220;
  --encre-2:    #473A36;   /* texte secondaire, mais lisible */
  --encre-doux: #6A5B56;   /* étiquettes seulement */

  --marge: clamp(16px, 4vw, 40px);
  --bloc: clamp(56px, 9vh, 104px);   /* le SEUL espacement de section */
  --large: 1360px;

  --t1: clamp(3.6rem, 15vw, 9rem);    /* le titre de l'accroche */
  --t2: clamp(1.9rem, 3.4vw, 2.6rem); /* les titres de section */
  --t3: 1.25rem;                      /* sous-titres, noms d'article */
  --t4: 1.09375rem;                   /* le texte courant (17,5 px) */
  --t5: 0.875rem;                     /* légendes et étiquettes */

  --titre: "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --texte: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t4);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; }
h2 { font-size: var(--t2); line-height: 1.06; }
p { margin: 0 0 1em; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.saute {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--bordeaux); color: var(--creme); padding: 12px 18px;
}
.saute:focus { left: 0; }

/* lu par les lecteurs d'écran et les moteurs, invisible à l'œil :
   sert à dire en clair ce que le grand titre dit en deux mots. */
.lu-seul {
  position: absolute; width: 1px; height: 1px;  /* taste-skill-ignore : ce n'est pas un filet, c'est du texte cache */
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

/* ---------- briques communes ---------- */
.bouton {
  display: inline-block;
  background: var(--accent); color: #fff;
  font-family: var(--texte); font-size: var(--t4); font-weight: 500;
  padding: 16px 28px; border-radius: 999px;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.bouton:hover { background: var(--accent-2); transform: translateY(-2px); }
.bouton--petit { padding: 11px 18px; font-size: var(--t5); }
/* sur la photo de l'accroche : un contour fin plutôt qu'un bloc plein */
.bouton--fin {
  background: transparent;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .7);
  padding: 13px 22px;
  font-size: var(--t5);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bouton--fin:hover { background: #fff; color: var(--encre); border-color: #fff; }
.bouton--wa { display: block; width: 100%; text-align: center; padding: 20px 26px; }

.lien {
  background: none; border: 0; padding: 0;
  font-family: var(--texte); font-size: var(--t5); color: var(--accent-2);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px; cursor: pointer;
}
.lien:hover { color: var(--accent); }
.lien--centre { display: block; margin: 14px auto 0; }

.carre {
  width: 48px; height: 48px; flex: 0 0 48px;
  background: var(--accent); color: #fff;
  border: 0; font-size: var(--t3); cursor: pointer;
  transition: background .2s ease;
}
.carre:hover { background: var(--accent-2); }

.label {
  display: block; font-size: var(--t5); font-weight: 600;
  margin-bottom: 12px;
}

/* entrées au défilement */
.entre { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.est-entre { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .entre { opacity: 1; transform: none; transition: none; }
}
body.tout-visible .entre { opacity: 1; transform: none; transition: none; }

/* =====================================================================
   BARRE HAUTE
   ===================================================================== */
.barre-haute {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--marge);
  background: var(--creme);
  transform: translateY(-100%);
  transition: transform .4s ease;
}
.barre-haute.est-visible { transform: none; }
.barre-haute__logo { margin-right: auto; display: block; }
.barre-haute__logo img { height: 32px; width: auto; }
.barre-haute nav a { font-size: var(--t5); text-decoration: none; }
.barre-haute nav a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 5px; }

/* =====================================================================
   1. ACCROCHE
   ===================================================================== */
.hero {
  position: relative;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 24px var(--marge);
  overflow: hidden;
  color: #fff;
}
/* La vidéo est plus haute que l'accroche : c'est cette réserve qui lui
   permet de glisser sans jamais découvrir le bas du cadre (la barre grise
   qu'on voyait en défilant). */
.hero__media {
  position: absolute; left: 0; right: 0; top: -9%;
  width: 100%; height: 118%;
  object-fit: cover;
  transform: translateY(calc(var(--glisse, 0px) * -1));
  z-index: 0;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* taste-skill-ignore : voile neutre sous le titre, seule exception admise */
  background:
    linear-gradient(to right, rgba(18,12,11,.62) 0 26%, rgba(18,12,11,0) 64%), /* taste-skill-ignore */
    linear-gradient(to bottom, rgba(18,12,11,.42) 0 18%, rgba(18,12,11,0) 42%), /* taste-skill-ignore */
    linear-gradient(to top, rgba(18,12,11,.5) 0 28%, rgba(18,12,11,0) 56%); /* taste-skill-ignore */
}
.hero__nav, .hero__dit { position: relative; z-index: 2; }

.hero__nav {
  grid-row: 1;
  display: flex; align-items: center; gap: 24px;
  justify-content: flex-end;
  font-size: var(--t5);
}
.hero__nav a { text-decoration: none; }
.hero__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero__logo { height: 38px; width: auto; margin-right: auto; flex: 0 0 auto; filter: brightness(0) invert(1); }

/* le titre occupe la hauteur de l'accroche : une ligne en haut, une en bas */
.hero__title {
  position: absolute;
  inset: 24px var(--marge);
  z-index: 2;
  display: grid; grid-template-rows: auto 1fr auto;
  margin: 0;
  font-size: var(--t1); line-height: .9;
  pointer-events: none;
}
.masque {
  display: block;
  overflow: hidden;      /* c'est lui qui masque la ligne avant qu'elle monte */
  font-size: var(--t1); line-height: 1;
  /* sans cette marge intérieure, le masque coupe l'accent de MONTÉ */
  padding-top: .14em; margin-top: -.14em;
  font-family: var(--titre);
}
.masque:nth-of-type(1) { grid-row: 1; align-self: start; margin-top: 46px; }
.masque:nth-of-type(2) { grid-row: 3; justify-self: end; padding-right: .06em; }
.masque__l {
  display: block;
  transform: translateY(105%);
  transition: transform .9s cubic-bezier(.16,.84,.24,1);
  transition-delay: var(--d, 0ms);
}
.pret .masque__l { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .masque__l { transform: none; transition: none; } }

/* pas de cadre sur la photo : le texte s'appuie sur le voile du bord gauche,
   qui descend du haut vers le bas de l'image. */
.hero__dit {
  grid-row: 2; align-self: center;
  justify-self: start;
  max-width: 27ch;
}
.hero__dit p { font-size: var(--t4); line-height: 1.5; margin-bottom: 18px; }
.hero__dit strong { font-weight: 600; }

@media (max-width: 899px) {
  /* sur téléphone le texte passe en bas, sur la nappe blanche :
     le voile du bas doit être nettement plus appuyé. */
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(18,12,11,.72) 0 34%, rgba(18,12,11,0) 62%), /* taste-skill-ignore */
      linear-gradient(to bottom, rgba(18,12,11,.46) 0 20%, rgba(18,12,11,0) 46%); /* taste-skill-ignore */
  }
  /* sur téléphone, le titre reste d'un bloc, dans le flux, au-dessus du texte */
  .hero {
    height: auto; min-height: 100svh; padding-bottom: 32px;
    display: flex; flex-direction: column;
  }
  .hero__dit { margin-top: auto; }
  .hero__title {
    position: static; display: block; margin: 36px 0 0;
    font-size: var(--t1);
  }
  .masque:nth-of-type(1) { margin-top: 0; }
  .masque:nth-of-type(2) { justify-self: start; padding-right: 0; }
  .hero__dit { max-width: 100%; align-self: end; }
  .hero__nav { gap: 14px; }
  .hero__logo { height: 28px; }
}

/* =====================================================================
   2. L'ESSENTIEL
   ===================================================================== */
.essentiel {
  background: var(--bordeaux); color: var(--creme);
  padding: var(--bloc) var(--marge);
}
.essentiel ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--large);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
}
.essentiel h2 { font-size: var(--t3); margin-bottom: 8px; }
.essentiel p { font-size: var(--t4); margin: 0; opacity: .94; }

@media (max-width: 899px) { .essentiel ul { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 559px) { .essentiel ul { grid-template-columns: 1fr; gap: 20px; } }

/* =====================================================================
   3. LE DEVIS — trois gestes, en haut de page
   ===================================================================== */
.devis { padding: var(--bloc) var(--marge); }
.devis__tete { max-width: var(--large); margin: 0 auto 36px; }
.devis__tete p { color: var(--encre-2); max-width: 46ch; margin: 12px 0 0; }

.devis__corps {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.tailles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.taille {
  background: transparent; border: 2px solid var(--encre-doux); color: var(--encre);
  border-radius: 14px;
  font-family: var(--texte); font-size: 1.375rem; font-weight: 600; line-height: 1.1;
  padding: 20px 8px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.taille:hover { border-color: var(--accent); }
.taille.est-choisi { background: var(--accent); border-color: var(--accent); color: #fff; }

.curseur { display: block; margin-top: 24px; font-size: var(--t5); font-weight: 600; }
.curseur output { font-variant-numeric: tabular-nums; color: var(--accent-2); }
.curseur input[type="range"] {
  display: block; width: 100%; margin-top: 10px;
  accent-color: var(--accent); height: 32px;
}

.devis__recap { background: var(--creme-2); border-radius: 18px; padding: 26px; }
.recap__lignes { list-style: none; margin: 0 0 18px; padding: 0; }
.recap__lignes li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; font-size: var(--t4);
}
.recap__lignes b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.recap__vide { color: var(--encre-2); }
.recap__total {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--accent); color: #fff; padding: 16px 18px; border-radius: 12px;
}
.recap__total strong { font-family: var(--titre); font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.recap__note { font-size: var(--t5); color: var(--encre-2); margin: 10px 0 16px; }
.devis__ajuster { margin: 16px 0 0; font-size: var(--t5); text-align: center; }

@media (max-width: 899px) {
  .devis__corps { grid-template-columns: 1fr; }
  .tailles { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   4. MATÉRIEL ET PRIX — la seule liste de la page
   ===================================================================== */
.materiel { padding: var(--bloc) var(--marge); background: var(--creme-2); }
.materiel__tete { max-width: var(--large); margin: 0 auto 32px; }
.materiel__tete p { color: var(--encre-2); max-width: 52ch; margin: 12px 0 20px; }

.services {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 28px;
}
.services li { display: flex; gap: 8px; font-size: var(--t5); }
.services b { color: var(--accent-2); }

.liste { list-style: none; margin: 0 auto; padding: 0; max-width: var(--large); }
.ligne {
  display: grid;
  grid-template-columns: 1fr auto 168px;
  gap: 24px; align-items: center;
  padding: 20px 0;
}
.ligne + .ligne { border-top: 2px solid rgba(43, 34, 32, .12); } /* taste-skill-ignore : séparateur de tableau de prix */
.ligne__nom { font-size: var(--t3); }
.ligne__nom i {
  display: block; font-style: normal; font-size: var(--t5);
  color: var(--encre-2); margin-top: 2px;
}
.ligne__prix {
  font-family: var(--titre); font-size: var(--t3); color: var(--accent-2);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.ligne__prix i {
  display: block; font-family: var(--texte); font-style: normal;
  font-size: var(--t5); color: var(--encre-doux);
}
.compteur { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* deux ronds doux, et le chiffre posé entre les deux, sans case */
.rond {
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 0; border-radius: 50%;
  background: #F7E7E6; color: var(--accent-2);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.rond:hover { background: var(--accent); color: #fff; }
.compteur input {
  width: 54px; height: 42px; text-align: center;
  border: 0; background: transparent;
  font-family: var(--texte); font-size: 1.125rem; font-weight: 600;
  color: var(--encre); font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button { appearance: none; margin: 0; }

@media (max-width: 699px) {
  .ligne { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .compteur { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =====================================================================
   5. LA BANDE — quatre images au même format, bord à bord
   ===================================================================== */
.bande__images { display: grid; grid-template-columns: repeat(4, 1fr); }
.tuile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme-2); }
.tuile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease;
}
.tuile img.est-dessus { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tuile img { transition: none; } }

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

/* =====================================================================
   6. BON À SAVOIR
   ===================================================================== */
.questions {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px);
  padding: var(--bloc) var(--marge);
  max-width: var(--large); margin: 0 auto;
  align-items: center;
}
.questions__texte h2 { margin-bottom: 24px; }
.accordeon details { margin-bottom: 20px; }
.accordeon summary {
  font-size: var(--t3); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 44px;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .25s ease;
}
.accordeon details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.accordeon p { font-size: var(--t4); color: var(--encre-2); margin: 8px 0 0; max-width: 46ch; }
.questions__photo { width: 100%; height: auto; }

@media (max-width: 899px) {
  .questions { grid-template-columns: 1fr; }
  .questions__photo { order: -1; }
}

/* =====================================================================
   7. CONTACT
   ===================================================================== */
.pied {
  background: var(--bordeaux); color: var(--creme);
  padding: var(--bloc) var(--marge) 24px;
}
.pied__mot {
  max-width: var(--large); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.pied__mot h2 { max-width: 14ch; }
.pied__mot p { margin: 0; opacity: .94; }

.pied__infos {
  max-width: var(--large); margin: var(--bloc) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.pied__infos span {
  display: block; font-size: var(--t5); font-weight: 600; opacity: .7; margin-bottom: 8px;
}
.pied__infos a { display: block; font-size: var(--t4); margin-bottom: 6px; }
.pied__infos a:hover { color: #F0D9D9; }
.pied__infos p { font-size: var(--t4); margin: 0; }
.pied__legal { max-width: var(--large); margin: 40px auto 0; font-size: var(--t5); opacity: .7; }

@media (max-width: 899px) {
  .pied__mot { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}