/**
 * Le Photobooth Marseillais — formulaire de réservation.
 *
 * ══ CE FICHIER EST UNE INTÉGRATION, PAS UNE CRÉATION ══════════════
 *
 * Sébastien a dessiné et validé un prototype HTML/CSS. Ce fichier en
 * reprend les valeurs telles quelles : dimensions, espacements, rayons,
 * ombres, dégradés, grilles, états sélectionnés. Ce n'est pas une
 * interprétation « inspirée de » — c'est le même rendu.
 *
 * Deux écarts, et deux seulement :
 *
 * 1. TOUT est préfixé `lpbm-`, là où le prototype préfixait `lpm-` et
 *    s'ancrait sur un `#id`. Un thème WordPress définit couramment
 *    `.card`, `.field`, `.grid` : sans préfixe, le formulaire hériterait
 *    de styles imprévisibles, différents sur chaque site. Et une
 *    spécificité d'`#id` ne se surcharge proprement qu'avec un autre
 *    `#id`, ce qu'un shortcode posé deux fois sur la même page ne peut
 *    pas garantir.
 *
 * 2. Sur mobile, les contrôles remontent à 16 px. Le prototype descend à
 *    10,5 px, ce qui est très bien à la souris ; en dessous de seize
 *    pixels, iOS zoome automatiquement à la mise au point du champ et ne
 *    dézoome jamais. La page deviendrait inutilisable au doigt.
 *
 * ══ LES COULEURS ══════════════════════════════════════════════════
 *
 * Reprises du prototype, qui les tenait lui-même du site :
 *
 *   --lpbm-bleu    #0bbcea   cyan d'accent
 *   --lpbm-bleu-2  #218ef8   bleu électrique
 *   --lpbm-violet  #7957f5   violet d'accent
 *
 * Le dégradé cyan → bleu → violet signe les appels à l'action, le filet
 * supérieur des cartes et les états sélectionnés.
 */

.lpbm-reservation {
  /* ── Couleurs du prototype ────────────────────────────────── */
  --lpbm-bleu: #0bbcea;
  --lpbm-bleu-2: #218ef8;
  --lpbm-violet: #7957f5;
  --lpbm-accent-debut: #0bbcea;
  --lpbm-accent-milieu: #218ef8;
  --lpbm-accent-fin: #7957f5;
  --lpbm-accent: var(--lpbm-accent-milieu);
  --lpbm-accent-texte: #ffffff;

  --lpbm-texte: #242832;
  --lpbm-texte-fort: #1c2028;
  --lpbm-texte-doux: #7c8491;
  --lpbm-texte-etiquette: #5c6470;
  --lpbm-fond: rgba(255, 255, 255, 0.97);
  --lpbm-fond-doux: #f7f9fc;
  --lpbm-fond-choix: #f8fafc;
  --lpbm-bordure: rgba(24, 34, 52, 0.085);
  --lpbm-bordure-champ: rgba(24, 34, 52, 0.09);
  --lpbm-erreur: #e74c5c;
  --lpbm-erreur-fond: rgba(231, 76, 92, 0.06);

  --lpbm-degrade: linear-gradient(
    105deg,
    var(--lpbm-bleu),
    var(--lpbm-bleu-2) 52%,
    var(--lpbm-violet)
  );
  --lpbm-degrade-filet: linear-gradient(
    90deg,
    transparent,
    var(--lpbm-bleu),
    var(--lpbm-bleu-2),
    var(--lpbm-violet),
    transparent
  );
  --lpbm-degrade-choisi: linear-gradient(
    135deg,
    rgba(11, 188, 234, 0.09),
    rgba(121, 87, 245, 0.075)
  );

  /* ── Formes ───────────────────────────────────────────────── */
  --lpbm-rayon-section: 23px;
  --lpbm-rayon: 12px;
  --lpbm-rayon-choix: 11px;
  --lpbm-rayon-carte: 14px;
  --lpbm-rayon-atout: 17px;
  --lpbm-ombre-section: 0 14px 42px rgba(46, 64, 92, 0.055);
  --lpbm-ombre-choisi: 0 9px 22px rgba(33, 142, 248, 0.085);
  --lpbm-ombre-bouton: 0 13px 28px rgba(33, 142, 248, 0.22);

  /* ── Dimensions ───────────────────────────────────────────── */
  --lpbm-controle-hauteur: 46px;
  --lpbm-gouttiere: 15px;
  --lpbm-section-espace: 18px;

  /* ── Typographie ──────────────────────────────────────────── */
  --lpbm-police: inherit;
  --lpbm-taille-controle: 10.5px;
  --lpbm-taille-etiquette: 9.5px;
  --lpbm-taille-choix: 9px;

  --lpbm-transition: 0.18s ease;

  width: 100%;
  padding: 15px 18px 60px;
  font-family: var(--lpbm-police);
  color: var(--lpbm-texte);
  box-sizing: border-box;
}

