/*
 Theme Name:   Beely Studio — Bricks Child
 Theme URI:    https://github.com/TheoRoces
 Description:  Thème enfant Bricks du site Beely Studio. Zéro dépendance externe : polices auto-hébergées, aucun CDN, aucune bibliothèque tierce. Les styles vivent dans assets/css/ ; ce fichier ne sert qu'aux surcharges ponctuelles propres au site.
 Author:       Beely
 Author URI:   https://beely.studio
 Template:     bricks
 Version:      1.0.0
 Requires PHP: 8.1
 License:      GPL-2.0-or-later
 Text Domain:  beely
*/

/*
 * Ce fichier est chargé en dernier, après tokens.css et base.css.
 * Il est destiné aux surcharges spécifiques à un site.
 *
 * Règles :
 *   • Aucune valeur en dur — toujours var(--token).
 *   • Nommage BEM : .c-bloc__element--modificateur.
 *   • Pas de !important, sauf conflit avéré avec une extension, commenté.
 *
 * Les styles des composants se définissent dans les classes globales Bricks
 * (via le builder ou l'outil MCP bricks_upsert_classes), pas ici : le builder
 * doit rester la source de vérité pour ce qui est stylable dans le builder.
 */

/* ==========================================================================
   Habillage du moteur de formulaire, au rendu de la production
   ==========================================================================

   Le §8 impose le moteur maison : aucun formulaire ne recopie le balisage d'une
   maquette. Le moteur rend donc ses propres classes (`c-form__*`), là où la
   production nommait les siennes (`.cform`, `.f-field`, `.f-input`, `.choice`).
   Les deux DOM ne peuvent pas être identiques — mais le RENDU doit l'être.

   Ces règles transposent `assets/css/forms.css` de la production sur les classes
   du moteur, valeur pour valeur. Elles vivent ici, dans la feuille du site,
   parce que le balisage du moteur n'existe pas dans le builder : aucun panneau ne
   peut l'atteindre, et le §5 range explicitement ce cas dans la feuille du thème
   (« le CSS livré avec un moteur JavaScript, dont le balisage n'existe pas dans
   le builder »).

   Sans elles : champs en barres noires, options en blocs sombres, bouton sans
   habillage — mesuré le 01/08/2026, la page de contact à 8 % d'écart. */

.c-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.c-form__body,
.c-form__grid { display: flex; flex-direction: column; gap: var(--space-s); }

