:root{
  --primary:#312782;
  --accent:#f29100;
  --text:#111318;
  --muted:#5f6273;
  --bg:#0d0f14;
  --card:#141725;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';
  color:#e9ecff; background:
    radial-gradient(1400px 800px at 100% -10%, rgba(49,39,130,.25), transparent 60%),
    radial-gradient(1200px 700px at -10% 10%, rgba(242,145,0,.18), transparent 60%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
.container{width:min(1080px,92vw);margin-inline:auto}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(0deg, rgba(13,15,20,.6), rgba(13,15,20,.6));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:.2px}
.brand-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#5a46d2);display:grid;place-items:center;box-shadow:var(--shadow)}
.brand-badge svg{width:22px;height:22px}
nav .btn{margin-left:.4rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.72rem 1rem;border-radius:14px;border:1px solid rgba(255,255,255,.14);color:#fff}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ffb74d);border-color:rgba(242,145,0,.6);color:#1b1308}
.btn-accent{background:linear-gradient(135deg,var(--accent),#ffb74d);color:#1b1308;border:none}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid rgba(242,145,0,.45)}
.btn svg{width:18px;height:18px}
main section{padding:2.2rem 0}
.hero{padding:clamp(2rem,3vw,3rem) 0 2rem;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.eyebrow{display:inline-block;font-size:.85rem;letter-spacing:.3px;color:#cfd2ff;opacity:.9}
h1{font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.1;margin:.3rem 0 .6rem}
.lead{color:#c0c4e8;max-width:60ch}
.hero-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow)
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1rem}
.card h3{margin:.2rem 0 .4rem}
.card p{color:#c8cbee}
.list{display:grid;gap:.35rem;margin:.6rem 0}
.list li{list-style:none;display:flex;gap:.6rem;align-items:flex-start}
.list li svg{flex:0 0 20px;margin-top:.1rem}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.badge{padding:.38rem .6rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:.82rem}
.accordion{display:grid;gap:.8rem}
details{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.6rem 1rem}
summary{cursor:pointer;display:flex;align-items:center;gap:.6rem;font-weight:700}
summary::-webkit-details-marker{display:none}
details[open]{outline:2px solid rgba(242,145,0,.35)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
footer{padding:2.2rem 0;color:#c8cbee;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:900px){
  /* mobile-hamburger-only */
  .right-nav .lang-switch, .right-nav .btn-whatsapp-blue{display:none}
  .hamburger{z-index: 100; display:inline-flex; color:var(--accent); border-color:rgba(242,145,0,.45)}
  header .nav{grid-template-columns: 1fr auto}
  .hero-grid, .grid-2, .cards{grid-template-columns:1fr}
}
.pulse-ring{position:absolute;inset:auto auto -14px -14px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(242,145,0,.7);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}


/* Floaty animation for hero card */
@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}
.floaty{animation:floaty 6s ease-in-out infinite}


/* === Mobile Menu (Slide-in) === */
.hamburger{
  display:none; align-items:center; justify-content:center;
  width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14); background:transparent; color:#fff;
}
.hamburger svg{width:22px;height:22px}
@media (max-width:900px){
  /* mobile-hamburger-only */
  .right-nav .lang-switch, .right-nav .btn-whatsapp-blue{display:none}
  .hamburger{z-index: 100; display:inline-flex; color:var(--accent); border-color:rgba(242,145,0,.45)}
  header .nav{grid-template-columns: 1fr auto}
  header .nav nav{display:none}
  .hamburger{z-index: 100; display:inline-flex}
}

.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:49;
}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-left:1px solid rgba(255,255,255,.12);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:50; display:flex; flex-direction:column;
  backdrop-filter:saturate(160%) blur(12px);
}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:1rem; border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-list{display:grid; gap:.2rem; padding:1rem}
.drawer-list a{display:block; padding:.8rem 1rem; border-radius:12px; border:1px solid transparent}
.drawer-list a:hover{border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.05)}
.drawer-footer{margin-top:auto; padding:1rem; border-top:1px solid rgba(255,255,255,.08)}
.drawer.open{transform:translateX(0)}
.drawer-overlay.open{opacity:1; pointer-events:auto}
body.no-scroll{overflow:hidden}



/* Drawer grouped submenus */
.drawer-list details{border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.2rem .4rem; background:rgba(255,255,255,.03)}
.drawer-list summary{cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.8rem 1rem; list-style:none; font-weight:700}
.drawer-list summary::-webkit-details-marker{display:none}
.drawer-list details[open]{outline:1px solid rgba(242,145,0,.35)}
.drawer-sub{display:grid; gap:.2rem; padding:.2rem .5rem .6rem 1rem}
.drawer-sub a{padding:.6rem .8rem; border-radius:10px}
.drawer-sub a:hover{background:rgba(255,255,255,.06)}



/* === Desktop dropdown for 'Nos formations' === */
.nav .nav-dropdown{position:relative; display:inline-block}
.nav .nav-dropdown > summary,
.nav .nav-dropdown > .nav-drop-btn{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  padding:.72rem 1rem; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:transparent; color:#fff;
}
.nav .nav-dropdown > summary::-webkit-details-marker{display:none}

.nav .nav-menu{position:absolute; top:110%; left:0; min-width:320px; max-width:540px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:.6rem; box-shadow:var(--shadow);
  display:none;
}
.nav details[open] > .nav-menu{display:block}

.nav .nav-columns{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.nav .nav-group{border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.4rem .6rem; background:rgba(255,255,255,.03)}
.nav .nav-group h4{margin:.4rem 0; font-size:.95rem; opacity:.9}
.nav .nav-group a{display:block; padding:.5rem .6rem; border-radius:10px}
.nav .nav-group a:hover{background:rgba(255,255,255,.06)}

@media (max-width:900px){
  /* mobile-hamburger-only */
  .right-nav .lang-switch, .right-nav .btn-whatsapp-blue{display:none}
  .hamburger{z-index: 100; display:inline-flex; color:var(--accent); border-color:rgba(242,145,0,.45)}
  header .nav{grid-template-columns: 1fr auto}
  .nav .nav-dropdown{display:none} /* desktop-only dropdown; mobile uses drawer */
}


/* === Smooth transitions === */
a, .btn, .nav a, .drawer-list a, .drawer-list summary, .nav .nav-dropdown > summary {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .2s ease;
}


.btn:not(.btn-primary):not(.btn-accent):hover{background:rgba(242,145,0,.12);border-color:rgba(242,145,0,.65)}
.btn-primary:hover,.btn-accent:hover{filter:brightness(1.05)}


/* === Orange nav (desktop) === */
.nav .nav-dropdown > summary,
.nav .nav-dropdown > .nav-drop-btn,
.nav a.btn-ghost{ color:var(--accent); border-color:rgba(242,145,0,.45) }
.nav .nav-group a{ color:var(--accent) }
.nav .nav-group a:hover{ background:rgba(242,145,0,.12) }


/* === Orange drawer (mobile) === */
.hamburger{ color:var(--accent); border-color:rgba(242,145,0,.45) }
.drawer-list a, .drawer-list summary{ color:var(--accent) }
.drawer-list a:hover{ background:rgba(242,145,0,.12) }
.drawer-list details{ border-color:rgba(242,145,0,.35) }
.drawer-list details[open]{ outline:1px solid rgba(242,145,0,.45) }



/* === Spec: centered desktop nav with only 3 items; right side languages (white) + WhatsApp (blue) === */
header .nav{grid-template-columns: 1fr auto 1fr; display:grid; align-items:center}
header .nav .brand{justify-self:start}
header .nav .center-nav{justify-self:center; display:flex; gap:2rem}
header .nav .right-nav{justify-self:end; display:flex; align-items:center; gap:.5rem}
header .nav .center-nav a{color:#fff; border-color:transparent}
header .nav .center-nav a:hover{color:var(--accent)}

.lang-switch a{color:#fff !important; border-color:rgba(255,255,255,.35) !important}
.lang-switch a:hover{background:rgba(255,255,255,.12)}

.btn-whatsapp-blue{background:#312782 !important; color:#fff !important; border:1px solid rgba(255,255,255,.2) !important}
.btn-whatsapp-blue:hover{filter:brightness(1.05)}

/* Mobile: logo left, orange menu button right */
@media (max-width:900px){
  /* mobile-hamburger-only */
  .right-nav .lang-switch, .right-nav .btn-whatsapp-blue{display:none}
  .hamburger{z-index: 100; display:inline-flex; color:var(--accent); border-color:rgba(242,145,0,.45)}
  header .nav{grid-template-columns: 1fr auto}
  header .nav{grid-template-columns: 1fr auto}
  header .nav .center-nav{display:none}
  header .nav .right-nav{display:none}
  .hamburger{z-index: 100; display:inline-flex; color:var(--accent); border-color:rgba(242,145,0,.45)}
}

/* Drawer: first section = main menu in orange; separator orange; languages white; WhatsApp blue */
.drawer .main-links a{color:var(--accent)}
.drawer .lang-links a{color:#fff}
.drawer hr.sep-orange{border:0; height:1px; background:linear-gradient(90deg, rgba(242,145,0,.8), rgba(242,145,0,.3)); margin:.4rem 0 .6rem}
.drawer .btn.btn-primary{background:#312782; color:#fff}



/* === FORCE MOBILE HAMBURGER & LAYOUT === */
@media (max-width:900px){
  header .nav{grid-template-columns: 1fr auto !important;}
  header .nav .center-nav{display:none !important;}
  header .nav .right-nav{display:flex !important; align-items:center !important;}
  .right-nav .lang-switch, .right-nav .btn-whatsapp-blue{display:none !important;}
  .hamburger{z-index: 100; display:inline-flex !important; color:var(--accent) !important; border-color:rgba(242,145,0,.45) !important; z-index:60;}
}
/* === HEADER SHADOW ON SCROLL === */
header.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.22); }


/* drawer z-index fix */
.drawer{z-index: 200}
.drawer-overlay{z-index: 190}
header{z-index:180}


/* === Bandeau défilant E-commerce === */
.scroll-band {
  overflow: hidden;
  white-space: nowrap;
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: .6rem 0;
  margin-bottom: 1rem;
  position: relative;
}

.scroll-track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  animation: scrollLoop 25s linear infinite;
}

.scroll-track span {
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .3px;
  font-size: .95rem;
}

.scroll-track img {
  height: 24px;
  filter: brightness(0) invert(1);
  opacity: .85;
}

@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Option : dupliquer le contenu pour effet continu parfait */
.scroll-track::after {
  content: attr(data-duplicate);
}


/* === Section inscription deux colonnes === */
.section#inscription {
  padding: 3rem 0;
}

.section#inscription .container.grid-2 {
  align-items: center;
  gap: 2rem;
}

.section#inscription .image-col img {
  transition: transform .4s ease, box-shadow .4s ease;
}
.section#inscription .image-col img:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

.section#inscription .form-col {
  background: rgba(255,255,255,0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
}

@media (max-width:900px){
  .section#inscription .container.grid-2 {
    grid-template-columns: 1fr;
  }
  .section#inscription .image-col {
    order: -1;
  }
}


