/* =============================================================================
   Camps et colonies ICRSP — ce que le site des colonies ajoute.

   La base (polices Goudy Modern et Servus, palette bleu nuit et or, en-tête,
   barre de navigation, pied de page, boutons, thème sombre) vient de
   loisy-base.css, la feuille du site de Loisy, chargée avant celle-ci.
   Ce fichier n'ajoute que les composants propres aux colonies : cartes de
   séjour, formulaires du dossier, tableaux du back-office, signature.

   Toutes les couleurs viennent des variables de la base : aucune valeur en dur,
   pour que le thème sombre continue de fonctionner sans rien retoucher.
   ============================================================================= */

/* --- Utilitaires ------------------------------------------------------------ */
.muted   { color: var(--muted); }
.small   { font-size: .87em; }
.center  { text-align: center; }
.right   { text-align: right; }
.nowrap  { white-space: nowrap; }
.mt0     { margin-top: 0; }
.req     { color: var(--red); }
.lead-colo { font-size: 1.06rem; color: var(--muted); max-width: 780px; text-align: left; }
.btns { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }

/* --- Panneaux --------------------------------------------------------------- */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.note {
  background: var(--card);
  border-left: 4px solid var(--gold);
  padding: .9rem 1.2rem;
  margin: 1.2rem 0;
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-soft);
}
.note--warning { border-left-color: var(--red); }
.note p:last-child { margin-bottom: 0; }