.lpbm-reservation *,
.lpbm-reservation *::before,
.lpbm-reservation *::after {
  box-sizing: border-box;
}

/*
 * `[hidden]` doit gagner contre toute règle de disposition.
 *
 * Sans cette ligne, un élément passé à `hidden` mais portant un
 * `display: flex` reste visible — c'est ce qui laissait le voile de
 * chargement affiché au-dessus du formulaire.
 */
.lpbm-reservation [hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   Conteneur
   ═══════════════════════════════════════════════════════════════ */

.lpbm-shell {
  width: min(1160px, 100%);
  margin: 0 auto;
}

.lpbm-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--lpbm-section-espace);
}

/* ═══════════════════════════════════════════════════════════════
   Section — une carte blanche par étape
   ═══════════════════════════════════════════════════════════════ */

.lpbm-section {
  position: relative;
  padding: 25px 27px 27px;
  overflow: hidden;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-section);
  background: var(--lpbm-fond);
  box-shadow: var(--lpbm-ombre-section);
}

/* Le filet dégradé en haut de chaque carte. */
.lpbm-section::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: var(--lpbm-degrade-filet);
  opacity: 0.6;
}

.lpbm-section__entete {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 21px;
}

.lpbm-section__numero {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(11, 188, 234, 0.11), rgba(121, 87, 245, 0.1));
  color: #198ff1;
  font-size: 10px;
  font-weight: 950;
}

.lpbm-section__titre {
  margin: 0;
  color: var(--lpbm-texte-fort);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
}

.lpbm-section__sous-titre {
  margin: 3px 0 0;
  color: #949aa4;
  font-size: 9px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Grille — douze colonnes
   ═══════════════════════════════════════════════════════════════ */

.lpbm-grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--lpbm-gouttiere);
}

.lpbm-grille--suite {
  margin-top: var(--lpbm-gouttiere);
}

.lpbm-col--12 {
  grid-column: span 12;
}
.lpbm-col--9 {
  grid-column: span 9;
}
.lpbm-col--8 {
  grid-column: span 8;
}
.lpbm-col--6 {
  grid-column: span 6;
}
.lpbm-col--4 {
  grid-column: span 4;
}
.lpbm-col--3 {
  grid-column: span 3;
}

/* ═══════════════════════════════════════════════════════════════
   Champs
   ═══════════════════════════════════════════════════════════════ */

/*
 * `fieldset` plutôt que `div` pour les groupes de boutons radio : c'est
 * la seule structure qu'un lecteur d'écran annonce comme « groupe », en
 * lisant sa légende avant chaque choix. Ses styles par défaut — bordure,
 * marges, retrait de la légende — sont remis à zéro ici.
 */
.lpbm-champ {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lpbm-etiquette {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 7px;
  padding: 0;
  color: var(--lpbm-texte-etiquette);
  font-size: var(--lpbm-taille-etiquette);
  line-height: 1.3;
  font-weight: 750;
}

.lpbm-requis {
  color: var(--lpbm-violet);
}

.lpbm-controle {
  width: 100%;
  min-width: 0;
  height: var(--lpbm-controle-hauteur);
  margin: 0;
  padding: 0 14px;
  outline: none;
  border: 1px solid var(--lpbm-bordure-champ);
  border-radius: var(--lpbm-rayon);
  background: var(--lpbm-fond-doux);
  color: #252a33;
  box-shadow: inset 0 1px 1px rgba(20, 30, 45, 0.015);
  font-family: inherit;
  font-size: var(--lpbm-taille-controle);
  font-weight: 650;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

/*
 * IL N'Y A PLUS DE `.lpbm-controle--liste`.
 *
 * Cette règle habillait le seul `<select>` du formulaire — celui des
 * paliers IA. Il n'y a plus aucune liste déroulante : la fabrique qui
 * les produisait a été retirée du rendu, et cette règle n'aurait plus
 * rien à styler. La laisser reviendrait à garder la porte ouverte.
 */

.lpbm-controle--zone {
  min-height: 84px;
  height: auto;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.5;
}

.lpbm-controle::placeholder {
  color: #aeb5bf;
  font-weight: 550;
}

.lpbm-controle:focus {
  border-color: rgba(33, 142, 248, 0.45);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(33, 142, 248, 0.055);
}

.lpbm-aide {
  margin: 6px 0 0;
  color: var(--lpbm-texte-doux);
  font-size: 8.5px;
  line-height: 1.4;
  font-weight: 600;
}

.lpbm-erreur-champ {
  margin: 6px 0 0;
  color: var(--lpbm-erreur);
  font-size: 8.5px;
  line-height: 1.4;
  font-weight: 750;
}

.lpbm-champ--erreur .lpbm-controle {
  border-color: rgba(231, 76, 92, 0.55);
  box-shadow: 0 0 0 4px rgba(231, 76, 92, 0.055);
}

/* ═══════════════════════════════════════════════════════════════
   Boutons de choix — radios et cases, dessinés en cartes
   ═══════════════════════════════════════════════════════════════ */

.lpbm-choix-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.lpbm-choix {
  position: relative;
}

/*
 * Le contrôle natif est masqué VISUELLEMENT, jamais retiré du parcours
 * clavier : ni `display: none`, ni `visibility: hidden`, ni
 * `tabindex="-1"`. Il reste focusable, et son focus se voit sur
 * l'étiquette (règle `:focus-visible + label` plus bas).
 */
.lpbm-choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lpbm-choix label {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 11px;
  cursor: pointer;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-choix);
  background: var(--lpbm-fond-choix);
  color: #5b626d;
  text-align: center;
  font-size: var(--lpbm-taille-choix);
  line-height: 1.25;
  font-weight: 750;
  transition:
    transform var(--lpbm-transition),
    border-color var(--lpbm-transition),
    background var(--lpbm-transition),
    color var(--lpbm-transition),
    box-shadow var(--lpbm-transition);
}

.lpbm-choix label:hover {
  transform: translateY(-1px);
  border-color: rgba(33, 142, 248, 0.22);
  background: rgba(33, 142, 248, 0.035);
}

.lpbm-choix input:checked + label {
  border-color: rgba(33, 142, 248, 0.38);
  background: linear-gradient(115deg, rgba(11, 188, 234, 0.095), rgba(121, 87, 245, 0.075));
  color: #177ede;
  box-shadow: 0 8px 19px rgba(33, 142, 248, 0.08);
}

/* Le focus clavier doit se voir : il est reporté sur l'étiquette. */
.lpbm-choix input:focus-visible + label,
.lpbm-livraison__choix input:focus-visible + label,
.lpbm-formule input:focus-visible + label {
  outline: 2px solid var(--lpbm-bleu-2);
  outline-offset: 2px;
}

.lpbm-champ--erreur .lpbm-choix label {
  border-color: rgba(231, 76, 92, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   Livraison & installation
   ═══════════════════════════════════════════════════════════════ */

.lpbm-livraison {
  padding: 17px;
  border: 1px solid rgba(33, 142, 248, 0.1);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(11, 188, 234, 0.035), rgba(121, 87, 245, 0.035));
}

.lpbm-livraison__entete {
  margin-bottom: 12px;
}

.lpbm-livraison__titre {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #303640;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 900;
}

.lpbm-livraison__sous-titre {
  margin: 3px 0 0;
  color: var(--lpbm-texte-doux);
  font-size: 8.5px;
  line-height: 1.4;
  font-weight: 600;
}

.lpbm-livraison__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.lpbm-livraison__choix {
  position: relative;
}

.lpbm-livraison__choix input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lpbm-livraison__choix label {
  position: relative;
  min-height: 90px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 9px;
  cursor: pointer;
  border: 1px solid rgba(24, 34, 52, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
  transition:
    transform var(--lpbm-transition),
    border-color var(--lpbm-transition),
    background var(--lpbm-transition),
    box-shadow var(--lpbm-transition);
}

.lpbm-livraison__choix label:hover {
  transform: translateY(-2px);
  border-color: rgba(33, 142, 248, 0.22);
}

.lpbm-livraison__choix input:checked + label {
  border-color: rgba(33, 142, 248, 0.4);
  background: linear-gradient(135deg, rgba(11, 188, 234, 0.1), rgba(121, 87, 245, 0.08));
  box-shadow: 0 9px 22px rgba(33, 142, 248, 0.09);
}

.lpbm-livraison__icone {
  font-size: 17px;
  line-height: 1;
}

.lpbm-livraison__nom {
  color: #4a515c;
  font-size: 8.5px;
  line-height: 1.3;
  font-weight: 800;
}

.lpbm-livraison__choix input:checked + label .lpbm-livraison__nom {
  color: #177edb;
}

.lpbm-livraison__prix {
  margin-top: 2px;
  color: #168cf1;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
}

.lpbm-livraison__prix--gratuit {
  color: #179c71;
}

.lpbm-livraison__prix--devis {
  color: var(--lpbm-violet);
}

/* ═══════════════════════════════════════════════════════════════
   Formules — cartes issues du catalogue
   ═══════════════════════════════════════════════════════════════ */

.lpbm-formule-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.lpbm-formule {
  position: relative;
}

.lpbm-formule input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lpbm-formule label {
  position: relative;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 12px 13px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-carte);
  background: var(--lpbm-fond-choix);
  transition:
    transform var(--lpbm-transition),
    border-color var(--lpbm-transition),
    background var(--lpbm-transition),
    box-shadow var(--lpbm-transition);
}

.lpbm-formule label:hover {
  transform: translateY(-2px);
  border-color: rgba(33, 142, 248, 0.2);
}

.lpbm-formule input:checked + label {
  border-color: rgba(33, 142, 248, 0.36);
  background: var(--lpbm-degrade-choisi);
  box-shadow: var(--lpbm-ombre-choisi);
}

.lpbm-formule__nom {
  color: #313740;
  font-size: 9px;
  line-height: 1.25;
  font-weight: 800;
}

.lpbm-formule__prix {
  color: #168cf1;
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
}

/* ═══════════════════════════════════════════════════════════════
   Séparateur
   ═══════════════════════════════════════════════════════════════ */

.lpbm-separateur {
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(33, 142, 248, 0.12),
    rgba(121, 87, 245, 0.1),
    transparent
  );
}

/* ═══════════════════════════════════════════════════════════════
   Cartes Portrait IA et Installation Premium
   ═══════════════════════════════════════════════════════════════ */

/*
 * Les deux cartes mises en avant, à parts égales.
 *
 * Génération IA à gauche, installation Premium à droite. Si l'une des
 * deux manque au catalogue, l'autre garde SA MOITIÉ plutôt que de
 * s'étirer : à 155 px de haut, une carte pleine largeur devient une
 * bannière, et une bannière se lit comme de la publicité.
 */
.lpbm-atouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.lpbm-atout {
  position: relative;
  min-height: 155px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(33, 142, 248, 0.13);
  border-radius: var(--lpbm-rayon-atout);
  background: linear-gradient(125deg, rgba(11, 188, 234, 0.045), rgba(121, 87, 245, 0.055));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.lpbm-atout:hover {
  transform: translateY(-2px);
  border-color: rgba(33, 142, 248, 0.22);
  box-shadow: 0 13px 32px rgba(33, 142, 248, 0.08);
}

.lpbm-atout::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--lpbm-bleu), var(--lpbm-violet), transparent);
  opacity: 0.65;
}

