/* ==========================================================================
   DONA — Design system
   Fonds blancs ou gris clair. Bleu (et ses dégradés) comme seule couleur.
   Noir pour le texte. Jamais de rouge.
   Les sections sont composées de containers, chacun avec son animation.
   ========================================================================== */

:root {
  --d-blue: #2E4BFF;
  --d-blue-dark: #1B32C4;
  --d-blue-deep: #101F8F;
  --d-blue-soft: #EEF1FF;
  --d-blue-line: #D7DEFF;
  --d-blue-pale: #C3CEFF;
  --d-ink: #0A0D1C;
  --d-ink-soft: #545B75;
  --d-grey: #878DA3;
  --d-green: #16A34A;
  --d-line: #E8EAF2;
  --d-tint: #F6F7FB;
  --d-white: #FFFFFF;
  --d-radius: 22px;
  --d-shadow: 0 1px 2px rgba(10, 13, 28, .04), 0 14px 40px rgba(10, 13, 28, .06);
  --d-shadow-lg: 0 2px 6px rgba(10, 13, 28, .05), 0 26px 70px rgba(10, 13, 28, .10);
}

/* ----------------------------------------------------------------- Base --- */

.d-section {
  position: relative;
  padding: 120px 0;
  background: var(--d-white);
  color: var(--d-ink);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

.d-section.is-tint { background: var(--d-tint); }
.d-section.is-tight { padding: 90px 0; }

.d-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 36px;
}

/* ---------------------------------------------------------- Typographie --- */

.d-section .d-display,
.d-section .d-h2 {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--d-ink);
}

.d-section .d-display {
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -.042em;
}

.d-section .d-h2 {
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.07;
  letter-spacing: -.038em;
}

.d-section .d-display em,
.d-section .d-h2 em { font-style: normal; color: var(--d-blue); }

.d-lead {
  margin: 22px 0 0;
  max-width: 580px;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.62;
  color: var(--d-ink-soft);
}

.d-center { text-align: center; }
.d-center .d-lead { margin-left: auto; margin-right: auto; }

.d-kicker {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--d-blue-soft);
  color: var(--d-blue);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 22px;
}

.d-head { margin-bottom: 56px; }
.d-note { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--d-grey); }

/* -------------------------------------------------------------- Boutons --- */

.d-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: 999px;
  background: var(--d-blue);
  color: var(--d-white);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--d-blue);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.d-btn:hover {
  background: var(--d-blue-dark);
  border-color: var(--d-blue-dark);
  color: var(--d-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(46, 75, 255, .3);
}

.d-btn.is-ghost { background: transparent; color: var(--d-ink); border-color: var(--d-line); }
.d-btn.is-ghost:hover { background: var(--d-tint); color: var(--d-ink); box-shadow: none; }

.d-btn.is-white { background: var(--d-white); color: var(--d-blue); border-color: var(--d-white); }
.d-btn.is-white:hover { background: #EDF0FF; color: var(--d-blue-dark); }

/* Sur la carte bleue, le bouton secondaire doit rester lisible. */
.d-trial-card .d-btn.is-ghost {
  color: var(--d-white);
  border-color: rgba(255, 255, 255, .38);
}

.d-trial-card .d-btn.is-ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--d-white);
}

.d-btn-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.d-center .d-btn-row { justify-content: center; }
.d-btn-note { margin-top: 16px; font-size: 13px; color: var(--d-grey); }

/* --------------------------------------------------- Containers (bento) --- */

.d-box {
  position: relative;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  padding: 30px;
  overflow: hidden;
}

.d-box.is-blue {
  background: linear-gradient(155deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  border-color: transparent;
  color: var(--d-white);
  box-shadow: 0 18px 46px rgba(46, 75, 255, .28);
}

.d-box.is-soft { background: var(--d-blue-soft); border-color: var(--d-blue-line); }

.d-box-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-grey);
  margin-bottom: 14px;
}

.d-box.is-blue .d-box-label { color: rgba(255, 255, 255, .7); }
.d-box.is-soft .d-box-label { color: var(--d-blue); }

.d-box h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: inherit;
}

.d-box p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--d-ink-soft); }
.d-box.is-blue p { color: rgba(255, 255, 255, .8); }

.d-grid { display: grid; gap: 20px; }
.d-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
.d-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.d-grid.is-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================== Le constat — 7 500 € ===== */

.d-cost { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: stretch; }

.d-calc { padding: 8px 30px; }

.d-calc-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid var(--d-line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* Chaque ligne du calcul tombe l'une après l'autre : on suit l'addition. */
.d-calc.is-in .d-calc-row { opacity: 1; transform: none; }
.d-calc.is-in .d-calc-row:nth-child(1) { transition-delay: .05s; }
.d-calc.is-in .d-calc-row:nth-child(2) { transition-delay: .25s; }
.d-calc.is-in .d-calc-row:nth-child(3) { transition-delay: .45s; }
.d-calc.is-in .d-calc-row:nth-child(4) { transition-delay: .65s; }
.d-calc.is-in .d-calc-row:nth-child(5) { transition-delay: .9s; }

/* La pastille de l'opérateur arrive en pulsant, comme une touche pressée. */
.d-calc.is-in .d-calc-op { animation: d-optap .45s cubic-bezier(.22, 1, .36, 1) both; }
.d-calc.is-in .d-calc-row:nth-child(1) .d-calc-op { animation-delay: .05s; }
.d-calc.is-in .d-calc-row:nth-child(2) .d-calc-op { animation-delay: .25s; }
.d-calc.is-in .d-calc-row:nth-child(3) .d-calc-op { animation-delay: .45s; }
.d-calc.is-in .d-calc-row:nth-child(4) .d-calc-op { animation-delay: .65s; }
.d-calc.is-in .d-calc-row:nth-child(5) .d-calc-op { animation-delay: .9s; }

@keyframes d-optap {
  0%   { transform: scale(.5); opacity: 0; }
  55%  { transform: scale(1.16); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.d-calc-row:last-child { border-bottom: 0; }

.d-calc-op {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--d-blue-soft);
  color: var(--d-blue);
  font-weight: 700;
  font-size: 14px;
}

.d-calc-val { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.d-calc-unit { font-size: 13.5px; font-weight: 400; color: var(--d-grey); margin-left: 6px; }

.d-calc-row.is-total { padding-top: 26px; }
.d-calc-row.is-total .d-calc-op { background: var(--d-blue); color: var(--d-white); }

.d-calc-row.is-total .d-calc-val {
  font-size: clamp(34px, 4vw, 46px);
  color: var(--d-blue);
  letter-spacing: -.04em;
}

.d-calc-total-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-grey);
  margin-top: 2px;
}

/* Téléphone qui sonne dans le vide, en boucle ---------------------------- */

.d-ring-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 30px 30px;
}

