/* ============================================================
   ⚠️⚠️ LES OFFRES SORTAIENT DE L'ÉCRAN SUR MOBILE (2026-10-06).

   DÉFAUT MESURÉ. Dans le carrousel (≤ 900 px), `.n-plan` portait
   `flex: 0 0 auto` + `min-width: min(84vw, 320px)`. Or `flex-basis: auto` fait
   que la largeur suit le CONTENU, et `min-width` n'est qu'un PLANCHER :
   une carte au texte long devenait donc PLUS LARGE que le min-width.

     viewport   carte « Logiciel »   carte « Visibilité »   carte « Projet »
      390px          320px                450px                 681px
      768px          320px                525px                 792px

   Résultat : la carte affichée était coupée à droite, et les deux autres
   commençaient à x=476 et x=797 sur un écran de 390 px — donc invisibles.
   L'utilisateur ne voyait qu'UNE offre sur trois (signalement : « les offres
   n'apparaissent plus sur le site mobile »).

   CORRECTIF. On donne une largeur EXPLICITE (et bornée) à la carte, et
   `min-width: 0` pour que le contenu puisse se replier à l'intérieur au lieu
   d'élargir boîte. Les trois offres sont alors accessibles par glissement, à
   largeur constante.

   ⚠️ Ne pas revenir à `flex: 0 0 auto` sans `width` : c'est le dimensionnement
   sur le contenu qui casse tout.
   ============================================================ */
@media (max-width: 900px) {
  .n-plans {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  .n-plan {
    flex: 0 0 auto;
    /* ⚠️⚠️ LARGEUR = « la carte laisse DÉPASSER la suivante ». Le user a
       signalé DEUX FOIS ne pas voir les offres. Mesure : avec une carte de
       335 px dans un conteneur de 342 px, la carte suivante ne dépassait que de
       **7 px** — invisible, donc rien n'indiquait qu'il y en avait d'autres.
       On garde donc une carte plus étroite que le conteneur (il reste ~64 px) :
       l'offre suivante se voit à droite, et le carrousel s'explique tout seul.
       ⚠️ Largeur FIXE (pas déduite du contenu) + `min-width: 0` pour que le
       texte se replie DANS la carte au lieu de l'élargir (cf. le bug d'origine).
       ⚠️ Plafond 340 px : sur tablette on évite des cartes démesurées. */
    width: min(calc(100% - 64px), 340px);
    min-width: 0;
    scroll-snap-align: start;
  }
  /* L'offre phare passe en tête : à l'ouverture, seule la 1re carte est vue. */
  .n-plan--phare { order: -1; }
}

/* ============================================================
   ⚠️⚠️ LES OFFRES ÉTAIENT ÉCRASÉES SUR PETIT ÉCRAN (2026-10-06).

   MESURE. À 320x568, chaque carte d'offre ne faisait plus que **35 px de haut**
   (au lieu de ~180), alors que ses enfants restaient comptés « visibles » : ils
   étaient en réalité COMPRIMÉS.

   CAUSE. `.n-screen` est une colonne flex (`display: flex; flex-direction:
   column`) et `.n-plans` en est un enfant SANS `flex-shrink: 0`. Quand la place
   manque (petit écran), le navigateur RÉTRÉCIT donc `.n-plans` pour faire tenir
   le tout — au lieu de laisser la section défiler. Le contenu des cartes est
   alors écrasé, et comme la section ne déborde plus (`scrollHeight ==
   clientHeight`), l'utilisateur ne peut même pas faire défiler pour lire.

   CORRECTIF. `.n-plans` garde sa hauteur naturelle (`flex-shrink: 0`) : c'est la
   SECTION qui défile, conformément au motif « no scroll » du site (la section
   fait l'écran, son contenu défile dedans). Les offres restent lisibles.
   ============================================================ */
.n-screen > .n-plans,
.n-screen--prix > .n-plans {
  flex-shrink: 0;
}

/* ⚠️ La note des offres tombait a 9,9 px sur mobile (regle `max-height: 760px`
   de `no_scroll_couleur.css`) : illisible. On la remonte, y compris sur les
   petits ecrans — une mention « apercu avant paiement » doit se lire. */
.n-plan__note {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--n-dim);
}
@media (max-height: 760px) {
  .n-plan__note { font-size: .72rem; margin-top: .3rem; }
}

/* ============================================================
   COMMANDES DU CARROUSEL DES PRIX (2026-10-06).

   ⚠️⚠️ POURQUOI CES COMMANDES. Le carrousel natif existait deja (scroll-snap)
   mais RIEN n'indiquait qu'on pouvait glisser : a 390 px, seule l'offre phare
   etait entierement visible, et il y avait 0 fleche / 0 pastille. Le user l'a
   signale : « je ne vois que l'offre a 129 ». Mesure avant : cartes 2 et 3 a
   x=361 et x=698 sur un ecran de 390 px.

   ⚠️ MASQUEES PAR DEFAUT, AFFICHEES SEULEMENT SUR MOBILE. A partir de 901 px
   les 3 offres sont en grille cote a cote : des fleches y seraient des
   commandes qui ne deplacent rien. On ecrit donc `display: none` en regle de
   base, PUIS le media query d'affichage APRES (a specificite egale, l'ordre
   tranche — cf. le piege deja rencontre sur `carrousel-mobile.css`).

   ⚠️ Identite du site : angles DROITS, aucune ombre, aucun degrade, or de
   marque pour les accents. Le survol change le FILET/fond, pas d'effet.
   ============================================================ */
.n-commandes {
  display: none;                 /* grand ecran : inutile (grille) */
  flex: 0 0 auto;                /* ne pas etre compresse dans .n-screen */
  align-items: center; justify-content: center;
  gap: 20px; margin-top: 20px;
}
@media (max-width: 900px) {
  .n-commandes { display: flex; }
}

/* La TETE du carrousel : libelle a gauche, commandes a droite, SUR LA MEME
   LIGNE. ⚠️ Mesure : placees SOUS les cartes, les commandes tombaient a
   y=875 sur un ecran de 844 px — donc invisibles sans scroller. En tete, elles
   sont vues en meme temps que la premiere offre. */
.n-plans-tete { display: none; }
@media (max-width: 900px) {
  .n-plans-tete {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 1.2rem 0 0; flex: 0 0 auto;
  }
  /* le libelle porte deja sa propre marge : dans la tete, on l'annule */
  .n-plans-tete .n-plans-label { margin: 0; }
  /* l'espacement vertical vient de `.n-plans-tete`, pas de la rangee de boutons */
  .n-plans-tete .n-commandes { margin-top: 0; gap: 14px; }
}
.n-fleche {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: transparent; color: var(--n-fg);
  border: 1px solid var(--n-rule); border-radius: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.n-fleche:hover { background: var(--n-fg); color: #fff; border-color: var(--n-fg); }
/* une fleche qui ne fait rien donne l'impression d'un carrousel casse */
.n-fleche:disabled { opacity: .3; cursor: default; }
.n-fleche:disabled:hover {
  background: transparent; color: var(--n-fg); border-color: var(--n-rule);
}
.n-pastilles { display: flex; align-items: center; gap: 10px; }
.n-pastille {
  width: 10px; height: 10px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--n-or-texte); border-radius: 0;
  cursor: pointer; transition: background-color .15s;
}
.n-pastille[aria-current="true"] { background: var(--n-or); border-color: var(--n-or); }
.n-pastille:hover { background: var(--n-or); opacity: .6; }