/* ============================================================
   CALCULATEUR DE PEINTURE — /calculateur-peinture
   ------------------------------------------------------------
   Cette feuille ne fait que COMPLETER assets/style.css : les
   couleurs, les polices et la classe .field viennent de la, pour
   que la page paraisse native et non rapportee.
   Variables reprises : --bg --bg-2 --card --ink --ink-soft
                        --ocre --blue --blue-glow --green --line
   ============================================================ */

/* ============================================================
   FOND ANIME « PEINTURE LIQUIDE »
   ------------------------------------------------------------
   Quatre nappes SVG floutees qui derivent les unes sur les autres.
   Fixe, derriere tout le contenu, et non cliquable.

   Trois regles tenues d'un bout a l'autre :
     - lent : les cycles font 34 a 58 s, aucun n'a la meme duree, donc
       le motif ne se repete jamais a l'identique ;
     - discret : les nappes plafonnent a 30 % d'opacite et sont floutees
       a 38 px, on percoit une matiere, pas des formes ;
     - gratuit a l'affichage : seules « transform » et « opacity » sont
       animees, les deux proprietes que le compositeur traite sans
       repasser par la mise en page.
   ============================================================ */
.calc-fond{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  overflow:hidden;
  /* Le fond de page reste dessous : les nappes ne font que le teinter. */
  background:radial-gradient(120% 80% at 50% 0%, rgba(232,162,61,0.05), transparent 58%);
}
.calc-fond-svg{ width:100%; height:100%; display:block; }

/* Le contenu repasse au-dessus du fond. Sans cela, la page entiere passerait
   derriere les nappes et deviendrait illisible.
   Le fond est exclu, sinon ce « position:relative » ecraserait son
   « position:fixed » — exactement le piege qui remettait le halo du bandeau
   dans le flux (voir .calc-hero > * plus bas). */
.calc-page > *:not(.calc-fond){ position:relative; z-index:1; }

.calc-nappe{ transform-origin:50% 60%; will-change:transform; }

@media (prefers-reduced-motion: no-preference){
  .calc-nappe-1{ animation:calc-derive-1 34s ease-in-out infinite alternate; }
  .calc-nappe-2{ animation:calc-derive-2 46s ease-in-out infinite alternate; }
  .calc-nappe-3{ animation:calc-derive-3 58s ease-in-out infinite alternate; }
  .calc-nappe-4{ animation:calc-derive-4 41s ease-in-out infinite alternate; }
}
@keyframes calc-derive-1{
  from{ transform:translate3d(-3%, 2%, 0) scale(1.04); }
  to  { transform:translate3d(4%, -3%, 0) scale(1.12); }
}
@keyframes calc-derive-2{
  from{ transform:translate3d(3%, -2%, 0) scale(1.10); }
  to  { transform:translate3d(-4%, 3%, 0) scale(1.02); }
}
@keyframes calc-derive-3{
  from{ transform:translate3d(-2%, 3%, 0) scale(1.06); }
  to  { transform:translate3d(3%, -2%, 0) scale(1.14); }
}
@keyframes calc-derive-4{
  from{ transform:translate3d(-5%, 4%, 0) scale(0.92); opacity:0.75; }
  to  { transform:translate3d(5%, -3%, 0) scale(1.16); opacity:1; }
}

/* Mouvement refuse : le fond reste, fige. On ne le supprime pas — il porte la
   teinte de la page, et l'enlever changerait l'apparence au lieu de calmer le
   mouvement, ce qui n'est pas ce qui est demande. */
@media (prefers-reduced-motion: reduce){
  .calc-nappe{ animation:none !important; }
}

/* Ecrans etroits : le fixed-attachment et les gros flous coutent cher sur
   mobile. On garde les nappes, on allege le flou via une mise a l'echelle. */
@media (max-width:640px){
  .calc-fond{ position:absolute; height:100%; }
  .calc-fond-svg{ opacity:0.75; }
}

