/* ============================================================
   ANIMONS — La couleur du monde « planning »
   ------------------------------------------------------------
   Yann, le 20/09 : « le cadre est mal centré, le fond saumon très
   clair on ne voit pas grand-chose, et tu écris du blanc sur du
   blanc. Fais-moi un fond d'une autre couleur, pourquoi pas vert. »

   Les écrans du planning venaient de deux chartes différentes :
   « Les outils du planning » en bleu (design-v3), « Éditer le
   planning », « Mon planning » et « Mes horaires » en crème et
   orange (design-system). D'où les titres blancs posés sur du blanc
   et les cadres qui ne tombaient pas au même endroit.

   Cette feuille, chargée EN DERNIER sur ces écrans, leur donne une
   seule identité : un fond vert (le teal de la charte), des cartes
   blanches, un accent vert foncé. Le reste de l'application garde
   son bleu ; le planning se reconnaît d'un coup d'œil.
   ============================================================ */

:root{
  /* Le fond des écrans du planning */
  --pl-vert:linear-gradient(165deg,#5fc4b1 0%,#35a48f 55%,#2b8a7a 100%);
  --pl-fonce:#1e7a63;
  --pl-clair:#e7f6ef;

  /* Variables héritées, remises aux couleurs du planning */
  --bg-gradient:var(--pl-vert);
  --primary-planning:#2f8a5d;
  --primary-planning-light:#57bfaf;
  --primary-planning-dark:var(--pl-fonce);
  --header-text:#ffffff;
  --gold:var(--pl-fonce);
  --teal:#2f8a5d;
  --night:transparent;
  --night2:#ffffff;
  --cream:#16324f;
  --accent-dark:transparent;
}

body, body.v3-body{
  background:var(--pl-vert) !important;
  color:var(--v3-ink, #1e2a3b);
}

/* ---------- Les titres ----------
   Ils sont posés sur le fond vert : ils s'écrivent en blanc, et
   jamais avec une ombre portée héritée d'un autre habillage. */
header h1, .v3-title{
  color:#fff !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  text-shadow:0 2px 10px rgba(10,60,50,.28) !important;
  letter-spacing:0;
}
.v3-eyebrow, .v3-sub{ color:rgba(255,255,255,.88) !important; }

/* Le bouton de retour de ces pages : du verre dépoli, comme ailleurs. */
.btn-accueil{
  background:rgba(255,255,255,.22) !important;
  color:#fff !important;
  border:0 !important;
  font-weight:900;
  border-radius:999px;
  padding:.55em 1.1em;
  text-decoration:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ---------- Les cartes ----------
   Fond blanc franc, texte encre : de quoi lire sans plisser les yeux. */
.tile, .panel, .card, .day-card, .stat-card, .stepper, .activity-card,
.dc-card, .planning-card, .box{
  background:#fff !important;
  color:var(--v3-ink, #1e2a3b);
  border-color:#e7edf5 !important;
}
.tile h2, .tile p, .panel h2{ color:inherit; }

/* Un titre de section posé sur le vert reste blanc. */
main > h2, main > h3, .section-title{ color:#fff; }

/* ---------- Les boutons d'action ---------- */
.btn-primary, .btn-action, .btn-valider, .stepper-item.current{
  background:var(--pl-fonce) !important;
  color:#fff !important;
  border-color:var(--pl-fonce) !important;
}
.btn-secondaire, .btn-ghost{
  background:var(--pl-clair) !important;
  color:var(--pl-fonce) !important;
  border-color:transparent !important;
}

/* ---------- Le centrage ----------
   Les pages posaient leur contenu dans des largeurs différentes :
   d'un écran à l'autre, le cadre sautait. Une seule règle. */
main, .container, .wrap, .v3-wrap{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}