/* ══════════════════════════════════════════════════════════════════
   GROOMLY — devenir Groom
   Refaite le 16 septembre 2026, dans le registre du reste du site :
   LE TABLEAU DE SERVICE. Le haut de page est celui de l'accueil.

   ══ CE QUI A CHANGE, ET UNE CHOSE QUI COMPTE PLUS QUE LE DESSIN ═══

   LE MOT « NET » A DISPARU DU SIMULATEUR, ET C'EST VOLONTAIRE.
   La page annonçait « montant net : c'est exactement ce que vous
   touchez ». Pour un salarié, « net » veut dire qu'il ne reste rien à
   payer. Pour un indépendant — et tous les Grooms le sont — c'est
   faux : ce montant est un CHIFFRE D'AFFAIRES. Il faut encore en
   sortir les cotisations sociales et l'impôt. Quelqu'un qui décide de
   travailler avec Groomly sur la foi de ce mot se trompe sur son
   revenu réel, et ce n'est pas une nuance de vocabulaire : c'est la
   différence entre un chiffre et ce qui reste sur le compte.
   Le simulateur dit maintenant « ce que Groomly vous verse », et la
   mention dit ce qui reste à la charge du Groom.

   Pour le reste : le hero sombre est parti, les quatre conditions
   étaient quatre cartes et sont devenues quatre lignes numérotées, et
   les boutons qui menaient à l'App Store mènent à l'inscription —
   elle se fait sur le site.

   Le script devenir-groom.js attend : #dg, #dg-surface, #dg-valeur,
   #dg-linge, #dg-vitres, #dg-repassage, #dg-exterieur, #dg-grand,
   #dg-lits, #dg-double, #dg-simple, #dg-net, #dg-sous, #dg-taux,
   #dg-detail, et il injecte des .dg-l. Ne rien renommer sans le relire.
   ══════════════════════════════════════════════════════════════════ */

.dg {
  --dg-encre:    #0d0d10;
  --dg-encre-2:  #3f3f46;
  --dg-gris:     #65656e;
  --dg-gris-2:   #9a9aa3;
  --dg-filet:    #e4e4e7;
  --dg-filet-f:  #d4d4d8;
  --dg-papier:   #ffffff;
  --dg-bande:    #f6f6f4;
  --dg-nuit:     #12141c;
  --dg-rose:     #e11d48;
  --dg-rose-2:   #be123c;
  --dg-vert:     #0b6b5b;
  --dg-vert-2:   #08594b;
  --dg-max:      1160px;
}

body.dg-page { background: var(--dg-papier); color: var(--dg-encre); }
.dg ::selection { background: #fff1f3; color: var(--dg-encre); }

.dg-env { width: 100%; max-width: var(--dg-max); margin: 0 auto; padding: 0 24px; }
.dg b, .dg th, .dg td { font-variant-numeric: tabular-nums; }

.dg-micro {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--dg-gris-2);
}
.dg-h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.4rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -.035em;
  color: var(--dg-encre); max-width: 22ch;
}
.dg-intro { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.62; color: var(--dg-gris); max-width: 62ch; }

.dg-sect { padding: 72px 0; border-top: 1px solid var(--dg-filet); }
.dg-sect-bande { background: var(--dg-bande); }
@media (min-width: 900px) { .dg-sect { padding: 96px 0; } }