/* ---------- Bandeau d'ouverture ---------- */
.calc-hero{ position:relative; max-width:980px; isolation:isolate; }
.calc-hero-photo{
  position:absolute;
  inset:0 auto 0 50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg, rgba(15,12,10,.72), rgba(15,12,10,.5) 48%, rgba(15,12,10,.74)),
    linear-gradient(180deg, rgba(15,12,10,.22), rgba(15,12,10,.66)),
    url('/assets/img/calculateur-peinture.webp') center / cover no-repeat;
  pointer-events:none;
  z-index:0;
}
.calc-hero-halo{
  position:absolute; left:50%; top:-6rem; width:min(760px, 92vw); height:340px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(232,162,61,0.16), transparent 72%);
  filter:blur(12px);
  pointer-events:none; z-index:0;
}
/* Le halo est exclu : cette regle, a specificite egale mais posee plus bas,
   ecrasait son « position:absolute » et le remettait dans le flux. Il occupait
   alors ses 340 px de haut pour de vrai, et le bandeau s'ouvrait sur un grand
   vide avant le fil d'Ariane. */
.calc-hero > *:not(.calc-hero-halo):not(.calc-hero-photo){ position:relative; z-index:1; }
.calc-hero h1{ font-size:clamp(2.1rem, 5vw, 3.35rem); }
.calc-avertissement{
  margin:1.8rem auto 0;
  max-width:62ch;
  background:rgba(62,124,177,0.08);
  border:1px solid rgba(62,124,177,0.28);
  border-left:3px solid var(--blue);
  border-radius:4px;
  padding:0.95rem 1.2rem;
  font-size:0.95rem; line-height:1.6;
  color:var(--ink-soft);
  text-align:left;
}
.calc-avertissement strong{ color:var(--ink); }
.calc-avertissement a{ color:var(--ocre); }

.calc-noscript{
  max-width:820px; margin:0 auto 2rem; padding:1rem 1.2rem;
  background:rgba(232,162,61,0.09); border:1px solid rgba(232,162,61,0.3);
  border-radius:4px; color:var(--ink-soft); font-size:0.95rem; line-height:1.65;
}
.calc-noscript a{ color:var(--ocre); }

/* ---------- Ossature de la section ---------- */
.calc{
  max-width:1180px;
  margin:0 auto;
  padding:1rem 6vw 5rem;
}
/* Les deux colonnes, et elles seules. Le pied de section est volontairement
   dehors : un element sticky descend jusqu'au bas de son bloc conteneur, donc
   tant que ce conteneur etait la section entiere, le panneau de resultat
   passait par dessus le pied — le bouton « Demander un devis gratuit » venait
   se poser sur la mention obligatoire. Borner le conteneur aux deux colonnes
   arrete le panneau exactement ou finit la plus haute des deux. */
.calc-colonnes{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:1.8rem;
  align-items:start;
}
.calc-form{ min-width:0; display:flex; flex-direction:column; gap:1.2rem; }
/* La specificite doit depasser celle de style.css ligne 1489 :
   « .sec > div:not(.process-sticky):not(.drip-band){ position:relative } »
   pose position:relative sur tout div d'une section, avec trois classes de
   specificite. Un simple « .calc-resultat » perdait donc l'arbitrage, et le
   panneau ne collait pas : on remplissait le formulaire en perdant le resultat
   de vue, ce qui est exactement ce que ce panneau doit eviter.
   Cette regle ne vise plus .calc-resultat, qui n'est plus enfant direct de la
   section, mais .calc-colonnes — on garde donc la specificite par prudence. */
.calc-colonnes > div.calc-resultat{ min-width:0; position:sticky; top:96px; }

@media (max-width:960px){
  .calc{ padding-bottom:4rem; }
  .calc-colonnes{ grid-template-columns:1fr; }
  .calc-colonnes > div.calc-resultat{ position:static; }
}

/* ---------- Choix du mode ---------- */
.calc-modes{ border:none; padding:0; margin:0; }
.calc-modes-legend{
  font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-soft);
  padding:0; margin-bottom:0.6rem;
}
.calc-modes-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
@media (max-width:520px){ .calc-modes-row{ grid-template-columns:1fr; } }