.d-phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 26px 0 34px;
}

/* Les ondes partent de derrière le téléphone. */
.d-phone-stage span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  border-radius: 50%;
  border: 1.5px solid var(--d-blue);
  animation: d-ripple 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}

.d-phone-stage span:nth-child(2) { animation-delay: .6s; }
.d-phone-stage span:nth-child(3) { animation-delay: 1.2s; }

@keyframes d-ripple {
  0%   { transform: scale(.62); opacity: .5; }
  100% { transform: scale(1.5); opacity: 0; }
}

.d-phone-mock {
  position: relative;
  z-index: 2;
  width: 178px;
  border-radius: 26px;
  background: var(--d-ink);
  padding: 7px;
  box-shadow: 0 18px 44px rgba(10, 13, 28, .26);
  animation: d-buzz 2.4s ease-in-out infinite;
}

/* Vibration : deux salves courtes, comme un vrai téléphone qui sonne. */
@keyframes d-buzz {
  0%, 40%, 100%          { transform: translate(0, 0) rotate(0); }
  43%                    { transform: translate(-2px, 1px) rotate(-1.6deg); }
  46%                    { transform: translate(2px, -1px) rotate(1.6deg); }
  49%                    { transform: translate(-2px, 1px) rotate(-1.3deg); }
  52%                    { transform: translate(2px, 0) rotate(1deg); }
  55%                    { transform: translate(0, 0) rotate(0); }
  62%                    { transform: translate(-2px, 1px) rotate(-1.4deg); }
  65%                    { transform: translate(2px, -1px) rotate(1.4deg); }
  68%                    { transform: translate(-1px, 1px) rotate(-1deg); }
  71%                    { transform: translate(0, 0) rotate(0); }
}

.d-phone-mock-screen {
  border-radius: 20px;
  background: linear-gradient(180deg, var(--d-blue-soft) 0%, var(--d-white) 46%);
  padding: 12px 14px 16px;
  text-align: center;
}

.d-phone-notch {
  width: 46px;
  height: 4px;
  border-radius: 99px;
  background: rgba(10, 13, 28, .16);
  margin: 0 auto 16px;
}

.d-phone-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--d-white);
  border: 1px solid var(--d-blue-line);
  display: grid;
  place-items: center;
  color: var(--d-blue);
  box-shadow: 0 5px 14px rgba(46, 75, 255, .16);
}

.d-phone-state {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--d-ink);
}

.d-phone-number {
  font-size: 11.5px;
  color: var(--d-grey);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.d-phone-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}

.d-phone-key {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--d-white);
  opacity: .3;
}

.d-phone-key.is-decline { background: var(--d-grey); }

/* Le bouton "décrocher" pulse dans le vide : personne ne le presse. */
.d-phone-key.is-answer {
  background: var(--d-blue);
  animation: d-key 2.4s ease-in-out infinite;
}

@keyframes d-key {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.06); }
}

.d-ring-status { font-size: 15px; font-weight: 600; text-align: center; }
.d-ring-count { margin-top: 8px; font-size: 13px; color: var(--d-grey); text-align: center; }
.d-ring-count b { color: var(--d-blue); }


/* ============================================ Bandeaux défilants (hero) ==
   Les interactions Webflow ne se déclenchent pas sur cet export : le
   défilement est repris ici en CSS. Chaque bandeau contient deux pistes
   identiques et glisse de -50%, ce qui boucle sans saut visible. */

.partner-name-ticker-wrapper,
.partner-ticker-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  /* masque les bords : les éléments entrent et sortent en fondu */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.single-partner-name-ticker,
.single-partner-ticker {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  align-items: center;
  will-change: transform;
}

.single-partner-name-ticker { animation: d-marquee 26s linear infinite; }
.single-partner-ticker { animation: d-marquee 34s linear infinite; }

@keyframes d-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* On laisse le visiteur lire un logo au survol. */
.partner-name-ticker-wrapper:hover .single-partner-name-ticker,
.partner-ticker-wrapper:hover .single-partner-ticker {
  animation-play-state: paused;
}

.single-partner-ticker .partner-logo-2 {
  flex: 0 0 auto;
  margin: 0 30px;
}

.single-partner-name-ticker .partner-name-ticker-flex { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .single-partner-name-ticker,
  .single-partner-ticker { animation: none; }
}

/* ============================================ Une journée de service ===== */

.d-day { margin-top: 40px; padding: 32px 32px 24px; }

.d-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.d-day-title { font-size: 14.5px; font-weight: 600; }
.d-day-counter { font-size: 14px; color: var(--d-grey); }
.d-day-counter strong { color: var(--d-blue); font-size: 20px; letter-spacing: -.02em; }

.d-dots {
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  gap: 6px;
  margin-bottom: 26px;
}

.d-dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--d-line);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* Décroché = bleu pâle, manqué = bleu saturé. Le contraste suffit. */
.d-dot.is-answered { background: var(--d-blue-pale); }

.d-dot.is-missed {
  background: var(--d-blue);
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(46, 75, 255, .16);
}

.d-day-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--d-ink-soft);
}

.d-day-legend span { display: flex; align-items: center; gap: 8px; }
.d-day-legend i { width: 9px; height: 9px; border-radius: 50%; font-style: normal; }

.d-day-axis {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--d-line);
  font-size: 12.5px;
  color: var(--d-grey);
}

/* ================================================ Après 5 sonneries ====== */

.d-relay-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 54px 20px 40px;
}

.d-ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Les cloches grossissent de la 1re à la 5e : la tension monte. */
.d-ring-step {
  position: relative;
  border-radius: 50%;
  border: 1.5px solid var(--d-line);
  background: var(--d-white);
  display: grid;
  place-items: center;
  color: var(--d-blue-pale);
  animation: d-ringstep 5s ease-in-out infinite;
}