.lpbm-atout__interieur {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px;
}

.lpbm-atout__icone {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(11, 188, 234, 0.11), rgba(121, 87, 245, 0.12));
  font-size: 19px;
}

.lpbm-atout__contenu {
  flex: 1;
  min-width: 0;
}

.lpbm-atout__titre {
  margin-bottom: 3px;
  color: #313640;
  font-size: 10px;
  font-weight: 900;
}

.lpbm-atout__texte {
  margin: 0 0 10px;
  color: #8e959f;
  font-size: 8.5px;
  line-height: 1.45;
  font-weight: 600;
}

/*
 * La liste déroulante.
 *
 * Même hauteur, même rayon et même bordure que les champs de saisie :
 * une ligne de formulaire ne doit pas trahir, à l'œil, le type de
 * contrôle qui la remplit. La flèche est dessinée en fond — celle du
 * système varie d'un navigateur à l'autre et casse l'alignement.
 */
.lpbm-controle--liste {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238e959f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Dans une carte d'atout, la liste occupe la largeur du contenu. */
.lpbm-atout__contenu .lpbm-controle--liste {
  width: 100%;
  margin-bottom: 10px;
}

.lpbm-atout__case {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  cursor: pointer;
  accent-color: var(--lpbm-bleu-2);
}

.lpbm-atout__case:focus-visible {
  outline: 2px solid var(--lpbm-bleu-2);
  outline-offset: 2px;
}

.lpbm-atout__prix {
  flex: 0 0 auto;
  align-self: center;
  color: #188bf1;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

/* ═══════════════════════════════════════════════════════════════
   Bouton « Découvrir »
   ═══════════════════════════════════════════════════════════════ */

.lpbm-decouvrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--lpbm-degrade);
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(33, 142, 248, 0.16);
  font-size: 8px;
  line-height: 1;
  font-weight: 900;
  transition:
    transform var(--lpbm-transition),
    box-shadow var(--lpbm-transition);
}

.lpbm-decouvrir:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(33, 142, 248, 0.24);
}

.lpbm-decouvrir:focus-visible {
  outline: 2px solid var(--lpbm-violet);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   Paliers de Génération IA — quatre boutons sur une ligne
   ═══════════════════════════════════════════════════════════════ */

/*
 * Ce bloc REMPLACE la carte « Génération IA / Portrait IA » et sa liste
 * déroulante. Quatre paliers, quatre boutons, une ligne : le visiteur
 * compare les prix sans ouvrir de menu.
 *
 * La grille est en `auto-fit` et non en `repeat(4, …)` : le nombre de
 * paliers vient du catalogue. Trois paliers occupent la largeur à
 * trois ; cinq passent à cinq. Aucun compte n'est écrit ici.
 */
.lpbm-packs {
  margin-bottom: 13px;
}

.lpbm-packs-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.lpbm-pack {
  position: relative;
}

.lpbm-pack input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lpbm-pack label {
  min-height: 58px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-choix);
  background: var(--lpbm-fond-choix);
  transition:
    transform var(--lpbm-transition),
    border-color var(--lpbm-transition),
    background var(--lpbm-transition),
    box-shadow var(--lpbm-transition);
}

.lpbm-pack label:hover {
  transform: translateY(-1px);
  border-color: rgba(33, 142, 248, 0.22);
  background: rgba(33, 142, 248, 0.035);
}

.lpbm-pack input:checked + label {
  border-color: rgba(33, 142, 248, 0.38);
  background: var(--lpbm-degrade-choisi);
  box-shadow: var(--lpbm-ombre-choisi);
}

.lpbm-pack input:focus-visible + label {
  outline: 2px solid var(--lpbm-bleu-2);
  outline-offset: 2px;
}

.lpbm-pack__nom {
  color: #4a515c;
  font-size: var(--lpbm-taille-choix);
  line-height: 1.25;
  font-weight: 800;
}

.lpbm-pack input:checked + label .lpbm-pack__nom {
  color: #177ede;
}

