/* ══ Choix du film en image — /devis/ (18/10/2026) ═══════════════════
   Module devis-film.js. Préfixe .cf partout. Les textes sont protégés
   de la règle globale « section p { .95rem !important } ». */
.cf{ --cf-or:var(--gold,#C9A84C); --cf-nuit:var(--navy,#0C1B2E); --cf-gris:var(--text-muted,#5b6572);
  background:#fff; border-radius:20px; box-shadow:0 10px 40px rgba(12,27,46,.10); border:1px solid rgba(12,27,46,.06);
  padding:1.1rem; text-align:left; }
.cf-head{ position:relative; margin-bottom:.85rem; padding-right:2rem; }
.devis-wrap .cf-h{ font-size:1.3rem; line-height:1.2; color:var(--cf-nuit); margin:0 0 .25rem; font-weight:800; letter-spacing:-.01em; }
.devis-wrap .cf-sub{ font-size:.86rem !important; color:var(--cf-gris); margin:0; line-height:1.45; }
.cf-close{ position:absolute; top:0; right:0; width:34px; height:34px; border-radius:50%; border:0; background:rgba(12,27,46,.06); color:var(--cf-nuit); cursor:pointer; font-size:.95rem; }

/* Onglets : ce que le visiteur veut améliorer */
.cf-tabs{ display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; margin:0 -1.1rem .9rem; padding:0 1.1rem 2px; scroll-snap-type:x proximity; }
.cf-tabs::-webkit-scrollbar{ display:none; }
.cf-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:999px; border:1.5px solid rgba(12,27,46,.14);
  background:#fff; color:var(--cf-nuit); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; scroll-snap-align:start; transition:background .2s, border-color .2s, color .2s; }
.cf-tab svg{ width:17px; height:17px; flex:none; }
.cf-tab:hover{ border-color:var(--cf-or); }
.cf-tab.on{ background:var(--cf-nuit); border-color:var(--cf-nuit); color:#fff; }
.cf-tab:focus-visible, .cf-step:focus-visible, .cf-pose button:focus-visible{ outline:2px solid var(--cf-or); outline-offset:2px; }

/* Photo */
.cf-body{ display:grid; gap:1rem; }
.cf-stage{ min-width:0; }
.cf-frame{ position:relative; aspect-ratio:var(--r,4/3); border-radius:14px; overflow:hidden; background:#e9ecef; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.cf-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.cf-l{ opacity:0; transition:opacity .45s ease; }
.cf-l.on{ opacity:1; }
.cf-nu{ z-index:2; }
.cf-badge{ position:absolute; z-index:3; left:.6rem; top:.6rem; max-width:calc(100% - 1.2rem); background:rgba(12,27,46,.78); color:#fff; font-size:.76rem; font-weight:700;
  padding:.35rem .7rem; border-radius:999px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf.is-nu .cf-badge{ opacity:0; }
.cf-hold{ position:absolute; z-index:3; right:.6rem; bottom:.6rem; display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:999px; border:0;
  background:rgba(255,255,255,.92); color:var(--cf-nuit); font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.18); touch-action:none; -webkit-touch-callout:none; }
.cf-hold svg{ width:15px; height:15px; }
.cf-hold[aria-pressed="true"]{ background:var(--cf-or); }
.cf-nav{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:0; background:rgba(255,255,255,.85);
  color:var(--cf-nuit); font-size:1.4rem; line-height:1; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); display:grid; place-items:center; padding:0 0 3px; }
.cf-prev{ left:.5rem; } .cf-next{ right:.5rem; }
.cf[data-fam="securite"] .cf-nav{ display:none; }

/* Échelle transparent → miroir (famille soleil) */
.cf-echelle{ display:flex; align-items:center; gap:.5rem; margin:.7rem .2rem 0; font-size:.72rem; font-weight:700; color:var(--cf-gris); text-transform:uppercase; letter-spacing:.05em; }
.cf-echelle i{ flex:1; height:6px; border-radius:6px; background:linear-gradient(90deg,#d9e8f2 0%,#b9c3cc 45%,#8d97a3 75%,#4d5864 100%); }
.cf-echelle[hidden]{ display:none; }

/* Vignettes */
.cf-steps{ display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:.45rem; margin-top:.7rem; }
.cf-step{ display:flex; flex-direction:column; align-items:stretch; gap:.15rem; padding:.3rem .3rem .45rem; border-radius:12px; border:1.5px solid rgba(12,27,46,.12);
  background:#fff; cursor:pointer; font:inherit; text-align:center; color:var(--cf-nuit); min-width:0; transition:border-color .2s, box-shadow .2s, transform .15s; }
.cf-step img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; margin-bottom:.15rem; }
.cf-step-n{ font-size:.76rem; font-weight:700; line-height:1.15; }
.cf-step-s{ font-size:.66rem; color:var(--cf-gris); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-step:hover{ border-color:var(--cf-or); }
.cf-step.on{ border-color:var(--cf-or); box-shadow:0 0 0 2px var(--cf-or) inset, 0 6px 16px rgba(201,168,76,.25); }
.cf-step:active{ transform:scale(.97); }
.cf-steps--txt .cf-step{ padding:.7rem .5rem; }
.cf-steps--txt .cf-step-n{ font-size:.86rem; }
.cf-steps--txt .cf-step-s{ font-size:.72rem; }
/* 5 ou 6 vignettes (miroir, dépoli) : défilement horizontal au téléphone */
@media (max-width:700px){
  .cf[data-fam="intimite"] .cf-steps, .cf[data-fam="miroir"] .cf-steps, .cf[data-fam="securite"] .cf-steps{ display:flex; overflow-x:auto; scrollbar-width:none; margin-left:-1.1rem; margin-right:-1.1rem; padding:0 1.1rem 2px; scroll-snap-type:x proximity; }
  .cf[data-fam="intimite"] .cf-steps::-webkit-scrollbar, .cf[data-fam="miroir"] .cf-steps::-webkit-scrollbar, .cf[data-fam="securite"] .cf-steps::-webkit-scrollbar{ display:none; }
  .cf[data-fam="intimite"] .cf-step, .cf[data-fam="miroir"] .cf-step, .cf[data-fam="securite"] .cf-step{ flex:0 0 31%; scroll-snap-align:start; }
}

/* Panneau d'information */
.cf-info{ min-width:0; }
.cf-pose{ display:flex; background:rgba(12,27,46,.06); border-radius:999px; padding:3px; gap:3px; margin-bottom:.8rem; }
.cf-pose[hidden]{ display:none; }
.cf-pose button{ flex:1; border:0; background:none; border-radius:999px; padding:.5rem .4rem; font:inherit; font-size:.82rem; font-weight:700; color:var(--cf-gris); cursor:pointer; }
.cf-pose button small{ font-weight:500; font-size:.7rem; }
.cf-pose button.on{ background:#fff; color:var(--cf-nuit); box-shadow:0 1px 4px rgba(12,27,46,.15); }
.devis-wrap .cf-k{ font-size:.72rem !important; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dark,#a8862f); margin:0 0 .2rem; }
.devis-wrap .cf-name{ font-size:1.12rem; font-weight:800; color:var(--cf-nuit); margin:0 0 .35rem; line-height:1.2; }
.devis-wrap .cf-desc{ font-size:.88rem !important; color:#3b4656; line-height:1.55; margin:0 0 .8rem; }
.cf-gauges{ list-style:none; margin:0 0 .75rem; padding:0; display:grid; gap:.6rem; }
.cf-gauges[hidden]{ display:none; }
.cf-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; font-size:.8rem; color:#3b4656; }
.cf-row strong{ color:var(--cf-nuit); font-size:.92rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cf-bar{ height:6px; border-radius:6px; background:rgba(12,27,46,.08); margin-top:.3rem; overflow:hidden; }
.cf-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#e6c56b,var(--cf-or)); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.cf-gauges small{ display:block; font-size:.7rem; color:var(--cf-gris); margin-top:.2rem; }
.cf-seg{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:.3rem; }
.cf-seg i{ height:6px; border-radius:6px; background:rgba(12,27,46,.08); transition:background .3s; }
.cf-seg i.on{ background:var(--cf-or); }
.devis-wrap .cf-note{ font-size:.8rem !important; line-height:1.5; border-radius:10px; padding:.6rem .75rem; margin:0 0 .9rem; }
.cf-note.ok{ background:rgba(46,125,50,.07); color:#2e6b33; }
.cf-note.warn{ background:#fdf4e3; color:#8a5a00; }
.cf-lien{ display:inline; border:0; background:none; padding:0; font:inherit; font-weight:700; color:var(--cf-nuit); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cf-add{ width:100%; justify-content:center; text-align:center; white-space:normal; line-height:1.25; padding:.95rem 1rem; font-size:.98rem; }
.cf-add.pt-added{ background:#e8f3e9; color:#2e6b33; border-color:#e8f3e9; box-shadow:none; }
.cf-conseil{ display:block; width:100%; margin-top:.55rem; border:0; background:none; font:inherit; font-size:.82rem; color:var(--cf-gris); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cf-conseil:hover{ color:var(--cf-nuit); }
.cf-autres{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid rgba(12,27,46,.08); font-size:.8rem; color:var(--cf-gris); }
.cf-autre{ display:inline-block; border:1.5px solid rgba(12,27,46,.14); background:#fff; border-radius:999px; padding:.35rem .75rem; font:inherit; font-size:.8rem; font-weight:600; color:var(--cf-nuit); cursor:pointer; text-decoration:none; }
.cf-autre:hover{ border-color:var(--cf-or); }

@media (min-width:860px){
  .cf{ padding:1.5rem; }
  .cf-tabs{ margin:0 0 1rem; padding:0; flex-wrap:wrap; overflow:visible; gap:.35rem; }
  .cf-tab{ padding:.5rem .72rem; font-size:.82rem; }
  .cf-body{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1.5rem; align-items:start; }
  .devis-wrap .cf-h{ font-size:1.5rem; }
}
/* La barre d'action du bas (téléphone) répétait « Choisissez un film » sous le gros bouton d'ajout. */
body.cf-ouvert .devis-barre{ display:none; }

/* ── Articles du devis : vignette + chiffres ── */
.devis-item .di-name.di-avec-vignette{ display:flex; align-items:center; gap:.75rem; }
.di-vignette{ flex:none; width:64px; height:48px; border-radius:9px; object-fit:cover; background:#e9ecef; box-shadow:0 2px 8px rgba(12,27,46,.12); }
.di-txt{ min-width:0; }
.di-chiffres{ display:block; font-size:.74rem; color:var(--gold-dark,#a8862f); font-weight:600; margin-top:.15rem; }
.devis-wrap .di-pitch{ font-size:.82rem !important; color:var(--cf-gris,#5b6572); margin:.1rem 0 .6rem; line-height:1.45; }
.devis-wrap .di-pitch b{ color:var(--navy,#0C1B2E); }
.devis-item.di-neuf{ animation:diNeuf .9s ease; }
@keyframes diNeuf{ 0%{ box-shadow:0 0 0 0 rgba(201,168,76,.6); transform:translateY(8px); opacity:.4; } 60%{ box-shadow:0 0 0 8px rgba(201,168,76,0); transform:none; opacity:1; } }
.cf-plus{ display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; margin:0 0 1rem; padding:.8rem 1rem; border-radius:12px; border:1.5px dashed rgba(12,27,46,.25);
  background:none; font:inherit; font-size:.9rem; font-weight:700; color:var(--navy,#0C1B2E); cursor:pointer; }
.cf-plus:hover{ border-color:var(--gold,#C9A84C); color:var(--gold-dark,#a8862f); }
@media (prefers-reduced-motion:reduce){ .cf-l, .cf-bar i, .devis-item.di-neuf{ transition:none; animation:none; } }
/* L'en-tête collant masquait le haut de l'article au défilement automatique. */
.devis-item, #choixFilm{ scroll-margin-top:96px; }
/* `hidden` ne masque pas un élément dont le CSS fixe display (piège déjà vu sur ce site). */
.cf-hold[hidden], .cf-plus[hidden], .cf-nu[hidden]{ display:none; }
/* Le cadre pointillé de l'ancienne grille entourait le module : on le retire. */
.devis-empty.devis-empty--cf{ border:0; padding:0; background:none; box-shadow:none; }
@media (max-width:700px){
  .devis-empty.devis-empty--cf{ margin-left:-6px; margin-right:-6px; }
  .cf{ padding:.95rem; border-radius:18px; }
  .cf-tabs{ margin-left:-.95rem; margin-right:-.95rem; padding-left:.95rem; padding-right:.95rem; }
  .cf-step-n{ font-size:.72rem; overflow-wrap:anywhere; }
}
@media (max-width:480px){ .cf-steps:not(.cf-steps--txt) .cf-step-s{ display:none; } }

/* Fenêtres (L × H) au téléphone : largeur × hauteur sur une ligne, exposition dessous. */
@media (max-width:600px){
  .devis-item .di-win{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; gap:.4rem .45rem; align-items:center;
    padding:.6rem .65rem; border:1px solid rgba(12,27,46,.08); border-radius:12px; background:rgba(12,27,46,.02); }
  .di-win .di-win-n{ grid-area:1 / 1 / 2 / 4; min-width:0; font-weight:700; color:var(--navy,#0C1B2E); }
  .di-win .di-winx{ grid-area:1 / 4; justify-self:end; }
  .di-win input:first-of-type{ grid-area:2 / 1; }
  .di-win .di-x{ grid-area:2 / 2; }
  .di-win input:last-of-type{ grid-area:2 / 3; }
  .di-win .di-unit{ grid-area:2 / 4; }
  .di-win .di-winor{ grid-area:3 / 1 / 4 / -1; max-width:none; width:100%; margin-left:0 !important; }
  #devis-form .di-win .di-dim{ width:100%; min-width:0; margin:0; }
}
/* Miroir + anti-chaleur (2 en 1) : la bascule active se voit */
.cf-duo{ margin-bottom:.6rem; }
.cf-duo button[data-duo="1"].on{ background:linear-gradient(180deg,#e6c56b 0%,var(--cf-or) 100%); color:var(--cf-nuit); }
/* Sécurité : 7 films en boutons texte — deux lignes sur ordinateur (19/10/2026) */
@media (min-width:701px){ .cf[data-fam="securite"] .cf-steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }