/* Thème de la niche SERVICES À DOMICILE (agences de services à la personne). Créé le 22/10/2026 en prune,
   repassé le 22/10/2026 en BLEU NUIT et ABRICOT pour se distinguer nettement de la page formation (prune encre et ocre).
   Mêmes noms de jetons et mêmes rôles que theme-energie.css : seules les valeurs changent.
   Pourquoi : le bleu nuit (teinte vers 220°) est à l'opposé du prune de la formation (vers 290°) et du vert de l'énergie (vers 150°) ;
   il dit la confiance, celle qu'on accorde à qui garde ses enfants ou s'occupe de son parent. La chaleur vient de l'abricot
   (la lumière de la maison le soir, cousin de l'orange de marketway.fr), de la terre cuite des boutons et des fonds crème.
   Contrastes (WCAG AA, calculés le 22/10) : encre/papier 15,3 · ink-2/papier 9,4 · ink-3/papier 5,6 · ink-3/papier-2 5,0 ·
   ink-3/fond pêche 5,5 · accent-text/papier 5,4 · accent-text/fond pêche 5,2 · accent-text/surface 5,7 · accent-text/papier-2 4,8 ·
   texte du bouton clair 5,2 · texte nuit/nuit 15,4 · night-text-2/nuit 12,5 · night-muted/nuit 7,5 (6,0 sur night-3) ·
   accent-night/nuit 9,8 · texte du bouton sombre 10,7 · encre sur les quatre étiquettes d'activité 12,1 à 13,5 · perte 5,9.
   --accent (#f08a4b) reste décoratif : jamais pour du texte. */

:root{
  color-scheme:light;
  /* Fonds et encre clairs (crème chaud, encre bleu nuit, jamais de blanc ni de gris purs) */
  --paper:#f8f3ec;
  --paper-2:#efe6da;
  --surface:#fffbf6;
  --ink:#141d2e;
  --ink-rgb:20 29 46;
  --ink-2:#33405a;
  --ink-3:#56617a;
  --line:#e3d9cc;
  --line-strong:#cbbfae;

  /* Accent réservé aux actions */
  --accent:#f08a4b;
  --accent-text:#a8461a;
  --on-accent:#1a0f08;
  --focus:#a8461a;

  /* Signal : le point du logo et des surtitres, la lumière de la maison le soir (abricot) */
  --signal:#f4a259;
  --logo-mark:#141d2e;
  --niche-border:#e9b892;

  /* Bouton principal sur fond clair : terre cuite */
  --cta-bg:#b2491b;
  --cta-fg:#fffaf5;
  --cta-fill:#141d2e;
  --cta-fg-hover:#fffaf5;
  --cta-icon-bg:#ffffff26;

  /* Bleu nuit : hero, bandes sombres, preuve, appel final, pied de page */
  --night:#111a2e;
  --night-rgb:17 26 46;
  --night-2:#17233b;
  --night-3:#1e2c48;
  --night-line:#2c3d5e;
  --night-text:#f6f1ea;
  --night-text-2:#d5dbe6;
  --night-muted:#9fabc0;
  --accent-night:#ffb27e;
  --accent-night-rgb:255 178 126;
  --cta-night-bg:#ffb27e;
  --cta-night-fg:#1a0f08;
  --cta-night-fill:#f6f1ea;
  --cta-night-fg-hover:#1a0f08;
  --cta-night-icon-bg:#1a0f081f;

  /* Illustrations */
  --phone-body:#0b1120;
  --phone-edge:#2f3d5a;
  --motif-opacity:.9;
  --radius-zone:#ffb27e;
  --dot-other:#6b7891;

  /* Fonds clairs teintés (agenda, après, démonstrations) : pêche très clair, sous les mêmes noms de jetons */
  --mint:#fcefe4;
  --mint-2:#f8dcc6;
  --mint-line:#efc9ab;
  /* Étiquettes : les quatre jetons servent aux quatre activités (voir les classes plus bas) */
  --tag-sun:#fde3b0;
  --tag-heat:#f9d3bd;
  --tag-iso:#d6e4f2;
  --tag-wood:#e3def0;
  --lost:#a3262f;
  --lost-bg:#f8e2e0;
  --ok-bg:#b2491b;
  --ok-fg:#fffaf5;
}

/* Motif du hero propre à la niche : une maison au centre d'un rayon, en traits fins */
.hero::before{background-image:url(images/motif-services.svg)}

/* Étiquettes d'activité (mêmes jetons que les métiers de l'énergie, noms lisibles) */
.t-garde{background:var(--tag-sun)}
.t-aide{background:var(--tag-heat)}
.t-menage{background:var(--tag-iso)}
.t-soutien{background:var(--tag-wood)}

/* base.css garde une pulsation verte en dur (@keyframes ping) : redéfinie ici aux couleurs de la niche */
@keyframes ping{0%{box-shadow:0 0 0 0 rgb(240 138 75 / .5)}100%{box-shadow:0 0 0 10px rgb(240 138 75 / 0)}}

