/* --------------------------------------------------------------------------
   Carnet de classe — feuille de style autonome.
   Pensée téléphone d'abord : cibles tactiles ≥ 46px, une colonne, tout au pouce.
   Elle ne dépend d'aucun style du thème et neutralise l'habillage de Divi
   sur la page de l'application.
   -------------------------------------------------------------------------- */

:root {
  --cc-fond:      #f4f6f8;
  --cc-carte:     #ffffff;
  --cc-encre:     #17222b;
  --cc-doux:      #5d6b76;
  --cc-trait:     #dde3e8;
  --cc-marine:    #1f4e6b;
  --cc-marine-cl: #2c6a90;
  --cc-vert:      #17795e;
  --cc-ambre:     #a9611a;
  --cc-rouge:     #a12d2d;
  --cc-or:        #a8791a;   /* contact favori */
  /* Fonds d'alerte : toujours par paire fond + encre, sinon le texte hérite
     de la couleur du thème et disparaît sur l'autre mode. */
  --cc-ambre-fond:  #fff8e9;
  --cc-ambre-encre: #4a3413;
  --cc-rouge-fond:  #fdecea;
  --cc-rouge-encre: #7a1a15;
  --cc-rouge-trait: #b3261e;
  /* Éléments posés SUR une carte (entrées de menu, modèles) : ils ont besoin
     d'un fond et d'un contour qui les détachent, sinon la liste se lit comme
     un bloc unique. */
  --cc-surface:     #f0f3f6;
  --cc-trait-fort:  #c2ccd5;
  --cc-rayon:     14px;
  --cc-ombre:     0 1px 2px rgba(23,34,43,.06), 0 6px 18px rgba(23,34,43,.06);
  --cc-haut:      0px; /* décalage barre d'admin */
}

@media (prefers-color-scheme: dark) {
  :root {
    --cc-fond:  #12181d;
    --cc-carte: #1b232a;
    --cc-encre: #eef2f5;
    --cc-doux:  #9aa8b3;
    --cc-trait: #2b353d;
    --cc-marine:#3c86ad;
    --cc-marine-cl:#4e9cc4;
    --cc-vert:  #35a583;
    --cc-ambre: #d08b3e;
    --cc-rouge: #d46a6a;
    --cc-or:    #d8ac4a;
    --cc-ombre: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
    --cc-ambre-fond:  #2c2415;
    --cc-ambre-encre: #f2e3c8;
    --cc-rouge-fond:  #2e1a1a;
    --cc-rouge-encre: #f6d5d2;
    --cc-rouge-trait: #d46a6a;
    --cc-surface:     #252f39;
    --cc-trait-fort:  #485662;
  }
}

/* --- Neutralisation de l'habillage du thème sur la page application ------- */
body.cc-app-page #top-header,
body.cc-app-page #main-header,
body.cc-app-page #main-footer,
body.cc-app-page .et_pb_scroll_top,
body.cc-app-page .entry-title,
body.cc-app-page .wp-block-post-title,
body.cc-app-page .wp-site-blocks > header,
body.cc-app-page .wp-site-blocks > footer,
body.cc-app-page #sidebar,
body.cc-app-page .et_post_meta_wrapper { display: none !important; }

body.cc-app-page { margin: 0 !important; background: var(--cc-fond) !important; }
body.cc-app-page #page-container { padding-top: 0 !important; margin-top: 0 !important; }
body.cc-app-page #et-main-area,
body.cc-app-page #main-content,
body.cc-app-page #content-area,
body.cc-app-page #left-area,
body.cc-app-page .container,
body.cc-app-page .entry-content,
body.cc-app-page article,
body.cc-app-page .et_pb_post {
  width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
  background: transparent !important; border: 0 !important;
}
body.admin-bar { --cc-haut: 32px; }
@media (max-width: 782px) { body.admin-bar { --cc-haut: 46px; } }

/* --- Cadre général -------------------------------------------------------- */
.cc, .cc-verrou {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--cc-encre);
  background: var(--cc-fond);
  -webkit-text-size-adjust: 100%;
  line-height: 1.45;
}
.cc *, .cc *::before, .cc *::after, .cc-verrou * { box-sizing: border-box; }
.cc { min-height: 70vh; padding-bottom: env(safe-area-inset-bottom); }