/* === Style moderne du formulaire Univers Center === */
.uc-form {
  width: 100%;
}

.uc-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.uc-form .field label {
  font-weight: 600;
  color: #fff;
  margin-bottom: .35rem;
  font-size: .95rem;
  letter-spacing: .3px;
}

.uc-form .input,
.uc-form select.input,
.uc-form textarea.input {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: .7rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .95rem;
  transition: border .3s ease, background .3s ease;
  outline: none;
}

.uc-form .input:focus,
.uc-form select.input:focus,
.uc-form textarea.input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,.12);
}

.uc-form textarea.input {
  min-height: 100px;
  resize: vertical;
}

.uc-form .btn,
.uc-form button.btn-accent {
  border-radius: .7rem;
  padding: .7rem 1.4rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .4px;
}

/* Sur mobile : champs pleine largeur et bien espacés */
@media (max-width:900px){
  .uc-form .field { margin-bottom: 1.1rem; }
}

/* Empêcher le dépassement horizontal en grid */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* <- minmax(0,1fr) évite l'overflow */
  gap:1rem;
}

/* Contrainte de largeur pour les blocs et images */
.image-col img{max-width:100%;height:auto}
.form-col, .image-col, .card{max-width:100%}

/* Tableau responsive : scroll horizontal doux si trop large */
.table-responsive{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.table-responsive table{
  width:100%;
  min-width:600px;               /* évite que le tableau se “casse” trop */
  border-collapse:collapse;
}
.table-responsive th,
.table-responsive td{
  padding:.6rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  word-break:break-word;         /* casse les longs mots */
}

/* Sur mobile : une seule colonne */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr}
}

