/* Le programme distributeurs européens (2 novembre 2026).
 *
 * Direction de Jeremy : bleu nuit NUQUE, blanc crème, vert sauge en accent,
 * typographie contemporaine, mise en page éditoriale, espaces généreux,
 * animations discrètes. Une page de fabricant de mobilier professionnel, pas
 * une page de promotion : aucune grosse icône, aucun carrousel.
 *
 * Mobile d'abord (le trafic vient des publicités sur téléphone), deux colonnes
 * à partir de 60rem. Tout est préfixé `ds-` : rien ne fuit vers le reste du site.
 */

.page--distributeurs {
  --ds-nuit: #0e1b2c;
  --ds-nuit-2: #1b2c44;
  --ds-creme: #f6f2ea;
  --ds-creme-2: #ece6da;
  --ds-papier: #fffdf9;
  --ds-sauge: #8fa58a;          /* accent sur fond nuit */
  --ds-sauge-fonce: #4f6a4c;    /* accent lisible sur crème (5,6:1) */
  --ds-gris: #5a6472;
  --ds-filet: #d9d2c4;
  --ds-erreur: #a3262c;
  --ds-titre: 'Schibsted Grotesk', 'DM Sans', system-ui, sans-serif;
  --ds-texte: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-max: 72rem;
  --ds-gouttiere: max(1.25rem, env(safe-area-inset-left, 0px));

  margin: 0;
  background: var(--ds-papier);
  color: var(--ds-nuit);
  font: 400 1.0625rem/1.6 var(--ds-texte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.ds-cadre {
  width: 100%;
  max-width: var(--ds-max);
  margin-inline: auto;
  padding-left: var(--ds-gouttiere);
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
.ds-cadre--etroit { max-width: 46rem; }

.page--distributeurs .skip { position: absolute; left: -999px; top: 0; }
.page--distributeurs .skip:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--ds-nuit); color: var(--ds-papier); padding: .6rem 1rem; }

.page--distributeurs :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ds-sauge-fonce);
  outline-offset: 3px;
}

/* En-tête : le logo et les langues, rien d'autre (aucun lien commercial). */
.ds-tete { border-bottom: 1px solid var(--ds-filet); background: var(--ds-papier); }
.ds-tete__rang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; }
.ds-logo { display: block; width: 7.5rem; height: auto; }
.ds-langues { display: flex; flex-wrap: wrap; gap: .15rem; }
.ds-langues a {
  font: 600 .78rem/1 var(--ds-titre);
  letter-spacing: .08em;
  color: var(--ds-gris);
  text-decoration: none;
  padding: .55rem .5rem;
  border-radius: 2px;
}
.ds-langues a:hover { color: var(--ds-nuit); }
.ds-langues a[aria-current="page"] { color: var(--ds-nuit); box-shadow: inset 0 -2px 0 var(--ds-sauge-fonce); }

/* Typographie */
.ds-surtitre {
  margin: 0 0 .9rem;
  font: 600 .78rem/1.3 var(--ds-titre);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ds-sauge-fonce);
}
.ds-titre {
  margin: 0 0 1.2rem;
  font: 600 clamp(1.7rem, 4.4vw, 2.6rem)/1.1 var(--ds-titre);
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 24ch;
}
.ds-chapo { margin: 0 0 2rem; max-width: 58ch; color: var(--ds-gris); font-size: 1.1rem; }
.ds h3 { margin: 0 0 .4rem; font: 600 1.12rem/1.3 var(--ds-titre); letter-spacing: -.01em; }
.ds p { margin-top: 0; }

/* Boutons */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .9rem 1.6rem;
  font: 600 1rem/1.2 var(--ds-titre);
  text-align: center; text-decoration: none;
  border: 1.5px solid var(--ds-nuit); border-radius: 2px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ds-btn--plein { background: var(--ds-nuit); color: var(--ds-papier); }
