/* ===========================================================================
   FORMENERGIE — habillage « Claude Design »
   Tokens repris du design system formenergie-design-system-4c2f41cd.
   Feuille commune à toutes les pages de l'app INScription.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Mulish:wght@300;400;500;600;700;800&display=swap');

:root {
  --green-50:#E9F4EF; --green-100:#C9E5DB; --green-200:#95CBB8; --green-300:#5BAE93;
  --green-400:#2E9278; --green-500:#187860; --green-600:#136150; --green-700:#0F4C3E; --green-800:#0A372D;
  --amber-50:#FFF8E3; --amber-100:#FFEDB3; --amber-200:#FFDE73; --amber-300:#FFCF3D;
  --amber-400:#FFC000; --amber-500:#E0A800; --amber-600:#B98800; --amber-700:#8F6900;
  --orange-50:#FCEEE2; --orange-100:#F8D4B2; --orange-200:#EFA968; --orange-300:#E68234;
  --orange-400:#D86000; --orange-500:#B85100; --orange-600:#934000;
  --neutral-0:#FFFFFF; --neutral-50:#F6F8FA; --neutral-100:#EDF0F4; --neutral-200:#DCE2E8;
  --neutral-300:#C1CAD3; --neutral-400:#97A3AF; --neutral-500:#6B7681; --neutral-600:#4C5661;
  --neutral-700:#353D47; --neutral-800:#222A32; --neutral-900:#131A20;

  --domain-climatique:#1F6FB2; --domain-tp:#C0492E; --domain-securite:#F2B705;
  --domain-emploi:#187860; --domain-elec:#D86000; --domain-chaleur:#E0531E; --domain-transverse:#4C5661;

  --color-primary:var(--green-500); --color-primary-hover:var(--green-600);
  --color-accent:var(--amber-400); --color-secondary:var(--orange-400);
  --bg-page:var(--neutral-50); --surface-card:var(--neutral-0); --surface-sunk:var(--neutral-100);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-700);
  --text-muted:var(--neutral-500); --text-faint:var(--neutral-400); --text-invert:var(--neutral-0);
  --border-subtle:var(--neutral-200); --border-default:var(--neutral-300);

  --font-display:'Righteous','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;

  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --tracking-eyebrow:.14em;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:7rem;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(19,26,32,.06);
  --shadow-sm:0 2px 6px rgba(19,26,32,.07);
  --shadow-md:0 6px 18px rgba(19,26,32,.09);
  --shadow-lg:0 16px 40px rgba(19,26,32,.12);
  --shadow-xl:0 28px 64px rgba(19,26,32,.16);
  --shadow-green:0 14px 32px rgba(15,76,62,.22);

  --container-lg:1080px; --container-xl:1240px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:140ms; --dur-base:240ms;
}

*, *::before, *::after { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); }

@keyframes fe-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* --- Enveloppes --------------------------------------------------------- */
.fe-wrap  { max-width:var(--container-xl); margin:0 auto; padding:0 var(--space-5); }
.fe-wrap--narrow { max-width:var(--container-lg); }
.fe-section { padding:var(--space-10) 0; }
.fe-rise { animation:fe-rise var(--dur-base) var(--ease-out) both; }

/* --- Barre de navigation ------------------------------------------------ */
.fe-header {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.fe-header__inner {
  max-width:var(--container-xl); margin:0 auto;
  padding:var(--space-3) var(--space-5);
  display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
}
.fe-brand { display:flex; align-items:center; gap:var(--space-3); margin-right:auto; }
.fe-brand img { height:38px; width:auto; display:block; }
.fe-brand__txt { font-family:var(--font-display); font-size:var(--text-lg); color:var(--green-700); line-height:1; }
.fe-brand__sub { display:block; font-family:var(--font-body); font-size:var(--text-2xs);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-faint); margin-top:3px; }
.fe-nav { display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap; }
.fe-nav a {
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
  font-size:var(--text-sm); font-weight:600; color:var(--text-body);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fe-nav a:hover { background:var(--surface-sunk); color:var(--text-strong); }
.fe-nav a.is-active { background:var(--green-50); color:var(--green-700); }

/* --- Boutons ------------------------------------------------------------ */
.fe-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border:1px solid transparent; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:700;
  cursor:pointer; text-align:center;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.fe-btn:hover { transform:translateY(-1px); }
.fe-btn--primary { background:var(--color-primary); color:var(--text-invert); box-shadow:var(--shadow-sm); }
.fe-btn--primary:hover { background:var(--color-primary-hover); color:var(--text-invert); box-shadow:var(--shadow-md); }
.fe-btn--accent { background:var(--color-accent); color:var(--text-strong); box-shadow:var(--shadow-sm); }
.fe-btn--accent:hover { background:var(--amber-500); color:var(--text-strong); }
.fe-btn--ghost { background:var(--surface-card); color:var(--text-body); border-color:var(--border-default); }
.fe-btn--ghost:hover { background:var(--surface-sunk); color:var(--text-strong); }
.fe-btn--lg { padding:var(--space-4) var(--space-6); font-size:var(--text-base); }

/* --- Typographie -------------------------------------------------------- */
.fe-eyebrow {
  font-size:var(--text-xs); font-weight:700; letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-primary); margin:0 0 var(--space-3);
}
.fe-h1 { font-family:var(--font-display); font-weight:400; line-height:1.08; margin:0;
  font-size:clamp(2.25rem,5.5vw,3.75rem); color:var(--text-strong); }