/* --- Écran de connexion --------------------------------------------------- */
.cc-verrou { display: flex; justify-content: center; padding: 8vh 18px 12vh; min-height: 70vh; }
.cc-verrou-carte {
  width: 100%; max-width: 380px; background: var(--cc-carte);
  border: 1px solid var(--cc-trait); border-radius: var(--cc-rayon);
  box-shadow: var(--cc-ombre); padding: 28px 22px 22px; text-align: center;
}
.cc-logo {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--cc-marine); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
}
.cc-verrou-carte h1 { margin: 0 0 6px; font-size: 22px; }
.cc-sous { margin: 0 0 18px; color: var(--cc-doux); font-size: 15px; }
.cc-verrou-carte label { display: block; text-align: left; font-size: 14px; color: var(--cc-doux); margin-bottom: 12px; }
.cc-verrou-carte input[type=text],
.cc-verrou-carte input[type=password] {
  width: 100%; margin-top: 5px; padding: 13px 12px; font-size: 16px;
  border: 1px solid var(--cc-trait); border-radius: 10px;
  background: var(--cc-fond); color: var(--cc-encre);
}
.cc-verrou-carte .login-remember { font-size: 13px; }
.cc-verrou-carte input[type=submit] {
  width: 100%; margin-top: 8px; padding: 14px; font-size: 16px; font-weight: 600;
  background: var(--cc-marine); color: #fff; border: 0; border-radius: 10px; cursor: pointer;
}
.cc-aide { margin: 14px 0 0; font-size: 13px; }
.cc-aide a { color: var(--cc-doux); }
.cc-demander {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cc-trait);
  color: var(--cc-doux); line-height: 1.6;
}
.cc-demander a { color: var(--cc-marine); font-weight: 600; }

/* --- Formulaire de demande d'accès ---------------------------------------- */
.cc-large-carte { max-width: 460px; text-align: left; }
.cc-large-carte h1, .cc-large-carte .cc-sous, .cc-large-carte .cc-logo { text-align: center; }
.cc-large-carte .cc-logo { margin-left: auto; margin-right: auto; }
.cc-large-carte h1 { text-align: center; }
.cc-formulaire { margin-top: 6px; }
.cc-formulaire .cc-bouton { margin-top: 6px; }
.cc-oblig { color: var(--cc-rouge); }
.cc-erreur {
  background: rgba(161,45,45,.08); border: 1px solid var(--cc-rouge); color: var(--cc-rouge);
  padding: 11px 13px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; text-align: left;
}
/* Piège à robots : invisible, mais pas display:none — certains le détectent. */
.cc-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Bandeau de supervision ---------------------------------------------- */
/* Volontairement voyant et collé en haut : on ne doit pas pouvoir oublier
   qu'on écrit dans le carnet de quelqu'un d'autre. */
.cc { --cc-bandeau-h: 0px; }
.cc-bandeau {
  position: sticky; top: var(--cc-haut); z-index: 41;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--cc-ambre); color: #fff;
  font-size: 14px; line-height: 1.35;
  box-shadow: 0 2px 8px rgba(23,34,43,.18);
}
.cc-bandeau-texte { flex: 1; min-width: 180px; }
.cc-bandeau-moi { opacity: .85; }
.cc-bandeau-sortir {
  flex: none; min-height: 38px; padding: 8px 14px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--cc-ambre);
  background: #fff; border: 0; border-radius: 9px;
}