.d-ring-item:nth-child(1) .d-ring-step { width: 58px; height: 58px; animation-delay: 0s; }
.d-ring-item:nth-child(2) .d-ring-step { width: 64px; height: 64px; animation-delay: .42s; }
.d-ring-item:nth-child(3) .d-ring-step { width: 70px; height: 70px; animation-delay: .84s; }
.d-ring-item:nth-child(4) .d-ring-step { width: 76px; height: 76px; animation-delay: 1.26s; }
.d-ring-item:nth-child(5) .d-ring-step { width: 84px; height: 84px; animation-delay: 1.68s; }

@keyframes d-ringstep {
  0%, 4%    { border-color: var(--d-line); background: var(--d-white); color: var(--d-blue-pale); box-shadow: none; }
  9%        { border-color: var(--d-blue); background: var(--d-blue-soft); color: var(--d-blue); box-shadow: 0 0 0 6px rgba(46, 75, 255, .1); }
  48%       { border-color: var(--d-blue); background: var(--d-blue-soft); color: var(--d-blue); box-shadow: 0 0 0 6px rgba(46, 75, 255, .1); }
  58%, 100% { border-color: var(--d-line); background: var(--d-white); color: var(--d-blue-pale); box-shadow: none; }
}

/* La cloche s'agite au moment où sa sonnerie s'allume. */
.d-ring-step svg { animation: d-bellswing 5s ease-in-out infinite; transform-origin: 50% 15%; }

.d-ring-item:nth-child(1) .d-ring-step svg { animation-delay: 0s; }
.d-ring-item:nth-child(2) .d-ring-step svg { animation-delay: .42s; }
.d-ring-item:nth-child(3) .d-ring-step svg { animation-delay: .84s; }
.d-ring-item:nth-child(4) .d-ring-step svg { animation-delay: 1.26s; }
.d-ring-item:nth-child(5) .d-ring-step svg { animation-delay: 1.68s; }

@keyframes d-bellswing {
  0%, 5%, 26%, 100% { transform: rotate(0); }
  9%                { transform: rotate(-15deg); }
  13%               { transform: rotate(13deg); }
  17%               { transform: rotate(-9deg); }
  21%               { transform: rotate(6deg); }
}

.d-ring-num {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-grey);
  animation: d-numon 5s ease-in-out infinite;
}

.d-ring-item:nth-child(1) .d-ring-num { animation-delay: 0s; }
.d-ring-item:nth-child(2) .d-ring-num { animation-delay: .42s; }
.d-ring-item:nth-child(3) .d-ring-num { animation-delay: .84s; }
.d-ring-item:nth-child(4) .d-ring-num { animation-delay: 1.26s; }
.d-ring-item:nth-child(5) .d-ring-num { animation-delay: 1.68s; }

@keyframes d-numon {
  0%, 4%, 58%, 100% { color: var(--d-grey); }
  9%, 48%           { color: var(--d-blue); }
}

.d-relay-sep { color: var(--d-blue-pale); flex: none; margin: 0 4px 26px; }

/* Dona prend le relais : une voix, pas une lettre. */
.d-dona-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.d-dona-node {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  color: var(--d-white);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(46, 75, 255, .34);
  animation: d-donapop 5s ease-in-out infinite;
  animation-delay: 2.15s;
}

@keyframes d-donapop {
  0%, 38%   { transform: scale(.7); opacity: .25; }
  46%       { transform: scale(1.08); opacity: 1; }
  52%, 76%  { transform: scale(1); opacity: 1; }
  88%, 100% { transform: scale(.7); opacity: .25; }
}

.d-dona-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--d-blue);
  animation: d-ripple 2.5s cubic-bezier(.2, .6, .35, 1) infinite;
  animation-delay: 2.4s;
}

/* Mini onde vocale à l'intérieur de la pastille Dona. */
.d-dona-wave { display: flex; align-items: center; gap: 3px; height: 30px; }

.d-dona-wave i {
  width: 3px;
  border-radius: 999px;
  background: var(--d-white);
  animation: d-wave 1s ease-in-out infinite;
}

.d-dona-wave i:nth-child(1) { height: 10px; animation-delay: 0s; }
.d-dona-wave i:nth-child(2) { height: 20px; animation-delay: .1s; }
.d-dona-wave i:nth-child(3) { height: 28px; animation-delay: .2s; }
.d-dona-wave i:nth-child(4) { height: 16px; animation-delay: .3s; }
.d-dona-wave i:nth-child(5) { height: 24px; animation-delay: .15s; }

.d-dona-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-blue);
  animation: d-numon 5s ease-in-out infinite;
  animation-delay: 2.15s;
}

.d-relay-caption {
  text-align: center;
  font-size: 14.5px;
  color: var(--d-ink-soft);
  margin-top: 6px;
}

.d-relay-caption b { color: var(--d-ink); }

/* ==================================================== Dona à l'appel ====== */

.d-voice-stage {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
  padding: 26px 16px;
}

.d-orb {
  position: relative;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: linear-gradient(150deg, #4661FF 0%, var(--d-blue-deep) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 22px 60px rgba(46, 75, 255, .38);
  z-index: 2;
}

.d-orb::before, .d-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 75, 255, .45);
  animation: d-orb-wave 2.6s cubic-bezier(.2, .6, .35, 1) infinite;
}

.d-orb::after { animation-delay: 1.3s; }

@keyframes d-orb-wave {
  0%   { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.55); opacity: 0; }
}

.d-wave { display: flex; align-items: center; gap: 3px; height: 42px; }

.d-wave i {
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  animation: d-wave 1.05s ease-in-out infinite;
}

.d-wave i:nth-child(1) { height: 16px; animation-delay: 0s; }
.d-wave i:nth-child(2) { height: 30px; animation-delay: .1s; }
.d-wave i:nth-child(3) { height: 46px; animation-delay: .2s; }
.d-wave i:nth-child(4) { height: 24px; animation-delay: .3s; }
.d-wave i:nth-child(5) { height: 40px; animation-delay: .15s; }
.d-wave i:nth-child(6) { height: 18px; animation-delay: .25s; }
.d-wave i:nth-child(7) { height: 34px; animation-delay: .05s; }
.d-wave i:nth-child(8) { height: 22px; animation-delay: .35s; }