.fe-h2 { font-family:var(--font-display); font-weight:400; line-height:1.15; margin:0;
  font-size:clamp(1.75rem,3.6vw,2.25rem); color:var(--text-strong); }
.fe-h3 { font-family:var(--font-display); font-weight:400; line-height:1.2; margin:0;
  font-size:var(--text-xl); color:var(--text-strong); }
.fe-lead { font-size:var(--text-lg); color:var(--text-muted); line-height:1.6; margin:var(--space-4) 0 0; }
.fe-muted { color:var(--text-muted); font-size:var(--text-sm); }
.fe-fine { color:var(--text-faint); font-size:var(--text-xs); line-height:1.5; }

/* --- Héro --------------------------------------------------------------- */
.fe-hero { position:relative; overflow:hidden; background:var(--green-800); color:var(--text-invert); }
.fe-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.fe-hero__inner { position:relative; max-width:var(--container-xl); margin:0 auto;
  padding:var(--space-10) var(--space-5) var(--space-9); }
.fe-hero .fe-h1, .fe-hero .fe-h2 { color:var(--text-invert); }
.fe-hero .fe-eyebrow { color:var(--amber-300); }
.fe-hero .fe-lead { color:var(--green-100); max-width:38rem; }

/* --- Champ de recherche ------------------------------------------------- */
.fe-search { display:flex; gap:var(--space-2); max-width:40rem; margin-top:var(--space-6);
  background:var(--surface-card); padding:var(--space-2); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lg); }
.fe-search input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  padding:var(--space-3) var(--space-4); font-family:var(--font-body);
  font-size:var(--text-base); color:var(--text-strong);
}
.fe-search input::placeholder { color:var(--text-faint); }

/* --- Cartes ------------------------------------------------------------- */
.fe-grid { display:grid; gap:var(--space-5); }
.fe-grid--2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.fe-grid--3 { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.fe-grid--4 { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

.fe-card {
  display:flex; flex-direction:column;
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-xs); color:var(--text-body);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.fe-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); color:var(--text-body); }
.fe-card__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-sunk); }
.fe-card__media img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-base) var(--ease-out); }
a.fe-card:hover .fe-card__media img { transform:scale(1.04); }
.fe-card__body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.fe-card__title { font-family:var(--font-display); font-weight:400; font-size:var(--text-xl);
  color:var(--text-strong); line-height:1.2; margin:0; }
.fe-card__text { font-size:var(--text-sm); color:var(--text-muted); line-height:1.55; margin:0; }
.fe-card__foot { margin-top:auto; padding-top:var(--space-3);
  font-size:var(--text-sm); font-weight:700; color:var(--color-primary); }

/* Bandeau de couleur de domaine en tête de carte */
.fe-card__rule { height:4px; background:var(--color-primary); }

/* Carte pôle : media plus haut, titre en surimpression */
.fe-pole { position:relative; min-height:270px; border-radius:var(--radius-2xl); overflow:hidden;
  display:flex; align-items:flex-end; color:var(--text-invert);
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.fe-pole:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); color:var(--text-invert); }
.fe-pole img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fe-pole__veil { position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,55,45,.15) 0%,rgba(10,55,45,.55) 45%,rgba(10,55,45,.9) 100%); }
.fe-pole--tp .fe-pole__veil {
  background:linear-gradient(180deg,rgba(60,20,10,.15) 0%,rgba(80,26,12,.55) 45%,rgba(90,30,14,.92) 100%); }
.fe-pole__body { position:relative; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); }
.fe-pole__body .fe-card__title { color:var(--text-invert); font-size:var(--text-2xl); }
.fe-pole__body p { margin:0; font-size:var(--text-sm); color:rgba(255,255,255,.82); line-height:1.55; }