.lpbm-pack__prix {
  color: #188bf1;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

/*
 * Le chemin vers la page « Portrait IA ».
 *
 * La taille est POSÉE ici, et non héritée : sans elle, le lien prend la
 * taille du corps de texte du thème — seize pixels au milieu d'un bloc
 * qui en fait neuf. Il écrasait les quatre boutons qu'il accompagne.
 */
.lpbm-packs__lien {
  display: inline-block;
  margin-top: 9px;
  font-size: var(--lpbm-taille-etiquette);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   Mini-titre
   ═══════════════════════════════════════════════════════════════ */

.lpbm-mini-titre {
  margin: 2px 0 10px;
  color: #5e6570;
  font-size: var(--lpbm-taille-etiquette);
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   Estimation — petite carte, même langage visuel
   ═══════════════════════════════════════════════════════════════ */

.lpbm-estimation {
  margin-top: var(--lpbm-gouttiere);
  padding: 13px 15px;
  border: 1px solid rgba(33, 142, 248, 0.13);
  border-radius: 15px;
  background: linear-gradient(125deg, rgba(11, 188, 234, 0.04), rgba(121, 87, 245, 0.045));
}

.lpbm-estimation__lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lpbm-estimation__ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #6e7681;
  font-size: 9px;
  line-height: 1.4;
  font-weight: 700;
}

.lpbm-estimation__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(33, 142, 248, 0.14);
  color: #2b3039;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lpbm-estimation__montant {
  color: #168cf1;
  font-size: 15px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

.lpbm-estimation__mention {
  margin: 7px 0 0;
  color: #9aa1aa;
  font-size: 8px;
  line-height: 1.4;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Consentement
   ═══════════════════════════════════════════════════════════════ */

.lpbm-consentement {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 700px;
  color: #69717c;
  font-size: 8.5px;
  line-height: 1.5;
  font-weight: 600;
  cursor: pointer;
}

.lpbm-consentement input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  accent-color: var(--lpbm-bleu-2);
  cursor: pointer;
}

.lpbm-consentement input:focus-visible {
  outline: 2px solid var(--lpbm-bleu-2);
  outline-offset: 2px;
}

.lpbm-lien-discret {
  color: var(--lpbm-bleu-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 750;
}

/* ═══════════════════════════════════════════════════════════════
   Anti-robots et envoi
   ═══════════════════════════════════════════════════════════════ */

/*
 * Le piège à robots.
 *
 * Masqué SANS `display: none` : certains automates ignorent précisément
 * les champs cachés de cette façon, ce qui les rendrait invisibles au
 * piège. Ici le champ existe, occupe une place nulle et sort de l'écran.
 */
/*
 * Annonce vocale de la restauration du brouillon.
 *
 * AUCUN pixel visible, AUCUNE hauteur : le bandeau que Sébastien a
 * barré ne doit rien laisser derrière lui, pas même une bande vide.
 * Le lecteur d'écran, lui, l'entend — il ne « voit » pas des champs
 * déjà remplis.
 */
.lpbm-annonce,
.lpbm-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lpbm-envoi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.lpbm-turnstile {
  min-height: 0;
}

.lpbm-bouton {
  min-width: 245px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 25px;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: var(--lpbm-degrade);
  color: #ffffff;
  box-shadow: var(--lpbm-ombre-bouton);
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.lpbm-bouton:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(33, 142, 248, 0.29);
}

.lpbm-bouton:focus-visible {
  outline: 3px solid var(--lpbm-violet);
  outline-offset: 3px;
}

.lpbm-bouton:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.lpbm-bouton--occupe .lpbm-bouton__texte::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: lpbm-rotation 700ms linear infinite;
}

.lpbm-bouton--secondaire {
  min-width: 0;
  min-height: 42px;
  background: var(--lpbm-fond-choix);
  color: var(--lpbm-texte);
  border: 1px solid var(--lpbm-bordure);
  box-shadow: none;
}

.lpbm-envoi__note {
  max-width: 460px;
  color: #979da6;
  font-size: 8px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Messages
   ═══════════════════════════════════════════════════════════════ */

.lpbm-message-global {
  max-width: 680px;
  margin: 4px auto 0;
  padding: 13px 15px;
  border-radius: 12px;
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
  font-weight: 700;
}

.lpbm-message-global--erreur {
  color: #8a2f3a;
  background: rgba(231, 76, 92, 0.07);
  border: 1px solid rgba(231, 76, 92, 0.18);
}

.lpbm-message {
  margin-bottom: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(11, 188, 234, 0.16);
  background: #eef9fd;
}

.lpbm-message p {
  margin: 0;
  color: #366982;
  font-size: 9px;
  line-height: 1.5;
  font-weight: 700;
}

.lpbm-message--erreur {
  border-color: rgba(231, 76, 92, 0.18);
  background: rgba(231, 76, 92, 0.07);
}

.lpbm-message--erreur p {
  color: #8a2f3a;
}

/* ═══════════════════════════════════════════════════════════════
   Chargement et panne
   ═══════════════════════════════════════════════════════════════ */

.lpbm-chargement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px;
  color: var(--lpbm-texte-doux);
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-section);
  background: var(--lpbm-fond);
  box-shadow: var(--lpbm-ombre-section);
  font-size: 10px;
  font-weight: 700;
}

.lpbm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(24, 34, 52, 0.12);
  border-top-color: var(--lpbm-bleu-2);
  border-radius: 50%;
  animation: lpbm-rotation 700ms linear infinite;
}

