/* ============================================================
   MOBILE — LE SITE CLIENT (2026-10-01)
   ⚠️ Retour user : « la version mobile du site est immonde et non adaptée ».

   MESURES AVANT (iPhone SE 375x667, le pire cas raisonnable) :
     hero          : 866 px  = 130 % de l'ecran  -> l'action n'est dans le
                     premier ecran que par miracle (le CTA tombait a 602 px)
     hero-figures  : 384 px, `grid-template-columns: none` -> les 3 chiffres
                     s'EMPILAIENT verticalement au lieu de tenir sur une ligne
     textes < 14px : 50 elements (12 px x22, 12.5 px x13, 13 px x11)
     cibles tactiles < 40px : 8 (dont un lien de 118x14 px)

   TROIS CAUSES, TROIS CORRECTIFS :
   1. les 3 chiffres s'empilent : la regle mobile existait (`flex-direction:
      row; flex-wrap: wrap`) mais les enfants `.hf` gardaient `flex-direction:
      column` ET une largeur qui les forcait a la ligne suivante ;
   2. le hero est trop haut : ses paddings mobiles n'ont jamais ete resserres ;
   3. trop de petit texte : le plancher est releve a 12,5 px minimum.
   ============================================================ */

@media (max-width: 700px) {
  /* --- 1. LES CHIFFRES DU HERO TIENNENT SUR UNE LIGNE ---------------- */
  /* ⚠️ `flex: 1 1 0` + `min-width: 0` : sans ca, chaque bloc garde sa largeur
     de contenu et les 3 ne tiennent pas -> retour a la ligne = 384 px de haut. */
  .hero-figures {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    padding: 22px 0 26px;
    border-top: 1px solid var(--line2);
  }
  .hero-figures .hf {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
    border-left: 1px solid var(--line2);
  }
  .hero-figures .hf:first-child { border-left: 0; padding-left: 0; }
  .hero-figures .hf b { font-size: 26px; line-height: 1.05; }
  /* ⚠️⚠️ LES LIBELLES SE COUPAIENT SUR 3 LIGNES (mesure : bloc de 148 px).
     « PRESTATIONS PROPOSÉES » en capitales espacees sur 104 px de large, ca
     fait 3 lignes — et c'est ce qui faisait la hauteur du bloc, pas les
     chiffres. On retire l'interlettrage (il ne sert qu'a l'aise sur grand
     ecran), on resserre, et on abaisse la casse : un libelle de 2 lignes maximum
     au lieu de 3. Mesure : 148 px -> 104 px, soit 44 px gagnes. */
  .hero-figures .hf span {
    font-size: 10.5px;
    letter-spacing: 0;
    line-height: 1.2;
    display: block;
    text-transform: none;
  }
  /* Le chiffre et son libelle se collent : c'est un seul bloc d'information. */
  .hero-figures .hf { gap: 2px; }

  /* --- 2. LE HERO TIENT DANS LE PREMIER ECRAN ------------------------ */
  .hero .wrap, .hero-in { padding-top: 0; padding-bottom: 0; }
  .hero-copy { padding: 30px 0 26px; }
  .hero-copy h1 { font-size: 30px; line-height: 1.1; }
  .hero-kicker { font-size: 11px; margin-bottom: 10px; }
  .hero-lede, .hero-copy p { font-size: 15px; line-height: 1.55; }
  .hero-act { margin-top: 18px; gap: 10px; }
  .hero-act .btn { padding: 14px 18px; font-size: 15px; }

  /* --- 3. PLANCHER DE TEXTE A 12,5 PX -------------------------------- */
  /* ⚠️ On ne touche QUE les textes de contenu. Les libelles mono en capitales
     (etiquettes de section) restent un cran plus petit : c'est leur role. */
  .sec p, .sec li, .card-p p, .editorial p, .q-note,
  .contact p, .zone p, .real p { font-size: 15px; }
  .calc-nom, .calc-detail { font-size: 14px; }
  .tnote, .ct-note { font-size: 12.5px; line-height: 1.5; }

  /* --- 4. CIBLES TACTILES : 40 PX MINIMUM --------------------------- */
  /* ⚠️ Un lien de 14 px de haut ne se touche pas au doigt. On lui donne une
     zone cliquable sans changer son apparence (padding transparent). */
  .tnote a, .sec a:not(.btn), footer a, .contact a:not(.btn) {
    display: inline-block;
    padding: 8px 0;
    min-height: 40px;
  }
  .head-in .btn, .hero-act .btn, .qfoot .btn { min-height: 44px; }

  /* --- 5. LES SECTIONS RESPIRENT MOINS ------------------------------- */
  .sec { padding: 44px 0; }
  .sec-h { margin-bottom: 18px; }
  .sec-h h2 { font-size: 22px; line-height: 1.2; }
  .sec-h p { font-size: 15px; margin-top: 10px; }
  .sec-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-bar .btn { width: 100%; }
}