@keyframes d-wave {
  0%, 100% { transform: scaleY(.4); }
  50%      { transform: scaleY(1); }
}

.d-orb-name {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-blue);
}

.d-say {
  position: absolute;
  max-width: 232px;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
  z-index: 3;
}

.d-say.is-in { opacity: 1; transform: none; }
.d-say { transition-duration: .22s; }

.d-say-who {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: var(--d-grey);
}

.d-say.is-dona {
  background: var(--d-blue);
  border-color: var(--d-blue);
  color: var(--d-white);
  box-shadow: 0 14px 34px rgba(46, 75, 255, .26);
}

.d-say.is-dona .d-say-who { color: rgba(255, 255, 255, .75); }

.d-say.p1 { top: 6%;   left: 0; }
.d-say.p2 { top: 24%;  right: 0; }
.d-say.p3 { bottom: 30%; left: 2%; }
.d-say.p4 { bottom: 8%; right: 4%; }

.d-say-confirm {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 10px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px;
  border-radius: 14px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow-lg);
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
  z-index: 4;
}

.d-say-confirm.is-in { opacity: 1; transform: translate(-50%, 0); }

.d-check {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--d-green);
  display: grid;
  place-items: center;
}

.d-confirm-name { font-size: 13.5px; font-weight: 700; }
.d-confirm-meta { font-size: 11.5px; color: var(--d-grey); margin-top: 1px; }

/* ==================================================== Fonctionnalités ==== */

/* Six containers strictement identiques : même structure, même hauteur,
   aucun visuel en boucle. L'homogénéité prime sur l'effet. */
.d-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.d-feat {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border-radius: var(--d-radius);
  border: 1px solid var(--d-line);
  background: var(--d-white);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.d-feat:hover {
  border-color: var(--d-blue-line);
  transform: translateY(-3px);
  box-shadow: var(--d-shadow);
}

.d-feat-ico {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--d-blue-soft);
  color: var(--d-blue);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}

.d-feat h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

.d-feat p {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--d-ink-soft);
}

/* Les exemples ferment chaque carte à la même hauteur visuelle. */
.d-feat-list {
  margin-top: auto;
  list-style: none;
  padding: 18px 0 0;
  border-top: 1px solid var(--d-line);
}

.d-feat-list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 13px;
  color: var(--d-ink-soft);
  line-height: 1.45;
}

.d-feat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--d-blue);
}

/* ==================================================== Simulateur ========= */

.d-sim { display: grid; grid-template-columns: .92fr 1.08fr; gap: 0; overflow: hidden; }

.d-sim-controls { padding: 42px; }
.d-sim-field { margin-bottom: 34px; }
.d-sim-field:last-child { margin-bottom: 0; }

.d-sim-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 15px; }
.d-sim-label span:first-child { font-size: 14.5px; font-weight: 500; color: var(--d-ink-soft); }
.d-sim-label output { font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--d-ink); }

.d-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--d-line);
  outline: none;
}

.d-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--d-white);
  border: 1px solid rgba(10, 13, 28, .1);
  box-shadow: 0 2px 9px rgba(10, 13, 28, .2);
  cursor: pointer;
}

.d-range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--d-white);
  border: 1px solid rgba(10, 13, 28, .1);
  box-shadow: 0 2px 9px rgba(10, 13, 28, .2);
  cursor: pointer;
}

.d-range-scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--d-grey); }

.d-sim-out {
  padding: 42px;
  background: linear-gradient(155deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  color: var(--d-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.d-sim-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

.d-sim-big {
  font-size: clamp(46px, 6.4vw, 84px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  margin: 14px 0 6px;
  font-variant-numeric: tabular-nums;
}

.d-sim-per { font-size: 15.5px; color: rgba(255, 255, 255, .78); }

.d-sim-year {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .8);
}

.d-sim-year strong { font-size: 25px; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.d-sim-out .d-note { color: rgba(255, 255, 255, .6); }

/* ============================================ Les 4 cas réels =========== */

.d-case {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.d-case:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: var(--d-blue-line);
  box-shadow: var(--d-shadow-lg);
}

.d-case-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  display: grid;
  place-items: center;
  padding: 5px;
  margin-bottom: 16px;
}

.d-case-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.d-case-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--d-blue);
  margin-bottom: 10px;
}

.d-case-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
  min-height: 45px;
}

.d-case-big {
  margin-top: 20px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--d-blue);
  font-variant-numeric: tabular-nums;
}

.d-case-big-lab { font-size: 12px; color: var(--d-grey); margin-top: 5px; }

.d-spark { margin-top: 22px; }
.d-spark svg { width: 100%; height: auto; display: block; }

.d-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--d-grey);
}

.d-case-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--d-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--d-ink-soft);
}

.d-case-foot b { color: var(--d-ink); font-weight: 700; }

/* ============================================ Pipeline 14 jours ========= */

.d-pipe { position: relative; margin-top: 60px; padding-left: 84px; }

/* Le trait vertical se remplit au fil du scroll. */
.d-pipe-rail {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 27px;
  width: 2px;
  background: var(--d-line);
  border-radius: 2px;
  overflow: hidden;
}

.d-pipe-fill {
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  background: linear-gradient(180deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  transition: height .25s linear;
}

.d-pipe-step {
  position: relative;
  padding: 0 0 52px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.d-pipe-step.is-in { opacity: 1; transform: none; }
.d-pipe-step:last-child { padding-bottom: 0; }

.d-pipe-bullet {
  position: absolute;
  left: -84px;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--d-white);
  border: 2px solid var(--d-line);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--d-grey);
  transition: border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}

.d-pipe-step.is-in .d-pipe-bullet {
  border-color: var(--d-blue);
  color: var(--d-white);
  background: linear-gradient(150deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  box-shadow: 0 10px 26px rgba(46, 75, 255, .3);
}

.d-pipe-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--d-blue);
  margin-bottom: 8px;
}

.d-pipe-step h3 {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
}

.d-pipe-step > p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; color: var(--d-ink-soft); max-width: 620px; }

.d-pipe-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dans le fil des étapes, les containers respirent sur trois colonnes. */
.d-pipe-step .d-chans {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0;
  max-width: 780px;
}