/* --- Barre du haut -------------------------------------------------------- */
.cc-barre {
  position: sticky; top: calc(var(--cc-haut) + var(--cc-bandeau-h)); z-index: 30;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; min-height: 56px;
  background: var(--cc-marine); color: #fff;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.cc-barre .cc-titre { flex: 1; min-width: 0; line-height: 1.2; }
.cc-barre strong { display: block; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-titre-second { display: block; font-size: 12.5px; opacity: .8; }
.cc-retour, .cc-menu-bouton {
  min-width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 20px; line-height: 1;
}
.cc-retour { font-size: 26px; }
.cc-retour[hidden] { display: none; }

/* --- Corps ---------------------------------------------------------------- */
.cc-corps { padding: 14px 12px 60px; max-width: 900px; margin: 0 auto; }
.cc-ecran[hidden] { display: none; }

.cc-section-titre {
  margin: 22px 0 8px; font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cc-doux); font-weight: 600;
}
.cc-section-titre:first-child { margin-top: 4px; }

/* --- Cartes et listes ----------------------------------------------------- */
.cc-liste { display: flex; flex-direction: column; gap: 8px; }
.cc-carte {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; background: var(--cc-carte); color: inherit;
  border: 1px solid var(--cc-trait); border-radius: var(--cc-rayon);
  box-shadow: var(--cc-ombre); cursor: pointer; font: inherit;
}
.cc-carte:active { transform: scale(.995); }

/* Carte à deux zones : le corps ouvre, le crayon règle. */
.cc-carte-principal {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
#cc-app .cc-carte-principal { background: none; }
.cc-carte-principal:active { transform: none; }
.cc-carte > .cc-crayon { margin-left: 4px; }
/* Ces trois éléments sont des <span> à l'intérieur d'un <button> : sans
   display:block ils restent en ligne, le nom se coupe n'importe où et
   text-overflow n'a aucun effet — le numéro passait alors sous le chevron. */
.cc-carte-texte { display: block; flex: 1; min-width: 0; }
.cc-carte-nom {
  display: block; font-size: 16.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-carte-detail {
  display: block; font-size: 13.5px; color: var(--cc-doux); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-chevron { color: var(--cc-doux); font-size: 20px; flex: none; line-height: 1; }

.cc-pastille {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--cc-marine); color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.cc-pastille.cc-jamais { background: var(--cc-ambre); }

/* Divi colore volontiers les fonds ; on reprend la main par la spécificité pour
   que la pastille ambrée garde son sens : « cette famille n'a jamais été jointe ». */
#cc-app .cc-pastille { background: var(--cc-marine); color: #fff; }
#cc-app .cc-pastille.cc-jamais { background: var(--cc-ambre); }
#cc-app .cc-bouton { background: var(--cc-marine); color: #fff; }
#cc-app .cc-bouton.cc-sms { background: var(--cc-vert); color: #fff; }
#cc-app .cc-bouton.cc-tel { background: var(--cc-marine-cl); color: #fff; }
#cc-app .cc-bouton.cc-second,
#cc-app .cc-bouton.cc-mail { background: var(--cc-carte); color: var(--cc-encre); }
#cc-app .cc-bouton.cc-danger { background: transparent; color: var(--cc-rouge); }

.cc-etiquette {
  flex: none; display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--cc-fond);
  border: 1px solid var(--cc-trait); color: var(--cc-doux); margin-left: 6px;
}
.cc-etiquette.cc-alerte { color: var(--cc-ambre); border-color: currentColor; }

/* --- Recherche et filtres ------------------------------------------------- */
.cc-recherche {
  position: sticky; top: calc(var(--cc-haut) + var(--cc-bandeau-h) + 56px); z-index: 20;
  padding: 8px 0 10px; background: var(--cc-fond);
}
.cc-recherche input {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1px solid var(--cc-trait); border-radius: 12px;
  background: var(--cc-carte); color: var(--cc-encre);
}
/* Retour à la ligne plutôt que défilement horizontal : sur un téléphone, le
   choix de tri se retrouvait à 375px du bord, donc invisible — et un défilement
   latéral dans une rangée de boutons ne se devine pas. */
.cc-filtres {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-bottom: 2px;
}
.cc-filtre {
  flex: none; min-height: 44px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--cc-trait); border-radius: 999px;
  background: var(--cc-carte); color: var(--cc-doux); font-family: inherit;
}
.cc-filtre[aria-pressed="true"] { background: var(--cc-marine); border-color: var(--cc-marine); color: #fff; }
/* L'ordre de la liste n'est pas un filtre : deux choix côte à côte, groupés,
   pour qu'on voie d'un coup lequel est actif — plutôt qu'un bouton bascule
   dont on ne sait jamais s'il annonce l'état ou l'action. */
.cc-tri-groupe {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding-left: 10px;
}
.cc-tri-libelle {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--cc-doux); white-space: nowrap;
}
.cc-filtre.cc-tri { padding: 8px 12px; }
.cc-filtre.cc-tri[aria-pressed="false"] { border-style: dashed; }

/* --- Boutons -------------------------------------------------------------- */
.cc-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; font-size: 15.5px; font-weight: 600;
  border: 0; border-radius: 12px; cursor: pointer; font-family: inherit;
  background: var(--cc-marine); color: #fff; text-decoration: none;
}
.cc-bouton.cc-large { width: 100%; }
.cc-bouton.cc-second { background: var(--cc-carte); color: var(--cc-encre); border: 1px solid var(--cc-trait); }
.cc-bouton.cc-danger { background: transparent; color: var(--cc-rouge); border: 1px solid currentColor; }
.cc-bouton.cc-sms  { background: var(--cc-vert); }
.cc-bouton.cc-tel  { background: var(--cc-marine-cl); }
.cc-bouton.cc-mail { background: var(--cc-carte); color: var(--cc-encre); border: 1px solid var(--cc-trait); }
.cc-bouton[disabled] { opacity: .5; pointer-events: none; }

.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cc-actions .cc-plein { grid-column: 1 / -1; }

/* --- Fiche élève ---------------------------------------------------------- */
.cc-fiche-tete {
  background: var(--cc-carte); border: 1px solid var(--cc-trait);
  border-radius: var(--cc-rayon); box-shadow: var(--cc-ombre);
  padding: 16px; margin-bottom: 6px;
}
.cc-fiche-nom { font-size: 21px; font-weight: 700; }
.cc-fiche-meta { color: var(--cc-doux); font-size: 13.5px; margin-top: 3px; }

.cc-resp {
  background: var(--cc-carte); border: 1px solid var(--cc-trait);
  border-radius: var(--cc-rayon); box-shadow: var(--cc-ombre);
  padding: 14px; margin-bottom: 10px;
}
.cc-resp-tete { display: flex; align-items: flex-start; gap: 10px; }
.cc-resp-nom { font-size: 16.5px; font-weight: 600; }
.cc-resp-lien { font-size: 13px; color: var(--cc-doux); }
.cc-resp-info { font-size: 13.5px; color: var(--cc-doux); margin-top: 6px; }
.cc-resp-info a { color: inherit; }
/* 44px : la plus petite cible qu'un pouce atteint sans regarder. */
/* Contact favori. Couleur dédiée, et pas l'ambre : celui-ci veut déjà dire
   « famille jamais jointe » sur les pastilles et « vous êtes chez un collègue »
   sur le bandeau — trois sens pour une teinte, personne ne suivrait. */
.cc-etoile {
  flex: none; width: 44px; height: 44px; margin: -3px 2px 0 -8px;
  border: 0; background: none; cursor: pointer;
  font-size: 23px; line-height: 1; color: var(--cc-trait);
}
.cc-etoile:hover { color: var(--cc-or); }
.cc-etoile-on { color: var(--cc-or); }
.cc-resp-favori { border-color: var(--cc-or); }

.cc-crayon {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 9px;
  border: 1px solid var(--cc-trait); background: var(--cc-fond); color: var(--cc-doux);
  cursor: pointer; font-size: 15px;
}
.cc-prefere { color: var(--cc-vert); font-weight: 600; }

.cc-journal { display: flex; flex-direction: column; gap: 6px; }
.cc-journal-ligne {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--cc-carte); border: 1px solid var(--cc-trait); border-radius: 10px;
  font-size: 14px;
}
.cc-journal-date { color: var(--cc-doux); font-size: 12.5px; flex: none; }
.cc-journal-objet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-canal { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
/* Attribut plutôt que classe : aucun risque de collision avec le thème. */
.cc-canal[data-canal="sms"]   { color: var(--cc-vert); }
.cc-canal[data-canal="tel"]   { color: var(--cc-marine-cl); }
.cc-canal[data-canal="email"] { color: var(--cc-doux); }
.cc-canal[data-canal="rdv"],
.cc-canal[data-canal="papier"]{ color: var(--cc-ambre); }

/* --- Vide et messages ----------------------------------------------------- */
.cc-vide {
  text-align: center; padding: 34px 20px; color: var(--cc-doux);
  background: var(--cc-carte); border: 1px dashed var(--cc-trait); border-radius: var(--cc-rayon);
}
.cc-vide p { margin: 0 0 14px; }
.cc-note {
  font-size: 13px; color: var(--cc-doux); background: var(--cc-fond);
  border-left: 3px solid var(--cc-ambre); padding: 9px 12px; border-radius: 6px; margin: 10px 0;
}

/* --- Formulaires ---------------------------------------------------------- */
.cc-champ { margin-bottom: 13px; }
.cc-champ label { display: block; font-size: 13px; font-weight: 600; color: var(--cc-doux); margin-bottom: 5px; }
.cc-champ input, .cc-champ select, .cc-champ textarea {
  width: 100%; padding: 12px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--cc-trait); border-radius: 10px;
  background: var(--cc-fond); color: var(--cc-encre);
}
.cc-champ textarea { min-height: 110px; resize: vertical; }

