/* ============================================================
   LES FORMULAIRES DES PAGES « NO SCROLL » (2026-10-06).

   ⚠️⚠️ MEME CLASSE DE BUG QUE /artisan, trouvee en CHASSANT le signal.
   Les pages du gabarit `n-` chargent les feuilles `no_scroll*.css` et **PAS**
   `devisaly.css`, qui portait le style des formulaires et des boutons `.btn`.
   Mesure sur /contact :

       button.btn   342x21   Arial   fond rgb(239,239,239)   <- NON STYLE
       input         13 px                                    <- mobile zoome
       select        13 px
       textarea      13 px

   `rgb(239,239,239)` et `Arial` sont les valeurs PAR DEFAUT du navigateur : le
   formulaire de contact etait donc nu, et ses champs faisaient 13 px — en
   dessous de 16 px, Android et iOS zooment automatiquement au focus, ce qui
   casse la mise en page.

   ⚠️ On NE charge PAS `devisaly.css` : elle porte tout l'ancien theme
   (`.drawer`, `.plan`, `.hero`…) et la chargerait ramenerait les regles qu'on a
   justement retirees. On isole donc les formulaires ici, avec les contraintes du
   site : angles droits, aplat or, AUCUN degrade, AUCUNE ombre.
   ============================================================ */