.d-pipe-step > p { margin-bottom: 22px; }

.d-pipe-chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--d-blue-soft);
  border: 1px solid var(--d-blue-line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--d-blue);
}

.d-pipe-when {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 11px;
  border-radius: 7px;
  background: var(--d-tint);
  border: 1px solid var(--d-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--d-grey);
  vertical-align: middle;
}

/* ==================================================== L'essai (carte) ==== */

.d-trial-card {
  border-radius: 28px;
  background: linear-gradient(150deg, var(--d-blue) 0%, var(--d-blue-deep) 100%);
  color: var(--d-white);
  padding: 62px 56px;
  box-shadow: 0 26px 70px rgba(46, 75, 255, .3);
  text-align: center;
}

.d-trial-card .d-h2, .d-trial-card .d-display { color: var(--d-white) !important; }
.d-trial-card .d-h2 em { color: #fff; text-decoration: underline; text-underline-offset: 8px; }
.d-trial-card .d-lead { color: rgba(255, 255, 255, .82); margin-left: auto; margin-right: auto; }
.d-trial-card .d-btn-row { justify-content: center; }
.d-trial-card .d-btn-note { color: rgba(255, 255, 255, .68); }

/* ==================================================== Page use cases ===== */

.d-uc-hero { padding: 150px 0 80px; text-align: center; }

/* Chaque établissement est une carte autonome, nettement séparée ------- */

.d-ucard {
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: 26px;
  box-shadow: var(--d-shadow);
  overflow: hidden;
  margin-bottom: 30px;
  scroll-margin-top: 100px;
}

.d-ucard-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 30px 34px;
  background: var(--d-tint);
  border-bottom: 1px solid var(--d-line);
}

/* Pastille au logo de l'établissement : fond blanc neutre, logo contenu. */
.d-ucard-mark {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 16px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  display: grid;
  place-items: center;
  padding: 7px;
  box-shadow: 0 4px 14px rgba(10, 13, 28, .07);
}

.d-ucard-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.d-ucard-id { min-width: 0; flex: 1 1 260px; }

.d-ucard-id h2 {
  margin: 3px 0 4px;
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.d-uc-type { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-blue); }
.d-uc-city { font-size: 13.5px; color: var(--d-grey); }

.d-tag {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--d-white);
  color: var(--d-ink-soft);
  border: 1px solid var(--d-line);
  white-space: nowrap;
}

.d-tag.is-real { background: #ECFAF1; color: #128A4E; border-color: #CDEEDB; }

/* Les chiffres sur toute la largeur : les deux colonnes restent égales. */
.d-ucard-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--d-line);
}

.d-ucard-kpi {
  padding: 26px 20px;
  text-align: center;
  border-right: 1px solid var(--d-line);
}

.d-ucard-kpi:last-child { border-right: 0; }

.d-metric-val { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.d-ucard-kpi.is-money .d-metric-val { color: var(--d-blue); }
.d-metric-lab { font-size: 12px; color: var(--d-grey); margin-top: 8px; line-height: 1.4; }

.d-ucard-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.d-ucard-col { padding: 30px 34px; min-width: 0; }
.d-ucard-col + .d-ucard-col { border-left: 1px solid var(--d-line); background: var(--d-tint); }

.d-ucard-col > p {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--d-ink-soft);
}

.d-col-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-grey);
  margin-bottom: 16px;
}

/* Petits containers : ce que Dona gère sur ce compte -------------------- */

.d-chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; align-items: stretch; }

.d-chan {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid var(--d-line);
  background: var(--d-white);
  transition: border-color .18s ease, transform .18s ease;
}

.d-chan:hover { border-color: var(--d-blue-line); transform: translateY(-2px); }

.d-chan-ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--d-blue-soft);
  color: var(--d-blue);
  display: grid;
  place-items: center;
}

.d-chan-txt { min-width: 0; overflow-wrap: anywhere; }
.d-chan-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.d-chan-sub { font-size: 11.5px; color: var(--d-grey); margin-top: 1px; line-height: 1.35; }

.d-chan.is-key { background: var(--d-blue-soft); border-color: var(--d-blue-line); }
.d-chan.is-key .d-chan-ico { background: var(--d-blue); color: #fff; }

/* Fil de SMS envoyés par Dona ------------------------------------------ */

.d-sms {
  border: 1px solid var(--d-line);
  border-radius: 16px;
  background: var(--d-white);
  padding: 16px;
}

.d-sms-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 12px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--d-line);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-grey);
}

.d-sms-head svg { color: var(--d-blue); flex: none; }

.d-sms-list { display: flex; flex-direction: column; gap: 9px; }

.d-sms-bubble {
  align-self: flex-end;
  max-width: 92%;
  padding: 11px 14px;
  border-radius: 15px;
  border-bottom-right-radius: 5px;
  background: var(--d-blue);
  color: var(--d-white);
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(46, 75, 255, .2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* Les messages apparaissent une fois puis restent lisibles. */
.d-reveal.is-in .d-sms-bubble { opacity: 1; transform: none; }

.d-sms-bubble:nth-child(2) { transition-delay: .18s; }
.d-sms-bubble:nth-child(3) { transition-delay: .36s; }
.d-sms-bubble:nth-child(4) { transition-delay: .54s; }

.d-sms-tag {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  margin-bottom: 4px;
}

.d-sms-bubble.is-in-reply {
  align-self: flex-start;
  background: var(--d-white);
  color: var(--d-ink);
  border: 1px solid var(--d-line);
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 5px;
  box-shadow: none;
}

.d-sms-bubble.is-in-reply .d-sms-tag { color: var(--d-grey); }

.d-sms-foot {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--d-line);
  font-size: 11.5px;
  color: var(--d-grey);
  display: flex;
  justify-content: space-between;
}

.d-sms-foot b { color: var(--d-blue); }

/* Bandeau de moyennes : quatre chiffres, centrés, jamais étirés --------- */

.d-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.d-stat {
  text-align: center;
  padding: 30px 18px;
  border-radius: var(--d-radius);
  border: 1px solid var(--d-line);
  background: var(--d-white);
}

.d-stat-val {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--d-blue);
  font-variant-numeric: tabular-nums;
}

.d-stat-lab {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--d-grey);
}

/* ==================================================== Animations ========= */

