/* ============================================================
   DEVIS DE SITE INTERNET : ce qui n'appartient qu'à cette page
   Le socle visuel (verre, halos, révélations, boutons, typographie de
   section) vient de moteur.css, chargé par le header sur toutes les pages.
   Ici, uniquement les compositions propres à la page, calquées sur
   automatisation-ia.css (mêmes valeurs). Préfixe dv-.
   ============================================================ */

/* ------------------------------------------------------------
   Rythme vertical commun aux sections
   ------------------------------------------------------------ */
.dv-section { padding: clamp(90px, 13vh, 150px) 0; }
.dv-section--alt { background-color: var(--bg-2); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.dv-hero {
  position: relative;
  padding: clamp(150px, 20vh, 230px) 0 clamp(70px, 9vh, 110px);
  overflow: hidden;
}
.dv-hero > .shell { position: relative; z-index: 1; }

.dv-breadcrumb {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 26px;
}
.dv-breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.dv-breadcrumb a:hover { color: var(--accent); }
.dv-breadcrumb span { margin: 0 8px; }
.dv-breadcrumb span[aria-current] { margin: 0; white-space: nowrap; }

.dv-hero__title {
  font-size: clamp(42px, 6.6vw, 92px);
  line-height: 1.01;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.dv-hero__title em { font-style: italic; color: var(--accent); }
.dv-hero__intro {
  margin: 32px 0 0;
  max-width: 60ch;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.65;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.dv-hero__actions {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.dv-hero__note {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------
   CE QUE CONTIENT LE DEVIS : quatre cartes, deux colonnes
   ------------------------------------------------------------ */
.dv-points {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.dv-point { padding: 32px 30px; }
.dv-point__k {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.dv-point__v {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   CE QU'IL NOUS FAUT POUR CHIFFRER : trois cartes numérotées
   (même carte que la méthode de /automatisation-ia)
   ------------------------------------------------------------ */
.dv-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
}
.dv-step {
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dv-step__num {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
}
.dv-step__k { margin: 6px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.dv-step__v { margin: 0; font-size: 15px; line-height: 1.68; color: var(--ink-dim); text-wrap: pretty; }

.dv-closing {
  margin: 40px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.dv-closing a,
.dv-price__more a,
.dv-faq__a a { color: var(--accent); text-underline-offset: 3px; }

/* ------------------------------------------------------------
   CE QU'ON A FAIT : trois cartes avec le visuel existant
   ------------------------------------------------------------ */
.dv-works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
}
.dv-work {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.dv-work__visual {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #e9a27d;
}
.dv-work__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-work__body {
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.dv-work__type {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.dv-work__name {
  margin: 10px 0 10px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.28;
}
.dv-work__line {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.dv-work__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.dv-work__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   COMBIEN ÇA COÛTE : bandeau étroit, en petit
   ------------------------------------------------------------ */
.dv-price { padding: clamp(40px, 6vh, 64px) 0; }
.dv-price__band {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 30px;
}
.dv-price__title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.dv-price__line {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.dv-price__more {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   QUESTIONS (même accordéon natif que /tarifs, sans JS)
   ------------------------------------------------------------ */
.dv-faq { max-width: 940px; margin: 0 auto; display: grid; gap: 12px; }
.dv-faq__item { padding: 0; }
.dv-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}
.dv-faq__q::-webkit-details-marker { display: none; }
.dv-faq__q::marker { content: ''; }
.dv-faq__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.dv-faq__icon {
  flex: none;
  display: inline-flex;
  color: var(--accent);
  transition: transform .5s var(--mr-ease);
}
.dv-faq__item[open] .dv-faq__icon { transform: rotate(45deg); }
.dv-faq__a { padding: 0 28px 26px; }
.dv-faq__a p {
  margin: 0;
  max-width: 76ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   BOUTON FINAL (dans la section des questions)
   ------------------------------------------------------------ */
.dv-final {
  max-width: 900px;
  margin: clamp(56px, 8vh, 90px) auto 0;
  padding: clamp(40px, 6vh, 64px) 34px;
  text-align: center;
}
.dv-final__text {
  margin: 0 auto;
  max-width: 46ch;
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.dv-final__actions {
  margin-top: 30px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Adaptations d'écran
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .dv-works { grid-template-columns: 1fr; max-width: 560px; }
  .dv-points,
  .dv-steps { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 620px) {
  .dv-point,
  .dv-step { padding: 28px 22px; }
  .dv-price__band { padding: 22px 22px; }
  .dv-faq__q { padding: 20px 20px; }
  .dv-faq__title { font-size: 16px; }
  .dv-faq__a { padding: 0 20px 22px; }
  .dv-final { padding-left: 22px; padding-right: 22px; }
}

/* Le reflet du verre (.glass::before, moteur.css) est posé en absolu : sans
   position, le contenu passerait dessous et pâlirait sur le haut de la
   carte. On le remonte au-dessus, comme dans automatisation-ia.css. */
.dv-point > *,
.dv-step > *,
.dv-work > *,
.dv-price__band > *,
.dv-faq__item > *,
.dv-final > * { position: relative; z-index: 1; }