/* ==========================================================================
   Site vitrine — Yannick Munoz, CCI Tarn-et-Garonne
   Valeurs issues du design system « CCI Tarn-et-Garonne » : bleus et gris
   de la charte, Fira Sans, boutons en pilule (forme du logo),
   cartes en 12 px. La charte ne prévoit qu'un thème clair.
   ========================================================================== */

/* ---------- Police auto-hébergée (sous-ensemble latin, licence : assets/fonts/LICENCE.txt) ---------- */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fira-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fira-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/fira-sans-700.woff2") format("woff2");
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: only light;

  /* Couleurs de la charte */
  --brand-blue: #373cf5;   /* bleu web : boutons, liens, aplats */
  --blue-light: #6877ff;   /* nuance l1 : décor uniquement, jamais de texte */
  --blue-deep: #0000cc;    /* nuance f1 : survol des aplats bleus */
  --blue-navy: #000099;    /* nuance f2 : titres forts, aplats sombres */
  --white: #ffffff;
  --grey-50: #f2f2f2;
  --grey-200: #cccccc;     /* filets décoratifs uniquement */
  --grey-600: #4d4d4d;
  --grey-900: #222222;

  /* Rôles */
  --surface: var(--white);
  --surface-muted: var(--grey-50);
  --ink: var(--grey-900);
  --ink-muted: var(--grey-600);
  --border-strong: var(--grey-600);
  --divider: var(--grey-200);
  --action: var(--brand-blue);
  --action-hover: var(--blue-deep);
  --on-action: var(--white);
  --focus-ring: var(--blue-navy);

  --font-sans: "Fira Sans", "DejaVu Sans", Arial, sans-serif;

  /* Espacements et rayons */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-section: clamp(56px, 8vw, 96px);
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Mise en page */
  --container: 1120px;
  --gutter: 16px;
  --overlap: 56px;        /* débord de la carte « en bref » sur la section suivante */
  --stairs: 256px;        /* hauteur de l'escalier du parcours (écran large) */
  --hauteur-entete: 73px; /* en-tête fixe : décalage des ancres, ajusté par point de rupture */
  --duration: 150ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + var(--space-4));
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--action-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--brand-blue); color: var(--white); }

/* ---------- Utilitaires ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conteneur {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.lien-evitement {
  position: absolute;
  top: -200px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--blue-navy);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.lien-evitement:focus { top: 12px; color: var(--white); }

/* ---------- Typographie ---------- */
.label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.label--bleu { color: var(--action); }

.titre-section {
  font-size: clamp(26px, 1.4vw + 18px, 32px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--blue-navy);
  text-wrap: balance;
}

.sous-titre {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--blue-navy);
}

.texte-large { font-size: 18px; line-height: 28px; text-wrap: pretty; }

/* ---------- Boutons et liens ---------- */
.actions {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  gap: 12px;
}
@media (min-width: 560px) {
  .actions { flex-direction: row; flex-wrap: wrap; justify-self: start; }
}
.actions--pile { flex-direction: column; justify-self: stretch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 16px/1.25 var(--font-sans);
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--duration),
    border-color var(--duration),
    color var(--duration),
    transform var(--duration);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 3px; }

.btn--primaire { background: var(--action); color: var(--on-action); }
.btn--primaire:hover { background: var(--action-hover); color: var(--on-action); }

.btn--secondaire { background: var(--surface); border-color: var(--border-strong); color: var(--ink); }
.btn--secondaire:hover { border-color: var(--action); color: var(--action); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.lien-fleche:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lien-fleche .icone { width: 18px; height: 18px; transition: transform var(--duration); }
.lien-fleche:hover .icone { transform: translate(2px, -2px); }

/* Sur fond bleu ou marine : liens blancs, anneau de focus blanc */
.sur-fonce :focus-visible { outline-color: var(--white); }
.sur-fonce a:not(.btn) { color: var(--white); }
.sur-fonce .btn--primaire { background: var(--white); color: var(--blue-navy); }
.sur-fonce .btn--primaire:hover { background: var(--grey-50); color: var(--blue-navy); }
.sur-fonce .btn--secondaire { background: transparent; border-color: var(--white); color: var(--white); }
.sur-fonce .btn--secondaire:hover { background: var(--action); border-color: var(--action); color: var(--white); }

/* Puces rondes, comme sur la fiche profil */
.puces { display: grid; gap: 10px; }
.puces li { position: relative; padding-left: 20px; }
.puces li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
}

/* ---------- En-tête (fixe en haut de l'écran) ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: 12px;
}

.entete__logo { width: auto; height: 48px; }

/* Boutons de contact : quand la place manque, le libellé est masqué à l'écran mais reste lu par les lecteurs d'écran */
.entete__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.entete__actions .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }

@media (max-width: 1023.98px) {
  .entete__actions .btn--secondaire { width: 44px; padding: 0; }
  .entete__actions .btn--secondaire .btn__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) {
  .entete__actions .btn--primaire { width: 44px; padding: 0; }
  .entete__actions .btn--primaire .btn__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.menu-principal { display: none; }

/* Très petits écrans : logo réduit pour garder l'en-tête fixe sur une seule ligne */
@media (max-width: 359.98px) {
  :root { --hauteur-entete: 69px; }
  .entete__barre { column-gap: 12px; }
  .entete__logo { height: 38px; }
  .entete__actions { gap: 6px; }
}

@media (min-width: 768px) {
  :root { --hauteur-entete: 85px; }
  .entete__logo { height: 60px; }
}

/* Écran large : logo et boutons sur la première ligne, menu sur la seconde */
@media (min-width: 1024px) {
  :root { --hauteur-entete: 125px; }
  .entete__barre { padding-bottom: 0; }
  .menu-principal { display: block; flex-basis: 100%; border-top: 1px solid var(--divider); }
  .menu { display: flex; gap: 28px; }
  .menu a {
    display: inline-block;
    padding-block: 10px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .menu a:hover {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
}

/* ---------- Accueil ---------- */
.hero { padding-top: clamp(40px, 6vw, 80px); }

.hero__grille { display: grid; gap: var(--space-8); }

.hero__texte { display: grid; gap: var(--space-6); justify-items: start; }

.hero__titre { display: grid; gap: var(--space-2); }

.hero__titre-cle {
  font-size: clamp(28px, 2.8vw + 20px, 48px);
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue-navy);
  text-wrap: balance;
}

.hero__titre-suite {
  font-size: clamp(20px, 0.8vw + 16px, 26px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--action);
}
.hero__titre-suite::first-letter { text-transform: uppercase; }

.hero__intro { max-width: 60ch; }

@media (min-width: 960px) {
  .hero__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: end;
  }
  .hero__texte { padding-bottom: clamp(48px, 6vw, 80px); }
}

/* Carte « en bref » : faits clés citables, qui débordent sur la section suivante */
.en-bref {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--overlap));
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  box-shadow: 10px 10px 0 var(--blue-light);
}
.en-bref .label { margin-bottom: var(--space-2); color: var(--on-action); }

.en-bref__liste > div {
  display: grid;
  gap: 2px;
  padding-block: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.3);
}
.en-bref__liste > div:last-child { padding-bottom: 0; }

.en-bref__liste dt {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.en-bref__liste dd { font-size: 15px; line-height: 22px; }

@media (min-width: 480px) {
  .en-bref__liste > div {
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: baseline;
  }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section--grise { background: var(--surface-muted); }
.section--marine { background: var(--blue-navy); color: var(--white); }
.section--marine .titre-section,
.section--marine .label { color: var(--white); }
.section--sous-carte { padding-top: calc(var(--space-section) + var(--overlap)); }

.section__entete {
  display: grid;
  gap: var(--space-4);
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section__titres { display: grid; gap: var(--space-4); }
.section__intro { color: var(--ink-muted); }

@media (min-width: 960px) {
  .section__entete--large {
    max-width: none;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 64px;
    align-items: end;
  }
}

/* ---------- Pilier 1 : formation IA ---------- */

/* Escalier du parcours : plus on monte, plus le bleu fonce */
.escalier { display: grid; gap: var(--space-4); }

.marche {
  --i: 0;
  --fond: var(--brand-blue);
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.marche:nth-child(2) { --i: 1; }
.marche:nth-child(3) { --i: 2; --fond: var(--blue-deep); }
.marche:nth-child(4) { --i: 3; --fond: var(--blue-deep); }
.marche:nth-child(5) { --i: 4; --fond: var(--blue-navy); }
.marche:nth-child(6) { --i: 5; --fond: var(--blue-navy); }

.marche__bloc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--fond);
  color: var(--white);
}

.marche__niveau {
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.marche__verbe { font-size: 16px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere; }

.marche__texte { display: grid; gap: var(--space-1); }

.marche__infos {
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.marche__titre { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ink); }

.marche__desc { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

@media (min-width: 640px) {
  .marche { grid-template-columns: 168px minmax(0, 1fr); }
  .marche__titre { font-size: 18px; }
}

@media (min-width: 1024px) {
  .escalier {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    gap: 0;
  }
  .marche {
    grid-template-columns: none;
    grid-template-rows: var(--stairs) auto;
    gap: var(--space-4);
  }
  .marche__bloc {
    align-self: end;
    justify-content: flex-start;
    height: calc(96px + var(--i) * 32px);
    min-height: 0;
    padding: var(--space-4);
    border-radius: var(--radius-md) 0 0 0;
  }
  .marche:first-child .marche__bloc { border-bottom-left-radius: var(--radius-md); }
  .marche:last-child .marche__bloc {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
  }
  .marche + .marche .marche__bloc { box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.3); }
  .marche__texte { padding-right: var(--space-4); }
}

/* Parcours types et modalités */
.parcours-bas {
  display: grid;
  gap: var(--space-8);
  margin-top: clamp(40px, 6vw, 72px);
}
@media (min-width: 960px) {
  .parcours-bas {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 48px;
    align-items: start;
  }
}

.types { display: grid; gap: 12px; margin-top: var(--space-4); }

.type {
  display: grid;
  gap: 12px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.type__volume {
  font-weight: 700;
  color: var(--blue-navy);
  font-variant-numeric: tabular-nums;
}

.type__note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

@media (min-width: 640px) {
  .type {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-6);
  }
  .type__profil,
  .type__note { grid-column: 1 / -1; }
}

.chemin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chemin li { display: inline-flex; align-items: center; gap: 8px; }
.chemin li + li::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--action);
}

.pastille {
  padding: 2px 12px;
  border: 2px solid var(--action);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--action);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.encadre {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.encadre .puces { font-size: 15px; line-height: 22px; }
.encadre .puces li::before { top: 7px; }
.encadre__question { margin-top: var(--space-2); font-weight: 600; }

/* ---------- Pilier 2 : sensibilisation ---------- */
.sensibilisation { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .sensibilisation {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 48px;
    align-items: start;
  }
}

.vedette {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
}
.vedette .label { color: var(--on-action); }

.vedette__titre {
  font-size: clamp(24px, 1vw + 18px, 28px);
  line-height: 1.2;
  font-weight: 700;
}

.vedette__liens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: var(--space-2);
}

.formats { display: grid; gap: var(--space-6); }

.format {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--action);
}
.format p { color: var(--ink-muted); }