.d-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.d-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .d-reveal, .d-say, .d-say-confirm, .d-calc-row, .d-pipe-step {
    opacity: 1; transform: none; transition: none;
  }
  .d-ringer span, .d-ringer-core, .d-ring-step, .d-dona-node, .d-dona-node::after,
  .d-orb::before, .d-orb::after, .d-wave i, .d-mini-row, .d-lang, .d-clock i,
  .d-vip-tag, .d-relay-arrow { animation: none; }
  .d-dot { transition: none; }
}

/* ==================================================== Responsive ========= */

@media screen and (max-width: 991px) {
  .d-section { padding: 80px 0; }
  .d-cost, .d-sim, .d-uc-body, .d-ucard-body { grid-template-columns: minmax(0, 1fr); }
  .d-ucard-col + .d-ucard-col { border-left: 0; border-top: 1px solid var(--d-line); }
  .d-ucard-kpis { grid-template-columns: repeat(2, 1fr); }
  .d-ucard-kpi:nth-child(2) { border-right: 0; }
  .d-ucard-kpi:nth-child(1), .d-ucard-kpi:nth-child(2) { border-bottom: 1px solid var(--d-line); }
  .d-grid.is-2, .d-grid.is-3, .d-grid.is-4 { grid-template-columns: 1fr; }
  .d-feats { grid-template-columns: repeat(2, 1fr); }
  .d-voice-stage { display: block; min-height: auto; padding: 20px 0; }
  .d-say { position: static; max-width: none; margin-bottom: 12px; }
  .d-say-confirm { position: static; transform: none; margin-top: 12px; }
  .d-say-confirm.is-in { transform: none; }
  .d-orb { margin: 18px auto 46px; }
  .d-trial-card { padding: 42px 30px; }
  .d-pipe { padding-left: 62px; }
  .d-pipe-step .d-chans { grid-template-columns: 1fr; }
  .d-pipe-rail { left: 20px; }
  .d-pipe-bullet { left: -62px; width: 42px; height: 42px; font-size: 13px; }
  .d-relay-stage { padding: 30px 0; gap: 10px; }
  .d-ring-step { width: 52px; height: 52px; }
  .d-dona-node { width: 68px; height: 68px; font-size: 20px; }
}

@media screen and (max-width: 767px) {
  .d-section { padding: 64px 0; }
  .d-wrap { padding: 0 26px; }
  .d-box, .d-day, .d-sim-controls, .d-sim-out { padding: 24px; }
  .d-calc { padding: 6px 24px; }
  .d-dots { grid-template-columns: repeat(32, 1fr); gap: 5px; }
  .d-day-axis span:nth-child(2), .d-day-axis span:nth-child(4) { display: none; }
  .d-metrics { gap: 22px 16px; }
  .d-grid.is-4, .d-feats { grid-template-columns: 1fr; }
  .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-case-name { min-height: 0; }
  .d-phase-head { gap: 14px; }
  .d-phase-num { width: 48px; height: 48px; font-size: 17px; border-radius: 14px; }
}

/* ============================================ Pages légales ============= */

.d-legal { padding: 140px 0 90px; }
.d-legal .d-wrap { max-width: 820px; }

.d-legal-date {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--d-grey);
}

.d-legal-toc {
  margin: 46px 0 60px;
  padding: 26px 30px;
  border-radius: 18px;
  background: var(--d-tint);
  border: 1px solid var(--d-line);
}

.d-legal-toc-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d-grey);
  margin-bottom: 16px;
}

.d-legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.d-legal-toc li { margin-bottom: 9px; font-size: 14px; break-inside: avoid; }
.d-legal-toc a { color: var(--d-ink); text-decoration: none; }
.d-legal-toc a:hover { color: var(--d-blue); }

.d-legal h2 {
  margin: 54px 0 18px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--d-ink);
  scroll-margin-top: 100px;
}

.d-legal h3 {
  margin: 30px 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.d-legal p, .d-legal li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--d-ink-soft);
}

.d-legal p { margin: 0 0 16px; }
.d-legal ul { margin: 0 0 18px; padding-left: 22px; }
.d-legal li { margin-bottom: 9px; }
.d-legal strong { color: var(--d-ink); }
.d-legal a { color: var(--d-blue); }

.d-legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14px;
}

.d-legal th, .d-legal td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--d-line);
  vertical-align: top;
  line-height: 1.6;
}

.d-legal th { background: var(--d-tint); font-weight: 700; color: var(--d-ink); font-size: 13px; }
.d-legal td { color: var(--d-ink-soft); }

/* Champ que l'éditeur du site doit renseigner avant publication. */
.d-fill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--d-blue-soft);
  border: 1px dashed var(--d-blue);
  color: var(--d-blue);
  font-weight: 600;
  font-size: .93em;
}

.d-callout {
  margin: 34px 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: var(--d-blue-soft);
  border: 1px solid var(--d-blue-line);
}

.d-callout p { margin: 0; color: var(--d-ink); font-size: 14.5px; }
.d-callout p + p { margin-top: 10px; }

/* Liens légaux du pied de page */
.d-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  width: 100%;
  padding: 20px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--d-line);
  font-family: Poppins, system-ui, sans-serif;
}

.d-footer-legal a {
  font-size: 13px;
  color: var(--d-ink-soft);
  text-decoration: none;
  transition: color .16s ease;
}

.d-footer-legal a:hover { color: var(--d-blue); }

