/* ============================================================================
   DESIGN ARRONDI — chargé EN DERNIER sur le site public ET le cockpit.

   ⚠️⚠️ DEMANDE USER (2026-10-07) : « fais un design beaucoup plus coin arrondi,
   quelque chose de beaucoup plus agréable à l'œil en globalité », sur le cockpit
   ET le site public (« cohérence totale »).

   CELA REMPLACE UNE RÈGLE ANTÉRIEURE. Jusqu'ici la charte disait « angles DROITS,
   AUCUNE ombre, aucun dégradé » et je l'appliquais partout. Le user a demandé
   explicitement l'inverse : on l'assume, et on l'écrit ici pour que personne ne
   « corrige » ces arrondis en croyant à une régression.

   ⚠️⚠️ POURQUOI CE FICHIER ET PAS CHAQUE FEUILLE. Mesuré avant d'écrire : sur les
   deux surfaces, **tous** les composants avaient `border-radius: 0px` et aucune
   ombre — 11 composants sur /pricing, 16 dans le cockpit. Modifier 20 feuilles de
   style (dont `no_scroll*.css`, 9 fichiers en cascade) aurait été ingérable et
   aurait fini par diverger. Une SEULE échelle, un SEUL fichier, chargé en dernier.

   ⚠️ IL EST VOLONTAIREMENT EN DERNIER dans l'ordre de chargement : il doit gagner
   sur `devisaly.css`, `sections.css` et les 9 `no_scroll*.css`. C'est la seule
   raison de son existence — d'où son nom explicite.

   ÉCHELLE (une seule définition, utilisée des deux côtés) :
     --r-xs  petit : badges, tags, pastilles
     --r-sm  champs, boutons secondaires
     --r-md  cartes, panneaux        <- la valeur qui porte le design
     --r-lg  grandes surfaces, sections
     --r-pil boutons principaux, pilules
   ============================================================================ */

:root {
  /* ---- L'échelle d'arrondis ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pil: 999px;

  /* ---- Ombres : chaudes, jamais grises ----
     ⚠️ Teintées d'or (176,138,62) et d'encre (25,23,19), pas de gris neutre : un
     gris neutre sur un fond ivoire vire au sale. Deux niveaux suffisent — au-delà,
     on ne distingue plus et on alourdit. */
  --ombre-1: 0 1px 2px rgba(25, 23, 19, .04), 0 2px 8px rgba(25, 23, 19, .04);
  --ombre-2: 0 2px 6px rgba(90, 70, 35, .06), 0 10px 28px rgba(90, 70, 35, .08);
  --ombre-3: 0 6px 18px rgba(90, 70, 35, .09), 0 22px 48px rgba(90, 70, 35, .11);
  --ombre-or: 0 4px 14px rgba(176, 138, 62, .20), 0 14px 36px rgba(176, 138, 62, .13);

  /* ---- Un mouvement doux, une seule courbe ---- */
  --t-doux: cubic-bezier(.22, .68, .32, 1);
  --d-court: .16s;
  --d-long: .28s;
}

/* ============================================================================
   1. SITE PUBLIC — les composants `n-*`
   ============================================================================ */

/* ---- 1.1 Boutons ---- */
.n-body .btn, .n-formwrap .btn, .n-body button.btn,
.n-body form button[type=submit], .n-fallback .btn,
.n-btn, .n-cta .btn {
  border-radius: var(--r-pil);
  transition: transform var(--d-court) var(--t-doux),
              box-shadow var(--d-court) var(--t-doux),
              background-color var(--d-court) var(--t-doux);
}
/* ⚠️ Un bouton rond qui « monte » d'1 px au survol : c'est ce qui donne la
   sensation de répondre au doigt. Sur mobile, `:active` remplace `:hover`. */
.n-btn:hover, .n-body .btn:hover, .n-cta .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--ombre-2);
}
.n-btn:active, .n-body .btn:active, .n-cta .btn:active { transform: translateY(0); }

/* Le bouton d'or : la seule ombre colorée du site. Il doit « porter ». */
.n-btn--or, .n-body .btn.primary, .n-formwrap .btn.primary {
  box-shadow: var(--ombre-or);
}
.n-btn--or:hover, .n-body .btn.primary:hover,
.n-formwrap .btn.primary:hover {
  box-shadow: 0 6px 20px rgba(176, 138, 62, .28), 0 18px 44px rgba(176, 138, 62, .18);
}
.n-btn-ghost { border-radius: var(--r-pil); }

/* ---- 1.2 Champs ----
   ⚠️ `--r-md` (16 px), PAS `--r-sm` (10 px) — CORRIGÉ après contrôle visuel
   (2026-10-07). Mesuré : des champs à 10 px posés à côté de boutons en pilule
   créent une tension — l'œil lit deux systèmes. 16 px s'accorde aux deux, et c'est
   la valeur des cartes : le champ devient « un petit cartouche », pas un rectangle. */