/* ⚠️ Tres petits ecrans (320-360 px) : on reduit encore, mais on ne descend
   JAMAIS sous 12 px de texte de contenu. */
@media (max-width: 380px) {
  .hero-figures .hf b { font-size: 23px; }
  .hero-figures .hf span { font-size: 10px; }
  .hero-copy h1 { font-size: 27px; }
  .sec p, .sec li { font-size: 14.5px; }
}


/* ============================================================
   BANDEROLE « SITE DE DEMONSTRATION » (2026-10-01)
   ⚠️ Demande explicite du user : elle doit dire que c'est un site de test et
   que tout est modifiable. Elle est COLLANTE en haut : si l'artisan descend,
   elle doit rester visible — sinon elle ne sert que ceux qui ne descendent pas.
   ⚠️ Aucun emoji (regle du user). Ton sobre : on informe, on ne s'excuse pas.
   ⚠️ Contraste calcule : fond #1f1c17, texte #f5f2ec -> 14,8:1.
   ============================================================ */
.bandeau-test {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #1f1c17;
  color: #f5f2ec;
  border-bottom: 3px solid #b08a3e;
}
.bandeau-test-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 1.45;
}
.bandeau-test .bt-tag {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1f1c17;
  background: #e2c78f;
  padding: 4px 9px;
  white-space: nowrap;
}
.bandeau-test .bt-texte { flex: 1 1 auto; }
.bandeau-test .bt-tel { flex: 0 0 auto; }
.bandeau-test .bt-tel a {
  color: #f5f2ec;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(226,199,143,.5);
  white-space: nowrap;
}
@media (max-width: 700px) {
  /* ⚠️ Sur mobile, une seule ligne ne tient pas : on empile et on resserre,
     mais le texte reste LISIBLE (13 px). C'est le message qui compte. */
  .bandeau-test-in { flex-wrap: wrap; padding: 8px 16px; gap: 6px; font-size: 12.5px; }
  .bandeau-test .bt-texte { flex: 1 1 100%; order: 2; }
  .bandeau-test .bt-tag { order: 1; }
  .bandeau-test .bt-tel { order: 1; margin-left: auto; }
  .bandeau-test .bt-tel a { font-size: 12.5px; }
}


/* ============================================================
   GEOMETRIE — TOUT ALIGNE SUR LA MEME GRILLE (2026-10-01, 2e passe)
   ⚠️ Retour user : « tout n'est pas carre en mode mobile ».

   MESURES QUI ONT TROUVE LE DEFAUT (iPhone 390 px) :
     - le bandeau de demo avait `padding: 8px 16px` alors que TOUT le reste est
       a 20 px -> son texte ne s'alignait sur rien ;
     - la barre des atouts `.spec` faisait 143 px de haut : en 2x2, chaque case
       avait 22 px de padding vertical, et elle creait un ecart de 143 px entre
       le hero et la section suivante, alors que TOUTES les autres sections se
       touchent (ecart = 0) ;
     - les boutons commencaient a 35 px (bloc besoins), 47 px (formulaire) et
       229 px (tete de page) : trois marges differentes pour la meme chose.

   REGLE POSEE : une seule gouttiere, 20 px, pour tout ce qui est du contenu.
   ============================================================ */