/* ---- LES CHAMPS ---- */
.n-body input[type=text],
.n-body input[type=email],
.n-body input[type=tel],
.n-body input[type=password],
.n-body input[type=number],
.n-body select,
.n-body textarea,
.n-formwrap input,
.n-formwrap select,
.n-formwrap textarea {
  width: 100%;
  min-height: 44px;                 /* cible tactile */
  padding: 11px 14px;
  margin: 0 0 14px;
  background: var(--n-bg, #fff);
  color: var(--n-fg, #0a0a0a);
  border: 1px solid var(--n-rule, rgba(10,10,10,.2));
  border-radius: 0;                 /* angles droits : contrainte du site */
  font-family: Inter, Archivo, system-ui, sans-serif;
  font-size: 16px;                  /* ⚠️ 16 px : en dessous, les mobiles zooment */
  line-height: 1.4;
  outline: none;
  transition: border-color .15s;
}
.n-body textarea, .n-formwrap textarea { min-height: 120px; resize: vertical; }
.n-body input:focus, .n-body select:focus, .n-body textarea:focus,
.n-formwrap input:focus, .n-formwrap select:focus, .n-formwrap textarea:focus {
  border-color: var(--n-or, #b8892e);
}

/* ---- LES ETIQUETTES ---- */
.n-body form label, .n-formwrap form label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--n-or-texte, #8a6a2a);
  margin: 0 0 6px;
}

/* ---- LES BOUTONS (`.btn` de l'ancien theme, jamais dessines ici) ---- */
.n-body .btn, .n-formwrap .btn,
.n-body button.btn, .n-body form button[type=submit],
.n-fallback .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 13px 22px;
  background: var(--n-fg, #0a0a0a);
  color: var(--n-bg, #fff);
  border: 1px solid var(--n-fg, #0a0a0a);
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; width: 100%;
  transition: background .15s, border-color .15s, color .15s;
}
.n-body .btn:hover, .n-formwrap .btn:hover,
.n-body button.btn:hover, .n-body form button[type=submit]:hover {
  background: var(--n-or-texte, #8a6a2a);
  border-color: var(--n-or-texte, #8a6a2a);
}
.n-body .btn.primary, .n-formwrap .btn.primary {
  background: var(--n-or-texte, #8a6a2a);
  border-color: var(--n-or-texte, #8a6a2a);
}
.n-body .btn.primary:hover, .n-formwrap .btn.primary:hover {
  background: var(--n-fg, #0a0a0a); border-color: var(--n-fg, #0a0a0a);
}
.n-body .btn.big, .n-formwrap .btn.big { font-size: 12px; letter-spacing: .16em; }

/* ---- LE CONTENEUR DE FORMULAIRE (ancienne classe `.card`) ---- */
.n-formwrap .card, .n-fallback .card {
  background: var(--n-bg, #fff);
  border: 1px solid var(--n-or-ligne, #dcc79a);
  border-radius: 0; padding: 22px 20px;
}

/* ---- LES MESSAGES (flash / succes / erreur) ---- */
.n-body .flash, .n-formwrap .flash {
  border-radius: 0; padding: 12px 14px; margin: 0 0 16px;
  font-family: Inter, system-ui, sans-serif; font-size: 14.5px;
  border: 1px solid var(--n-or-ligne, #dcc79a);
  background: var(--n-or-pale, #f3ead6);
  color: var(--n-fg, #0a0a0a);
}
.n-body .flash.error { border-color: #d9b0a8; background: #f7e7e4; }
.n-body .flash.success { border-color: #b6c9a4; background: #eef4e6; }
.n-body .lead-privacy, .n-formwrap .lead-privacy {
  font-size: 12.5px; color: var(--n-dim, rgba(10,10,10,.58));
  margin-top: 10px; line-height: 1.5;
}
.n-body .hint, .n-formwrap .hint {
  font-size: 12.5px; color: var(--n-dim, rgba(10,10,10,.58)); margin: -8px 0 14px;
}

/* ============================================================
   CIBLES TACTILES TROP PETITES — les 3 cas RÉELS (2026-10-06).

   ⚠️ La plupart des « cibles < 40 px » relevees sont des LIENS DE TEXTE inline :
   une ligne de 20 px, c'est normal et ca ne se « corrige » pas. Restent trois
   controles qui, eux, sont vraiment difficiles a toucher au pouce :

     input[type=checkbox]  13x13   la case d'acceptation des conditions (/visibilite)
     .pw-toggle            36x36   l'oeil qui affiche/masque le mot de passe
     .btn                  33 px   « Voir mon apercu »
   ============================================================ */

/* ---- La case d'acceptation (conditions, RGPD) ----
   ⚠️ 13 px, c'est trois fois trop petit pour un pouce. On agrandit la CASE et on
   etend sa ZONE CLIQUABLE avec un pseudo-element : sans cela, viser 13 px est
   penible — et une case de consentement qu'on rate est un frein a la commande. */
.n-body input[type=checkbox],
.n-formwrap input[type=checkbox],
.n-body .n-pay__consent input[type=checkbox] {
  width: 22px; height: 22px;
  min-width: 22px; min-height: 22px;
  margin: 0 10px 0 0;
  accent-color: var(--n-or-texte, #8a6a2a);
  cursor: pointer;
  position: relative;
}
.n-pay__consent, .n-body label:has(input[type=checkbox]) {
  min-height: 44px; align-items: flex-start; cursor: pointer;
}

/* ---- L'oeil du mot de passe ---- */
.pw-toggle, button.pw-toggle {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0;
  color: var(--n-dim, rgba(10,10,10,.58)); cursor: pointer;
}
.pw-toggle:hover { color: var(--n-fg, #0a0a0a); }

/* ---- Les boutons `.btn` : hauteur tactile minimale ---- */
.n-body .btn, .n-formwrap .btn, .n-body a.btn, .n-fallback .btn {
  min-height: 44px;
}

/* ---- Les liens de bloc dans une carte (pas du texte inline) ---- */
.n-ex__ouvrir, .n-menu-foot a { min-height: 24px; display: inline-block; }

/* ⚠️⚠️ `.btn` A UNE HAUTEUR DE 33 px SUR /login, /register, /app (2026-10-06).
   `min-height: 44px` etait ecrit plus haut, mais il ne gagnait PAS : une regle
   plus specifique (probablement `body:not(.app-mode) .btn` ou un `.auth-body
   .btn`) pose `display:flex` et un padding plus petit. `min-height` est IGNORE
   sans `display` de bloc — et meme avec, la specificite tranche.
   ⚠️ `!important` est ici l'usage LEGITIME deja rencontre sur ce site : reprendre
   la main sur un empilement de feuilles legacy qu'on ne veut pas reecrire.
   Verification : mesurer `getComputedStyle().minHeight`, PAS lire la regle. */
.n-body .btn, .n-body a.btn, .n-body button.btn, .n-body input.btn,
.n-formwrap .btn, .n-formwrap a.btn, .n-formwrap button.btn,
.auth-body .btn, .auth-body a.btn, .auth-body button.btn {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  border-radius: 0 !important;
}
/* ⚠️ Et l'APLAT OR : `.btn.primary` portait un DEGRADE
   (`linear-gradient(165deg, #c9a457…)`), contraire a la regle dure du site. */
.n-body .btn.primary, .n-formwrap .btn.primary, .auth-body .btn.primary {
  background: #8a6a2a !important;
  background-image: none !important;
  border-color: #8a6a2a !important;
  color: #fff !important;
}
.n-body .btn.primary:hover, .auth-body .btn.primary:hover {
  background: #0a0a0a !important; border-color: #0a0a0a !important;
}

/* ⚠️⚠️ `/app` A UN `<body>` SANS CLASSE (2026-10-06).
   Le gabarit de `/app` ecrit `<body>` nu (les classes `guest`/`app-mode` sont
   conditionnelles, et absentes pour un visiteur ordinaire). Mes selecteurs
   `.n-body .btn` / `.auth-body .btn` ne pouvaient donc PAS l'atteindre — c'est
   pourquoi le bouton de `/app` restait a 33 px alors que /login et /contact
   etaient corriges.
   ⚠️ On cible le CONTENEUR reel du builder (`.builder`, `.container`), qui existe
   sur cette page quelle que soit la classe du body. */
.builder .btn, .container .btn,
.builder a.btn, .builder button.btn,
.container a.btn, .container button.btn {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  border-radius: 0 !important;
}
.builder .btn.primary, .container .btn.primary {
  background: #8a6a2a !important;
  background-image: none !important;
  border-color: #8a6a2a !important;
  color: #fff !important;
}
.builder .btn.primary:hover, .container .btn.primary:hover {
  background: #0a0a0a !important; border-color: #0a0a0a !important;
}
/* les boutons utilitaires du builder gardent une taille sobre mais tactile */
.builder .btn.ghost { background: transparent !important; background-image: none !important;
  border: 1px solid var(--n-rule, rgba(10,10,10,.2)) !important; color: var(--n-fg, #0a0a0a) !important; }
.builder .btn.ghost:hover { border-color: var(--n-fg, #0a0a0a) !important; background: transparent !important; }
.builder .btn-sm, .container .btn-sm { min-height: 40px !important; padding: 11px 16px !important; }

/* ⚠️ Le dernier bouton a 33 px est dans la BARRE DE NAVIGATION (`.nav`) des pages
   qui utilisent `_head.html` : « Voir mon aperçu ». Les selecteurs precedents
   visaient le builder et la barre d'action, pas la nav. */
.nav .btn, .topbar .btn, .nav a.btn, .topbar a.btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 18px !important;
}
.nav .btn.primary, .topbar .btn.primary {
  background: #8a6a2a !important; background-image: none !important;
  border-color: #8a6a2a !important; color: #fff !important;
}

/* ⚠️ BORDURES DE CHAMPS INCOHERENTES SUR /login (2026-10-06).
   Releve au controle visuel : le champ Email portait une bordure NOIRE epaisse,
   le mot de passe une bordure grise fine. Deux champs du MEME formulaire doivent
   avoir le meme traitement : la bordure epaisse etait un effet de `:focus` reste
   actif, ou une regle de l'ancien theme. On uniformise.
   ⚠️ Le placeholder etait aussi trop pale (contraste insuffisant). */
.auth-body input, .auth-card input, .n-body .card input, .n-formwrap .card input {
  border: 1px solid var(--n-rule, rgba(10,10,10,.2)) !important;
  background: var(--n-bg, #fff) !important;
}
.auth-body input:focus, .auth-card input:focus,
.n-body .card input:focus, .n-formwrap .card input:focus {
  border-color: var(--n-or, #b8892e) !important;
  outline: none !important;
}
/* ⚠️ Placeholder lisible : un gris trop pale est un defaut d'accessibilite. */
.n-body input::placeholder, .n-formwrap input::placeholder,
.auth-body input::placeholder, .n-body textarea::placeholder {
  color: rgba(10, 10, 10, .5);
  opacity: 1;
}

/* ⚠️ POLICE DES CHAMPS SUR /login, /register : 14 px (2026-10-06).
   `font-size: 16px` etait ecrit plus haut mais les selecteurs `.n-body input` ne
   touchent PAS ces pages (leur `<body>` porte `auth-body`). Or en dessous de
   16 px, Android et iOS ZOOMENT automatiquement au focus : la mise en page saute
   et l'utilisateur doit dezoomer. On force donc 16 px sur les pages d'auth aussi. */
.auth-body input, .auth-body select, .auth-body textarea,
.auth-card input, .auth-card select, .auth-card textarea {
  font-size: 16px !important;
  font-family: Inter, Archivo, system-ui, sans-serif !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
}
.auth-body textarea, .auth-card textarea { min-height: 120px !important; }