/* ==== FIX overflow des cartes (Objectifs, Public cible, Méthodologie, Évaluation) ==== */

/* Grilles à 2 colonnes qui ne débordent pas */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* minmax(0,1fr) évite l'overflow */
  gap:1rem;
}

/* Cartes jamais plus larges que la colonne */
.card{
  max-width:100%;
  overflow:hidden;                 /* coupe toute fuite visuelle */
  min-width:0;                     /* autorise la réduction dans la grille */
}

/* Contenu interne : autoriser les retours à la ligne sains */
.card p,
.card ul,
.card li,
.card .list{
  overflow-wrap:anywhere;          /* casse les longs mots/URLs au besoin */
  word-break:break-word;
  min-width:0;
}

/* Images dans les colonnes/cartes */
.image-col img,
.card img{
  max-width:100%;
  height:auto;
}

/* Tableaux responsive (si présents) */
.table-responsive{ overflow:auto; -webkit-overflow-scrolling:touch; }
.table-responsive table{ width:100%; min-width:600px; border-collapse:collapse; }

/* Mobile : une seule colonne */
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
}

/* ==== Style harmonisé des <details> en carte ==== */
details.card {
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  padding: 1rem 1.2rem;
  transition: background .3s ease, border-color .3s ease;
}
details.card[open] {
  background: rgba(255,255,255,.08);
  border-color: var(--accent);
}
details.card summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
}
details.card summary::-webkit-details-marker {
  display: none;
}
details.card summary::after {
  content: "＋";
  float: right;
  transition: transform .3s ease;
  color: var(--accent);
  font-weight: bold;
}
details.card[open] summary::after {
  content: "−";
}

