/* =========================================================================
   LES OFFRES D'ABONNEMENT — `/abonnements/` (page-abonnements.php, 29/09)
   et LES FORMULAIRES DE PAIEMENT Gravity Forms (`/checkout-euro-…`).

   La page d'offres est la planche A3-v2 (30/09), la section « Chaque
   formule donne accès à tout » dans le dessin de A2.
   ========================================================================= */

/* 🔴 LA PLANCHE A3-v2 (Ludovic, 30/09), et A2 pour « Chaque formule donne
   accès à tout ». Deux écarts : 56 entre le chapô et les formules
   (`--espace-bloc`), 96 entre les sections, qui n'a pas de jeton commun —
   il est déclaré ici, une fois. */
.abonnement { --espace-section-offres: 96px; padding-bottom: var(--espace-section-offres); }

/* Le chapô : deux lignes au bureau, coupées par un `<br>` que le texte
   retrouve plus étroit (`.saut-bureau`). La première mesure 884 px en PT
   Serif 24 (30/09, les deux moteurs) : 900 la tient, les 810 de la planche
   la coupaient en trois. */
.abonnement-chapo {
  max-width: 900px;
  margin: 0 auto var(--espace-bloc);
  font-family: var(--police-texte);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--c-texte);
  text-align: center;
}

/* Les trois formules : une rangée à filets, l'annuelle sous un filet rouge. */
.abonnement-offres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--filet-noir);
  border-bottom: 1px solid var(--filet-clair);
  margin-bottom: var(--espace-section-offres);
}
.offre {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-height: 340px;
  padding: var(--space-32);
  box-sizing: border-box;
  position: relative;
}
.offre + .offre { border-left: 1px solid var(--filet-clair); }
.offre-vedette::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 4px;
  background: var(--accent);
}
.offre-etiquette {
  min-height: 17px;
  margin: 0;
  font-family: var(--police-meta);
  font-size: var(--taille-libelle);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.offre-etiquette span { display: inline-block; padding: 3px 8px; background: var(--accent); color: var(--c-blanc); }
.offre-nom {
  margin: 0;
  font-family: var(--police-affiche);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.offre-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; font-family: var(--police-meta); }
.offre-montant { font-size: var(--text-3xl); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--gris-texte); }
.offre-unite,
.offre-avant { font-size: 16px; color: var(--gris-texte-secondaire); }
.offre-note { margin: 0; font-family: var(--police-texte); font-size: 15px; line-height: 1.5; color: var(--gris-texte-secondaire); }
.offre-bouton { margin-top: auto; width: 100%; }

/* Ce que comprend l'abonnement — le dessin de la planche A2 : une barre, six
   lignes numérotées en trois colonnes, le rang en PT Serif gras gris. */
.abonnement-compris { margin-bottom: var(--espace-section-offres); }
.compris-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gouttiere-trame);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.compris-entree {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: baseline;
  padding: var(--space-24) 0;
  border-top: 1px solid var(--filet-clair);
  font-family: var(--police-texte);
  font-size: var(--text-lg);
  line-height: 1.4;
}
.compris-entree:nth-child(-n+3) { border-top: 0; }
.compris-rang { font-weight: 700; color: var(--gris-texte-secondaire); }
.compris-texte { color: var(--c-texte); }

/* Offrir (en Suisse) et le don : deux colonnes, chacune sous sa barre. */
.abonnement-deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gouttiere-trame);
}
.abonnement-bloc-titre {
  margin: var(--space-24) 0 0;
  font-family: var(--police-texte);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
}
.abonnement-etapes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0 var(--space-16);
  padding: 0;
  list-style: none;
}
.abonnement-etapes li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-texte);
}
.etape-rang { font-family: var(--police-affiche); font-size: 26px; line-height: .9; color: var(--gris-texte); }
.abonnement-bloc-texte {
  margin: var(--space-16) 0 var(--space-24);
  font-family: var(--police-texte);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--c-texte);
}