/* --- Badges / pastilles ------------------------------------------------- */
.fe-badge {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:3px var(--space-3); border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700; line-height:1.6;
  background:var(--surface-sunk); color:var(--text-body);
}
.fe-badge--count { background:var(--green-50); color:var(--green-700); }
.fe-badge--cpf { background:var(--amber-50); color:var(--amber-700); }
.fe-badge--invert { background:rgba(255,255,255,.18); color:#fff; }

/* --- Bandeau statistiques ---------------------------------------------- */
.fe-stats { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.fe-stat { background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--space-5); }
.fe-stat__v { font-family:var(--font-display); font-size:var(--text-3xl); color:var(--color-primary); line-height:1; }
.fe-stat__l { font-size:var(--text-sm); color:var(--text-muted); margin-top:var(--space-2); }

/* --- Encart d'information ---------------------------------------------- */
.fe-note { border-left:3px solid var(--color-accent); background:var(--amber-50);
  border-radius:var(--radius-sm); padding:var(--space-4) var(--space-5);
  font-size:var(--text-sm); color:var(--neutral-700); }

/* --- Pied de page ------------------------------------------------------- */
.fe-footer { background:var(--green-800); color:var(--green-100); margin-top:var(--space-10); }
.fe-footer__inner { max-width:var(--container-xl); margin:0 auto;
  padding:var(--space-8) var(--space-5); display:grid; gap:var(--space-6);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.fe-footer h4 { font-family:var(--font-display); font-weight:400; font-size:var(--text-base);
  color:var(--text-invert); margin:0 0 var(--space-3); }
.fe-footer a { color:var(--green-100); }
.fe-footer a:hover { color:var(--amber-300); }
.fe-footer__legal { border-top:1px solid rgba(255,255,255,.12);
  padding:var(--space-4) var(--space-5); font-size:var(--text-xs); color:rgba(255,255,255,.55);
  max-width:var(--container-xl); margin:0 auto; }

@media (max-width:760px) {
  /* Le menu déborderait sur trois lignes : on le fige en une bande défilable
     et on rend l'en-tête non collant pour ne pas manger la hauteur d'écran. */
  .fe-header { position:static; }
  .fe-header__inner { padding:var(--space-3) var(--space-4); gap:var(--space-3); }
  .fe-nav { width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .fe-nav::-webkit-scrollbar { display:none; }
  .fe-nav a { white-space:nowrap; }
  .fe-br-md { display:none; }
}

@media (max-width:640px) {
  .fe-section { padding:var(--space-8) 0; }
  .fe-hero__inner { padding:var(--space-8) var(--space-5) var(--space-7); }
  .fe-wrap { padding:0 var(--space-4); }
}

/* ------------------------------------------------------------------
   Adaptation mobile des pages pôle et planning.
   Ces pages construisent leur mise en page avec des styles en ligne
   générés par le runtime ; une règle externe ne peut donc les corriger
   qu'avec !important. C'est volontaire et limité aux quelques
   propriétés qui cassent réellement sous 720 px.
   ------------------------------------------------------------------ */
@media (max-width:720px) {

  /* La sous-barre « onglets + numéro de téléphone » se serrait sur une
     seule ligne : le numéro finissait collé au bord de l'écran. On
     empile, et on annule le margin-left:auto qui poussait le numéro. */
  .fe-subbar { flex-direction:column !important; align-items:flex-start !important; gap:var(--space-3) !important; }
  .fe-subbar > a[href^="tel:"] { margin-left:0 !important; }

  /* Pastilles de session du calendrier. En nowrap + ellipsis sur des
     colonnes de 66 px, les intitulés devenaient « Habilit… », « Lectu… »,
     illisibles et indistinguables. On les laisse passer à la ligne : la
     cellule a un min-height, elle grandit d'elle-même. */
  /* Calendriers des pages pôle : la semaine COMPLÈTE (lundi → vendredi)
     doit rester visible d'un coup — le défilement latéral d'avant ne
     montrait que trois jours sur cinq. On compacte cases, marges et
     pastilles pour que les cinq colonnes tiennent dans l'écran. */
  .fe-cal-scroll { overflow-x:visible; padding-bottom:0; }
  .fe-cal-row { min-width:0; gap:3px !important; }
  .fe-cal-cell { min-height:58px !important; padding:3px 3px 4px !important; border-radius:8px !important; }

  /* Dans la pastille, le nom de la formation prime sur le nombre de places :
     par défaut c'était l'inverse (flex-shrink:0 sur les places), et le jour
     de démarrage n'affichait plus que « H… indice au choix ». */
  .fe-cal-chip__p { flex-shrink:1 !important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .fe-cal-chip {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:10px !important;
    line-height:1.2 !important;
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .fe-cal-chip > span:first-child { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  /* Filet de sécurité : trois lignes au maximum, pour qu'un intitulé
     inhabituellement long ne puisse pas étirer toute la semaine. */
  .fe-cal-chip {
    padding:2px 4px !important;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  }
}

@media (max-width:480px) {
  /* Deux colonnes de moins de 160 px : on repasse en pleine largeur. */
  .fe-grid-2 { grid-template-columns:1fr !important; }
}