/*  84studio — Global stylesheet (v1.0)  Scope: all pages (Accueil, formations, conférences, Avina, mentions légales…)  Author: 84studio  Notes: Mobile‑first, accessible, lightweight. Uses CSS variables + utility classes.*//* ------------------------------   0) CSS Reset & Base------------------------------ */*, *::before, *::after { box-sizing: border-box; }html { -webkit-text-size-adjust: 100%; }body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, sans-serif; line-height: 1.55; color: var(--text); background: var(--bg-1); }img, svg, video { max-width: 100%; height: auto; }img { display: block; }button, input, textarea, select { font: inherit; color: inherit; }:focus { outline: 3px solid var(--focus); outline-offset: 2px; }:focus:not(:focus-visible) { outline: none; }:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }/* ------------------------------   1) Design Tokens (variables)------------------------------ */:root {  /* Palette principale */  --primary-1: #ed7378; /* rose corail */  --primary-2: #f18a5f; /* orange doux */  --primary-3: #f9c5b8; /* sable rosé */  /* Dégradé principal */  --grad-main: linear-gradient(90deg, var(--primary-1), var(--primary-2), var(--primary-3));  /* Palette secondaire */  --secondary-1: #a72886; /* prune */  --secondary-2: #ee7378; /* rose chaud */  --grad-sec: linear-gradient(90deg, var(--secondary-1), var(--secondary-2));  /* Neutres */  --bg-1: #fafbfc; /* fond clair */  --bg-2: #ffffff; /* surface */  --line-1: #eee;   /* bordure légère */  --line-2: #e6e6ef;/* bordure douce */  --text: #16181d;  /* texte principal */  --text-2: #2f2f35;/* texte secondaire */  --muted: #616173; /* texte gris */  --shadow: 0 8px 30px rgba(0,0,0,.06);  /* États */  --success: #22c55e; /* vert */  --warning: #f59e0b; /* jaune */  --danger:  #ef4444; /* rouge */  --focus: rgba(167, 40, 134, .45); /* halo accessibilité (secondary‑1) */  /* Rayons & spacing */  --radius-sm: 10px;  --radius-md: 14px;  --radius-lg: 18px;  --radius-xl: 28px;  --gap: 20px;  --container: 1100px;}@media (prefers-reduced-motion: reduce) {  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }}/* ------------------------------   2) Typography & Elements------------------------------ */h1, h2, h3, h4 { color: var(--text); line-height: 1.15; margin: 0 0 .5em; }h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: .2px; }h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; }h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }p { margin: 0 0 1em; color: var(--text-2); }ul, ol { padding-left: 1.2em; margin: .2em 0 1em; }small { color: var(--muted); }a { color: var(--secondary-1); text-decoration: none; }a:hover { text-decoration: underline; }/* Accent underlines */.u-underline { text-decoration: underline; text-decoration-color: var(--primary-1); text-decoration-thickness: 2px; text-underline-offset: 3px; }/* ------------------------------   3) Layout helpers------------------------------ */.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }.section { padding: 72px 0; }.section--tight { padding: 40px 0; }.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }.span-12 { grid-column: span 12; }.span-6 { grid-column: span 6; }.span-4 { grid-column: span 4; }.span-3 { grid-column: span 3; }@media (max-width: 900px) {  .grid { grid-template-columns: repeat(12, 1fr); }  .span-6, .span-4, .span-3 { grid-column: span 12; }}.flex { display: flex; }.flex-col { display: flex; flex-direction: column; }.items-center { align-items: center; }.justify-between { justify-content: space-between; }.gap-sm { gap: 10px; }.gap-md { gap: 16px; }.gap-lg { gap: 24px; }/* Spacing utils */.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}.mt-5{margin-top:32px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:24px}.mb-5{margin-bottom:32px}.py-0{padding-block:0}.py-1{padding-block:10px}.py-2{padding-block:18px}.py-3{padding-block:28px}.py-4{padding-block:40px}.p-1{padding:10px}.p-2{padding:16px}.p-3{padding:22px}.p-4{padding:28px}/* Width helpers */.w-full { width: 100%; }.max-w-sm { max-width: 560px; }/* ------------------------------   4) Header / Nav------------------------------ */.header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.7); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line-1); }.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }.brand { font-weight: 800; letter-spacing: .2px; }.nav-links { display: flex; align-items: center; gap: 18px; }.pill { padding: 10px 14px; border-radius: 999px; background: var(--grad-sec); color: #fff; font-weight: 700; box-shadow: var(--shadow); border: 0; }/* ------------------------------   5) Hero------------------------------ */.hero { padding: 72px 0; background: var(--grad-main); color: #1a1a1a; }.hero-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }@media (max-width: 900px) { .hero-wrap { grid-template-columns: 1fr; } }.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); font-weight: 700; }.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-1); display: inline-block; }.lead { font-size: clamp(15px, 1.4vw, 18px); color: #2f2f35; }/* ------------------------------   6) Cards, Panels, Sections------------------------------ */.card { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }.card--soft { background: linear-gradient(180deg, #fff, #fff8f7); border: 1px solid #ffe0db; }.section-title { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 18px; position: relative; }.section-title::after { content: ""; display: block; height: 4px; width: 64px; background: var(--grad-sec); border-radius: 2px; margin-top: 10px; }/* ------------------------------   7) Buttons------------------------------ */.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; background: #fff; color: var(--text); font-weight: 800; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }.btn:active { transform: translateY(0); }.btn--primary { background: var(--secondary-1); color: #fff; }.btn--ghost { background: #ffffffcc; border-color: #ffffff90; }.btn--light { background: var(--bg-2); border: 1px solid var(--line-2); }.btn--wide { min-width: 200px; }/* Icon buttons */.btn .icon { width: 1.1em; height: 1.1em; display: inline-block; }/* ------------------------------   8) Forms------------------------------ */.form { display: grid; gap: 12px; }.input, .textarea, .select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; color: var(--text); }.textarea { min-height: 120px; resize: vertical; }.input:focus, .textarea:focus, .select:focus { border-color: var(--secondary-1); box-shadow: 0 0 0 3px rgba(167,40,134,.12); outline: none; }.label { font-weight: 700; margin-bottom: 4px; display: inline-block; }.help { color: var(--muted); font-size: .92rem; }/* ------------------------------   9) Tables (mentions, programmes, tarifs)------------------------------ */.table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line-1); border-radius: var(--radius-md); overflow: hidden; }.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--line-1); text-align: left; }.table thead th { background: #faf6ff; color: var(--secondary-1); font-weight: 800; }.table tbody tr:hover { background: #fffafa; }/* ------------------------------   10) Badges, Alerts, Chips------------------------------ */.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--line-2); font-weight:700; }.alert { border: 1px solid var(--line-2); border-left: 4px solid var(--secondary-1); background: #fff; padding: 12px 14px; border-radius: var(--radius-md); }.alert--success { border-left-color: var(--success); }.alert--warning { border-left-color: var(--warning); }.alert--danger  { border-left-color: var(--danger); }/* ------------------------------   11) Lists (features, check)------------------------------ */.list { display: grid; gap: 10px; padding: 0; margin: 12px 0 0; list-style: none; }.list li { display: flex; gap: 10px; align-items: flex-start; }.list .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary-2); margin-top: 8px; flex: none; }/* ------------------------------   12) Hero/Section variants for subpages------------------------------ */.sub-hero { padding: 48px 0; background: var(--grad-sec); color: #fff; }.sub-hero h1 { color: #fff; }/* ------------------------------   13) Footer------------------------------ */.footer { background: #111; color: #ddd; }.footer a { color: #fff; text-decoration: none; }.footer a:hover { text-decoration: underline; }.footer-inner { padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }/* ------------------------------   14) Utilities (colors, gradients, shadows)------------------------------ */.bg-white { background: #fff; }.bg-panel { background: var(--bg-2); }.bg-grad-main { background: var(--grad-main); }.bg-grad-sec { background: var(--grad-sec); }.text-primary { color: var(--primary-1); }.text-secondary { color: var(--secondary-1); }.text-muted { color: var(--muted); }.shadow { box-shadow: var(--shadow); }.rounded-sm { border-radius: var(--radius-sm); }.rounded-md { border-radius: var(--radius-md); }.rounded-lg { border-radius: var(--radius-lg); }.rounded-xl { border-radius: var(--radius-xl); }/* Text gradient helper */.text-gradient { background: var(--grad-sec); -webkit-background-clip: text; background-clip: text; color: transparent; }/* ------------------------------   15) Components: pricing, FAQ, timeline (optionnel)------------------------------ */.pricing { display: grid; gap: var(--gap); grid-template-columns: repeat(12,1fr); }.pricing .plan { grid-column: span 4; }@media (max-width: 900px){ .pricing .plan { grid-column: span 12; } }.faq { display: grid; gap: 12px; }.faq-item { border:1px solid var(--line-1); border-radius: var(--radius-md); background:#fff; padding: 14px; }.timeline { position: relative; padding-left: 26px; }.timeline::before { content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background: var(--line-2); }.timeline .step { position: relative; padding: 10px 0 10px 0; }.timeline .step::before { content:""; position:absolute; left:-2px; top:12px; width:10px; height:10px; background: var(--secondary-1); border-radius:50%; }/* ------------------------------   16) Forms: inline newsletter (si besoin)------------------------------ */.inline-form { display: flex; gap: 8px; }.inline-form .input { flex: 1; }@media (max-width: 640px){ .inline-form { flex-direction: column; } }/* ------------------------------   17) Code & monospaced------------------------------ */.code, code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #2d2d2d; }pre { background: #fff; border: 1px solid var(--line-1); border-radius: var(--radius-md); padding: 14px; overflow: auto; }/* ------------------------------   18) Print basics------------------------------ */@media print {  .header, .footer { display: none !important; }  .btn, .pill { display: none !important; }  a { text-decoration: underline; }  .section { padding: 24px 0; }}/* ------------------------------   19) Page‑specific suggestions (hooks)   - Add these classes to the body to style specific templates if needed------------------------------ */body.page-formation-ia   .sub-hero { background: var(--grad-main); }body.page-conference-ia  .sub-hero { background: var(--grad-sec); }body.page-mentions       .sub-hero { background: #111; }/* End of file */
.card img {
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  background: linear-gradient(180deg, #fff 0%, #f9c5b8 100%);
  padding: 6px;
}
h1::after, h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--grad-sec);
  border-radius: 2px;
  margin-top: 10px;
}
p { color: #4a4f63; }
.text-accent { color: #a72886; }
h1, h2, h3 {
  font-family: "Playfair Display", serif;
  color: #1a2238;
}
body {
  font-family: "Inter", sans-serif;
  color: #4a4f63;
}
.span-8 {
  grid-column: span 8;
}
h2{margin-top:15px !important;}

@media (max-width: 1000px){
  .nav { flex-wrap: wrap; }
  .nav-links{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
  }
  .nav{ display:flex; flex-wrap:wrap; align-items:center; }
  .nav > a{ width:100%; order:0; text-align:center; }  /* le lien qui contient .brand */
  .brand{ display:inline-block; margin:0 auto; }       /* centre le texte/logo */
  .nav-links a { display:inline-block; padding:8px 12px; }
  .container{display:block !important;}
  aside{margin-top:20px !important;}
}