.c-form__screen-title {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Un champ : étiquette au-dessus, écart de 6 px, aucune bordure de fieldset. */
.c-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.c-form__label {
  padding: 0;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.c-form__optional,
.c-form__help { color: var(--color-w-t3); font-size: var(--fs-xs); font-weight: 400; }

/* Saisies — `.f-input` de la production.
 *
 * Le select natif est exclu : `form.css` le réduit à 1 × 1 px pour le masquer
 * derrière le bouton dessiné, et cette feuille charge **après**. Sans
 * l'exclusion, `width: 100%` le rétablissait à 440 px — invisible mais présent,
 * il débordait d'un écran de 375 et disloquait le formulaire sur mobile.
 * Signalé par Theo, « incompréhensible en mobile ». */
.c-form__control:not(.c-form__select-native) {
  width: 100%;
  padding: 12px 13px;
  background: var(--surface);
  border: 1px solid var(--field-border, rgba(20, 24, 31, 0.14));
  border-radius: var(--radius-xs);
  color: var(--color-white);
  font: 400 var(--fs-s) / 1.5 var(--font);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.c-form__control:hover { border-color: var(--color-primary-t3); }

.c-form__control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-t5);
}

textarea.c-form__control { min-height: 130px; resize: vertical; }

/*
 * Le chevron du select — **un seul**, celui du moteur.
 *
 * Le moteur rend déjà un `span.c-form__select-chevron` dans le bouton. J'en
 * avais ajouté un seconde en `::after` sur le champ, en croyant reproduire le
 * `.f-select::after` de la production : les deux se superposaient, et Theo l'a
 * signalé deux fois. On habille celui qui existe, on n'en crée pas.
 *
 * Géométrie relevée sur la production : 9 × 9 px, deux bords de 1,5 px tournés
 * à 45°, dans la couleur de texte atténuée.
 */
.c-form__select-chevron {
  inline-size: 9px;
  block-size: 9px;
  border-inline-end-width: 1.5px;
  border-block-end-width: 1.5px;
  border-color: var(--color-w-t3);
  transform: translateY(-25%) rotate(45deg);
}

/*
 * Le select natif ne reçoit **aucun** habillage : il est masqué derrière le
 * bouton dessiné, réduit à un point par `form.css`, et sert uniquement au
 * clavier et à l'envoi du formulaire. Lui donner un remplissage le fait
 * reprendre 36 px de large — invisible, mais toujours dans le flux.
 */
.c-form__field--select select.c-form__select-native {
  appearance: none;
  background-image: none;
  padding: 0;
}

/* Options : une pile à bordure commune — `.choice-group` et `.choice`. */
.c-form__choices { display: flex; flex-direction: column; }

.c-form__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--field-border, rgba(20, 24, 31, 0.14));
  border-top-width: 0.5px;
  border-bottom-width: 0.5px;
  /* La couleur est portée par l'option elle-même, comme `.choice` en
     production : l'état coché la remplace d'un seul coup, texte et
     descriptif compris. */
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.c-form__choices .c-form__choice:first-child {
  border-top-width: 1px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.c-form__choices .c-form__choice:last-child {
  border-bottom-width: 1px;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}

.c-form__choices .c-form__choice:only-child {
  border-width: 1px;
  border-radius: var(--radius-xs);
}

/* La couleur est explicite : sans elle le texte hérite du blanc du moteur et
   disparaît sur le fond clair de l'option. Mesuré — options vides à l'écran. */
.c-form__choice-text {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* Le rond et le carré sont tracés, jamais le contrôle natif du système. */
/* 20 px, comme la production — `flex: 0 0 20px` et non `auto` : sur une option
   au libellé long, une base automatique laissait la marque se comprimer. */
.c-form__choice-mark {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-w-t3);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.c-form__choice--check .c-form__choice-mark { border-radius: 4px; }

.c-form__choice:has(.c-form__choice-input:checked) { border-color: var(--color-primary); }

/*
 * La pastille cochée est un `::after` mis à l'échelle, pas un dégradé radial.
 *
 * Ce n'est pas une coquetterie d'implémentation : `border-radius: inherit` lui
 * fait épouser la forme de la marque — un disque pour un bouton radio, un carré
 * arrondi pour une case. Un dégradé radial dessine un disque dans les deux cas,
 * et les cases cochées ne ressemblaient pas à celles de la production.
 *
 * Le passage par `transform` donne aussi l'animation d'apparition — 0,18 s —
 * que la production a et que nous n'avions pas.
 */
.c-form__choice-mark {
  position: relative;
}

.c-form__choice-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.18s var(--ease);
}

.c-form__choice:has(.c-form__choice-input:checked) .c-form__choice-mark {
  border-color: var(--color-primary);
}

.c-form__choice:has(.c-form__choice-input:checked) .c-form__choice-mark::after {
  transform: scale(1);
}

/* Le contrôle natif reste atteignable au clavier : réduit, jamais retiré. */
.c-form__choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
}

.c-form__choice:has(.c-form__choice-input:focus-visible) {
  box-shadow: 0 0 0 3px var(--color-primary-t5);
  z-index: 3;
}

.c-form__error { margin: 0; font-size: var(--fs-xs); color: var(--color-pink); }

.c-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-2xs);
}

/* Retour à gauche, action principale à droite — la rangée de la production.
 *
 * `flex-direction` explicite : `form.css` met la rangée en colonne, et le seul
 * `justify-content` ne la remet pas à l'horizontale. Les deux boutons
 * s'empilaient, le retour centré au-dessus de « Suivant ». */
.c-form__actions {
  flex-direction: row;
  justify-content: space-between;
}
.c-form__actions .c-form__submit { margin-left: auto; }

/* Deux champs par rangée quand ils ne demandent pas toute la largeur. */
@media (min-width: 641px) {
  .c-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
    align-items: start;
  }

  .c-form__field--full,
  .c-form__field--textarea,
  .c-form__field--radio,
  .c-form__field--checkbox { grid-column: 1 / -1; }
}