@media (max-width: 700px) {
  /* --- 1. UNE SEULE GOUTTIERE : 20 px -------------------------------- */
  .bandeau-test-in { padding-left: 20px; padding-right: 20px; }

  /* --- 2. LA BARRE D'ATOUTS SUR UNE LIGNE --------------------------- */
  /* ⚠️ 4 atouts en 2x2 avec 22 px de padding vertical = 143 px de haut, et un
     trou de 143 px entre le hero et la suite. Sur une ligne, en defilement
     horizontal : la hauteur tombe a ~44 px et l'ecart disparait.
     ⚠️ On ne masque RIEN : les 4 atouts restent lisibles, on les fait glisser. */
  .spec { padding: 0; }
  .spec-in {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .spec-in::-webkit-scrollbar { display: none; }
  .spec-in span {
    flex: 0 0 auto;
    padding: 13px 16px;
    font-size: 12px;
    border-top: 0;
    border-left: 1px solid var(--line);
    white-space: nowrap;
  }
  .spec-in span:first-child { border-left: 0; padding-left: 20px; }
  .spec-in span:last-child { padding-right: 20px; }

  /* --- 3. NE PAS DOUBLER LA GOUTTIERE ------------------------------- */
  /* ⚠️⚠️ ERREUR QUE J'AI CORRIGEE ICI. `.calc` est DANS un `.wrap`, qui porte
     deja 20 px de gouttiere. En ajoutant `padding: 0 20px` a `.calc-lines`,
     j'ai mis le contenu a 40 px du bord alors que le reste est a 20 : le bloc
     « besoins » devenait le seul mal aligne de la page.
     Regle : un conteneur qui vit DANS `.wrap` n'ajoute PAS de gouttiere
     horizontale. Il ne gere que son espacement vertical interne. */
  .calc-lines { padding: 0; }
  .calc-total { padding: 20px 0; border-left: 0; border-top: 1px solid var(--ink); }
  .calc-line { padding-left: 0; padding-right: 0; }
  /* Le formulaire de contact vit aussi dans un `.wrap` : meme regle. */
  .frow, .frow input, .frow textarea { padding-left: 0; padding-right: 0; }

  /* --- 4. LE RYTHME DES SECTIONS : UN SEUL ECART ------------------- */
  /* Toutes les sections se touchent (ecart mesure = 0) sauf apres #demande.
     On garde cette logique : padding vertical identique partout. */
  .sec, .calc-sec { padding-top: 40px; padding-bottom: 40px; }
  .sec:first-of-type { padding-top: 28px; }
}


/* ============================================================
   LE BLOC « RECUEIL DU BESOIN » — GRILLE REFORMEE (2026-10-01)
   ⚠️ Retour user : « le tableau de recueil du besoin n'est pas bon, tout est
      decale et mal fait ».

   ⚠️⚠️ LA CAUSE, MESUREE. `.calc-line` gardait la grille de l'ANCIEN
   calculateur, qui affichait QUATRE colonnes : [case+nom] [unite] [quantite]
   [prix]. En retirant les prix et les quantites, il ne reste que DEUX enfants
   (la case+nom, et le detail eventuel) — mais la grille a garde ses 4 pistes :
       PC     : 320 px | 96 px | 104 px | 104 px   -> 2 colonnes VIDES
       MOBILE : 24 px | 304 px | 0 px              -> lignes de 93 a 116 px
   D'ou le desequilibre : le libelle etait tasse dans 320 px de 699, avec 200 px
   de vide a droite, et des lignes deux fois trop hautes sur telephone.

   LA GRILLE EST DONC REDEFINIE ICI, POUR TOUTES LES TAILLES (pas seulement
   mobile : le PC etait casse aussi). Ce fichier est charge en dernier, donc ces
   regles gagnent.
   ============================================================ */
.calc-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.calc-line:last-child { border-bottom: 0; }
.calc-chk {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;          /* le libelle peut se reduire et se couper proprement */
  /* ⚠️ La case ne fait que 24 px alors que la ligne en fait 685 : viser 24 px
     au doigt est penible. Le label englobe tout le libelle, donc cliquer
     n'importe ou sur la ligne coche la case — c'est le geste naturel. */
  min-height: 44px;
  width: 100%;
}
.calc-chk input { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--accent); }
/* ⚠️ Retour visuel au survol/toucher : sans lui, on ne sait pas que la ligne est
   cliquable. */
.calc-line:hover { background: rgba(0,0,0,.02); }
@media (hover: none) {
  .calc-line:active { background: rgba(0,0,0,.04); }
}
.calc-nom {
  font-size: 15.5px;
  line-height: 1.35;
}
.calc-detail {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  text-align: right;
  max-width: 42ch;
}
/* ⚠️ Sur telephone, le detail passe SOUS le libelle : sur 390 px, deux colonnes
   ne laissent pas assez de place a un texte de 2 lignes. */
@media (max-width: 700px) {
  .calc-line { grid-template-columns: 1fr; gap: 4px; padding: 11px 0; }
  .calc-detail { text-align: left; max-width: none; }
}