.n-formwrap input, .n-formwrap select, .n-formwrap textarea,
.n-body input[type=text], .n-body input[type=email],
.n-body input[type=password], .n-body input[type=tel],
.n-body input[type=number], .n-body select, .n-body textarea,
input, select, textarea {
  border-radius: var(--r-md);
  transition: border-color var(--d-court) var(--t-doux),
              box-shadow var(--d-court) var(--t-doux);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold, #b08a3e);
  box-shadow: 0 0 0 3px rgba(176, 138, 62, .16);
}

/* ---- 1.3 Cartes et panneaux ----
   ⚠️⚠️ LES GRILLES À FILETS INTERNES ONT BESOIN DE `overflow:hidden`. Elles
   dessinent leurs séparations avec `gap:1px` + un fond coloré : sans découpe, les
   cellules dépassent des coins arrondis et on voit quatre petits carrés. */
.n-car, .n-car-item, .n-ex, .n-ex__visuel, .n-doc,
.n-plan, .n-plans, .n-formbox, .n-detail, .n-lecture,
.n-car--prix, .n-car--exemples, .n-commandes, .n-doc__table {
  border-radius: var(--r-md);
}
.n-plans, .n-doc, .n-car { overflow: hidden; }
.n-car-item, .n-ex, .n-plan, .n-formbox, .n-lecture {
  overflow: hidden;
  transition: transform var(--d-long) var(--t-doux),
              box-shadow var(--d-long) var(--t-doux),
              border-color var(--d-long) var(--t-doux);
}
.n-car-item:hover, .n-ex:hover, .n-plan:hover, .n-lecture:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombre-2);
}
/* La carte « phare » se détache : c'est elle qui vend. */
.n-plan--phare {
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-3);
}
.n-plan--phare:hover { box-shadow: var(--ombre-or); }

/* ---- 1.4 Images et pastilles ---- */
.n-car-item img, .n-ex__visuel img, .n-car img,
.n-doc img, .photo, .n-photo, figure img {
  border-radius: var(--r-sm);
}
.n-plan__badge { border-radius: var(--r-pil); }
.n-menu, .n-head { border-radius: 0; }   /* les barres restent franches */

/* ---- 1.5 Le devis (document) et le tunnel ---- */
.n-doc { box-shadow: var(--ombre-2); }
.n-doc__entete { border-radius: var(--r-md) var(--r-md) 0 0; }
.n-doc__pied { border-radius: 0 0 var(--r-md) var(--r-md); }
.n-formbox { box-shadow: var(--ombre-2); }

/* ============================================================================
   2. COCKPIT DE PROSPECTION — les composants internes
   ============================================================================ */

/* ---- 2.1 Boutons ---- */
.cta { border-radius: var(--r-pil); box-shadow: var(--ombre-1);
  transition: transform var(--d-court) var(--t-doux), box-shadow var(--d-court) var(--t-doux); }
.cta:hover { transform: translateY(-1px); box-shadow: var(--ombre-2); }
.cta:active { transform: translateY(0); }
.cta:disabled { box-shadow: none; transform: none; }
.lien, .frein button, .filtres button, .pg, .btn, .tel {
  border-radius: var(--r-pil);
  transition: transform var(--d-court) var(--t-doux),
              box-shadow var(--d-court) var(--t-doux),
              background-color var(--d-court) var(--t-doux);
}
.lien:hover, .filtres button:hover, .pg:hover, .tel:hover {
  transform: translateY(-1px); box-shadow: var(--ombre-2);
}
.btn-env, .btn-or { box-shadow: var(--ombre-or); }
.btn-or:hover, .btn-env:hover { box-shadow: 0 6px 20px rgba(176,138,62,.28); }
.btn-dgr { border-radius: var(--r-sm); box-shadow: none; }

/* ---- 2.2 Cartes, panneaux, listes ----
   ⚠️ `overflow:hidden` est INDISPENSABLE sur `.carte`, `.kpis`, `.parcours` et
   `table` : leurs cellules sont jointes par un `gap:1px` sur fond coloré. Sans
   découpe, les coins arrondis laissent voir les carrés des cellules. */