/* Divi injecte plus bas dans la page un `input[type="email"] { padding: 2px }`
   de même spécificité que la règle ci-dessus — et gagne donc par ordre d'arrivée,
   écrasant un champ sur deux. On reprend la main par la spécificité, sans
   !important : deux classes ou un identifiant suffisent à passer devant. */
.cc-verrou .cc-champ input, #cc-app .cc-champ input,
.cc-verrou .cc-champ select, #cc-app .cc-champ select,
.cc-verrou .cc-champ textarea, #cc-app .cc-champ textarea {
  padding: 12px;
  font-size: 16px;          /* en dessous de 16px, iOS zoome à la saisie */
  line-height: 1.4;
  height: auto;
  background: var(--cc-fond);
  color: var(--cc-encre);
  border: 1px solid var(--cc-trait);
  border-radius: 10px;
}
.cc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-modele-fait { border-color: var(--cc-vert); opacity: .65; cursor: default; }
.cc-modele-fait strong { color: var(--cc-vert); }
.cc-prevenir { color: var(--cc-ambre); }
/* --- Étiquettes de variables ---------------------------------------------- */
/* Se touchent d'abord, se glissent ensuite : le glisser-déposer n'existe pas
   sur téléphone, et c'est là que le carnet s'utilise. */
.cc-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-jeton {
  flex: none; min-height: 38px; padding: 8px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--cc-marine); background: var(--cc-fond);
  border: 1px dashed var(--cc-marine); border-radius: 999px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.cc-jeton:active { transform: scale(.96); }