@media screen and (max-width: 767px) {
  .d-legal { padding: 100px 0 70px; }
  .d-legal-toc { padding: 22px; }
  .d-legal-toc ol { columns: 1; }
  .d-legal table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   Passe mobile
   Le hero vient de l'export Webflow, dimensionné pour le desktop : ses
   tailles sont reprises ici. Les sections Dona sont resserrées pour que
   chaque container respire sans étirer la page.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* --- En-tête : le logo prenait la moitié de la largeur d'écran ------- */
  .navbar-logo { width: 82px !important; max-width: 82px; height: auto; }

  /* Le conteneur Webflow (hero, nav, pied de page) ne laissait que 15 px
     sur les côtés : on l'aligne sur la marge des sections Dona. */
  .container { padding-left: 26px !important; padding-right: 26px !important; }
  .banner-contant-wrap, .banner-wrapper { padding-left: 0; padding-right: 0; }

  /* --- Hero repris de Webflow ----------------------------------------- */
  .banner-title-2 {
    font-size: 28px !important;
    line-height: 1.16 !important;
    letter-spacing: -.02em;
  }

  .banner-details-2 { font-size: 14.5px !important; line-height: 1.6 !important; }
  .banner-clint-info-2 { font-size: 12.5px !important; line-height: 1.5 !important; }
  .partner-title-2 { font-size: 17px !important; line-height: 1.4 !important; }
  .partner-name-ticker-item { font-size: 36px !important; }
  .primary-button-2 { padding-top: 12px; padding-bottom: 12px; }
  .primary-button-text { font-size: 14.5px !important; }

  /* --- Titres de section ---------------------------------------------- */
  .d-section .d-display { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
  .d-section .d-h2 { font-size: 26px; line-height: 1.14; letter-spacing: -.028em; }
  .d-lead { font-size: 15px; line-height: 1.62; }
  .d-head { margin-bottom: 32px; }
  .d-kicker { font-size: 11.5px; padding: 6px 13px; margin-bottom: 16px; }

  /* --- Boutons : pleine largeur, plus faciles à viser ------------------ */
  .d-btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 14.5px; }
  .d-btn-row { gap: 10px; margin-top: 26px; }

  /* --- Le constat ------------------------------------------------------ */
  .d-cost { gap: 16px; }
  .d-calc-row { padding: 15px 0; gap: 14px; }
  .d-calc-op { width: 33px; height: 33px; font-size: 13px; border-radius: 9px; }
  .d-calc-val { font-size: 16px; }
  .d-calc-unit { font-size: 12.5px; }
  .d-calc-row.is-total .d-calc-val { font-size: 30px; }
  .d-ring-box { padding: 30px 22px 24px; }
  .d-phone-mock { width: 152px; }
  .d-phone-stage span { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
  .d-ring-status { font-size: 14px; }

  /* --- Journée de service --------------------------------------------- */
  .d-day-head { margin-bottom: 20px; gap: 10px; }
  .d-day-title { font-size: 13px; }
  .d-day-counter { font-size: 13px; }
  .d-day-legend { font-size: 12px; gap: 14px; margin-bottom: 18px; }
  .d-day-axis { font-size: 11px; }

  /* --- Les 5 sonneries ------------------------------------------------- */
  .d-relay-stage { gap: 8px; padding: 26px 0 20px; }
  .d-ring-item:nth-child(1) .d-ring-step { width: 40px; height: 40px; }
  .d-ring-item:nth-child(2) .d-ring-step { width: 44px; height: 44px; }
  .d-ring-item:nth-child(3) .d-ring-step { width: 48px; height: 48px; }
  .d-ring-item:nth-child(4) .d-ring-step { width: 52px; height: 52px; }
  .d-ring-item:nth-child(5) .d-ring-step { width: 56px; height: 56px; }
  .d-ring-step svg { width: 16px; height: 16px; }
  .d-ring-num { font-size: 11px; }
  .d-dona-node { width: 60px; height: 60px; }
  .d-dona-wave { height: 22px; gap: 2px; }
  .d-dona-wave i { width: 2.5px; }
  .d-dona-label { font-size: 11px; }
  /* Les 5 sonneries tiennent sur une ligne, Dona passe dessous. */
  .d-relay-sep {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0 2px;
  }
  .d-relay-sep svg { width: 18px; height: 18px; transform: rotate(90deg); }
  .d-dona-item { flex: 0 0 100%; }
  .d-relay-caption { font-size: 13.5px; }

  /* --- L'appel avec Dona ---------------------------------------------- */
  .d-orb { width: 118px; height: 118px; margin: 6px auto 38px; }
  .d-wave { height: 34px; }
  .d-say { font-size: 12.5px; padding: 10px 13px; }
  .d-say-confirm { padding: 12px 16px; }
  .d-confirm-name { font-size: 13px; }

  /* --- Fonctionnalités -------------------------------------------------- */
  .d-feat { padding: 26px 24px; }
  .d-feat-ico { width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; }
  .d-feat h3 { font-size: 17.5px; }
  .d-feat p { font-size: 14px; margin-bottom: 16px; }
  .d-feat-list li { font-size: 12.5px; }

  /* --- Simulateur ------------------------------------------------------ */
  .d-sim-label output { font-size: 19px; }
  .d-sim-label span:first-child { font-size: 13.5px; }
  .d-sim-field { margin-bottom: 28px; }
  .d-sim-big { font-size: 44px; }
  .d-sim-per { font-size: 14.5px; }
  .d-sim-year { font-size: 13.5px; flex-wrap: wrap; gap: 6px; }
  .d-sim-year strong { font-size: 22px; }

  /* --- Cartes établissements (accueil) ---------------------------------
     Deux par ligne : en pleine largeur, le contenu laissait un grand vide
     à droite. Le format compact garde le logo, le nom et le chiffre. */
  .d-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .d-case { padding: 18px 16px; border-radius: 16px; }
  .d-case-logo { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 12px; padding: 4px; }
  /* Le type d'établissement passe à la trappe : logo et nom suffisent,
     le détail est sur la page Résultats. */
  .d-case-type { display: none; }
  /* Deux lignes réservées : les noms longs n'allongent pas leur rangée. */
  .d-case-name { font-size: 14.5px; min-height: 38px; letter-spacing: -.02em; line-height: 1.3; }
  .d-case-big { margin-top: 14px; font-size: 26px; }
  .d-case-big-lab { font-size: 10.5px; margin-top: 4px; }
  .d-case-foot {
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    margin-top: 12px;
    padding-top: 12px;
  }

  /* --- Pipeline des 14 jours ------------------------------------------- */
  .d-pipe { padding-left: 52px; }
  .d-pipe-rail { left: 16px; }
  .d-pipe-bullet { left: -52px; width: 34px; height: 34px; font-size: 12px; }
  .d-pipe-step { padding-bottom: 38px; }
  .d-pipe-step h3 { font-size: 19px; }
  .d-pipe-step > p { font-size: 14px; margin-bottom: 16px; }
  .d-pipe-tag { font-size: 10.5px; }
  .d-pipe-when { font-size: 10.5px; padding: 4px 9px; margin-left: 8px; }

  /* --- Carte d'essai bleue --------------------------------------------- */
  .d-trial-card { padding: 34px 24px; border-radius: 22px; }

  /* --- Page Résultats --------------------------------------------------- */
  /* Deux par ligne et centrés : plus de grand vide à droite. */
  .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .d-stat { padding: 22px 12px; border-radius: 16px; }
  .d-stat-val { font-size: 27px; }
  .d-stat-lab { font-size: 11.5px; margin-top: 7px; }

  /* Chaque établissement doit se détacher nettement du suivant. */
  .d-ucard {
    border-radius: 20px;
    margin-bottom: 38px;
    box-shadow: 0 4px 10px rgba(10, 13, 28, .05), 0 18px 40px rgba(10, 13, 28, .09);
  }
  .d-ucard-head { padding: 24px 22px; gap: 14px; }
  .d-ucard-mark { width: 52px; height: 52px; border-radius: 13px; padding: 6px; }
  .d-ucard-id h2 { font-size: 22px; }
  .d-ucard-col { padding: 24px 22px; }
  .d-chans { grid-template-columns: 1fr; }
  .d-ucard-kpi { padding: 20px 12px; }
  .d-uc-hero { padding: 100px 0 60px; }
  .d-sms-bubble { font-size: 12.5px; padding: 10px 13px; }
  .d-sms-head { font-size: 10.5px; }
  .d-sms-foot { font-size: 10.5px; flex-direction: column; gap: 4px; }

  /* --- Pages légales ---------------------------------------------------- */
  .d-legal h2 { font-size: 20px; margin: 40px 0 14px; }
  .d-legal h3 { font-size: 16px; }
  .d-legal p, .d-legal li { font-size: 14.5px; }
  .d-legal th, .d-legal td { padding: 10px 11px; font-size: 13px; }

  /* --- Pied de page ----------------------------------------------------- */
  /* Le logo est déjà présent en haut de page : inutile de le répéter ici. */
  .footer-logo-wrap { display: none !important; }

  .d-footer-legal { gap: 8px 16px; padding: 16px 0; }
  .d-footer-legal a { font-size: 12.5px; }
}

/* Très petits écrans (iPhone SE et assimilés) */
@media screen and (max-width: 360px) {
  .navbar-logo { width: 74px !important; max-width: 74px; }
  .d-wrap { padding: 0 22px; }
  .container { padding-left: 22px !important; padding-right: 22px !important; }
  .banner-title-2 { font-size: 25px !important; }
  .d-section .d-display { font-size: 27px; }
  .d-section .d-h2 { font-size: 24px; }
  .d-sim-big { font-size: 38px; }
  .d-calc-row.is-total .d-calc-val { font-size: 27px; }
  .d-ucard-kpis { grid-template-columns: 1fr; }
  .d-ucard-kpi { border-right: 0; border-bottom: 1px solid var(--d-line); }
  .d-ucard-kpi:last-child { border-bottom: 0; }
}


/* ==========================================================================
   Appareils tactiles
   Sans souris, l'état :hover reste actif après le tap : le bouton paraît
   se soulever et rester bloqué. On neutralise survol et transitions.
   ========================================================================== */

@media (hover: none) {

  /* Boutons du hero (export Webflow) */
  .primary-button-2,
  .primary-button-2 *,
  .inner-button,
  .inner-button * {
    transition: none !important;
    transform: none !important;
  }

  .primary-button-2:hover,
  .primary-button-2:focus,
  .primary-button-2:active,
  .inner-button:hover,
  .inner-button:active {
    transform: none !important;
    box-shadow: none !important;
  }

  /* L'icône de survol ne doit jamais se substituer à l'icône normale. */
  .primary-button-hover-icon,
  .primary-button-hover-text,
  .inner-button-hover-text { display: none !important; }

  /* Boutons et cartes Dona */
  .d-btn,
  .d-case,
  .d-feat,
  .d-chan,
  .d-ucard,
  .d-logo { transition: none !important; }

  .d-btn:hover,
  .d-btn:active,
  .d-case:hover,
  .d-feat:hover,
  .d-chan:hover {
    transform: none !important;
  }

  .d-btn:hover { background: var(--d-blue); border-color: var(--d-blue); box-shadow: none; }
  .d-btn.is-ghost:hover { background: transparent; }
  .d-btn.is-white:hover { background: var(--d-white); }
  .d-trial-card .d-btn.is-ghost:hover { background: transparent; }
  .d-feat:hover, .d-case:hover { border-color: var(--d-line); box-shadow: none; }
  .d-chan:hover { border-color: var(--d-line); }

  /* Retour visuel au tap, à la place du survol */
  .d-btn:active { opacity: .82; }
  .primary-button-2:active, .inner-button:active { opacity: .82; }
}


/* ==========================================================================
   Hero mobile
   Sans le mockup, le titre doit porter seul : dégradé encre → bleu et
   accent plein sur la promesse.
   ========================================================================== */

/* Masqué par défaut : le desktop garde son titre d'origine. */
.d-hero-m { display: none; }

@media screen and (max-width: 767px) {

  .d-hero-m { display: block; text-align: center; padding: 6px 0 4px; }

  /* Le titre desktop laisse la place à la version mobile. */
  .banner-title-wrapper { display: none !important; }

  .d-hero-m-title {
    margin: 0;
    font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.035em;
    font-weight: 700;

    /* Dégradé du noir vers le bleu, appliqué au texte lui-même. */
    background: linear-gradient(155deg, var(--d-ink) 0%, #1B2A6B 45%, var(--d-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--d-ink);
  }

  /* L'accent reste en bleu plein : c'est la promesse qu'on retient. */
  .d-hero-m-title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--d-blue) 0%, #5B79FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .d-hero-m-sub {
    margin: 16px auto 0;
    max-width: 300px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--d-ink-soft);
  }
}

@media screen and (max-width: 360px) {
  .d-hero-m-title { font-size: 30px; }
  .d-hero-m-sub { font-size: 13.5px; }
}

/* Si le dégradé sur texte n'est pas supporté, on retombe sur du plein. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .d-hero-m-title { -webkit-text-fill-color: currentColor; color: var(--d-ink); }
  .d-hero-m-title em { -webkit-text-fill-color: currentColor; color: var(--d-blue); }
}