.carte, section.carte, .bloc, section.bloc, .desabo, .apercu-lot, .pret .bulle {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
.kpis, .parcours, .ab-barre, .plans {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
.kpi { transition: background-color var(--d-court) var(--t-doux); }
.kpi:hover { background: #fffdf8; }
.etape { transition: background-color var(--d-court) var(--t-doux); }
.etape:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.etape:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.sorties a { border-radius: var(--r-sm); }
.sorties a:hover { background: #fbfaf7; box-shadow: none; }

/* ---- 2.3 Champs ----
   ⚠️ `--r-md` ici aussi (voir §1.2) : un champ à 10 px à côté d'un bouton en
   pilule fait jurer l'ensemble. */
input[type=number], input[type=search], input[type=text], select, textarea {
  border-radius: var(--r-md);
  transition: border-color var(--d-court) var(--t-doux),
              box-shadow var(--d-court) var(--t-doux);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 138, 62, .16);
}
input[type=checkbox] { border-radius: var(--r-xs); }

/* ---- 2.4 Barres de progression ---- */
.jauge, .prog-piste { border-radius: var(--r-pil); overflow: hidden; }
.jauge-r, .prog-remplie { border-radius: var(--r-pil); }

/* ---- 2.5 Pastilles d'état, messages, tags ----
   ⚠️ `--r-pil` POUR LES PASTILLES (corrigé après contrôle visuel). Le badge « +9 »
   de tendance et les pastilles d'intention étaient à 6 px, donc presque carrés, au
   milieu d'une interface arrondie : c'était le détail qui jurait le plus. Une
   pastille de texte court est TOUJOURS une pilule — c'est la règle. */
.avis-f, .avis { border-radius: var(--r-sm); }
.delta, .intent, .objet .tag, .et, .cst .p, .fil .cat,
.n-plan__badge, .n-kicker, .recents .int, .ac, .p-act {
  border-radius: var(--r-pil);
}
.et, .cst .p { border-radius: var(--r-xs); }
.personnes .p-nom, .p-txt { border-radius: var(--r-sm); }
.etat-c { border-radius: var(--r-pil); }
.tel { border-radius: var(--r-md); box-shadow: var(--ombre-1); }
.tel .tel-l, .tel .tel-n { border-radius: 0; }

/* ---- 2.6 LA MESSAGERIE — les bulles ----
   ⚠️⚠️ UNE BULLE N'EST PAS UNE CARTE. Sur WhatsApp, le coin du côté de celui qui
   parle est NET (il « sort » de la bulle), les trois autres sont arrondis : c'est
   ce qui indique qui parle sans lire un mot. On garde cette asymétrie — un
   arrondi uniforme donnerait une liste de cartes, pas une conversation. */
.ligne .bulle { border-radius: var(--r-lg); }
.ligne.nous .bulle { border-bottom-right-radius: var(--r-xs); }
.ligne.lui .bulle { border-bottom-left-radius: var(--r-xs); }
.bulle { box-shadow: var(--ombre-1); }
.pret .bulle { border-radius: var(--r-lg);
  border-bottom-right-radius: var(--r-xs); }

/* ---- 2.7 Tableaux ---- */
table { border-radius: var(--r-md); overflow: hidden; }
tbody tr:hover { background: #fbfaf7; }

/* ---- 2.8 Le rail et les écrans ---- */
.rail nav a { border-radius: var(--r-sm); border-left: 0; }
.rail nav a.on { border-radius: var(--r-sm); }
.sep span { border-radius: var(--r-xs); background: #fff; padding: 0 10px; }
.recents li, .personnes li, .fil li:last-child { border-radius: 0; }
details > summary { border-radius: var(--r-sm); }

/* ============================================================================
   3. LES ÉLÉMENTS DE NAVIGATION ET DE PIED
   ⚠️ Ajouté après vérification (2026-10-07) : `.n-menu-btn`, les liens du menu
   plein écran `.n-link` (1328 px de large) et les liens du pied étaient les
   DERNIERS à rester carrés — mesurés à `border-radius: 0px` après la première
   passe. Ce sont eux qu'on touche en premier sur mobile (le bouton « Menu »), donc
   ce sont eux qui décidaient de l'impression générale. Un `border-radius` sur un
   élément de 1328 px ne se voit pas, mais son survol et son état actif, si.
   ============================================================================ */
.n-menu-btn, .n-burger, .n-link, .n-menu a, .n-footer a,
footer a, .footer-mail, .n-head a {
  transition: background-color var(--d-court) var(--t-doux),
              border-radius var(--d-court) var(--t-doux),
              color var(--d-court) var(--t-doux);
}
/* ⚠️ Le burger et le lien du pied : un arrondi MODÉRÉ (`--r-sm`), pas une pilule.
   Une pilule de 1328 px de large serait un ovale — le lien du menu est une LIGNE,
   pas un bouton. On arrondit juste assez pour que le survol ait une forme. */
.n-menu-btn, .n-burger { border-radius: var(--r-sm); }
.n-link, .n-menu a { border-radius: var(--r-sm); }
.n-footer a, footer a, .footer-mail { border-radius: var(--r-xs); }
.n-link:hover, .n-menu a:hover { background: rgba(176, 138, 62, .07); }

/* ============================================================================
   4. RESPECT DE `prefers-reduced-motion`
   ⚠️ Un utilisateur qui a demandé moins d'animation n'en reçoit AUCUNE. Le
   `transform` au survol est une animation : on le coupe aussi, pas seulement les
   `transition`.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .n-btn:hover, .n-body .btn:hover, .cta:hover, .lien:hover,
  .n-car-item:hover, .n-ex:hover, .n-plan:hover, .lecture:hover,
  .filtres button:hover, .pg:hover, .tel:hover {
    transform: none !important;
  }
}