.cc-jeton-pris { opacity: .45; }
@media (hover: hover) {
  .cc-jeton { cursor: grab; }
  .cc-jeton:hover { background: var(--cc-marine); color: #fff; }
}
/* Sur un écran tactile, inutile de parler de glisser : ça ne marchera pas. */
.cc-glisser { display: none; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .cc-glisser { display: inline; } }

.cc-depot { border-color: var(--cc-marine) !important; background: var(--cc-carte) !important; }

/* L'étiquette qui vole vers le champ : décorative, jamais cliquable, et elle
   n'entre pas dans le flux — sinon elle décalerait la page en plein vol. */
.cc-jeton-vol {
  position: fixed; z-index: 100002; pointer-events: none; margin: 0;
  background: var(--cc-marine); color: #fff; border-color: var(--cc-marine);
  transition: left .34s cubic-bezier(.34, .1, .2, 1),
              top .34s cubic-bezier(.34, .1, .2, 1),
              transform .34s ease-in, opacity .3s ease-in .04s;
}

/* Et le champ accuse réception, pour qu'on sache où c'est arrivé. */
@keyframes cc-recu {
  from { box-shadow: 0 0 0 0 rgba(31, 78, 107, .45); }
  to   { box-shadow: 0 0 0 9px rgba(31, 78, 107, 0); }
}
.cc-recu { animation: cc-recu .55s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .cc-jeton-vol { display: none; }
  .cc-recu { animation: none; }
}

/* --- Réponses des familles ------------------------------------------------ */
/* Une réponse de parent, c'est un message reçu : on lui donne l'allure d'une
   bulle, et les non lues se voient sans avoir à chercher. */
.cc-reponse {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 12px 14px; color: inherit;
  background: var(--cc-carte); border: 1px solid var(--cc-trait);
  border-radius: var(--cc-rayon); box-shadow: var(--cc-ombre);
}
.cc-reponse-neuve { border-left: 4px solid var(--cc-ambre); }
.cc-reponse-tete { display: block; font-size: 15px; margin-bottom: 4px; }
.cc-reponse-qui { color: var(--cc-doux); font-weight: 400; }
.cc-reponse-texte {
  display: block; font-size: 15px; line-height: 1.45; margin: 4px 0 6px;
  white-space: pre-wrap; word-break: break-word;
}
.cc-reponse-date { display: block; font-size: 12.5px; color: var(--cc-doux); }

/* --- Les réponses, en surface --------------------------------------------- */
/* Ce qu'un parent écrit doit se voir sans ouvrir de menu : un bouton à part
   dans la barre, une bande en tête d'écran, une puce sur l'élève concerné. */

#cc-app .cc-messages-bouton {
  position: relative; flex: none;
  min-width: 40px; height: 40px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
#cc-app .cc-messages-bouton[hidden] { display: none; }
#cc-app .cc-messages-bouton.cc-messages-alerte { background: var(--cc-ambre); color: #fff; }
.cc-messages-nb {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px;
  background: #b3261e; color: #fff; border: 2px solid var(--cc-marine);
  font-size: 11px; font-weight: 700; line-height: 14px; text-align: center;
}
.cc-messages-nb[hidden] { display: none; }

#cc-app .cc-bande-reponses {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--cc-ambre-fond); color: var(--cc-ambre-encre);
  border: 2px solid var(--cc-ambre); border-radius: 12px;
  color: inherit; font: inherit;
}
.cc-bande-icone { flex: none; font-size: 20px; color: var(--cc-ambre); }
.cc-bande-texte { flex: 1; min-width: 0; }
.cc-bande-texte strong { display: block; font-size: 15px; font-weight: 700; }
.cc-bande-texte span { display: block; font-size: 13px; color: var(--cc-doux); }
.cc-bande-chevron { flex: none; font-size: 22px; color: var(--cc-doux); }

#cc-app .cc-carte-reponse { border-color: var(--cc-ambre); border-width: 2px; }
.cc-carte-repondu { color: var(--cc-ambre); font-weight: 700; }

/* Les mots du parent, sous la ligne de journal qui les annonce. */
#cc-app .cc-journal-entrant { border-color: var(--cc-ambre); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
#cc-app .cc-journal-entrant .cc-canal { color: var(--cc-ambre); }
.cc-journal-mots {
  margin-top: -6px; padding: 10px 12px;
  background: var(--cc-ambre-fond); color: var(--cc-ambre-encre);
  border: 1px solid var(--cc-ambre); border-top: 0;
  border-radius: 0 0 10px 10px;
  font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}

/* --- Compteur de SMS ------------------------------------------------------ */
/* Un message de 165 caractères coûte deux SMS : autant que ça se voie avant
   d'appuyer, et pas en gris pâle sous le champ. */
.cc-compteur {
  margin-top: 6px; padding: 6px 9px; border-radius: 8px;
  font-size: 13px; line-height: 1.4; color: var(--cc-doux);
  background: var(--cc-fond);
}
.cc-compteur-limite { color: var(--cc-ambre); font-weight: 600; }
.cc-compteur-cher {
  color: #fff; background: var(--cc-ambre); font-weight: 600;
}

.cc-bilan { margin: 4px 0 14px; padding-left: 20px; font-size: 15px; line-height: 1.7; }
.cc-bilan li { margin: 0; }
.cc-apercu {
  padding: 12px; border-radius: 10px; font-size: 15px; line-height: 1.5;
  background: var(--cc-fond); border: 1px dashed var(--cc-trait); color: var(--cc-doux);
}
.cc-formulaire-pied { display: flex; gap: 8px; margin-top: 16px; }
.cc-formulaire-pied .cc-bouton { flex: 1; }

