/* ===========================
   RESET LIGHT
   =========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video, svg, canvas {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ===========================
   FLEX FRAMEWORK – Minimaliste
   =========================== */

/* -------
   CONTAINER
   ------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Breakpoints fluides */
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Variante pleine largeur */
.container.is-fluid {
  max-width: 100%;
}

/* -------
   COLUMNS (conteneur)
   ------- */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* gutter uniforme */
}

/* Variantes */
.columns.is-multiline   { flex-wrap: wrap; }
.columns.is-gapless     { gap: 0; }

/* -------
   COLUMN (enfant)
   ------- */
.column {
  flex: 1 1 0%;   /* occupe l'espace disponible équitablement */
  min-width: 0;   /* évite les débordements sur les contenus longs */
}

/* --- Tailles fractionnaires (sur 12 colonnes) --- */
.column.is-1  { flex: 0 0 calc(1  / 12 * 100% - 1rem); }
.column.is-2  { flex: 0 0 calc(2  / 12 * 100% - 1rem); }
.column.is-3  { flex: 0 0 calc(3  / 12 * 100% - 1rem); }
.column.is-4  { flex: 0 0 calc(4  / 12 * 100% - 1rem); }
.column.is-5  { flex: 0 0 calc(5  / 12 * 100% - 1rem); }
.column.is-6  { flex: 0 0 calc(6  / 12 * 100% - 1rem); }
.column.is-7  { flex: 0 0 calc(7  / 12 * 100% - 1rem); }
.column.is-8  { flex: 0 0 calc(8  / 12 * 100% - 1rem); }
.column.is-9  { flex: 0 0 calc(9  / 12 * 100% - 1rem); }
.column.is-10 { flex: 0 0 calc(10 / 12 * 100% - 1rem); }
.column.is-11 { flex: 0 0 calc(11 / 12 * 100% - 1rem); }
.column.is-12 { flex: 0 0 100%; }

/* --- Tailles nommées (aliases pratiques) --- */
.column.is-full      { flex: 0 0 100%; }
.column.is-half      { flex: 0 0 calc(50%  - 1rem); }
.column.is-one-third { flex: 0 0 calc(33.3333% - 1rem); }
.column.is-two-third { flex: 0 0 calc(66.6667% - 1rem); }
.column.is-one-fifth { flex: 0 0 calc(20%  - 1rem); }

/* -------
   CENTRAGE FLEXBOX
   ------- */

/* --- Sur .columns (alignement des colonnes entre elles) --- */
.columns.is-centered    { justify-content: center; }      /* colonnes centrées horizontalement */
.columns.is-right       { justify-content: flex-end; }    /* colonnes alignées à droite */
.columns.is-vcentered   { align-items: center; }          /* colonnes de même hauteur centrées verticalement */
.columns.is-vtop        { align-items: flex-start; }
.columns.is-vbottom     { align-items: flex-end; }
.columns.is-vstretch    { align-items: stretch; }         /* par défaut, colonnes égales en hauteur */
.columns.is-spaced { justify-content: space-between; }



/* --- Sur .column individuelle (alignement de son contenu) --- */
.column.is-flex {
  display: flex;
}

.flex-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centrage horizontal du contenu */
.column.is-flex.is-justify-center  { justify-content: center; }
.column.is-flex.is-justify-start   { justify-content: flex-start; }
.column.is-flex.is-justify-end     { justify-content: flex-end; }
.column.is-flex.is-justify-between { justify-content: space-between; }
.column.is-flex.is-justify-around  { justify-content: space-around; }

/* Centrage vertical du contenu */
.column.is-flex.is-align-center  { align-items: center; }
.column.is-flex.is-align-start   { align-items: flex-start; }
.column.is-flex.is-align-end     { align-items: flex-end; }
.column.is-flex.is-column.is-justify-end { justify-content: flex-end; }

/* Contenu empilé verticalement, aligné en haut */
.column.is-flex.is-stack-top     { flex-direction: column; justify-content: flex-start; }

/* Centrage parfait (horizontal + vertical) — contenu en ligne par défaut */
.column.is-flex.is-centered {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Direction colonne (utile pour empiler du contenu verticalement) */
.column.is-flex.is-column {
  flex-direction: column;
}
.column.is-flex.is-column.is-centered {
  justify-content: center;
  align-items: center;
}

/* --- Helpers autonomes (utilisables sur n'importe quel élément) --- */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-center-h { display: flex; justify-content: center; }
.flex-center-v { display: flex; align-items: center; }
.is-right { justify-content: flex-end; }

/* -------
   RESPONSIVE : stack sur mobile (< 960px)
   ------- */
@media (max-width: 959px) {
  .columns {
    flex-direction: column;
  }

  /* Toutes les colonnes passent en pleine largeur */
  .column,
  .column[class*="is-"] {
    flex: 0 0 100%;
  }

  /* Sauf si la ligne est explicitement marquée comme mobile */
  .columns.is-mobile {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .columns.is-mobile .column[class*="is-"] {
    flex: 0 0 auto;
  }
}