/* ============================================================================
   careplan_asso — Charte graphique de la composante « association »

   Couleur affectée : CYAN, dans la logique de différenciation des composants
   de l'écosystème. Registre volontairement plus INSTITUTIONNEL que celui de
   l'application principale : fond papier plutôt que crème, filets nets,
   typographie sobre. Le wordmark, lui, ne change pas : « Care- » en terra,
   « Planner » en encre.

   Règles d'ergonomie reprises de l'écosystème :
     - un SEUL ascenseur (le document) : jamais de conteneur scrollable imbriqué
     - navigation interne en POST (form.cp-navform + button.cp-navlink)
     - aucune alerte native : modales et messages en ligne
   ============================================================================ */

:root {
  /* Couleur de la composante */
  --cyan:        #0E7C86;
  --cyan-fonce:  #095A62;
  --cyan-vif:    #12A3B0;
  --cyan-pale:   #E4F2F4;
  --cyan-voile:  #F2F9FA;

  /* Constantes de marque (partagées avec les autres composantes) */
  --terra:       #D35A2A;
  --encre:       #2C2117;
  --encre-doux:  #4A3A2C;

  /* Fond institutionnel */
  --papier:      #FAFCFC;
  --papier-2:    #FFFFFF;
  --filet:       #D9E4E6;
  --filet-fort:  #B8CCCF;

  --alerte:      #B4471F;
  --succes:      #1F7A4D;

  --font:        Arial, Helvetica, sans-serif;
  --header-h:    76px;
  --contain:     1140px;
  --radius:      4px;      /* anguleux : registre institutionnel */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navigation en POST ──────────────────────────────────────────────────── */
form.cp-navform { margin: 0; padding: 0; display: inline; }
form.cp-navform.block { display: block; width: 100%; }
button.cp-navlink {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: inherit; text-decoration: inherit;
  display: inline; line-height: inherit;
}
button.cp-navlink:hover { text-decoration: underline; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.cp-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier-2);
  border-bottom: 2px solid var(--cyan);
  display: flex; align-items: center; gap: 18px;
  padding: 10px 28px;
  min-height: var(--header-h);
}
.cp-brand { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.cp-brand-btn { display: flex; align-items: center; }
.cp-brand img { height: 44px; width: auto; flex-shrink: 0; }
.cp-brand-text { display: flex; flex-direction: column; min-width: 0; }
.cp-brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-brand-sub {
  font-size: clamp(11px, 3.2vw, 13.5px);
  color: var(--cyan-fonce);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cp-menu-wrap { display: flex; align-items: center; }
.cp-menu-toggle {
  display: none; align-items: center; gap: 8px;
  background: var(--cyan); color: #fff; border: 0; border-radius: var(--radius);
  padding: 9px 14px; font: 700 14px var(--font); cursor: pointer;
}
.cp-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cp-nav button.cp-navlink {
  padding: 9px 14px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; color: var(--encre-doux);
}
.cp-nav button.cp-navlink:hover { background: var(--cyan-pale); text-decoration: none; }
.cp-nav button.is-current {
  color: var(--cyan-fonce); background: var(--cyan-pale);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
.cp-nav .cp-nav-espace {
  background: var(--cyan); color: #fff !important; margin-left: 10px;
}
.cp-nav .cp-nav-espace:hover { background: var(--cyan-fonce); text-decoration: none; }
.cp-nav .cp-nav-quiet { font-weight: 400; font-size: 13.5px; color: var(--encre-doux); }

/* Bandeau de session de gestion */
.cp-staffbar {
  background: var(--encre); color: #fff;
  font-size: 13.5px; padding: 7px 28px;
  display: flex; align-items: center; gap: 10px;
}
.cp-staffbar-link { color: #fff; text-decoration: underline; margin-left: auto; }

/* ── Page ────────────────────────────────────────────────────────────────── */
.cp-page {
  flex: 1 0 auto;
  width: 100%; max-width: var(--contain);
  margin: 0 auto; padding: 34px 28px 56px;
}
.cp-page.is-wide { max-width: 1440px; }

/* ── Titres et blocs de texte ────────────────────────────────────────────── */
.cp-h1 {
  font-size: clamp(26px, 4.6vw, 38px); line-height: 1.18;
  margin: 0 0 10px; font-weight: 800; letter-spacing: -.01em;
}
.cp-sous-titre {
  font-size: clamp(16px, 2.4vw, 19px); color: var(--encre-doux);
  margin: 0 0 26px; max-width: 62ch;
}
.cp-h2 {
  font-size: 21px; font-weight: 800; margin: 40px 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--filet);
}
.cp-h2 i { color: var(--cyan); margin-right: 9px; }
.cp-chapo { font-size: 17.5px; max-width: 72ch; }
.cp-chapo p:first-child { margin-top: 0; }
.cp-prose { max-width: 72ch; }
.cp-prose p { margin: 0 0 14px; }
.cp-prose ul, .cp-prose ol { margin: 0 0 14px; padding-left: 22px; }
.cp-prose li { margin-bottom: 6px; }

/* Filet de rappel du domaine : bandeau cyan discret en haut de page */
.cp-bandeau {
  background: linear-gradient(90deg, var(--cyan-pale), var(--papier-2));
  border-left: 4px solid var(--cyan);
  padding: 20px 24px; border-radius: var(--radius);
  margin-bottom: 30px;
}
.cp-bandeau .cp-h1 { margin-bottom: 6px; }
.cp-bandeau .cp-sous-titre { margin-bottom: 0; }

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.cp-cartes {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin: 26px 0;
}
.cp-carte {
  background: var(--papier-2); border: 1px solid var(--filet);
  border-top: 3px solid var(--cyan); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column;
}
.cp-carte h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.cp-carte .icone { font-size: 22px; color: var(--cyan); margin-bottom: 12px; }
.cp-carte .accroche { color: var(--encre-doux); font-size: 14.5px; margin: 0 0 10px; }
.cp-carte .corps { font-size: 15px; }
.cp-carte .corps p:last-child { margin-bottom: 0; }
.cp-carte .lien { margin-top: auto; padding-top: 14px; font-weight: 700; }
.cp-carte .lien a::after,
.cp-carte .lien button::after { content: ' \2192'; }

/* ── Encadrés ────────────────────────────────────────────────────────────── */
.cp-encadre {
  background: var(--cyan-voile); border: 1px solid var(--filet);
  border-radius: var(--radius); padding: 20px 24px; margin: 22px 0;
}
.cp-encadre h3 { margin: 0 0 10px; font-size: 17px; }
.cp-encadre.is-note { background: #FFF9EC; border-color: #E8D8AE; }

/* ── Tableaux (registres, grille tarifaire) ──────────────────────────────── */
/* Le débordement horizontal est confiné au conteneur du tableau : le corps
   de page, lui, ne défile jamais latéralement. */
.cp-table-wrap { overflow-x: auto; margin: 18px 0; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cp-table th, .cp-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.cp-table thead th {
  background: var(--cyan-pale); color: var(--cyan-fonce);
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--filet-fort);
}
.cp-table tbody tr:hover { background: var(--cyan-voile); }
.cp-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Étiquettes d'état ───────────────────────────────────────────────────── */
.cp-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--cyan-pale); color: var(--cyan-fonce);
}
.cp-tag.is-ok    { background: #DFF1E6; color: var(--succes); }
.cp-tag.is-warn  { background: #FBEADF; color: var(--alerte); }
.cp-tag.is-quiet { background: #ECEFEF; color: var(--encre-doux); }

/* ── Formulaires ─────────────────────────────────────────────────────────── */
.cp-form { max-width: 640px; }
.cp-form.is-large { max-width: 860px; }
.cp-champ { margin-bottom: 18px; }
.cp-champ label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.cp-champ .aide { font-weight: 400; color: var(--encre-doux); font-size: 13.5px; }
.cp-champ input[type=text], .cp-champ input[type=email], .cp-champ input[type=tel],
.cp-champ input[type=password], .cp-champ select, .cp-champ textarea {
  width: 100%; padding: 10px 12px; font: 15px var(--font);
  border: 1px solid var(--filet-fort); border-radius: var(--radius);
  background: var(--papier-2); color: var(--encre);
}
.cp-champ input:focus, .cp-champ select:focus, .cp-champ textarea:focus {
  outline: 2px solid var(--cyan-vif); outline-offset: 1px; border-color: var(--cyan);
}
.cp-champ textarea { min-height: 120px; resize: vertical; }
.cp-grille-2 { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }
.cp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.cp-check input { margin-top: 4px; flex-shrink: 0; }

.cp-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--cyan); color: #fff; border: 0; border-radius: var(--radius);
  padding: 12px 22px; font: 700 15px var(--font); cursor: pointer;
}
.cp-btn:hover { background: var(--cyan-fonce); }
.cp-btn.is-quiet { background: transparent; color: var(--cyan-fonce);
                   border: 1px solid var(--filet-fort); }
.cp-btn.is-quiet:hover { background: var(--cyan-pale); }
.cp-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Messages en ligne — l'écosystème proscrit alert() et confirm(). */
.cp-message {
  border-radius: var(--radius); padding: 13px 18px; margin: 0 0 22px;
  border-left: 4px solid var(--cyan); background: var(--cyan-voile); font-size: 15px;
}
.cp-message.is-erreur  { border-color: var(--alerte); background: #FCEFE9; color: #7A2E12; }
.cp-message.is-succes  { border-color: var(--succes); background: #E9F5EE; color: #145636; }

/* ── Espace membre ───────────────────────────────────────────────────────── */
.cp-fiche {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cp-fiche-bloc {
  background: var(--papier-2); border: 1px solid var(--filet);
  border-radius: var(--radius); padding: 20px;
}
.cp-fiche-bloc h3 {
  margin: 0 0 14px; font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--cyan-fonce);
}
.cp-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; }
.cp-dl dt { color: var(--encre-doux); font-size: 14px; }
.cp-dl dd { margin: 0; font-weight: 600; font-size: 14.5px; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.cp-footer {
  flex-shrink: 0; margin-top: auto;
  background: var(--papier-2); border-top: 1px solid var(--filet);
  padding: 30px 28px 22px;
}
.cp-footer-inner {
  max-width: var(--contain); margin: 0 auto;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cp-footer-title {
  margin: 0 0 9px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-fonce);
}
.cp-footer-line { margin: 0 0 5px; font-size: 14px; color: var(--encre-doux); }
.cp-footer-legal .legal-buttons { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cp-footer-legal button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 14px var(--font); color: var(--cyan-fonce);
}
.cp-footer-legal button:hover { text-decoration: underline; }
.cp-footer-legal button i { width: 18px; }
.cp-footer-note {
  max-width: var(--contain); margin: 26px auto 0; padding-top: 16px;
  border-top: 1px solid var(--filet);
  font-size: 13px; color: var(--encre-doux);
}

/* ── Adaptation aux petits écrans ────────────────────────────────────────── */
@media (max-width: 900px) {
  .cp-header { padding: 10px 18px; flex-wrap: wrap; }
  .cp-menu-toggle { display: inline-flex; }
  .cp-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px 0 4px; border-top: 1px solid var(--filet);
  }
  .cp-nav.is-open { display: flex; }
  .cp-nav form.cp-navform { display: block; }
  .cp-nav button.cp-navlink { display: block; width: 100%; text-align: left; }
  .cp-nav .cp-nav-espace { margin-left: 0; }
  .cp-page { padding: 24px 18px 44px; }
  .cp-grille-2 { grid-template-columns: 1fr; }
  .cp-staffbar { padding: 7px 18px; flex-wrap: wrap; }
  .cp-staffbar-link { margin-left: 0; }
}

@media print {
  .cp-header, .cp-nav, .cp-staffbar, .cp-footer-legal { display: none !important; }
  body { background: #fff; }
}