/* --- Modale --------------------------------------------------------------- */
.cc-modale { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.cc-modale[hidden] { display: none; }
.cc-modale-fond { position: absolute; inset: 0; background: rgba(10,16,20,.5); }
.cc-modale-boite {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--cc-carte); border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  animation: cc-monte .18s ease-out;
}
@keyframes cc-monte { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.cc-modale-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cc-modale-tete h2 { margin: 0; font-size: 18px; flex: 1; }
.cc-modale-fermer {
  width: 44px; height: 44px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--cc-fond); color: var(--cc-doux); font-size: 22px; line-height: 1;
}
@media (min-width: 640px) {
  .cc-modale { align-items: center; }
  .cc-modale-boite { border-radius: 18px; }
}

/* --- Bandeau d'information ------------------------------------------------ */
.cc-info {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 100001;
  background: var(--cc-encre); color: var(--cc-fond);
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 92vw; text-align: center;
}
.cc-info[hidden] { display: none; }

/* --- Choix de modèle de message ------------------------------------------- */
/* Une entrée de menu ou un modèle de message.
   Le texte était déjà très lisible (15:1) ; ce qui manquait était la
   *séparation* : fond et contour se confondaient avec la carte qui les porte
   (1,1:1), et la liste se lisait comme un pavé continu. D'où deux niveaux —
   un fond propre, et un contour franc. */
.cc-modele {
  width: 100%; text-align: left; padding: 13px 15px; margin-bottom: 10px; cursor: pointer;
  background: var(--cc-surface); border: 1px solid var(--cc-trait-fort);
  border-radius: 12px; font: inherit; color: inherit;
}
.cc-modele strong { display: block; font-size: 15.5px; line-height: 1.3; }
.cc-modele span {
  display: block; font-size: 13.5px; color: var(--cc-doux);
  margin-top: 4px; line-height: 1.4;
}
/* Au doigt comme à la souris : l'entrée touchée doit se reconnaître. */
.cc-modele:active { background: var(--cc-trait); }
@media (pointer: hover) {
  .cc-modele:hover { border-color: var(--cc-marine-cl); }
}

/* --- Écran large : deux colonnes ------------------------------------------ */
@media (min-width: 900px) {
  .cc-corps { max-width: 1080px; }
  .cc-liste.cc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Au-delà du contenu, la barre garde son fond pleine largeur mais son titre
   s'aligne sur les cartes, sinon il flotte tout seul dans le coin de l'écran. */
@media (min-width: 1104px) {
  .cc-barre {
    padding-left: calc((100% - 1080px) / 2 + 12px);
    padding-right: calc((100% - 1080px) / 2 + 12px);
  }
}

/* --- Impression : la liste de la classe sur papier ------------------------ */
@media print {
  .cc-barre, .cc-recherche, .cc-modale, .cc-info, .cc-actions, .cc-crayon { display: none !important; }
  .cc-carte, .cc-resp { box-shadow: none; break-inside: avoid; }
}

/* Un message qui n'est pas arrivé : sans cela l'enseignant croit la famille
   prévenue. C'est le seul cas où l'accusé de réception mérite d'être montré. */
.cc-journal-alerte {
  margin-top: -6px; padding: 9px 12px;
  background: var(--cc-rouge-fond); border: 1px solid var(--cc-rouge-trait); border-top: 0;
  border-radius: 0 0 10px 10px;
  font-size: 13.5px; line-height: 1.4; color: var(--cc-rouge-encre);
}

/* --- Groupes du menu ------------------------------------------------------ */
/* Le menu porte toutes les fonctions du carnet : en liste plate, il fallait
   tout relire pour trouver une entrée. Les titres de groupe rendent le
   parcours possible d'un coup d'œil. */
.cc-menu-groupe {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--cc-doux);
}
.cc-menu-groupe:first-child { margin-top: 2px; }
/* La déconnexion, détachée : on ne quitte pas le carnet par mégarde. */
.cc-menu-pied { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--cc-trait-fort); }
.cc-menu-pied .cc-modele { background: transparent; border-style: dashed; }

/* --- Le fil de conversation ----------------------------------------------- */
/* Un échange avec une famille se relit comme une conversation, pas comme un
   registre : ce que l'école a envoyé d'un côté, ce que le parent a répondu de
   l'autre. La forme est celle que tout le monde connaît déjà. */
.cc-fil { display: flex; flex-direction: column; gap: 4px; padding: 2px 0; }

.cc-fil-jour {
  align-self: center; margin: 14px 0 6px; padding: 3px 12px;
  font-size: 12px; font-weight: 600; color: var(--cc-doux);
  background: var(--cc-surface); border-radius: 999px;
}
.cc-fil-jour:first-child { margin-top: 2px; }