/* ── Les boutons ───────────────────────────────────────────────── */
.dg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dg-btn svg { width: 18px; height: 18px; flex: none; }
.dg-btn-plein { background: var(--dg-rose); color: #fff; }
.dg-btn-plein:hover { background: var(--dg-rose-2); }
.dg-btn-ligne { background: var(--dg-papier); color: var(--dg-encre); border-color: var(--dg-filet-f); }
.dg-btn-ligne:hover { border-color: var(--dg-encre); }
.dg-btn-blanc { background: #fff; color: var(--dg-nuit); }
.dg-btn-blanc:hover { background: #ededf0; }
.dg-btn:focus-visible { outline: 2px solid var(--dg-rose); outline-offset: 3px; }

/* ══ LE HAUT DE PAGE — celui de l'accueil ══════════════════════════ */
.dg-haut { padding: 44px 0 56px; }
@media (min-width: 900px) { .dg-haut { padding: 60px 0 72px; } }
.dg-fil { margin: 0 0 20px; font-size: .82rem; color: var(--dg-gris-2); }
.dg-fil a { color: var(--dg-gris); text-decoration: none; }
.dg-fil a:hover { color: var(--dg-encre); text-decoration: underline; text-underline-offset: 3px; }
.dg-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.3rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -.045em;
  color: var(--dg-encre); max-width: 17ch;
}
.dg-h1 em { font-style: normal; color: var(--dg-gris); }
.dg-sous { margin: 22px 0 0; font-size: 1.08rem; line-height: 1.6; color: var(--dg-encre-2); max-width: 56ch; }
.dg-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.dg-faits { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 0; max-width: 640px; }
.dg-fait {
  display: flex; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--dg-filet);
  font-size: .95rem; line-height: 1.5; color: var(--dg-encre-2);
}
.dg-fait:last-child { border-bottom: 1px solid var(--dg-filet); }
.dg-fait b { color: var(--dg-encre); font-weight: 700; }
.dg-fait svg { width: 15px; height: 15px; flex: none; color: var(--dg-vert); transform: translateY(2px); }

/* ══ LE SIMULATEUR ═════════════════════════════════════════════════ */
.dg-outil {
  margin-top: 40px;
  border: 1px solid var(--dg-filet-f); border-radius: 14px;
  overflow: hidden; background: var(--dg-papier);
}
.dg-resultat {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 24px; background: var(--dg-bande);
  border-bottom: 1px solid var(--dg-filet);
}
.dg-quoi { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dg-gris-2); }
.dg-net { margin: 5px 0 0; font-size: 2.4rem; line-height: 1; font-weight: 800;
  letter-spacing: -.05em; color: var(--dg-encre); font-variant-numeric: tabular-nums; }
.dg-sous-r { margin: 0; font-size: .88rem; color: var(--dg-gris); }
.dg-taux { margin: 10px 0 0; flex-basis: 100%; font-size: .9rem; color: var(--dg-encre-2); }
.dg-taux b { font-weight: 700; color: var(--dg-encre); }

.dg-bloc { padding: 22px 24px; border-bottom: 1px solid var(--dg-filet); }
.dg-legende {
  display: block; margin-bottom: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--dg-gris-2);
}
.dg-surface { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.dg-surface b { font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--dg-encre); }
.dg-surface span { font-size: .9rem; font-weight: 700; color: var(--dg-gris); }

.dg-curseur {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; margin: 16px 0 0; background: none; cursor: pointer;
}
.dg-curseur::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: var(--dg-filet); }
.dg-curseur::-moz-range-track { height: 3px; border-radius: 99px; background: var(--dg-filet); }
.dg-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12.5px;
  border-radius: 9px; background: var(--dg-encre); border: 0;
  box-shadow: 0 2px 6px -2px rgba(13,13,16,.5);
}
.dg-curseur::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: var(--dg-encre); border: 0; }
.dg-curseur:focus-visible { outline: 2px solid var(--dg-rose); outline-offset: 4px; border-radius: 10px; }
.dg-bornes { display: flex; justify-content: space-between; margin-top: 8px; font-size: .78rem; color: var(--dg-gris-2); }