/* Liste à retour de ligne après le titre */
details.card ul.list li {
  margin-bottom: .6rem;
  line-height: 1.5;
}
details.card ul.list li strong {
  display: block;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: .2rem;
}

/* ==== Style carte déroulante (Public cible) ==== */
details.card {
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  padding: 1rem 1.2rem;
  transition: background .3s ease, border-color .3s ease;
}
details.card[open] {
  background: rgba(255,255,255,.08);
  border-color: var(--accent);
}
details.card summary {
  cursor: pointer;
  list-style: none;
  outline: none;
  user-select: none;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: "＋";
  float: right;
  transition: transform .3s ease;
  color: var(--accent);
  font-weight: bold;
}
details.card[open] summary::after { content: "−"; }

/* ==== Liste avec titre au-dessus du texte ==== */
details.card ul.list li {
  margin-bottom: .8rem;
  line-height: 1.6;
  list-style: none;
}
details.card ul.list li strong {
  display: block;          /* force le titre sur sa propre ligne */
  margin-bottom: .25rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
}

/* Empiler titre + texte dans les listes des cartes repliables */
details.card ul.list li{
  display:block !important;      /* annule le display:flex global */
  margin-bottom:.8rem;
  line-height:1.6;
}

details.card ul.list li strong{
  display:block;                  /* titre sur sa propre ligne */
  margin-bottom:.25rem;
  color: var(--accent);
  font-weight:600;
  font-size:.95rem;

  /* éviter les coupures du mot */
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

/* au cas où il reste des <br> ajoutés auparavant, ils deviennent inutiles */
details.card ul.list li br{ display:none; }


/* --- Swipe horizontal dans la carte --- */
.swipe-card { overflow: hidden; }          /* masque ce qui dépasse visuellement */

.swipe-wrap {
  position: relative;
  margin-top: .5rem;
  overflow-x: auto;                        /* scroll horizontal au doigt */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;           /* snap fluide de slide en slide */
}

.swipe-list {
  display: flex;
  gap: 1rem;
  padding: .25rem .25rem .5rem;            /* petite marge pour l’ombre éventuelle */
  margin: 0;
  list-style: none;                         /* on supprime les bullets pour ce carrousel */
}

.swipe-item {
  scroll-snap-align: start;
  flex: 0 0 100%;                           /* 1 slide = 100% de la largeur de la carte */
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .9rem;
  background: rgba(255,255,255,.05);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  min-width: 0;                             /* évite l’overflow interne */
  line-height: 1.6;
}

/* Titres au-dessus du texte + pas de coupures de mots */
.swipe-item strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
}
.swipe-item, .swipe-item * {
  word-break: keep-all;                     /* ne coupe pas les mots */
  overflow-wrap: normal;
  hyphens: none;
}

