/*
 * Complement au theme du site — utilitaires manquants du build Tailwind.
 * ---------------------------------------------------------------------
 *
 * 🔴 POURQUOI CE FICHIER EXISTE
 *
 * `assets/main.css` est un build Tailwind FIGE, livre avec le kit graphique.
 * Il ne contient que les utilitaires presents dans le markup d'origine du kit.
 * Toute classe ecrite APRES coup dans nos vues Blade et absente de ce build ne
 * fait donc STRICTEMENT RIEN — sans erreur console, sans avertissement, sans
 * rien dans les logs. La page s'affiche, simplement mal.
 *
 * Constate le 2026-08-08 sur /demo : le formulaire portait `lg:col-span-2`
 * (absent) et restait donc sur 1 colonne sur 3, soit un tiers de la largeur
 * prevue — d'ou l'impression d'un formulaire etrangle. Meme cause pour les
 * trois selecteurs « Vos outils » (`md:grid-cols-3`, absent) qui restaient
 * empiles, et pour les colonnes du pied de page (`xl:col-span-5/7`).
 *
 * ⚠️ REFLEXE AVANT D'AJOUTER UNE CLASSE RESPONSIVE A UNE VUE DE CE MODULE :
 *    grep -F '.lg\:ma-classe' Resources/assets/assets/main.css
 * Si elle n'y est pas, l'ajouter ICI. Ne JAMAIS editer `main.css` : c'est un
 * artefact genere, la prochaine mise a jour du kit ecraserait la correction.
 *
 * Breakpoints du theme : md = 48rem (768px) · lg = 64rem (1024px) · xl = 80rem (1280px)
 * Echelle d'espacement : --spacing = .25rem (p-10 = 2.5rem, p-16 = 4rem)
 */

/* --- Largeurs maximales ------------------------------------------------- *
 *
 * 🔴 AUCUNE des 17 valeurs `max-w-[Npx]` employees par les vues n'existait dans
 * le build : toutes les contraintes de largeur de contenu du site etaient donc
 * INERTES. Les blocs cences etre lisibles sur ~760 px s'etalaient sur toute la
 * largeur du conteneur (1290 px). Verifie le 2026-08-08 en instanciant chaque
 * classe dans le navigateur et en lisant `maxWidth` (« none » = sans effet).
 *
 * Toute nouvelle valeur arbitraire employee dans une vue doit etre ajoutee ici.
 */
.max-w-\[120px\]  { max-width: 120px; }
.max-w-\[198px\]  { max-width: 198px; }
.max-w-\[306px\]  { max-width: 306px; }
.max-w-\[335px\]  { max-width: 335px; }
.max-w-\[380px\]  { max-width: 380px; }
.max-w-\[450px\]  { max-width: 450px; }
.max-w-\[540px\]  { max-width: 540px; }
.max-w-\[682px\]  { max-width: 682px; }
.max-w-\[720px\]  { max-width: 720px; }
.max-w-\[760px\]  { max-width: 760px; }
.max-w-\[780px\]  { max-width: 780px; }
.max-w-\[820px\]  { max-width: 820px; }
.max-w-\[860px\]  { max-width: 860px; }
.max-w-\[960px\]  { max-width: 960px; }
.max-w-\[1140px\] { max-width: 1140px; }
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[1290px\] { max-width: 1290px; }

/* --- Espacements et positions ponctuels ---------------------------------- */

.pt-10 { padding-top: calc(var(--spacing) * 10); }
.pb-18 { padding-bottom: calc(var(--spacing) * 18); }
.top-6 { top: calc(var(--spacing) * 6); }

/* Le theme n'expose pas d'echelle `text-xs` ; on s'aligne sur sa plus petite
   taille de texte (`--text-tagline-3`, .75rem) plutot que d'inventer une valeur. */
.text-xs { font-size: var(--text-tagline-3, .75rem); }

/* --- Couleurs translucides et survols ------------------------------------ */

.bg-white\/5  { background-color: rgb(255 255 255 / 5%); }
.bg-white\/10 { background-color: rgb(255 255 255 / 10%); }
.border-stroke-1\/20 { border-color: rgb(223 228 235 / 20%); }

.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:border-stroke-2:hover { border-color: var(--color-stroke-2); }

.backdrop-blur-\[15px\] {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

/* --- Colonnes de grille ------------------------------------------------- */

@media (min-width: 48rem) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 80rem) {
  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }
}

/* --- Espacements -------------------------------------------------------- */

@media (min-width: 64rem) {
  .lg\:p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .lg\:p-16 {
    padding: calc(var(--spacing) * 16);
  }
}

/* --- Page /demo : mise en page du formulaire ----------------------------- */

/*
 * Le formulaire de demande de demo compte quatre sections et une vingtaine de
 * champs : il lui faut de la largeur. Une grille en tiers lui en donnait deux
 * sur trois, soit ~780 px sur 1200 — les rangees a trois selecteurs y etaient a
 * l'etroit. Ici la colonne d'information est FIXE (elle ne contient que trois
 * puces, elle n'a pas besoin de grandir) et le formulaire absorbe tout le reste,
 * soit ~850 px.
 *
 * `minmax(0, 1fr)` et non `1fr` : sans le minimum a 0, une grille CSS refuse de
 * descendre sous la largeur intrinseque de son contenu, et les `<select>` aux
 * longs libelles feraient deborder la colonne au lieu de se comprimer.
 */
.mff-demo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--spacing) * 6);
  align-items: start;
}

@media (min-width: 64rem) {
  .mff-demo-layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  /* La colonne d'information suit la lecture du formulaire, qui est long. */
  .mff-demo-layout > :first-child {
    position: sticky;
    top: calc(var(--spacing) * 28);
  }
}