.format__titre { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--blue-navy); }

/* ---------- Pilier 3 : accompagnement ---------- */
.services { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.service {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service__num {
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: var(--action);
  font-variant-numeric: tabular-nums;
}

.service__titre { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--blue-navy); }

/* ---------- Pilier 4 : formateur ---------- */
.profil { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .profil {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: start;
  }
}

.profil__texte { display: grid; gap: var(--space-6); }

.frise { display: grid; gap: var(--space-6); }
@media (min-width: 640px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.frise li {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding-top: 12px;
  border-top: 2px solid var(--action);
}

.profil__carte {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.profil__carte .sous-titre:not(:first-child) { margin-top: var(--space-4); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.etiquettes li {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- FAQ ---------- */
.faq { display: grid; column-gap: 48px; }
@media (min-width: 960px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.faq__item {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-top: 1px solid var(--divider);
}

.faq__question { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--blue-navy); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .contact {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 64px;
    align-items: center;
  }
}

.contact__texte { display: grid; gap: var(--space-4); justify-items: start; }

.contact__adresse { font-size: 15px; line-height: 22px; font-style: normal; }

/* ---------- Pied de page ---------- */
.pied {
  padding-block: var(--space-8);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}
.pied__grille { display: grid; gap: var(--space-4); }
@media (min-width: 960px) {
  .pied__grille {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-8);
  }
}
.pied__mentions { display: grid; gap: var(--space-1); }
.pied__mentions a { font-weight: 600; }
.pied__liens { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-6); }
.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.pied__liens a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.pied__liens a[aria-current="page"] { color: var(--ink); }

/* ---------- Pages légales ---------- */
.entete__accueil { display: block; }

.legal > * { max-width: 760px; }
.legal > * + * { margin-top: var(--space-4); }
.legal h1 { margin-top: var(--space-2); }
.legal h2 {
  margin-top: var(--space-8);
  font-size: 22px;
  line-height: 28px;
  color: var(--blue-navy);
}
.legal a { overflow-wrap: anywhere; }
.legal__retour { margin-top: var(--space-8); }

/* ---------- Préférences et impression ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; }
}

@media print {
  .menu-principal,
  .lien-evitement { display: none !important; }
  .entete { position: static; }
  .en-bref { box-shadow: none; margin-bottom: 0; }
  .section { padding-block: 24px; }
  /* Sans cette règle, les navigateurs n'impriment pas les fonds et le texte blanc disparaît */
  .en-bref,
  .vedette,
  .section--marine,
  .marche__bloc,
  .btn--primaire {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .marche,
  .type,
  .service,
  .format,
  .faq__item { break-inside: avoid; }
}