/* Option : petites barres d’indication défilement (facultatif) */
.swipe-wrap::-webkit-scrollbar { height: 6px; }
.swipe-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 6px; }


/* --- Carte à scroll VERTICAL (empilement, pas de coupure de mots) --- */
.scroll-card { overflow: hidden; }
.scroll-card .scroll-vert{
  max-height: 240px;              /* ajuste la hauteur visible de la liste */
  overflow-y: auto;               /* swipe vertical */
  -webkit-overflow-scrolling: touch;
  padding-right: .5rem;           /* place pour la scrollbar */
}

/* Empilement propre des items (override d’un éventuel .list li {display:flex}) */
.stacked-list li{
  display: block !important;
  margin-bottom: .8rem;
  line-height: 1.6;
  list-style: none;               /* enlève les puces; retire cette ligne si tu veux des puces */
}

/* Titre (petit titre) au-dessus du texte, sans césure */
.stacked-list li strong{
  display: block;
  margin-bottom: .25rem;
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
}

/* Pas de mots coupés */
.stacked-list, .stacked-list *{
  white-space: normal;
  word-break: keep-all;           /* ne casse pas les mots */
  overflow-wrap: normal;
  hyphens: none;
}

/* Option: scrollbar discrète */
.scroll-card .scroll-vert::-webkit-scrollbar{ width: 6px; }
.scroll-card .scroll-vert::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2); border-radius: 6px;
}

/* Mobile: on peut laisser la hauteur s'agrandir un peu si tu veux */
@media (max-width: 900px){
  .scroll-card .scroll-vert{ max-height: 300px; }
}