/* Le bouton d'envoi porte les classes du site (`submitClass`), donc son style.
   Il ne reste qu'à le pousser à droite comme `.cform__nav .btn` le faisait. */
.c-form__actions .c-btn { margin-left: auto; }

/* L'astérisque des champs obligatoires — la production la met, le moteur non :
   il annonce l'inverse, « (facultatif) ». On garde les deux, comme la prod.

   Sans couleur propre : elle est bleue chez nous et noire en production, et une
   astérisque bleue attire l'œil plus que le libellé qu'elle qualifie. */
.c-form__field:has(:required) > .c-form__label::after,
.c-form__field:has([aria-required="true"]) > .c-form__label::after {
  content: " *";
}

/* Le sous-titre d'écran, sous le titre — `.cform__stepdesc` de la production. */
.c-form__screen-desc {
  margin: -2px 0 var(--space-2xs);
  color: var(--color-w-t3);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

/* Le lien posé au milieu d'une étiquette — la politique de confidentialité. */
.c-form__label-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-form__label-link:hover { color: var(--color-primary); }

/* Le consentement est un bloc encadré, comme `.f-consent` de la production. */
.c-form__field--checkbox:not(:has(.c-form__choices)) {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--field-border, rgba(20, 24, 31, 0.14));
  border-radius: var(--radius-xs);
}

.c-form__field--checkbox:not(:has(.c-form__choices)) > .c-form__label {
  /* 15 px, et non 10,4. C'est le libellé de consentement : la seule phrase du
     formulaire qu'une personne DOIT avoir lue pour que son accord vaille
     quelque chose. La rendre plus petite que le reste est un choix qui se
     retourne contre celui qui le fait. Mesuré le 07/08/2026 : 10,4 px. */
  font-size: var(--fs-s);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-w-t3);
}

.c-form__field--checkbox:not(:has(.c-form__choices)) .c-form__control {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-top: 1px;
  accent-color: var(--color-primary);
}

/*
 * L'option cochée se repeint — fond teinté, bordure et texte à la couleur
 * d'accent. C'est ce que fait la production, et je l'avais neutralisé sur un
 * relevé incomplet : j'avais lu la règle de la marque et manqué celle de
 * l'option. Signalé par Theo, capture à l'appui.
 */
.c-form__choice:has(.c-form__choice-input:checked) {
  background: var(--color-primary-t5);
  border-color: var(--color-primary);
  color: var(--color-primary);
  z-index: 2;
}

.c-form__choice:has(.c-form__choice-input:checked) .c-form__choice-text {
  color: var(--color-primary);
}

/* Le moteur vise ses contrôles à 0-2-1 (`.c-form__field--select select.…`) et
   teinte le texte de l'option cochée. On reprend sa spécificité plutôt que de
   surenchérir : la maquette veut un champ sur `--surface` et un texte sur
   `--text`, quel que soit le thème. */
.c-form__field select.c-form__control,
.c-form__field input.c-form__control,
.c-form__field textarea.c-form__control {
  background: var(--surface);
  color: var(--color-white);
}

.c-form__choices .c-form__choice:has(.c-form__choice-input:checked) .c-form__choice-text {
  color: var(--text);
}