/* ---------- Composants propres à la page services (candidats pour common/base.css) ---------- */

/* Citation d'une dirigeante dans la bande de preuve */
.quote{margin:0;padding:1.2rem 1.3rem 1.1rem;border-radius:var(--radius-lg);background:var(--night-2);border:1px solid var(--night-line);display:grid;gap:.7rem;max-width:40rem}
.quote p{font-size:var(--fs-lg);line-height:1.45;font-weight:560;color:var(--night-text);letter-spacing:-.01em}
.quote footer{font-size:.875rem;color:var(--night-muted)}
.quote footer b{color:var(--night-text-2);font-weight:620}

/* Estimation montrée dans le parcours : écrans de démonstration au lieu de captures */
.phones-tag{display:flex;justify-content:center;margin-top:.4rem}
.phones-tag .demo-tag{white-space:normal;text-align:center}

/* Encart franchisés (section Pour qui) */
.franchise{margin-top:1.4rem;display:grid;gap:1.2rem;padding:clamp(1.3rem,1rem + 1.2vw,2rem);border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--mint-line);box-shadow:var(--shadow)}
.franchise h3{font-size:var(--fs-xl);line-height:1.15}
.franchise > div > p{color:var(--ink-2);margin-top:.6rem;max-width:58ch}
.franchise-split{display:grid;gap:.75rem}
.franchise-split div{padding:1rem 1.1rem;border-radius:var(--radius);background:var(--mint);border:1px solid var(--mint-line)}
.franchise-split b{display:block;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);margin-bottom:.35rem}
.franchise-split p{font-size:.95rem;line-height:1.45;color:var(--ink)}
@media (min-width:860px){.franchise{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.franchise-split{grid-template-columns:1fr 1fr}}

/* Champ avec indication (agenda) */
.fld input::placeholder{color:var(--ink-3);opacity:1}
.proof .stats + .market-note{margin-top:1.1rem}
.proof .quote{margin-top:1.3rem}
.franchise h3{margin-top:.7rem}
/* Sur téléphone, la maison du motif passe sous le surtitre : on l'atténue */
@media (max-width:600px){.hero::before{opacity:.4}}

/* Encart intervenants (section Pour qui) : l'option recrutement, avec sa démonstration de candidature.
   Le texte garde le rappel du réglage sur la capacité côté familles. */
.capacity{margin-top:1.4rem;display:grid;gap:1.3rem;padding:clamp(1.3rem,1rem + 1.2vw,2rem);border-radius:var(--radius-lg);background:var(--mint);border:1px solid var(--mint-line)}
.capacity h3{font-size:var(--fs-xl);line-height:1.15;margin-top:.7rem}
.capacity p{color:var(--ink-2);margin-top:.6rem;max-width:62ch}
.capacity .cap-note{font-size:.95rem;line-height:1.5}
.cap-jobs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.cap-jobs .t{font-size:.85rem;padding:.2rem .65rem}
@media (min-width:860px){.capacity{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:2rem}}

/* Étiquette « En option » (encart intervenants et brique de l'offre) */
.opt-tag{display:inline-block;vertical-align:.2em;margin-left:.35rem;padding:.18rem .55rem;border-radius:var(--radius-pill);border:1px dashed var(--accent-text);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;line-height:1.3;color:var(--accent-text);white-space:nowrap}
.stack li.stack-opt{border-style:dashed;border-color:var(--line-strong);background:var(--paper)}

/* Démonstration : une candidature arrive, puis l'entretien choisi par le candidat */
.rec-win{align-self:center}
.rec{padding:1rem;display:grid;gap:.8rem}
.rec-card{padding:.9rem 1rem;border-radius:14px;background:var(--surface);border:1px solid var(--mint-line);box-shadow:0 10px 24px -16px rgb(var(--ink-rgb) / .45);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.rec-card.is-swap{opacity:0;transform:translateY(6px)}
.rec-who{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem}
.rec-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint-2);color:var(--accent-text);font-weight:700;font-size:.85rem}
.rec-who b{display:block;font-size:.95rem;font-weight:680;line-height:1.2}
.rec-who small{display:block;font-size:.8rem;color:var(--ink-3);margin-top:.15rem}
.rec-who small .t{font-size:.75rem;color:var(--ink)}
.rec-rows{display:grid;border-top:1px solid var(--line)}
.rec-rows li{display:flex;justify-content:space-between;gap:.8rem;padding:.42rem 0;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.35}
.rec-rows span{color:var(--ink-3)}
.rec-rows b{font-weight:620;text-align:right}
.rec-ok b{font-weight:680}
@media (max-width:520px){.rec-rows li{flex-direction:column;gap:.05rem}.rec-rows b{text-align:left}.rec{padding:.8rem}}