/* --- Cartes des séjours ----------------------------------------------------- */
.camps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1.6rem;
  margin: 1.6rem 0 .6rem;
}
.camp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.camp-card__img { display: block; width: 100%; height: 185px; object-fit: cover; }
.camp-card__body { padding: 1.2rem 1.3rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.camp-card__body h3 { margin: 0 0 .15rem; font-size: 1.25rem; }
.camp-card__body h3 a { color: var(--navy-dark); }
.camp-card__body h3 a:hover { color: var(--navy); text-decoration: none; }
.camp-card__sub { font-family: var(--font-italic); font-style: italic; color: var(--muted); margin-bottom: .7rem; }
.camp-card__meta { font-family: var(--font-ui); font-size: .9rem; color: var(--text); margin-bottom: .9rem; }
.camp-card__meta div { margin-bottom: .2rem; text-align: left; }
.camp-card__foot {
  margin-top: auto; padding-top: .9rem;
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  border-top: 1px solid var(--border);
}
/* Le tarif est un MONTANT, pas un titre : Goudy Modern est réservée aux titres
   (règle de Jean, 24/07). Chiffres tabulaires pour que les prix s'alignent. */
.camp-card__price {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.25rem; font-weight: 600; color: var(--navy-dark);
}
.camp-desc p, .page-body p { text-align: justify; }

/* --- Messages --------------------------------------------------------------- */
.flash {
  padding: .8rem 1.1rem; border-radius: 4px; margin-bottom: 1.2rem;
  border: 1px solid; font-family: var(--font-ui); font-size: .95rem;
}
.flash--success { background: rgba(39,174,96,.10);  border-color: rgba(39,174,96,.45);  color: #1e7a45; }
.flash--warning { background: rgba(171,148,96,.14); border-color: rgba(171,148,96,.5);  color: #7a6428; }
.flash--error   { background: rgba(192,57,43,.09);  border-color: rgba(192,57,43,.4);   color: #96271c; }
.flash--info    { background: rgba(35,49,85,.07);   border-color: rgba(35,49,85,.3);    color: var(--navy); }
.flash ul { margin: .4rem 0 0 1.1rem; }
.flash li { text-align: left; }

/* --- Pastilles -------------------------------------------------------------- */
.tag {
  display: inline-block; padding: .1rem .6rem; border-radius: 11px;
  font-family: var(--font-ui); font-size: .78rem; border: 1px solid;
  white-space: nowrap; line-height: 1.6;
}
.tag--ok      { background: rgba(39,174,96,.10);  border-color: rgba(39,174,96,.45);  color: #1e7a45; }
.tag--warning { background: rgba(171,148,96,.16); border-color: rgba(171,148,96,.55); color: #7a6428; }
.tag--danger  { background: rgba(192,57,43,.09);  border-color: rgba(192,57,43,.4);   color: #96271c; }
.tag--off     { background: rgba(100,110,134,.10); border-color: var(--border);       color: var(--muted); }
.tag--neutral { background: transparent;           border-color: var(--border);       color: var(--muted); }

/* --- Formulaires ------------------------------------------------------------ */
.field { margin-bottom: 1rem; }
.field > label { display: block; margin-bottom: .3rem; font-family: var(--font-ui); font-size: .93rem; color: var(--navy-dark); }
.field .hint { font-family: var(--font-ui); font-size: .84rem; color: var(--muted); margin-top: .25rem; text-align: left; }
.field--short input, .field--short select { width: auto; min-width: 150px; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number],
input[type=password], input[type=search], input[type=file], input[type=datetime-local],
select, textarea {
  font-family: var(--font-ui); font-size: 1rem; padding: .5rem .7rem;
  width: 100%; max-width: 100%;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--card); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(35,49,85,.3); border-color: var(--navy); }
textarea { min-height: 5.5rem; resize: vertical; }
select { width: auto; min-width: 230px; }
fieldset { border: 1px solid var(--border); border-radius: 4px; padding: 1rem 1.3rem; margin: 0 0 1.4rem; background: var(--card); }
legend { font-family: var(--font-title); color: var(--navy-dark); padding: 0 .5rem; font-size: 1.15rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0 1.4rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1.4rem; }

/* Question fermée oui / non */
.q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.1rem; padding: .5rem 0; border-bottom: 1px solid var(--border);
  font-family: var(--font-ui); font-size: .95rem;
}
.q:last-child { border-bottom: 0; }
.q > span { flex: 1; text-align: left; }
.yesno { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; flex: 0 0 auto; }
.yesno label { padding: .35rem 1rem; cursor: pointer; background: var(--card); font-size: .92rem; margin: 0; }
.yesno label + label { border-left: 1px solid var(--border); }
.yesno input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Fond uni : plus aucun dégradé sur ce site ni sur Loisy (règle de Jean, 24/07). */
.yesno label:has(input:checked) { background: var(--navy); color: #fff; }

/* --- Tableaux --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.tbl {
  width: 100%; border-collapse: collapse; background: var(--card);
  font-family: var(--font-ui); font-size: .92rem;
}
table.tbl th, table.tbl td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.tbl th { background: var(--pale); color: var(--navy-dark); font-size: .85rem; white-space: nowrap; font-weight: 600; }
table.tbl tr:hover td { background: rgba(35,49,85,.03); }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
table.tbl tr.is-late td { background: rgba(192,57,43,.06); }
table.tbl tr.is-paid td { background: rgba(39,174,96,.06); }
table.tbl p { text-align: left; }

/* --- Chiffres du tableau de bord -------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: .9rem 1rem; box-shadow: var(--shadow-soft); }
/* Un décompte n'est pas un titre non plus : chiffres en police d'appareillage,
   tabulaires pour que les colonnes de nombres restent alignées. */
.stat__n {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.75rem; font-weight: 600; color: var(--navy-dark); line-height: 1.15;
}
.stat__l { font-family: var(--font-ui); font-size: .86rem; color: var(--muted); }
.progress-colo { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: .5rem; }
.progress-colo > i { display: block; height: 100%; background: var(--gold); }

/* --- Compte à rebours ------------------------------------------------------- */
.countdown {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.8rem; font-weight: 600; color: var(--navy-dark);
  text-align: center; margin: .6rem 0 .2rem;
}

/* --- Signature manuscrite --------------------------------------------------- */
.sign-box {
  border: 2px dashed var(--border); border-radius: 4px; background: #fff;
  touch-action: none; width: 100%; max-width: 470px; height: 175px; display: block;
}
.sign-done { border: 1px solid var(--border); background: #fff; padding: .5rem; display: inline-block; border-radius: 4px; }
.sign-done img { max-height: 110px; }

/* --- Liste des pièces ------------------------------------------------------- */
.docs { list-style: none; padding: 0; margin: 0; font-family: var(--font-ui); font-size: .93rem; }
.docs li { display: flex; align-items: center; justify-content: space-between; gap: .9rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.docs li:last-child { border-bottom: 0; }
.docs__name { flex: 1; }

/* --- Images (façon Province : pas de cadre blanc) ---------------------------- */
.img-soft { border-radius: 4px; box-shadow: var(--shadow-soft); display: block; max-width: 100%; }

/* --- Mise en colonnes simple (sans Bootstrap) -------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.col-md-8 { flex: 1 1 60%; min-width: 300px; }
.col-md-9 { flex: 1 1 68%; min-width: 300px; }
.col-md-4 { flex: 1 1 26%; min-width: 260px; }
.col-md-6 { flex: 1 1 45%; min-width: 280px; }
.justify-content-center { justify-content: center; }

/* --- Boutons à icône seule (back-office) ------------------------------------
   Demande de Jean, 24/07 : dans les écrans de gestion, un bouton dont l'icône
   parle d'elle-même n'affiche pas son libellé. Le libellé reste en infobulle et
   en étiquette d'accessibilité.

   La couleur porte le sens, et c'est ce qui compte le plus : une action
   destructive est TOUJOURS en rouge. Sans variante, le bouton est neutre et
   l'utilisateur ne voit plus le danger (leçon de l'app Province, 18/07).
   ---------------------------------------------------------------------------- */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid #c8d2e0; border-radius: 4px;
  background: #f2f5fa; color: var(--navy);
  cursor: pointer; text-decoration: none; vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-ico:hover, .btn-ico:focus { background: var(--navy); border-color: var(--navy); color: #fff; text-decoration: none; }
.btn-ico:active { transform: scale(.94); }
.btn-ico svg { width: 16px; height: 16px; }
.btn-ico[disabled], .btn-ico.is-disabled {
  background: #f0f0f0; border-color: #e2e2e2; color: #b3b8bf;
  cursor: not-allowed; pointer-events: none;
}
.btn-ico--ok     { background: rgba(39,174,96,.10);  border-color: rgba(39,174,96,.45);  color: #1e7a45; }
.btn-ico--ok:hover     { background: var(--green); border-color: var(--green); color: #fff; }
.btn-ico--warn   { background: rgba(171,148,96,.14); border-color: rgba(171,148,96,.5);  color: #7a6428; }
.btn-ico--warn:hover   { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-ico--danger { background: rgba(192,57,43,.09);  border-color: rgba(192,57,43,.4);   color: #96271c; }
.btn-ico--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Une rangée d'actions dans un tableau : les icônes se suivent sans se coller. */
.actions { display: inline-flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.actions form { display: inline; }

/* Bouton avec icône ET libellé (quand l'icône seule ne suffit pas). */
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* =============================================================================
   BACK-OFFICE — écrans de gestion : dense, rapide, sans bandeau photo.
   ============================================================================= */
body.admin { background: #f4f6f9; }
body.admin main, body.admin .container { max-width: none; }
body.admin p { text-align: left; }
body.admin h1 { font-size: 1.7rem; margin-bottom: .6rem; }
body.admin h2 { font-size: 1.3rem; margin: 1.4rem 0 .6rem; }

/* --- Bandeau et barre de modules --------------------------------------------
   Fond UNI (plus de dégradé). Le bandeau et la barre de modules forment un seul
   bloc bleu nuit, séparés par un filet clair : c'est le premier niveau de
   navigation, celui qui ne change jamais de place.
   ---------------------------------------------------------------------------- */
.admin-head { background: var(--navy-dark); color: #fff; }
.admin-head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1.3rem; flex-wrap: wrap; max-width: 1560px; margin: 0 auto;
}
.admin-head a { color: #fff; }
.admin-head a:hover { color: var(--gold-light); text-decoration: none; }
.admin-head__brand { font-family: var(--font-title); font-size: 1.15rem; }
.admin-head select { font-family: var(--font-ui); font-size: .86rem; padding: .15rem .5rem; min-width: 0; width: auto; }

.admin-nav { background: var(--navy-dark); border-top: 1px solid rgba(255,255,255,.10); }
.admin-nav__in { display: flex; gap: 2px; padding: 0 1.3rem; flex-wrap: wrap; max-width: 1560px; margin: 0 auto; }
.admin-nav a {
  color: #c6d2e6; font-family: var(--font-ui); padding: .55rem .9rem; font-size: .92rem;
  border-radius: 3px 3px 0 0;
}
.admin-nav a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
/* Le module ouvert prend le fond de la page : l'onglet se raccorde au contenu. */
.admin-nav a.is-active { background: #f4f6f9; color: var(--navy-dark); font-weight: 600; }

.admin-main { max-width: 1560px; margin: 0 auto; padding: 1.4rem 1.3rem 3.5rem; }

/* --- Onglets de SÉJOUR (2e niveau) -------------------------------------------
   Changer de séjour, ce n'est pas filtrer une liste : c'est changer de dossier
   de travail. D'où de vrais onglets soulignés, distincts des filtres ci-dessous.
   Avant le 24/07 les deux rangées partageaient la même classe et se
   ressemblaient trait pour trait, ce qui rendait l'écran illisible.
   ---------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: .1rem; flex-wrap: wrap; align-items: flex-end;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.1rem;
}
.tabs a {
  padding: .45rem .95rem; margin-bottom: -1px;
  font-family: var(--font-ui); font-size: .94rem; color: var(--muted);
  border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--navy-dark); border-bottom-color: var(--border); text-decoration: none; }
.tabs a.is-active { color: var(--navy-dark); font-weight: 600; border-bottom-color: var(--navy); }

/* --- Filtres d'état (3e niveau) -----------------------------------------------
   Des pastilles claires, jamais un bloc foncé : un filtre se pose et se retire,
   il ne doit pas peser autant qu'un onglet. Le décompte est en chiffres
   tabulaires, comme tout nombre de l'application.
   ---------------------------------------------------------------------------- */
.filters { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.filters__label { font-family: var(--font-ui); font-size: .86rem; color: var(--muted); margin-right: .15rem; }
.filters a {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .22rem .75rem; border: 1px solid var(--border); border-radius: 13px;
  background: var(--card); font-family: var(--font-ui); font-size: .89rem; color: var(--text);
}
.filters a:hover { border-color: var(--navy-lt); color: var(--navy-dark); text-decoration: none; }
.filters a.is-active { background: var(--pale); border-color: var(--navy); color: var(--navy-dark); font-weight: 600; }
.filters__n { font-variant-numeric: tabular-nums; font-weight: 400; font-size: .84em; color: var(--muted); }
.filters a.is-active .filters__n { color: var(--navy); }

.login-box { max-width: 420px; margin: 8vh auto; }

/* --- Impression ------------------------------------------------------------- */
@media print {
  .site-header, .site-navbar, .site-footer, .admin-head, .admin-nav,
  .btn, .tabs, .filters, .no-print { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border: 0; padding: 0; }
}

@media (max-width: 640px) {
  .camp-card__foot { flex-direction: column; align-items: flex-start; }
  .q { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* --- Présentation reprise du site de la Province (30/07) ------------------- */
.presentation { margin: 2.2rem 0 2.6rem; }
.presentation > h2:first-child { margin-top: 0; }
.presentation h3 { margin: 1.6rem 0 .6rem; }
/* Vidéo en 16/9, quelle que soit la largeur. */
.presentation__video { position: relative; padding-top: 56.25%; margin: 1.2rem 0 1.6rem;
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-soft); }
.presentation__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Photos illustrant le texte : flottantes sur grand écran, pleine largeur sur
   téléphone. Le conteneur ferme ses flottants (sinon la dernière image
   déborderait sous la suite de la page, défaut rencontré sur icrspfrance.fr). */
.presentation::after { content: ""; display: block; clear: both; }
.presentation__fig { margin: .3rem 0 1rem; max-width: 100%; }
.presentation__fig img { display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 2px 9px rgba(23, 28, 43, .16); }
.presentation__fig figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--muted);
  margin-top: .4rem; text-align: center; }
@media (min-width: 700px) {
  .presentation__fig { width: 320px; }
  .presentation__fig--left  { float: left;  margin: .3rem 1.6rem 1rem 0; }
  .presentation__fig--right { float: right; margin: .3rem 0 1rem 1.6rem; }
}
.presentation__programme { margin: .4rem 0 1rem 1.2rem; }
.presentation__programme li { margin-bottom: .25rem; }