/* Le descriptif d'une option, sous son libellé — `.choice__txt small`. */
.c-form__choice-desc {
  display: block;
  margin-top: 2px;
  color: var(--color-w-t3);
  /* 12,48 px et non 10,4 : c'est un texte à lire pour décider, pas une mention.
     Mesuré le 07/08/2026 sur /contact/. */
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* ==========================================================================
   L'entrée en cascade des champs, à chaque changement d'écran
   ==========================================================================

   La production anime chaque enfant de l'écran actif — 12 px de bas en haut,
   0,45 s, décalés de quelques centièmes. Sans cela le passage d'une étape à
   l'autre est un saut sec, et c'est la première chose qu'on remarque. */

@keyframes beely-form-entree {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.c-form__body > * {
  animation: beely-form-entree 0.45s var(--ease) backwards;
}

.c-form__body > *:nth-child(1) { animation-delay: 0.04s; }
.c-form__body > *:nth-child(2) { animation-delay: 0.10s; }
.c-form__body > *:nth-child(3) { animation-delay: 0.16s; }
.c-form__body > *:nth-child(4) { animation-delay: 0.22s; }
.c-form__body > *:nth-child(5) { animation-delay: 0.28s; }
.c-form__body > *:nth-child(n + 6) { animation-delay: 0.34s; }

/* Les options d'un groupe entrent aussi, l'une après l'autre. */
.c-form__choice { animation: beely-form-entree 0.4s var(--ease) backwards; }
.c-form__choice:nth-child(2) { animation-delay: 0.12s; }
.c-form__choice:nth-child(3) { animation-delay: 0.17s; }
.c-form__choice:nth-child(4) { animation-delay: 0.22s; }
.c-form__choice:nth-child(5) { animation-delay: 0.27s; }
.c-form__choice:nth-child(n + 6) { animation-delay: 0.32s; }

/* Une préférence de mouvement réduit coupe tout : l'entrée est décorative. */
@media (prefers-reduced-motion: reduce) {
  .c-form__body > *,
  .c-form__choice { animation: none; }
}

/* Le fond et la bordure des champs viennent des variables de la maquette, pas
   des tokens du blueprint — sans repli codé en dur, qui masquait le thème
   sombre en restant sur une valeur claire. */
.c-form__form .c-form__control {
  background: var(--surface);
  border: 1px solid var(--field-border);
  color: var(--color-white);
}

.c-form__form .c-form__choice {
  background: var(--surface);
  border-color: var(--field-border);
}

/* ==========================================================================
   Un seul système de thème
   ==========================================================================

   Le blueprint pilote ses couleurs par `prefers-color-scheme` (base.css) ; ce
   site les pilote par `data-theme`, comme sa production. Les deux coexistaient :
   le moteur de formulaire peint ses champs avec les tokens du blueprint
   (`--color-surface-page`, `--color-border-base`), qui restaient clairs quand le
   site passait en sombre.

   Plutôt que de redéclarer chaque règle du moteur, on branche ses tokens sur les
   variables du site. Une déclaration, et tout ce qui les emploie suit le thème. */
:root {
  --color-surface-page: var(--surface);
  --color-surface-sunken: var(--surface-2, var(--surface));
  --color-border-base: var(--field-border);
  --color-text-primary: var(--color-white);
}

/* ==========================================================================
   La liste déroulante du select, au rendu de `.csel__list` de la production
   ========================================================================== */

.c-form__select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--color-d2);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-xs);
}

.c-form__select-option {
  padding: 9px 11px;
  border-radius: var(--radius-2xs);
  color: var(--color-w-t1);
  font-size: var(--fs-s);
  cursor: pointer;
  transition:
    background-color 0.12s var(--ease),
    color 0.12s var(--ease);
}

.c-form__select-option.is-active,
.c-form__select-option:hover {
  background: var(--color-primary-t5);
  color: var(--color-primary);
}

.c-form__select-option[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: 500;
}

/* Le bouton du select — `.csel__btn` : le libellé pousse le chevron à droite. */
.c-form__select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.c-form__select-button[data-placeholder="true"] .c-form__select-value,
.c-form__select-button.is-placeholder .c-form__select-value {
  color: var(--color-w-t3);
  font-weight: 300;
}

.c-form__select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   La jauge d'avancement — `.cform__progress` de la production
   ========================================================================== */

.c-form__progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-form__dot {
  width: 26px;
  height: 4px;
  border-radius: 99px;
  background: var(--color-w-t5);
  transition: background 0.3s var(--ease);
}

.c-form__dot.is-active { background: var(--color-primary); }

/* Le compteur est poussé à droite de la jauge. */
.c-form__step {
  margin: 0 0 0 auto;
  color: var(--color-w-t3);
  /* « Étape 1 / 4 » situe la personne dans un parcours : c'est de l'orientation,
     pas une mention légale. Mesuré à 10,4 px. */
  font-size: var(--fs-xs);
}

/* Le retour en icône : un carré bordé, comme `.btn-prev`. */
.c-form__prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--field-border, rgba(20, 24, 31, 0.14));
  border-radius: var(--radius-xs);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.c-form__prev svg { width: 16px; height: 16px; }
.c-form__prev:hover { background: var(--color-w-t5); }