/* SOUS 992 px — la planche « v2 · Tablette » (Ludovic, 30/09) : le chapô à
   gauche sous le titre, chaque formule dans un cadre noir (l'annuelle en
   2 px, sans le filet rouge), le nom et le prix sur une ligne, la note
   dessous, le bouton en bas ; ce qui est compris sur deux colonnes ; Offrir
   et le don l'un sous l'autre. */
@media (max-width: 991px) {
  .abonnement { --espace-section-offres: 72px; }
  .saut-bureau { display: none; }
  .abonnement-chapo { max-width: 600px; margin: 0 0 40px; font-size: var(--text-lg); text-align: left; text-wrap: balance; }

  .abonnement-offres { display: flex; flex-direction: column; gap: 20px; border: 0; }
  .offre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "etiq etiq" "nom prix" "note note" "btn btn";
    column-gap: var(--space-24);
    row-gap: var(--space-12);
    align-items: baseline;
    min-height: 0;
    padding: 28px var(--space-32) var(--space-32);
    border: 1px solid var(--filet-noir);
  }
  .offre + .offre { border: 1px solid var(--filet-noir); }
  .offre-vedette,
  .offre + .offre-vedette { border: 2px solid var(--filet-noir); }
  .offre-vedette::before { content: none; }
  .offre-etiquette { grid-area: etiq; min-height: 0; }
  .offre-etiquette:empty { display: none; }
  .offre-nom { grid-area: nom; font-size: var(--text-2xl); }
  .offre-prix { grid-area: prix; justify-content: flex-end; }
  .offre-montant { font-size: var(--text-2xl); }
  .offre-note { grid-area: note; max-width: 560px; }
  .offre-bouton { grid-area: btn; margin-top: var(--space-8); }

  .compris-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .compris-entree { grid-template-columns: 36px minmax(0, 1fr); padding: 20px 0; font-size: var(--text-md); }
  .compris-entree:nth-child(-n+3) { border-top: 1px solid var(--filet-clair); }
  .compris-entree:nth-child(-n+2) { border-top: 0; }

  .abonnement-deux { display: flex; flex-direction: column; gap: 56px; }
  .abonnement-bloc-titre { margin-top: 20px; font-size: var(--text-lg); }
  .abonnement-etapes { margin: 18px 0 var(--space-16); }
  .abonnement-etapes li { max-width: 600px; }
  .abonnement-bloc-texte { max-width: 600px; margin: 14px 0 var(--space-24); font-size: 17px; }
}

/* SOUS 576 px — la planche « v2 · Téléphone » : tout s'empile dans le
   cadre, le bouton sur toute la largeur. */
@media (max-width: 575px) {
  .abonnement { --espace-section-offres: 64px; }
  .abonnement-chapo { margin-bottom: var(--space-32); font-size: 17px; }
  .abonnement-offres { gap: var(--space-16); }
  .offre { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24) 20px; }
  .offre-nom { font-size: 28px; }
  .offre-prix { justify-content: flex-start; }
  .offre-montant { font-size: var(--text-2xl); }
  .offre-unite,
  .offre-avant { font-size: 15px; }
  .compris-liste { grid-template-columns: minmax(0, 1fr); }
  .compris-entree { grid-template-columns: 32px minmax(0, 1fr); padding: 18px 0; font-size: 17px; }
  .compris-entree:nth-child(2) { border-top: 1px solid var(--filet-clair); }
  .abonnement-bloc .bouton { width: 100%; }
}

/* =========================================================================
   LES FORMULAIRES GRAVITY FORMS — le CSS que Ludovic avait posé dans Bricks
   sur les pages de paiement en euros (élément « shortcode » de
   `/checkout-euro-mensuel/`, repris le 29/09), limité aux formulaires.
   ========================================================================= */

.gform_wrapper .gfield--type-section { margin-top: 2rem; border: none; }
.gform_wrapper .gsection { border-bottom: none !important; }
.gform_wrapper .gfield--type-name,
.gform_wrapper .gfield--type-email { margin-bottom: 1.5rem !important; }
.gform_wrapper.gform-theme--foundation { --gf-form-gap-y: 0.5rem !important; }

