/* ============================================================
   PASSE DESIGN PC — les offres et la respiration (2026-10-06).

   ⚠️⚠️ CONTRAINTES NON NEGOCIABLES (preferences etablies du user) :
     - theme BLANC (#fff) / encre noire / or de marque ;
     - ANGLES DROITS, AUCUNE ombre portee, aucun degrade ;
     - ZERO emoji, icones au trait fin uniquement ;
     - sobre et professionnel, pas d'effet « flashy ».
   ⚠️ Un modele de vision a suggere d'ajouter des « ombres douces » et des
   polices serif : c'est EXACTEMENT ce que le user a rejete. On ne suit donc PAS
   cette recommandation. « Plus pro » ici veut dire : HIERARCHIE plus nette,
   RYTHME plus regulier, LISIBILITE meilleure — pas plus de decoration.

   ⚠️ On ameliore la version PC sans toucher a la version mobile deja corrigee.
   ============================================================ */

/* ---- 1. LES CARTES D'OFFRES : structure et lisibilite ----
   ⚠️ Double condition (largeur ET hauteur) : ces ameliorations prennent de la
   place verticale. Sur un portable 1366x768 elles faisaient deborder la section
   de 122 px, alors que le site est « no scroll ». On ne les applique donc que
   quand il y a la hauteur pour les accueillir ; sinon la version compacte
   ci-dessous prend le relais. */
@media (min-width: 901px) and (min-height: 851px) {
  .n-plans {
    gap: 0;                       /* les filets font la separation, pas l'espace */
    margin-top: 2rem;
  }
  .n-plan {
    padding: 1.5rem 1.5rem 1.4rem;
    gap: 0;                       /* on gere le rythme par les marges internes */
  }
  /* l'en-tete de carte : un filet or court au-dessus du nom d'offre */
  .n-plan__nom {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 .7rem;
  }
  .n-plan__nom::before {
    content: ""; flex: 0 0 auto;
    width: 14px; height: 2px; background: var(--n-or);
  }
  .n-plan__titre {
    font-size: 1.24rem; line-height: 1.2; margin: 0;
    min-height: 2.4em;            /* les 3 titres s'alignent sur 2 lignes */
  }
  .n-plan__prix {
    font-size: 2.1rem; margin: .45rem 0 0;
    letter-spacing: -.03em;
  }
  .n-plan__prix small { font-size: .72rem; letter-spacing: .04em; }
  .n-plan__note {
    margin: .5rem 0 0; min-height: 2.4em;   /* notes alignees */
    font-size: .74rem; line-height: 1.5;     /* etait .67rem (~10,7px) : trop petit */
    color: var(--n-dim);
  }
  /* la liste : un repere CARRE (la marque), aligne sur la premiere ligne */
  .n-plan__liste {
    margin: .75rem 0 0; font-size: .9rem;
  }
  .n-plan__liste li {
    position: relative;
    padding: .3rem 0 .3rem 16px;
    border-top: 1px solid var(--n-rule);
    line-height: 1.4;
  }
  .n-plan__liste li::before {
    content: ""; position: absolute; left: 0; top: .82em;
    width: 5px; height: 5px; background: var(--n-or);
  }
  /* pied de carte : le bouton reste en bas quelle que soit la hauteur du texte */
  .n-plan__pied { padding-top: .9rem; }
  .n-plan__pied .n-btn { padding: 14px 16px; }

  /* survol : on change le FILET, pas d'ombre (langage du site) */
  .n-plan { transition: background .18s ease; }
  .n-plan:hover { background: #fcfbf8; }
  .n-plan--phare:hover { background: #efe4cb; }
  .n-plan .n-btn { transition: background .18s, color .18s, border-color .18s; }
}

/* ---- 2. LA GRILLE DE PAGE : meilleure respiration sur grand ecran ---- */
@media (min-width: 1200px) {
  /* le titre de page et le sous-titre restent lisibles sur une ligne confortable */
  .n-screen--prix .n-sub { max-width: 78ch; }
  /* le bandeau de CTA et la FAQ respirent */
  .n-screen--prix .n-cta { margin-top: 1.6rem; }
  .n-screen--prix .n-detail { margin-top: 1.1rem; }
}

/* ---- 3. LE BANDEAU D'ACTIONS : deux boutons de largeur egale ---- */
@media (min-width: 901px) {
  .n-screen--prix .n-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    border: 1px solid var(--n-or-ligne); background: var(--n-or-ligne);
  }
  .n-screen--prix .n-cta .n-btn {
    border: 0; text-align: center; padding: 18px 20px;
  }
  .n-screen--prix .n-cta .n-btn:hover { background: #fcfbf8; }
  .n-screen--prix .n-cta .n-btn--or { background: var(--n-or-texte); color: #fff; }
}

/* ---- 1bis. PORTABLES (pas assez de hauteur) : version compacte ----
   ⚠️ On resserre la chaine d'espacements SANS retirer le design (repere or,
   alignement des titres). Le site doit tenir dans l'ecran sur un 1366x768,
   qui est un ecran de travail courant. */
@media (min-width: 901px) and (max-height: 850px) {
  .n-plans { margin-top: .9rem; }
  .n-plan { padding: .9rem 1rem .85rem; }
  .n-plan__nom { margin: 0 0 .4rem; }
  .n-plan__titre { font-size: 1.05rem; line-height: 1.16; min-height: 2.2em; margin: 0; }
  .n-plan__prix { font-size: 1.55rem; margin: .25rem 0 0; }
  .n-plan__note { margin: .3rem 0 0; min-height: 2.1em; font-size: .7rem; line-height: 1.45; color: var(--n-dim); }
  .n-plan__liste { margin: .45rem 0 0; font-size: .82rem; }
  .n-plan__liste li { padding: .2rem 0 .2rem 14px; line-height: 1.35; }
  .n-plan__liste li::before { top: .76em; width: 4px; height: 4px; }
  .n-plan__pied { padding-top: .55rem; }
  .n-plan__pied .n-btn { padding: 11px 12px; }
  .n-screen--prix .n-cta { margin-top: .7rem; }
  .n-screen--prix .n-detail { margin-top: .55rem; }
}

/* ---- 1ter. AJUSTEMENT FIN POUR LES PORTABLES COURTS (1366x768) ----
   ⚠️ Mesure : il restait 28 px de debordement. On les reprend sur les marges
   du bloc (pas sur la taille du texte, qui doit rester lisible). */
@media (min-width: 901px) and (max-height: 850px) {
  .n-plans { margin-top: .5rem; }
  .n-plan__liste { margin-top: .3rem; }
  .n-plan__liste li { padding: .16rem 0 .16rem 14px; }
  .n-screen--prix .n-sub { margin-top: .55rem; }
}