@keyframes lpbm-rotation {
  to {
    transform: rotate(360deg);
  }
}

.lpbm-erreur-fatale {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px;
  text-align: center;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-section);
  background: var(--lpbm-fond);
  box-shadow: var(--lpbm-ombre-section);
}

.lpbm-erreur-fatale__texte {
  margin: 0 0 14px;
  color: var(--lpbm-erreur);
  font-size: 10px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   Confirmation
   ═══════════════════════════════════════════════════════════════ */

.lpbm-carte--confirmation {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 30px;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--lpbm-bordure);
  border-radius: var(--lpbm-rayon-section);
  background: var(--lpbm-fond);
  box-shadow: var(--lpbm-ombre-section);
}

.lpbm-carte--confirmation::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: var(--lpbm-degrade-filet);
  opacity: 0.6;
}

.lpbm-carte--confirmation:focus {
  outline: none;
}

.lpbm-confirmation__marque {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  background: var(--lpbm-degrade);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(33, 142, 248, 0.22);
}

.lpbm-confirmation__titre {
  margin: 0 0 7px;
  color: var(--lpbm-texte-fort);
  font-size: 17px;
  font-weight: 900;
}

.lpbm-confirmation__message {
  margin: 0 auto 20px;
  max-width: 52ch;
  color: var(--lpbm-texte-doux);
  font-size: 10px;
  line-height: 1.6;
  font-weight: 600;
}

.lpbm-confirmation__details {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 6px 24px;
  margin: 0 auto 16px;
  padding: 16px 22px;
  max-width: 420px;
  border: 1px solid rgba(33, 142, 248, 0.13);
  border-radius: 15px;
  background: linear-gradient(125deg, rgba(11, 188, 234, 0.04), rgba(121, 87, 245, 0.045));
  text-align: left;
}

.lpbm-confirmation__details dt {
  color: var(--lpbm-texte-doux);
  font-size: 8.5px;
  font-weight: 700;
}

.lpbm-confirmation__details dd {
  margin: 0;
  color: var(--lpbm-texte-fort);
  font-size: 10px;
  font-weight: 900;
}

.lpbm-confirmation__note {
  margin: 0;
  color: #9aa1aa;
  font-size: 8px;
  line-height: 1.4;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Tablette
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .lpbm-col--3,
  .lpbm-col--4 {
    grid-column: span 6;
  }

  .lpbm-col--9 {
    grid-column: span 12;
  }

  .lpbm-packs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lpbm-formule-grille,
  .lpbm-livraison__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  .lpbm-reservation {
    padding: 5px 10px 45px;
    /*
     * ★ SEIZE PIXELS, ET C'EST NON NÉGOCIABLE.
     *
     * Le prototype descend à 10,5 px, ce qui est parfait à la souris.
     * En dessous de seize pixels, iOS zoome automatiquement à la mise au
     * point d'un champ — et ne dézoome jamais. La page reste agrandie,
     * décalée, et le visiteur remplit le reste du formulaire à
     * l'horizontale.
     */
    --lpbm-taille-controle: 16px;
    --lpbm-taille-etiquette: 12px;
    --lpbm-taille-choix: 12px;
    --lpbm-controle-hauteur: 50px;
    --lpbm-gouttiere: 12px;
  }

  .lpbm-section {
    padding: 21px 15px 22px;
    border-radius: 19px;
  }

  .lpbm-col--3,
  .lpbm-col--4,
  .lpbm-col--6,
  .lpbm-col--8,
  .lpbm-col--9 {
    grid-column: span 12;
  }

  .lpbm-formule-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .lpbm-choix-grille,
  .lpbm-livraison__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lpbm-atouts {
    grid-template-columns: 1fr;
  }

  .lpbm-packs-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .lpbm-atout__interieur {
    padding: 15px;
    gap: 11px;
  }

  .lpbm-atout__icone {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .lpbm-consentement,
  .lpbm-estimation__ligne,
  .lpbm-message-global,
  .lpbm-message p {
    font-size: 12px;
  }

  .lpbm-bouton {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Mouvement réduit
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .lpbm-reservation *,
  .lpbm-reservation *::before,
  .lpbm-reservation *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}