.ds-btn--plein:hover { background: var(--ds-nuit-2); }
.ds-btn--vide { background: transparent; color: var(--ds-nuit); }
.ds-btn--vide:hover { background: var(--ds-creme); }
.ds-btn--sauge { background: var(--ds-sauge); border-color: var(--ds-sauge); color: var(--ds-nuit); }
.ds-btn--sauge:hover { background: #a3b79e; }

/* A — Héros. Téléphone : texte, produit, appel à l'action. */
.ds-heros { padding-block: 2rem 3rem; }
.ds-heros__grille { display: grid; gap: 1.5rem; }
.ds-heros__titre {
  margin: 0 0 1rem;
  font: 600 clamp(2.4rem, 8.5vw, 4.4rem)/1 var(--ds-titre);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ds-heros__chapo { margin: 0; font-size: 1.15rem; color: var(--ds-nuit-2); max-width: 34rem; }
.ds-heros__photo { margin: 0; background: var(--ds-creme); }
/* Le produit entier, jamais rogné : la photo est en portrait, sa hauteur est bornée au téléphone. */
.ds-heros__photo img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.ds-heros__action { display: grid; gap: .8rem; justify-items: start; }
.ds-heros__mention { margin: 0; font-size: .9rem; color: var(--ds-gris); }
.ds-reperes { list-style: none; margin: .8rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ds-filet); display: grid; gap: .35rem; width: 100%; }
.ds-reperes li { position: relative; padding-left: 1.2rem; font-size: .95rem; }
.ds-reperes li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 1px; background: var(--ds-sauge-fonce); }

/* Sections */
.ds-section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.ds-section--creme { background: var(--ds-creme); }
.ds-section--nuit { background: var(--ds-nuit); color: var(--ds-creme); }
.ds-section--nuit .ds-surtitre { color: var(--ds-sauge); }
.ds-section--nuit .ds-titre { color: var(--ds-papier); }

/* B — Trois bénéfices, numérotés : ils se lisent dans l'ordre. */
.ds-benefices { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; counter-reset: ds-b; }
.ds-benefices li { counter-increment: ds-b; padding-top: 1.2rem; border-top: 1px solid var(--ds-nuit); }
.ds-benefices li::before { content: "0" counter(ds-b); display: block; margin-bottom: .8rem; font: 600 .8rem/1 var(--ds-titre); letter-spacing: .1em; color: var(--ds-sauge-fonce); }
.ds-benefices p { margin: 0; color: var(--ds-nuit-2); }

/* C — Démonstration */
.ds-demo { display: grid; gap: 1.5rem; }
.ds-video { margin: 0; min-width: 0; }
.ds-video__cadre { background: #fff; border: 1px solid var(--ds-filet); }
.ds-video video, .ds-video img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.ds-video figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ds-gris); }
.ds-fiche { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ds-nuit); }
.ds-fiche dl { margin: 1rem 0 0; display: grid; gap: 0; }
.ds-fiche dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--ds-filet); }
.ds-fiche dt { color: var(--ds-gris); }
.ds-fiche dd { margin: 0; font-variant-numeric: tabular-nums; }
.ds-relance { margin: 2.5rem 0 0; }