.gform_wrapper h3 {
  margin-bottom: 0 !important;
  font-family: var(--police-affiche);
  font-weight: 400;
  line-height: 1.08;
  text-transform: uppercase;
  font-size: 2rem;
}
.gform_wrapper .gfield_label.gform-field-label {
  font-size: 1rem !important;
  font-family: var(--police-texte) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}
.gform_wrapper .ginput_total { font-size: 1.25rem !important; font-weight: 600; }
.gform_wrapper .gform_button {
  background-color: var(--accent) !important;
  font-weight: 700 !important;
  font-family: var(--police-meta) !important;
  font-size: 1rem !important;
  padding: 12px !important;
  text-transform: uppercase !important;
}

/* =========================================================================
   LES FORMULAIRES DE MEMBERPRESS — la connexion (`/login/`), le compte
   (`/account/`), le paiement d'un abonnement (`/register/…`), rendus dans
   `page.php` depuis que ReadyLaunch est éteint (30/09, `outils/45`).
   MemberPress écrit son balisage, le thème lui donne son écriture : les
   libellés et les champs en Simplon, le bouton plein rouge. Le compte, une
   fois connecté, a son gabarit (`compte.php`, `compte.css`) ; il ne reste
   ici que ce que MemberPress y rend encore — changer la carte, les cadeaux.
   ========================================================================= */

.mp_wrapper {
  font-family: var(--police-meta);
  font-size: 16px;
  line-height: 1.5;
}
.mp_wrapper .mp-form-row { margin-bottom: var(--space-24); }
.mp_wrapper .mp-form-label,
.mp_wrapper .mp-form-label label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}
.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper input[type="url"],
.mp_wrapper select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--gris-filet);
  border-radius: 0;
  background: var(--c-blanc);
  font-family: var(--police-meta);
  font-size: 16px;
  box-sizing: border-box;
}
.mp_wrapper input:focus,
.mp_wrapper select:focus { outline: 2px solid var(--gris-texte); outline-offset: 0; }
.mp_wrapper label:has(input[type="checkbox"]),
.mp_wrapper .mepr-checkbox-field + label { font-size: 15px; }
.mp_wrapper .mp-hide-pw { position: relative; }
.mp_wrapper button.mp-hide-pw {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--gris-texte); cursor: pointer;
}
.mp_wrapper .mp-spacer { display: none; }
.mp_wrapper .submit,
.mp_wrapper .mp-form-submit { margin: var(--space-24) 0 var(--space-16); }

/* Le bouton : le plein rouge des composants (`.bouton-plein`). */
.mp_wrapper input[type="submit"],
.mp_wrapper .mepr-submit,
.mp_wrapper .button-primary {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-bouton);
  padding: 0 24px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--c-blanc);
  font-family: var(--police-meta);
  font-size: var(--taille-bouton);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duree-survol), border-color var(--duree-survol);
}
.mp_wrapper input[type="submit"]:hover,
.mp_wrapper .mepr-submit:hover,
.mp_wrapper .button-primary:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }

.mp_wrapper .mepr-login-actions a,
.mp_wrapper .have-coupon-link { font-size: 14px; }
.mp_wrapper .mepr_price { font-size: 18px; }
.mp_wrapper .cc-error,
.mp_wrapper .mepr-form-has-errors { color: var(--accent); font-size: 14px; }

/* Les tableaux que MemberPress rend encore lui-même (les cadeaux de
   Gifting) : en Simplon, défilant sur le côté au téléphone. Le compte, ses
   onglets et ses tableaux sont dessinés par le thème depuis le 30/09
   (`compte.css`). */
.mp_wrapper .mepr-account-table,
.mp_wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--police-meta);
  font-size: 14px;
  line-height: 1.4;
}
.mp_wrapper th,
.mp_wrapper td {
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--gris-filet);
  text-align: left;
  vertical-align: top;
}
.mp_wrapper th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom-color: var(--filet-noir);
}
.mp_wrapper:has(table) { overflow-x: auto; }
/* Au téléphone, MemberPress passe chaque ligne en fiche : pleine largeur. */
@media (max-width: 767px) {
  .mp_wrapper table,
  .mp_wrapper tbody,
  .mp_wrapper tr { display: block; width: 100%; }
}