/* Tag Academy - landing "Reprenez la main sur vos chiffres"
   Design system inspiré de roborabbit.com : Inter 400/800, bordures noires 2px,
   ombres dures 3px 3px 0, radius 5px, sections pleines avec drips SVG. */

:root {
  --ink: #1c222c;        /* JET BLACK */
  --accent: #f9f871;     /* Accent (ex TULIP) */
  --blue: #c1d6ff;       /* ANGEL BLUE */
  --blue-dark: #96b2e0;  /* Dark shade */
  --blue-light: #dce9ff; /* Light shade */
  --pearl: #fafafa;      /* Background / Neutral */
  --sand: #dad8d4;       /* Dark shade neutre */
  --body-max: 1100px;
}

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

html {
  background: #fff;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--ink);
  min-height: 100%;
  font-family: 'Inter', BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

img { max-width: 100%; }
a { color: #007aff; text-decoration: none; }
ul { list-style: none; }

.global_container { background: var(--pearl); position: relative; }

.container {
  max-width: var(--body-max);
  padding: 0 20px;
  margin: 0 auto;
  width: 100%;
  display: block;
}

/* ---------- Header ---------- */

header { background: var(--pearl); }

header .level {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .level-left,
header .level-right { display: flex; align-items: center; }

header .level-left a.logo {
  margin-left: 1.25em;
  font-size: 1.5em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

header .logo_mark {
  width: 38px;
  height: 38px;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62em;
  font-weight: 800;
}

header .level-right { margin-right: 2em; }

header .level-right .level-item {
  margin-left: 2em;
  font-size: 1.2em;
  font-weight: 500;
  position: relative;
}

header .level-right .level-item a,
header .level-right .level-item span.menu_item { color: var(--ink); cursor: pointer; }

header .level-right .level-item a.signin {
  font-size: 0.7em;
  border: 2px solid var(--ink);
  padding: 5px 12px;
  border-radius: 5px;
  background: var(--accent);
  font-weight: 700;
}

/* Dropdown (style roborabbit) */
.dropdown { position: relative; }
.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -1em;
  z-index: 3000;
  padding-top: 8px;
  min-width: 16em;
}
.dropdown.is-right .dropdown-menu { left: auto; right: 0; }
.dropdown:hover .dropdown-menu,
.dropdown.is-open .dropdown-menu { display: block; }
.dropdown .dropdown-content {
  background: #fff;
  border-radius: 5px;
  border: 2px solid var(--ink);
  padding: 0.5em 0;
  font-size: 0.85em;
}
.dropdown .dropdown-content a.dropdown-item {
  display: block;
  color: var(--ink);
  padding: 0.4em 1.2em;
  white-space: nowrap;
}
.dropdown .dropdown-content a.dropdown-item:hover { background: var(--accent); }
.dropdown .dropdown-content strong.dropdown-item {
  display: block;
  padding: 0.4em 1.2em;
}
.dropdown-divider { border-top: 1px solid var(--sand); margin: 0.5em 0; display: block; }

.hamburger {
  cursor: pointer;
  font-size: 1.6em;
  line-height: 1;
  padding: 0.2em 0.4em;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fff;
  font-weight: 800;
}

@media (min-width: 1024px) {
  .is-hidden-desktop { display: none !important; }
}
@media (max-width: 1023px) {
  .is-hidden-touch { display: none !important; }
  header .level-left a.logo { margin-left: 0.5em; font-size: 1.25em; }
  header .level-right { margin-right: 1em; }
}

/* ---------- Sections ---------- */

.biglayer { border-bottom: 2px solid var(--ink); position: relative; }
.biglayer .container_inner { padding: 80px 0; position: relative; }
.biglayer.hero { z-index: 2000; }
.biglayer.hero .container_inner { padding-top: 50px; }

.fill_white { background: var(--pearl); }
.fill_blue { background: var(--ink); }
.fill_yellow { background: var(--accent); }

/* Drip : la section "coule" sous sa bordure basse */
.biglayer .drip {
  position: absolute;
  z-index: 100;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  height: 42px;
  pointer-events: none;
}
.biglayer .drip svg { display: block; height: 42px; width: auto; }
.fill_white .drip path { fill: var(--pearl); }
.fill_blue .drip path { fill: var(--ink); }
.fill_yellow .drip path { fill: var(--accent); }

/* Colonnes */
.columns { display: flex; gap: 0; }
.columns .column { flex: 1 1 0; min-width: 0; }
/* Colonne texte (gauche) : 65 % ; le visuel de droite prend le reste (35 %) */
.columns .column.is-half { flex: 0 0 65%; }
.column_inner { height: 100%; position: relative; }

@media (max-width: 768px) {
  .columns { flex-direction: column; }
  .columns .column.is-half { flex: 1 1 auto; }
  .columns.mobile_spaced .column { padding-top: 50px; }
  .columns.mobile_spaced .column:first-child { padding-top: 0; }
}

/* Gouttière entre les deux colonnes + centrage vertical du visuel de droite */
@media (min-width: 769px) {
  .columns .column.is-half:first-child .column_inner { padding-right: 3em; }
  .columns .column:last-child .column_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Sur grand écran, le visuel de droite est poussé vers la droite */
@media (min-width: 1216px) {
  .columns .column:last-child .column_inner {
    padding-left: 1.5em;
    margin-right: -2.5em;
  }
}

/* ---------- Typographie des sections ---------- */

.big_text h1, .big_text h2, .big_text h3,
.column_text h1, .column_text h2, .column_text h3 {
  font-size: 2.7em;
  line-height: 1.1em;
  font-weight: 800;
  padding-bottom: 0.5em;
  letter-spacing: -0.03em;
}

.big_text h1.global_index,
.column_text h1.global_index { font-size: 4.1em; line-height: 1em; }

.big_text p, .column_text p { font-size: 1.5em; padding-top: 1em; }
.big_text p:first-of-type, .column_text p:first-of-type { padding-top: 0; }

.big_text { text-align: center; }
.column_text p { padding-right: 2em; }

@media (max-width: 768px) {
  .big_text h1.global_index, .column_text h1.global_index { font-size: 3.3em; }
  .big_text h1, .column_text h1 { font-size: 3.3em; }
  .column_text p { padding-right: 0; }
  .biglayer .container_inner { padding: 50px 0 80px; }
}

/* ---------- CTA ---------- */

.cta { margin-top: 2em; }

a.bigbutton, button.bigbutton {
  font-family: inherit;
  line-height: 1.5em;
  border: 2px solid var(--ink);
  padding: 20px 45px;
  font-size: 1.5em;
  font-weight: 400;
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 5px;
  background: var(--accent);
  color: var(--ink);
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: 0; left: 0;
}
a.bigbutton:hover, button.bigbutton:hover {
  top: 4px; left: 4px;
  box-shadow: 1px 1px 0 var(--ink) !important;
  transition: box-shadow 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
}
button.bigbutton:disabled { opacity: 0.5; cursor: wait; }

/* Formulaire liste d'attente */
.signup_form { display: flex; gap: 14px; margin-top: 2em; flex-wrap: wrap; }
.signup_form input[type="email"] {
  font-family: inherit;
  font-size: 1.2em;
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 15px 18px;
  flex: 1 1 240px;
  background: #fff;
  color: var(--ink);
  min-width: 0;
}
.signup_form input[type="email"]::placeholder { color: #777; }
.signup_form button.bigbutton {
  font-size: 1.2em;
  padding: 15px 30px;
  font-weight: 700;
  flex: 0 0 auto;
}
.signup_form .hp_field { position: absolute; left: -5000px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.form_message { font-weight: 700; margin-top: 1em; display: none; }
.form_message.is-success { display: block; }
.form_message.is-error { display: block; color: #c0392b; }
@media (max-width: 480px) {
  .signup_form button.bigbutton { width: 100%; text-align: center; }
}

/* Checkmarks */
.checkmarks { padding-top: 30px; }
.checkmarks .check_line { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
span.general_check {
  background: var(--ink);
  color: #fff;
  width: 20px; height: 20px;
  flex: 0 0 20px;
  text-align: center;
  line-height: 20px;
  border-radius: 30px;
  font-size: 12px;
  display: inline-block;
  font-weight: bold;
}

/* ---------- Hero : la carte "trois rapports" ---------- */

.report_card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  position: relative;
  margin-top: 10px;
}
.report_card .report_card_header {
  border-bottom: 2px solid var(--ink);
  padding: 14px 20px;
  font-weight: 800;
  font-size: 1.1em;
}
.report_row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 2px solid var(--ink);
  font-size: 1.1em;
}
.report_row:last-child { border-bottom: none; }
.report_row .app_logo {
  height: 52px; width: 52px;
  flex: 0 0 52px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8em;
}
.report_row .app_logo.app_logo_img { background: #fff; padding: 7px; }
.report_row .app_logo.app_logo_img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.report_row .report_label { font-weight: 700; }
.report_row .report_value { margin-left: auto; font-weight: 800; font-size: 1.25em; white-space: nowrap; }
.sticker {
  position: absolute;
  right: -14px;
  bottom: -22px;
  background: var(--accent);
  border: 2px solid var(--ink);
  border-radius: 50px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 22px;
  font-weight: 800;
  font-size: 1.15em;
  transform: rotate(-3deg);
  z-index: 10;
}
@media (max-width: 768px) {
  .hero .column:last-child { padding-top: 60px; }
}

/* Sections sombres : texte blanc */
.fill_blue, .fill_blue .big_text h2, .fill_blue .big_text p { color: #fff; }
.fill_blue .award_illustrations strong { color: #fff; }

/* ---------- Bande "awards" ---------- */

.award_illustrations { width: 80%; margin: 0 auto; text-align: center; }
.award_illustrations .columns { gap: 20px; }
.award_illustrations .award {
  margin: 20px auto;
  height: 160px; width: 160px;
  border-radius: 100px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4em;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.award_illustrations strong {
  text-transform: uppercase;
  font-size: 1.3em;
  line-height: 1.2em;
  color: var(--ink);
  display: block;
}
@media (max-width: 768px) {
  .award_illustrations .columns { flex-direction: column; }
}

/* ---------- Carte "étapes" (style nocode steps) ---------- */

.steps_card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  text-align: left;
}
.steps_card .steps_step {
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
  font-size: 1.4em;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
}
.steps_card .steps_step:last-child { border-bottom: none; }
.steps_card .app_logo {
  height: 60px; width: 60px;
  flex: 0 0 60px;
  border-radius: 5px;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  font-weight: 800;
}
.bg_green { background: var(--blue-dark); }
.bg_blue { background: var(--blue); }
.bg_yellow { background: var(--accent); }

/* ---------- Aperçu des modules : cartes empilées ---------- */

.academy_illustration { position: relative; padding: 10px 0; }
.academy_illustration .academy_card {
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px;
  width: 88%;
}
.academy_illustration .academy_card img { display: block; width: 100%; border-radius: 3px; }
.academy_illustration .academy_card:first-child { transform: rotate(-2deg); z-index: 10; position: relative; }
.academy_illustration .academy_card:last-child {
  transform: rotate(2deg);
  margin-left: auto;
  margin-top: -90px;
}
@media (max-width: 768px) {
  .academy_illustration .academy_card { width: 100%; transform: rotate(0); }
  .academy_illustration .academy_card:last-child { transform: rotate(0); margin-top: 20px; }
}

/* ---------- Programme : cartes semaines ---------- */

.weeks_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 1.5em;
  text-align: left;
}
@media (max-width: 768px) { .weeks_grid { grid-template-columns: 1fr; } }

.week_card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 25px;
}
.week_card .week_thumb {
  margin: -25px -25px 20px;
  border-bottom: 2px solid var(--ink);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  background: #fff;
}
.week_card .week_thumb img { display: block; width: 100%; }
.week_card .week_pill {
  display: inline-block;
  background: var(--blue);
  border: 2px solid var(--ink);
  border-radius: 50px;
  padding: 4px 14px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.85em;
  margin-bottom: 14px;
}
.week_card h3 {
  font-size: 1.4em;
  font-weight: 800;
  line-height: 1.2em;
  letter-spacing: -0.02em;
  padding-bottom: 0.6em;
}
.week_card ul { list-style: none; }
.week_card ul li {
  padding: 8px 0;
  border-top: 1px solid var(--sand);
  font-size: 0.98em;
}
.week_card ul li:first-child { border-top: none; }
.week_card ul li strong { font-weight: 800; margin-right: 0.35em; }

.weeks_note { font-size: 1.2em; text-align: center; padding-top: 2.5em; }

/* ---------- Ce que vous saurez faire ---------- */

.skills_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  margin-top: 2.5em;
  text-align: left;
}
@media (max-width: 768px) { .skills_grid { grid-template-columns: 1fr; } }
.skills_grid .check_line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.2em;
  font-weight: 500;
}
.skills_grid span.general_check { margin-top: 4px; }

/* ---------- Formateur ---------- */

.trainer_card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 40px 30px;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}
.trainer_card .trainer_avatar {
  height: 160px; width: 160px;
  border-radius: 100px;
  border: 2px solid var(--ink);
  background: var(--blue);
  display: block;
  object-fit: cover;
  margin: 0 auto 20px;
}
.trainer_card strong { display: block; font-size: 1.3em; font-weight: 800; }
.trainer_card span { display: block; padding-top: 4px; }

/* ---------- Écosystème + Références ---------- */

.eco_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 1.5em;
  text-align: left;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) { .eco_grid { grid-template-columns: 1fr; } }
.eco_grid .week_card { display: flex; flex-direction: column; align-items: flex-start; }
.eco_logo { height: 28px; width: auto; margin: 4px 0 16px; }
.ti_lockup { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.ti_lockup img { height: 28px; width: auto; }
.ti_lockup span { font-weight: 800; font-size: 1.55em; letter-spacing: -0.03em; line-height: 1; }
.eco_text { font-size: 1.05em; }
.eco_link { margin-top: auto; padding-top: 1.5em; font-weight: 700; }
.eco_link a { color: var(--ink); text-decoration: underline; }
.week_pill.pill_accent { background: var(--accent); }

.refs_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 1.5em;
}
.ref_chip {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 12px 22px;
  height: 64px;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ref_chip img { max-height: 36px; max-width: 140px; width: auto; object-fit: contain; display: block; }
.refs_cta { text-align: center; }
.refs_cta .bigbutton { font-size: 1.2em; padding: 15px 30px; font-weight: 700; }

/* ---------- FAQ ---------- */

.faq_list { max-width: 800px; margin: 1em auto 0; text-align: left; }
.faq_list details {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 16px;
}
.faq_list summary {
  padding: 18px 22px;
  font-weight: 800;
  font-size: 1.15em;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.faq_list summary::-webkit-details-marker { display: none; }
.faq_list summary::after { content: "+"; font-weight: 800; font-size: 1.3em; }
.faq_list details[open] summary::after { content: "-"; }
.faq_list details p { padding: 0 22px 20px; font-size: 1.05em; }

/* ---------- Footer ---------- */

.the_footer { background: var(--ink); border-bottom: none; }
.the_footer .container { max-width: 100% !important; padding: 50px; }
.the_footer .columns { gap: 30px; flex-wrap: wrap; }
.the_footer h4 { color: #fff; font-weight: 800; padding-bottom: 0.8em; }
.the_footer ul { font-size: 0.8em; }
.the_footer ul li { padding: 3px 0; }
.the_footer a { color: #fff; opacity: 0.4; }
.the_footer a:hover { opacity: 1; }
@media (max-width: 768px) {
  .the_footer .container { padding: 20px; padding-top: 50px; }
  .the_footer .columns { flex-direction: column; }
}

.copyright {
  background: var(--ink);
  padding: 10px 50px 30px;
  font-size: 12px;
  color: #999;
}
.copyright .level { display: flex; gap: 2em; flex-wrap: wrap; }
.copyright a { color: #fff; }

/* Ancres : compenser le header */
section[id] { scroll-margin-top: 20px; }