.cc-bulle-ligne { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.cc-bulle-ligne.cc-bulle-moi { align-items: flex-end; }

.cc-bulle {
  position: relative; max-width: 80%; padding: 10px 13px;
  background: var(--cc-surface); border: 1px solid var(--cc-trait-fort);
  border-radius: 16px 16px 16px 4px;
  font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.cc-bulle-moi .cc-bulle {
  background: var(--cc-marine); border-color: var(--cc-marine);
  color: #fff; border-radius: 16px 16px 4px 16px;
}
.cc-bulle-moi .cc-bulle em { color: rgba(255,255,255,.92); font-style: normal; }

.cc-bulle-pied {
  margin: 2px 6px 6px; font-size: 11.5px; color: var(--cc-doux);
}

/* L'effacement reste possible, mais ne s'impose pas au regard. */
.cc-fil-effacer {
  margin-left: 8px; padding: 0 4px; min-width: 22px; height: 22px;
  border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 15px;
  background: transparent; color: var(--cc-doux); opacity: .45;
  vertical-align: middle;
}
.cc-bulle-moi .cc-fil-effacer { color: #fff; }
.cc-fil-effacer:hover, .cc-fil-effacer:focus { opacity: 1; }

/* Un appel, un rendez-vous, un mot dans le cahier : un fait, pas un message. */
.cc-fil-repere {
  align-self: center; max-width: 92%; margin: 6px 0; padding: 6px 12px;
  font-size: 12.5px; color: var(--cc-doux); text-align: center;
  background: var(--cc-surface); border-radius: 10px;
}
/* La conversation dont la fenêtre de réponse s'est refermée : une information,
   pas une alerte — rien n'a échoué, le délai a simplement couru. */
.cc-fil-clos {
  color: var(--cc-encre);
  border: 1px dashed var(--cc-trait-fort);
}

.cc-fil-rate {
  background: var(--cc-rouge-fond); color: var(--cc-rouge-encre);
  border: 1px solid var(--cc-rouge-trait);
}

/* --- Themes du menu dans la barre ----------------------------------------- */
/* Sur écran large, les groupes du menu sont à portée directe ; sur téléphone
   la place manque et le bouton « ⋯ » les reprend tous. Rien n'est joignable
   par un seul chemin : la barre est un raccourci, jamais le seul accès. */
.cc-barre-groupe {
  display: none;
  min-width: 40px; height: 40px; flex: none;
  border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 17px; line-height: 1; font-family: inherit;
}
.cc-barre-groupe[hidden] { display: none !important; }
@media (min-width: 700px) {
  .cc-barre-groupe:not([hidden]) { display: flex; align-items: center; justify-content: center; }
  /* Les thèmes sont là, sous les yeux : le « ⋯ » ferait doublon. */
  .cc-menu-bouton { display: none; }
}
@media (pointer: hover) {
  .cc-barre-groupe:hover, .cc-menu-bouton:hover, .cc-messages-bouton:hover {
    background: rgba(255,255,255,.26);
  }
}
/* Un texte reconstitué depuis le modèle : on le lit, mais on sait qu'il n'est
   pas la copie exacte de ce qui est parti. */
.cc-bulle-repris { font-style: italic; opacity: .85; }

/* --- Ecrire, au bas du fil ------------------------------------------------ */
/* On répond là où l'on vient de lire, et l'on y écrit vraiment : le champ
   grandit sous la frappe, la flèche ouvre l'envoi avec le texte déjà dedans. */
.cc-fil-ecrire {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cc-trait-fort);
}
.cc-fil-champ, #cc-app .cc-fil-champ {
  flex: 1; min-width: 0; min-height: 46px; height: 46px; max-height: 150px;
  padding: 12px 16px; font: inherit; font-size: 16px; line-height: 1.35;
  color: var(--cc-encre); -webkit-text-fill-color: var(--cc-encre);
  background-color: var(--cc-carte);
  border: 1px solid var(--cc-trait-fort); border-radius: 23px;
  resize: none; overflow-y: auto;
}
.cc-fil-champ::placeholder {
  color: var(--cc-doux); -webkit-text-fill-color: var(--cc-doux); opacity: 1;
}
.cc-fil-champ:focus {
  outline: none; border-color: var(--cc-marine);
  box-shadow: 0 0 0 3px rgba(31,68,110,.16);
}
.cc-fil-envoi {
  flex: none; width: 46px; height: 46px; cursor: pointer;
  border: 0; border-radius: 50%; font-size: 17px; line-height: 1;
  background: var(--cc-marine); color: #fff;
}
@media (pointer: hover) {
  .cc-fil-champ:hover { border-color: var(--cc-marine-cl); }
  .cc-fil-envoi:hover { background: var(--cc-marine-cl); }
}
/* Le renvoi vers les modèles, dans l'étiquette du champ : présent sans
   s'imposer, puisque l'écriture libre est le cas courant. */
.cc-champ label { display: flex; align-items: baseline; gap: 10px; }
.cc-lien-modeles {
  margin-left: auto; padding: 2px 10px; min-height: 28px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--cc-marine-cl); background: transparent;
  border: 1px solid var(--cc-trait-fort); border-radius: 999px;
}
@media (pointer: hover) { .cc-lien-modeles:hover { border-color: var(--cc-marine-cl); } }

/* --- Garder les accents --------------------------------------------------- */
/* Une case qui coûte : elle doit être lisible et dire son prix, sans pour
   autant crier — ce n'est pas une alerte, c'est un arbitrage. */