/* === mIRC-like chat === */
.mirc-chat{
  background:#0f0f12;
  border:1px solid #2a2a33;
  border-radius:10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  display:flex; flex-direction:column; height: 360px;
}
.mirc-log{
  flex:1; padding:10px; overflow:auto; -webkit-overflow-scrolling:touch;
  color:#e5e7eb; font-size:14px; line-height:1.5;
}
.mirc-line{ white-space:pre-wrap; word-break:break-word; }
.mirc-time{ color:#8b8fa3; }
.mirc-nick{ font-weight:700; }
.mirc-nick.user{ color:#7cc5ff; }
.mirc-nick.agent{ color:#ffb457; }
.mirc-meta{ color:#9aa1b6; }
.mirc-error{ color:#ff6b6b; }
.mirc-typing{ color:#9aa1b6; font-style:italic; }

.mirc-input{
  display:flex; align-items:center; gap:.5rem;
  border-top:1px solid #2a2a33; padding:8px 10px; background:#111116; border-radius:0 0 10px 10px;
}
.mirc-input .prompt{ color:#8087a2; }
#mircMsg{
  flex:1; background:#16161c; color:#e5e7eb; border:1px solid #2a2a33; border-radius:6px;
  padding:.55rem .7rem; outline:none; font:inherit;
}
#mircMsg:focus{ border-color:#ff9800; box-shadow:0 0 0 2px rgba(255,152,0,.2); }
#mircSend{ white-space:nowrap; border-radius:8px; padding:.55rem 1rem; }


/* ==== FIX FORMATIONS PAGE (hero, 4 cartes, chat simple) ==== */

/* HERO spécifique à la page formations */
.hero-forms{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,153,0,.18), transparent),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  padding: 2.5rem 0 1rem;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
  gap:2rem;
}
.hero-text h1{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin:0 0 .4rem }
.hero-text .lead{ opacity:.9; margin-bottom: .8rem }
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap }
.hero-art img{ width:100%; height:auto; border-radius:1.2rem; box-shadow:0 12px 40px rgba(0,0,0,.28); object-fit:cover }

@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
}

/* Grille 4 cartes (classes utilisées dans la page) */
.cards4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1rem;
}
.card-link{
  text-decoration:none;
  color:inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:1px solid rgba(255,255,255,.08);
  padding:1rem;
  border-radius:var(--radius);
  background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  display:block;
}
.card-link:hover{
  transform: translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  border-color: var(--accent);
}
.card-link .card-img{
  height:140px; margin-bottom:.6rem; overflow:hidden; border-radius:.8rem;
}
.card-link .card-img img{
  width:100%; height:100%; object-fit:cover;
}

@media (max-width:1100px){
  .cards4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){
  .cards4{ grid-template-columns: 1fr; }
}

/* Chat "simple" (chatbox) utilisé dans la page (distinct de mIRC) */
.chatbox{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius:1rem;
  padding: .8rem;
}
.chatlog{
  max-height: 280px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.4rem;
}
.chat-controls{
  display:flex; gap:.5rem; margin-top:.6rem;
}
.chat-controls .input{
  flex:1; border-radius:.7rem; padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color:#fff;
}

/* =========================================================
   ONE-SHOT (si tu veux l'ancienne version non-bouclée)
   ---------------------------------------------------------
   Laisse ce bloc si tu utilises encore la classe .typewriter
   quelque part. Sinon, tu peux le supprimer.
   ========================================================= */
.typewriter {
  display: inline-block;
  overflow: hidden;            /* coupe car on anime la largeur */
  white-space: nowrap;         /* pas de retour à la ligne (one-shot) */
  border-right: 3px solid var(--ocre, #f29100);
  animation: typing 4s steps(60, end), blink-cursor 0.8s step-end infinite;
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  line-height: 1.5;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-cursor { 0%,100% { border-color: transparent; } 50% { border-color: var(--ocre, #f29100); } }

/* =========================================================
   LOOP MULTI-LIGNES (celle que tu veux)
   ---------------------------------------------------------
   - wrap automatique (jamais de débordement)
   - curseur clignotant accolé au texte
   - AUCUN ::after, AUCUN overflow:hidden
   - pas d'animation de width (on modifie le textContent en JS)
   ========================================================= */
.typewriter-loop {
  display: block;               /* prend toute la largeur disponible */
  max-width: 100%;
  white-space: normal;          /* autorise le retour à la ligne */
  word-break: break-word;       /* coupe proprement si besoin */
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* le texte animé */
.typewriter-loop .tw-text {
  display: inline;              /* le curseur suit le flux */
}

/* curseur clignotant */
.typewriter-loop .tw-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--ocre, #f29100);
  vertical-align: -0.1em;
  animation: tw-blink 0.8s step-end infinite;
}

@keyframes tw-blink { 50% { opacity: 0; } }

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}