.calc-mode{
  display:block; cursor:pointer; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  padding:0.9rem 1rem;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.calc-mode:hover{ border-color:rgba(232,162,61,0.5); }
.calc-mode input{
  /* le bouton radio reste dans le flux du clavier, simplement discret */
  position:absolute; opacity:0; width:1px; height:1px;
}
.calc-mode-corps{ display:flex; flex-direction:column; gap:0.2rem; }
.calc-mode-corps b{
  font-family:'Fraunces', serif; font-size:1.02rem; color:var(--ink); font-weight:600;
}
.calc-mode-corps small{ color:var(--ink-soft); font-size:0.82rem; line-height:1.45; }
/* .est-actif est pose par le script : le rendu ne depend pas du seul « :has » */
.calc-mode.est-actif{
  border-color:var(--ocre);
  background:rgba(232,162,61,0.1);
  box-shadow:0 0 0 1px rgba(232,162,61,0.22), 0 10px 26px rgba(232,162,61,0.12);
}
.calc-mode.est-actif .calc-mode-corps b{ color:#FFE9BF; }
.calc-mode:focus-within{ outline:2px solid var(--blue-glow); outline-offset:3px; }

/* le bloc du mode qui n'est pas choisi disparait vraiment, quel que soit
   le style par defaut du navigateur pour « fieldset » */
.calc [hidden]{ display:none !important; }

/* ---------- Blocs de saisie ---------- */
/* ---------- Verre depoli ----------
   Les cartes du calculateur se posent sur le fond anime : opaques, elles le
   masqueraient et le mouvement ne se verrait plus qu'en marge ; transparentes,
   les nappes passeraient sous le texte. Le verre depoli tient les deux — on
   devine la matiere derriere, on lit devant.

   « Carte claire » lue comme « carte qui s'eclaircit sur le fond », pas comme
   un fond blanc : sur un site sombre, une vraie carte blanche rendrait cette
   page etrangere a toutes les autres.

   backdrop-filter n'est pas universel. La couleur de repli est posee d'abord
   et reste assez dense pour que le texte tienne meme sans flou : la carte est
   alors simplement opaque, ce qui est un rendu correct, pas un rendu casse. */
.calc-verre{
  background:rgba(28,24,20,0.88);
  border:1px solid rgba(232,162,61,0.14);
  border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .calc-verre{
    background:rgba(32,27,22,0.62);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    backdrop-filter:blur(16px) saturate(130%);
  }
}

.calc-bloc{
  background:rgba(28,24,20,0.88);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.3rem 1.3rem 1.1rem;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .calc-bloc{
    background:rgba(32,27,22,0.58);
    -webkit-backdrop-filter:blur(14px) saturate(125%);
    backdrop-filter:blur(14px) saturate(125%);
  }
}
.calc-bloc > legend{
  font-family:'Fraunces', serif; font-size:1.12rem; font-weight:600; color:var(--ink);
  padding:0 0.55rem; margin-left:-0.55rem;
}
.calc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:0.9rem;
  margin-top:1rem;
}
.calc-grid-mur{ grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); align-items:end; }

.calc-unite{
  font-family:'JetBrains Mono', monospace; color:var(--ocre);
  text-transform:none; letter-spacing:0.04em;
}
.calc-note, .calc-aide{
  color:var(--ink-soft); font-size:0.78rem; line-height:1.5;
}
.calc-aide{ margin-top:1rem; font-size:0.83rem; }
.calc-aide b{ color:var(--ink); font-weight:600; }