/* D — Le partenariat, quatre étapes */
.ds-etapes { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; counter-reset: ds-e; }
.ds-etapes li { counter-increment: ds-e; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1rem; padding: 1.4rem 0; border-top: 1px solid rgba(246, 242, 234, .2); }
.ds-etapes li::before { content: counter(ds-e); grid-row: span 2; font: 600 1.9rem/1 var(--ds-titre); color: var(--ds-sauge); }
.ds-etapes h3 { color: var(--ds-papier); }
.ds-etapes p { margin: 0; color: #c9d1dc; }
.ds-note { margin: 2rem 0 0; font-size: .95rem; color: #c9d1dc; max-width: 60ch; }
.ds-note--sombre { color: var(--ds-gris); }

/* E — À qui */
.ds-cible { display: grid; gap: 1.5rem; }
.ds-profils { list-style: none; margin: 0; padding: 0; }
.ds-profils li { padding: 1rem 0; border-bottom: 1px solid var(--ds-filet); font: 500 1.1rem/1.35 var(--ds-titre); }
.ds-profils li:first-child { border-top: 1px solid var(--ds-filet); }

/* F — Formulaire */
.ds-alerte { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border: 1.5px solid var(--ds-erreur); background: var(--ds-papier); }
.ds-alerte ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.ds-alerte a { color: var(--ds-erreur); }
.ds-form { display: grid; gap: 1.2rem; margin-top: 1rem; }
.ds-pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ds-progression { margin: 0; font: 600 .82rem/1 var(--ds-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--ds-sauge-fonce); }
.ds-progression__barre { height: 3px; background: var(--ds-creme-2); }
.ds-progression__barre span { display: block; height: 100%; width: 50%; background: var(--ds-sauge-fonce); transition: width .3s ease; }
.ds-progression__barre[data-etape="2"] span { width: 100%; }
.ds-etape { border: 0; margin: 0; padding: 0; display: grid; gap: 1.1rem; min-width: 0; }
.ds-etape + .ds-etape { margin-top: 1.5rem; }
.ds-etape legend { padding: 0; margin-bottom: .4rem; font: 600 1.25rem/1.2 var(--ds-titre); }
.ds-rang { display: grid; gap: 1.1rem; }
.ds-champ { display: grid; gap: .35rem; min-width: 0; }
.ds-champ__label { font-weight: 500; }
.ds-champ__statut { font-weight: 400; font-size: .82rem; color: var(--ds-gris); }
.ds-champ__saisie {
  width: 100%; min-height: 3.25rem; padding: .75rem .85rem;
  font: inherit; font-size: 1rem; color: var(--ds-nuit);
  background: var(--ds-papier); border: 1px solid #a9a294; border-radius: 2px;
}
.ds-champ__saisie:focus { border-color: var(--ds-nuit); }
textarea.ds-champ__saisie { min-height: 7rem; resize: vertical; }
.ds-champ__aide { margin: 0; font-size: .85rem; color: var(--ds-gris); }
.ds-champ--faux .ds-champ__saisie { border-color: var(--ds-erreur); border-width: 2px; }
.ds-champ--faux .ds-champ__label { color: var(--ds-erreur); }
.ds-tel { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; }
.ds-rgpd { margin: .3rem 0 0; font-size: .85rem; color: var(--ds-gris); }
.ds-rgpd a { color: var(--ds-nuit); }
.ds-case { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.ds-case input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--ds-sauge-fonce); flex: none; }
.ds-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.ds-actions .ds-btn { flex: 1 1 12rem; }

/* G — Questions */
.ds-faq details { border-top: 1px solid var(--ds-filet); }
.ds-faq details:last-child { border-bottom: 1px solid var(--ds-filet); }
.ds-faq summary { cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; font: 600 1.05rem/1.35 var(--ds-titre); list-style: none; position: relative; }
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary::after { content: "+"; position: absolute; right: .2rem; top: 1rem; font: 400 1.4rem/1 var(--ds-titre); color: var(--ds-sauge-fonce); }
.ds-faq details[open] summary::after { content: "–"; }
.ds-faq p { margin: 0 0 1.2rem; color: var(--ds-nuit-2); max-width: 62ch; }

/* H — Dernier appel */
.ds-final .ds-cadre { display: grid; gap: 1.5rem; justify-items: start; }
.ds-final .ds-titre { margin: 0; }

/* Merci */
.ds-merci { min-height: 50vh; }

/* Pied */
.ds-pied { padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); background: var(--ds-creme); font-size: .88rem; color: var(--ds-gris); }
.ds-pied__rang { display: grid; gap: .4rem; }
.ds-pied p { margin: 0; }
.ds-pied a { color: var(--ds-nuit); }
.ds-pied__note { font-style: italic; }

/* Le formulaire en deux étapes n'existe qu'avec le script : sans lui, tout est visible. */
.ds-form.ds-form--etapes .ds-etape[data-ds-cache] { display: none; }

/* Une apparition discrète, depuis un état VISIBLE (règle 12) : rien n'attend un observateur. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ds-benefices li, .ds-etapes li, .ds-video {
      animation: ds-monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes ds-monte { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) { html:has(.page--distributeurs) { scroll-behavior: smooth; } }

@media (min-width: 40rem) {
  .ds-rang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-pied__rang { grid-template-columns: 1fr auto; align-items: center; }
  .ds-pied__note { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .ds-heros { padding-block: 3.5rem 5rem; }
  .ds-heros__grille {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
    grid-template-areas: "texte photo" "action photo";
    column-gap: 4rem; row-gap: 2rem; align-items: start;
  }
  .ds-heros__texte { grid-area: texte; align-self: end; }
  .ds-heros__photo { grid-area: photo; margin: 0; align-self: center; }
  .ds-heros__photo img { max-height: 44rem; }
  .ds-heros__action { grid-area: action; }
  .ds-benefices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .ds-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .ds-etapes li { grid-template-columns: minmax(0, 1fr); padding-top: 1.6rem; }
  .ds-etapes li::before { grid-row: auto; margin-bottom: 1rem; }
  .ds-cible { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; }
  .ds-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; }
  .ds-fiche dl { margin: 0; }
  .ds-final .ds-cadre { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}