.dg-options { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-opt {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--dg-filet); border-radius: 9px;
  font-size: .88rem; font-weight: 600; color: var(--dg-encre-2);
  cursor: pointer; transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.dg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.dg-opt:hover { border-color: var(--dg-filet-f); }
.dg-opt:has(input:checked) { border-color: var(--dg-encre); background: var(--dg-encre); color: #fff; }
.dg-opt:has(input:focus-visible) { outline: 2px solid var(--dg-rose); outline-offset: 2px; }
.dg-plus { font-weight: 700; color: var(--dg-gris-2); }
.dg-opt:has(input:checked) .dg-plus { color: rgba(255,255,255,.7); }

.dg-lits { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.dg-lits[hidden] { display: none; }
.dg-lit {
  flex: 1; min-width: 150px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 14px; min-height: 52px;
  border: 1px solid var(--dg-filet); border-radius: 9px; background: var(--dg-bande);
  font-size: .9rem; font-weight: 600; color: var(--dg-encre-2);
}
.dg-lit input {
  width: 68px; min-height: 40px; padding: 0 8px; text-align: center;
  border: 1px solid var(--dg-filet-f); border-radius: 8px; background: var(--dg-papier);
  font: inherit; font-size: 1rem; color: var(--dg-encre);
}
.dg-lit input:focus { outline: none; border-color: var(--dg-rose); }

/* Le detail, injecte par devenir-groom.js sous forme de .dg-l */
.dg-detail { padding: 6px 24px 0; }
.dg-l {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--dg-filet);
  font-size: .9rem; color: var(--dg-gris);
}
.dg-l:last-child { border-bottom: 0; }
.dg-l b { font-weight: 700; color: var(--dg-encre); font-variant-numeric: tabular-nums; }

/* ── La mention qui remplace le mot « net » ────────────────────────
   Elle n'est pas en petits caracteres gris au fond du panneau : c'est
   l'information qui change le calcul d'un independant. */
.dg-mention {
  margin: 0; padding: 18px 24px 24px;
  font-size: .88rem; line-height: 1.6; color: var(--dg-encre-2);
}
.dg-mention b { color: var(--dg-encre); font-weight: 700; }
.dg-mention span { display: block; margin-top: 10px; font-size: .8rem; color: var(--dg-gris-2); }

/* ══ LES CONDITIONS ════════════════════════════════════════════════ */
.dg-conds { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--dg-encre); }
.dg-cond {
  display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px;
  padding: 24px 0; border-bottom: 1px solid var(--dg-filet);
}
/* Chaque enfant dit sa colonne : en deux colonnes pour trois enfants,
   le placement automatique renvoie le paragraphe dans la colonne du
   numero, large de 44 px. */
.dg-cond-nb { grid-column: 1; grid-row: 1; font-size: .82rem; font-weight: 700; color: var(--dg-vert); padding-top: 2px; }
.dg-cond b   { grid-column: 2; grid-row: 1; font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; color: var(--dg-encre); }
.dg-cond p   { grid-column: 2; grid-row: 2; margin: 8px 0 0; font-size: .95rem; line-height: 1.6; color: var(--dg-gris); }
@media (min-width: 860px) {
  .dg-cond { grid-template-columns: 44px 300px 1fr; gap: 28px; align-items: baseline; }
  .dg-cond p { grid-column: 3; grid-row: 1; margin: 0; }
}

/* ══ LE PAIEMENT ═══════════════════════════════════════════════════ */
.dg-registre { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--dg-encre); }
@media (min-width: 820px) { .dg-registre { grid-template-columns: repeat(3, 1fr); gap: 0 1px; background: var(--dg-filet); } }
.dg-reg { background: var(--dg-papier); padding: 24px 0; border-bottom: 1px solid var(--dg-filet); }
@media (min-width: 820px) { .dg-reg { padding: 26px; border-bottom: 0; } }
.dg-reg h3 { margin: 10px 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.dg-reg p { margin: 9px 0 0; font-size: .93rem; line-height: 1.6; color: var(--dg-gris); }

/* ══ LES PIECES A FOURNIR ══════════════════════════════════════════ */
.dg-pieces { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--dg-encre); max-width: 900px; }
.dg-piece {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--dg-filet);
}
.dg-piece svg { width: 16px; height: 16px; flex: none; color: var(--dg-vert); transform: translateY(2px); }
.dg-piece b { display: block; font-size: 1rem; font-weight: 700; color: var(--dg-encre); }
.dg-piece span { display: block; margin-top: 5px; font-size: .92rem; line-height: 1.55; color: var(--dg-gris); }
.dg-mollie { margin: 26px 0 0; padding: 18px 20px;
  border: 1px solid var(--dg-filet); border-radius: 12px; background: var(--dg-bande);
  font-size: .9rem; line-height: 1.6; color: var(--dg-encre-2); max-width: 900px; }
.dg-mollie b { color: var(--dg-encre); font-weight: 700; }

/* ══ L'APPEL FINAL ═════════════════════════════════════════════════ */
.dg-fin { background: var(--dg-nuit); color: #fff; padding: 80px 0; }
.dg-fin h2 { margin: 0; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.1; font-weight: 800; letter-spacing: -.04em; max-width: 20ch; }
.dg-fin p { margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; color: #a8a8b2; max-width: 54ch; }
.dg-fin-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.dg-fin .dg-btn-ligne { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.dg-fin .dg-btn-ligne:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after { transition-duration: .01ms !important; }
}