/* champ refuse : bordure + message sous le champ */
.calc-form .field input[aria-invalid="true"]{ border-color:#E8896B; }
.calc-champ-erreur{ font-size:0.78rem; color:#E8896B; font-weight:600; }
.calc-champ-avert{ font-size:0.78rem; color:var(--ocre); font-weight:600; }

/* le focus doit rester visible partout, y compris au clavier seul */
.calc-form :focus-visible,
.calc-resultat :focus-visible,
.calc-btn:focus-visible{
  outline:2px solid var(--blue-glow);
  outline-offset:2px;
}

/* ---------- Mode avance : pieces et murs ---------- */
.calc-pieces{ display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.calc-piece{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-left:3px solid rgba(232,162,61,0.5);
  border-radius:6px;
  padding:1rem 1rem 0.9rem;
}
.calc-piece-legend{
  font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ocre);
  padding:0 0.4rem; margin-left:-0.4rem;
}
.calc-piece-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:0.8rem; flex-wrap:wrap;
}
.calc-piece-nom{ flex:1 1 200px; }
.calc-murs{ display:flex; flex-direction:column; gap:0.7rem; margin:1rem 0 0.8rem; }
.calc-mur{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:5px;
  padding:0.75rem 0.85rem;
}
.calc-mur .calc-grid{ margin-top:0; }
.calc-mur-suppr{ justify-content:flex-end; }
.calc-plafond{ margin-top:0.9rem; padding-top:0.9rem; border-top:1px dashed var(--line); }
.calc-plafond-dims{ margin-top:0.8rem; }
.calc-check{
  display:inline-flex; align-items:center; gap:0.6rem; cursor:pointer;
  font-size:0.9rem; color:var(--ink);
}
.calc-check input{ width:18px; height:18px; accent-color:var(--ocre); flex:none; }

/* ---------- Boutons ---------- */
.calc-actions{
  display:flex; flex-wrap:wrap; gap:0.7rem; align-items:center;
}
.calc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Inter', sans-serif; font-size:0.9rem; font-weight:600;
  padding:0.8rem 1.25rem; border-radius:4px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
  min-height:44px; /* confort tactile */
}
.calc-btn:hover{ border-color:var(--blue-glow); background:rgba(62,124,177,0.1); }
.calc-btn-primaire{
  background:var(--ocre); color:#1a1410; border-color:transparent; font-weight:700;
  box-shadow:0 0 26px rgba(232,162,61,0.32);
}
.calc-btn-primaire:hover{ background:#F0B054; border-color:transparent; transform:translateY(-1px); }
.calc-btn-fantome{
  width:100%; margin-top:0.9rem; border-style:dashed; color:var(--ink-soft); background:transparent;
}
.calc-btn-fantome:hover{ color:var(--ink); }
.calc-btn-mini{
  font-family:'JetBrains Mono', monospace; font-size:0.7rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:0.55rem 0.85rem; border-radius:99px; min-height:38px;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.calc-btn-mini:hover{ border-color:var(--ocre); color:var(--ocre); background:rgba(232,162,61,0.07); }
.calc-btn-suppr:hover{ border-color:#E8896B; color:#E8896B; background:rgba(232,137,107,0.08); }

.calc-statut{ min-height:1.3em; font-size:0.85rem; font-weight:600; color:var(--ink-soft); }
.calc-statut.ok{ color:#8FBF6E; }
.calc-statut.erreur{ color:#E8896B; }

/* ---------- Erreurs globales ---------- */
.calc-erreurs{
  background:rgba(232,137,107,0.1);
  border:1px solid rgba(232,137,107,0.45);
  border-left:3px solid #E8896B;
  border-radius:5px;
  padding:0.9rem 1.1rem;
  color:#F2C3B4; font-size:0.9rem; line-height:1.55;
}
.calc-erreurs b{ display:block; color:#E8896B; margin-bottom:0.35rem; font-size:0.95rem; }
.calc-erreurs ul{ margin:0; padding-left:1.1rem; }
.calc-erreurs li{ margin:0.2rem 0; }

/* ---------- Panneau de resultat ---------- */
.calc-resultat{
  background:
    linear-gradient(180deg, rgba(232,162,61,0.07), transparent 40%),
    rgba(28,24,20,0.90);
  border:1px solid rgba(232,162,61,0.16);
  border-radius:10px;
  padding:1.4rem 1.4rem 1.2rem;
  box-shadow:0 18px 44px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .calc-resultat{
    background:
      linear-gradient(180deg, rgba(232,162,61,0.07), transparent 40%),
      rgba(32,27,22,0.66);
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    backdrop-filter:blur(16px) saturate(130%);
  }
}
.calc-resultat-titre{
  font-size:1.3rem; font-weight:600; margin-bottom:1rem;
}

/* ---------- Le pot et son chiffre ----------
   Une seule cellule de grille porte le dessin ET le chiffre : le nombre est
   donc exactement au centre du pot, sans position absolue a recaler des que
   la taille du texte change. La legende occupe la ligne du dessous. */
.calc-vedette{
  display:grid; grid-template-columns:1fr; justify-items:center;
  text-align:center;
  padding:1.1rem 0.8rem 1.2rem;
  border:1px solid rgba(232,162,61,0.3);
  background:rgba(232,162,61,0.07);
  border-radius:6px;
}
.calc-pot{
  grid-area:1 / 1;
  position:relative;
  width:min(160px, 46vw);
  aspect-ratio:200 / 232;
}
.calc-pot-svg{ width:100%; height:100%; display:block; overflow:visible; }

/* Le niveau : 0 = pot vide, 1 = plein. 153 est la hauteur interieure du pot
   dans le repere du SVG (y de 54 a 207). Le script ne pose que --niveau ;
   c'est la transition qui fait monter ou descendre la peinture au lieu de la
   faire sauter d'un niveau a l'autre. */
.calc-pot-liquide{
  transform:translateY(calc((1 - var(--niveau, 0)) * 153px));
  transition:transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.calc-pot-vague{
  fill:var(--teinte-peinture, #E8A23D);
  transition:fill 900ms ease;
}
.calc-pot-vague-1{ opacity:0.95; }
.calc-pot-vague-2{ opacity:0.5; }

/* Les deux vagues glissent en sens contraire, a des vitesses premieres entre
   elles : la surface ne se retrouve jamais deux fois dans le meme etat. Chaque
   trace couvre 800 unites pour une periode de 200, la boucle est donc invisible. */
@media (prefers-reduced-motion: no-preference){
  .calc-pot-vague-1{ animation:calc-vague-aller 7s linear infinite; }
  .calc-pot-vague-2{ animation:calc-vague-retour 11s linear infinite; }
}
@keyframes calc-vague-aller{
  from{ transform:translateX(0); }
  to  { transform:translateX(-200px); }
}
@keyframes calc-vague-retour{
  from{ transform:translateX(-200px); }
  to  { transform:translateX(0); }
}

.calc-pot-paroi{ fill:none; stroke:rgba(255,255,255,0.22); stroke-width:2.5; }
.calc-pot-col  { fill:none; stroke:rgba(255,255,255,0.30); stroke-width:2.5; }
.calc-pot-anse { fill:none; stroke:rgba(255,255,255,0.15); stroke-width:2.5; stroke-linecap:round; }

/* Un reflet vertical, fixe : il donne au pot le galbe qu'un simple contour
   ne rend pas. */
.calc-pot-reflet{
  position:absolute; left:26%; top:28%; width:11%; height:44%;
  border-radius:99px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), transparent 75%);
}

.calc-vedette-valeur{
  grid-area:1 / 1; align-self:center; z-index:2;
  transform:translateY(6%);
  font-family:'Fraunces', serif; font-weight:700;
  font-size:clamp(1.7rem, 5vw, 2.35rem); line-height:1.05;
  color:#FFF3DC;
  text-shadow:0 2px 12px rgba(0,0,0,0.72), 0 0 3px rgba(0,0,0,0.6);
}
.calc-vedette-legende{
  grid-area:2 / 1; margin-top:0.55rem;
  font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
.calc-resultat.est-vide .calc-vedette-valeur{ color:var(--ink-soft); }

/* Mouvement refuse : les vagues s'arretent, et le niveau se cale en un temps
   court plutot que d'un coup — un saut brutal serait lui aussi du mouvement
   non desire, en pire. */
@media (prefers-reduced-motion: reduce){
  .calc-pot-vague{ animation:none !important; }
  .calc-pot-liquide{ transition-duration:220ms; }
}

.calc-lignes{ margin-top:1.1rem; }
.calc-ligne{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:0.55rem 0;
  border-bottom:1px solid var(--line);
}
.calc-ligne:last-child{ border-bottom:none; }
.calc-ligne dt{
  font-family:'JetBrains Mono', monospace; font-size:0.68rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.calc-ligne dd{ font-size:0.98rem; font-weight:600; color:var(--ink); text-align:right; white-space:nowrap; }
.calc-ligne-forte dd{ color:var(--ocre); }
.calc-ligne-forte dt{ color:var(--ink); }

/* ---------- Pots ---------- */
.calc-pots{ margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.calc-pots h3, .calc-detail h3{
  font-family:'Fraunces', serif; font-size:1.02rem; font-weight:600; margin-bottom:0.7rem;
}
.calc-pots-liste{ list-style:none; display:flex; flex-wrap:wrap; gap:0.5rem; }
.calc-pots-liste li{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:'JetBrains Mono', monospace; font-size:0.78rem;
  padding:0.45rem 0.8rem; border-radius:99px;
  border:1px solid rgba(127,162,91,0.4); background:rgba(127,162,91,0.1); color:#CFE3B8;
}
.calc-pots-liste li b{ color:var(--ink); font-size:0.9rem; }
.calc-pots-liste .calc-pots-vide{
  border-color:var(--line); background:transparent; color:var(--ink-soft);
}
.calc-pots-total{ margin-top:0.7rem; font-size:0.8rem; color:var(--ink-soft); line-height:1.5; }

/* ---------- Detail par piece ---------- */
.calc-detail{ margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.calc-detail-tableau{ overflow-x:auto; }
.calc-detail table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.calc-detail th, .calc-detail td{
  text-align:right; padding:0.45rem 0.5rem; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.calc-detail th:first-child, .calc-detail td:first-child{ text-align:left; white-space:normal; }
.calc-detail thead th{
  font-family:'JetBrains Mono', monospace; font-size:0.64rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:500;
}
.calc-detail td{ color:var(--ink); }

/* ---------- Mention obligatoire ---------- */
.calc-mention{
  margin-top:1.3rem; padding-top:1.05rem; border-top:1px solid var(--line);
  font-size:0.8rem; line-height:1.6; color:var(--ink-soft); font-style:italic;
}

/* ---------- Pied de section ---------- */
.calc-pied{
  margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.4rem; flex-wrap:wrap;
}
.calc-pied p{ color:var(--ink-soft); font-size:0.95rem; line-height:1.65; max-width:58ch; }

/* ---------- Utilitaire lecteur d'ecran ---------- */
.calc-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .calc{ padding-left:5vw; padding-right:5vw; }
  .calc-bloc{ padding:1.05rem 0.95rem 0.95rem; }
  .calc-grid{ grid-template-columns:1fr; }
  .calc-grid-mur{ grid-template-columns:1fr 1fr; }
  .calc-grid-mur .field:first-child{ grid-column:1 / -1; }
  .calc-mur-suppr{ grid-column:1 / -1; }
  .calc-actions .calc-btn{ flex:1 1 100%; }
  .calc-ligne{ flex-direction:column; align-items:flex-start; gap:0.15rem; }
  .calc-ligne dd{ text-align:left; }
  .calc-pied{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Animations : rien d'imposé si l'utilisateur les refuse ---------- */
@media (prefers-reduced-motion: reduce){
  .calc-mode, .calc-btn, .calc-btn-mini{ transition:none; }
  .calc-btn-primaire:hover{ transform:none; }
}

/* ============================================================
   IMPRESSION — on ne garde que le resultat et ce qui l'explique
   ============================================================ */
@media print{
  nav, .nav-spacer, .mobile-menu, .site-footer, .call-fab, .contact-pop,
  #preloader, .grain, .cursor-dot, .cursor-ring, .skip-link,
  .calc-hero-halo, .trail, .calc-actions, .calc-statut, .calc-erreurs,
  .calc-btn, .calc-pied, .calc-noscript, .calc-modes{
    display:none !important;
  }
  body{ background:#fff !important; color:#111 !important; }
  .calc-page h1, .calc-page h2, .calc-page h3, .calc-page b, .calc-page strong{ color:#111 !important; }
  .calc-page p, .calc-page dt, .calc-page dd, .calc-page td, .calc-page th, .calc-page small{ color:#333 !important; }
  .calc{ display:block; padding:0; max-width:none; }
  .calc-colonnes{ display:block; }
  .calc-hero{ padding:0 0 1rem; text-align:left; }
  .calc-avertissement{ background:none; border:1px solid #999; color:#333; }
  .calc-bloc, .calc-piece, .calc-mur{
    background:none !important; border:1px solid #ccc !important; break-inside:avoid;
  }
  .calc-resultat{
    background:none !important; border:1px solid #999 !important;
    position:static; margin-top:1rem; break-inside:avoid;
  }
  .calc-vedette{ background:none !important; border:1px solid #999 !important; }
  .calc-vedette-valeur{ color:#111 !important; }
  .calc-ligne{ border-bottom:1px solid #ddd; }
  .calc-ligne-forte dd{ color:#111 !important; }
  .calc-pots-liste li{ background:none !important; border:1px solid #999 !important; color:#111 !important; }
  .calc-mention{ color:#333 !important; border-top:1px solid #999; }
  a[href]::after{ content:""; }
}