.cc-accents {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px;
  font-size: 12.5px; line-height: 1.4; color: var(--cc-encre); cursor: pointer;
}
.cc-accents input { margin: 1px 0 0; width: 17px; height: 17px; flex: none; cursor: pointer; }

/* --- Sections pliables ---------------------------------------------------- */
/* Sur un téléphone, l'en-tête et les responsables remplissent l'écran avant le
   premier message. Les replier met la conversation sous les yeux. */
.cc-pliable.cc-plie,
.cc-fiche-tete.cc-plie .cc-pliable { display: none; }
.cc-fiche-tete.cc-plie { padding-bottom: 6px; }

/* Un bloc pliable se referme aussi par un double-clic dedans : le curseur le
   dit sur ordinateur, et la sélection de texte est neutralisée pour que le
   double-clic ne surligne pas un mot au passage. */
.cc-pliable[data-pli-zone] { cursor: default; }
.cc-fiche-tete .cc-pliable[data-pli-zone],
.cc-pliable[data-pli-zone] .cc-resp { user-select: none; }
.cc-pliable[data-pli-zone] input,
.cc-pliable[data-pli-zone] textarea { user-select: text; }

/* Le titre de la barre replie la fiche de l'élève : il faut que cela se voie
   un peu, sans transformer la barre en rangée de boutons. */
.cc-titre-pliable { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.cc-titre-pliable:active { background: rgba(255,255,255,.16); }
@media (pointer: hover) {
  .cc-titre-pliable:hover { background: rgba(255,255,255,.12); }
}
.cc-titre-pliable:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 1px; }

.cc-fiche-replier {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 0; margin: 0 0 2px; cursor: pointer;
  background: transparent; border: 0; font: inherit; color: inherit; text-align: left;
}
.cc-fiche-replier .cc-fiche-nom { flex: 1; min-width: 0; }

.cc-section-plier {
  display: flex; align-items: center; gap: 8px; width: 100%;
  cursor: pointer; background: transparent; border: 0; font: inherit;
  margin: 22px 0 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cc-doux);
  text-align: left;
}
.cc-chevron-plier { flex: none; font-size: 12px; opacity: .75; margin-left: auto; }

/* Les noms des responsables dans le titre replié : ils portent l'information
   que le repli vient de cacher, donc ni majuscules ni interlettrage — on les
   lit comme des noms, pas comme une étiquette de section. */
.cc-section-qui {
  flex: 1; min-width: 0; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 12.5px; color: var(--cc-encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-section-qui::before { content: '· '; color: var(--cc-doux); }
@media (pointer: hover) {
  .cc-fiche-replier:hover .cc-chevron-plier,
  .cc-section-plier:hover .cc-chevron-plier { opacity: 1; }
}

/* --- Champs de saisie : lisibles en mode sombre, sur iPhone comme ailleurs -- */
/*
 * Deux causes se cumulaient pour rendre le texte tapé illisible en mode sombre
 * sur téléphone :
 *
 *  1. Divi injecte, plus bas dans la page que cette feuille, un
 *     `textarea, select, input[type=text] { background-color: #fff; color: #4e4e4e }`.
 *     Sur un fond sombre, un champ qui perd son fond redevient blanc, et le
 *     texte gris clair dessus n'a plus de contraste.
 *
 *  2. Surtout : sans `color-scheme`, WebKit tient la page pour une page claire
 *     et impose sa propre couleur de texte dans les champs de saisie — elle
 *     l'emporte sur `color` parce qu'elle passe par `-webkit-text-fill-color`.
 *     C'est pour cela que le texte restait pâle alors que la règle était bonne.
 *
 * On répond aux deux : on annonce les deux thèmes, on redéclare la paire
 * fond + encre par un sélecteur qui passe devant Divi, et on neutralise
 * explicitement la couleur système.
 */
#cc-app, .cc-verrou { color-scheme: light dark; }

#cc-app .cc-champ input,
#cc-app .cc-champ select,
#cc-app .cc-champ textarea,
#cc-app .cc-recherche input,
.cc-verrou .cc-champ input,
.cc-verrou .cc-champ textarea,
.cc-verrou-carte input[type=text],
.cc-verrou-carte input[type=password] {
  color: var(--cc-encre);
  -webkit-text-fill-color: var(--cc-encre);
  background-color: var(--cc-fond);
  caret-color: var(--cc-marine);
  -webkit-appearance: none;
  appearance: none;
}
#cc-app .cc-recherche input { background-color: var(--cc-carte); }

/* Le texte d'invite : présent, mais qui ne se fait pas passer pour du texte
   saisi. iOS applique à ce pseudo-élément une opacité qu'il faut annuler. */
#cc-app .cc-champ input::placeholder,
#cc-app .cc-champ textarea::placeholder,
#cc-app .cc-recherche input::placeholder,
.cc-verrou .cc-champ input::placeholder {
  color: var(--cc-doux);
  -webkit-text-fill-color: var(--cc-doux);
  opacity: 1;
}