/* Composition du panneau d'affichage réglementaire. */

.pm-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .pm-grille { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- formulaire ---------- */
.pm-bloc { border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem 1.6rem; margin: 0 0 1.4rem; }
.pm-bloc legend { font-family: var(--font-head); font-size: 1.15rem; color: var(--c-black); padding: 0 .5rem; }
.pm-aide { color: var(--c-muted); font-size: .9rem; line-height: 1.55; margin: 0 0 1rem; }

.pm-cas { display: grid; gap: .6rem; }
.pm-cas-item { display: block; border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: .8rem 1rem; cursor: pointer; transition: border-color .12s, background .12s; }
.pm-cas-item:hover { border-color: var(--c-magenta); }
.pm-cas-item.actif { border: 2px solid var(--c-magenta); padding: calc(.8rem - 1px) calc(1rem - 1px); background: #fff6fb; }
.pm-cas-item { position: relative; }
.pm-cas-item input, .pm-radios input, .pm-format input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; opacity: 0;
}
.pm-cas-nom { display: block; font-weight: 600; font-size: .98rem; }
.pm-cas-ex { display: block; color: var(--c-muted); font-size: .84rem; margin-top: .15rem; }

.pm-champ { margin-bottom: 1rem; }
.pm-champ > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.pm-champ .pm-oblig { color: var(--c-magenta); margin-left: .15rem; }
.pm-champ input[type=text], .pm-champ input[type=number], .pm-champ input[type=date],
.pm-champ textarea, .pm-champ select {
  width: 100%; border: 1px solid var(--c-gray-300); border-radius: 6px; padding: .55rem .7rem;
  font: inherit; font-size: .95rem; background: #fff; color: var(--c-black);
}
.pm-champ textarea { min-height: 4.2rem; resize: vertical; }
.pm-champ input:focus, .pm-champ textarea:focus, .pm-champ select:focus { outline: 2px solid var(--c-magenta); outline-offset: 1px; border-color: transparent; }
.pm-champ .pm-indice { display: block; color: var(--c-muted); font-size: .82rem; line-height: 1.5; margin-top: .25rem; }
.pm-champ.erreur input, .pm-champ.erreur textarea, .pm-champ.erreur select { border-color: #C8102E; background: #FFF6F7; }
.pm-champ .pm-err { display: none; color: #C8102E; font-size: .84rem; margin-top: .25rem; }
.pm-champ.erreur .pm-err { display: block; }
.pm-unite { position: relative; }
.pm-unite input { padding-right: 3rem; }
.pm-unite span { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: .9rem; pointer-events: none; }

.pm-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.pm-radios label { border: 1px solid var(--c-gray-300); border-radius: 99px; padding: .35rem .9rem; font-size: .9rem; cursor: pointer; }
.pm-radios label.actif { border: 2px solid var(--c-magenta); padding: calc(.35rem - 1px) calc(.9rem - 1px); background: #fff6fb; font-weight: 600; }
.pm-radios label { position: relative; }

/* ⭐ Grille de pictogrammes ISO 7010 — même présentation que le composeur de
   doemo.fr (grille.pictos, cases image + libellé, défilante). */
.pm-picto-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .5rem;
  max-height: 320px; overflow-y: auto; padding: .3rem;
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg);
}
.pm-picto-choix {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  border: 2px solid var(--c-gray-300); border-radius: 10px; padding: .5rem .3rem;
  background: #fff; text-align: center;
}
.pm-picto-choix img { width: 34px; height: 34px; object-fit: contain; }
.pm-picto-aucun { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--c-muted); border: 1px dashed var(--c-gray-300); border-radius: 6px; }
.pm-picto-nom { font-size: .72rem; font-weight: 600; color: var(--c-muted); line-height: 1.1; }
.pm-picto-choix.actif { border-color: var(--c-magenta); background: #fff6fb; }
.pm-picto-choix.actif .pm-picto-nom { color: var(--c-black); }

/* ⭐ Pastille de couleur devant un choix couleur_texte/couleur_fond. */
.pm-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); margin-right: .4rem; vertical-align: -2px; }

/* ⭐ Taille du texte : mêmes boutons −/+ que doemo.fr. */
.pm-stepper { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--c-gray-300);
  border-radius: 99px; padding: .3rem .5rem; }
.pm-stepper-bouton { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-gray-300);
  background: #fff; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.pm-stepper-bouton:hover { border-color: var(--c-magenta); color: var(--c-magenta); }
.pm-stepper-valeur { font-size: .88rem; font-weight: 700; min-width: 3.2em; text-align: center;
  font-variant-numeric: tabular-nums; }

.pm-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.pm-format { border: 1px solid var(--c-gray-300); border-radius: var(--radius-lg); padding: .75rem .9rem; cursor: pointer; text-align: center; }
.pm-format.actif { border: 2px solid var(--c-magenta); padding: calc(.75rem - 1px) calc(.9rem - 1px); background: #fff6fb; }
.pm-format { position: relative; }
.pm-format strong { display: block; font-size: 1.02rem; }
.pm-format span { display: block; color: var(--c-muted); font-size: .82rem; }
.pm-legal { color: var(--c-muted); font-size: .84rem; margin: .8rem 0 1.1rem; }
.pm-qte { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .92rem; }
.pm-qte input { width: 5.5rem; border: 1px solid var(--c-gray-300); border-radius: 6px; padding: .5rem .6rem; font: inherit; }

.pm-pied { border-top: 2px solid var(--c-black); padding-top: 1.2rem; }
.pm-etat { font-size: .9rem; margin: 0 0 .6rem; min-height: 1.3em; }
.pm-etat.incomplet { color: #9A6700; }
.pm-etat.pret { color: #1A7F37; font-weight: 600; }
.pm-prix { font-family: var(--font-head); font-size: 1.9rem; line-height: 1; margin: 0 0 .9rem; }
.pm-prix small { font-family: var(--font-body); font-size: .95rem; font-weight: 400; color: var(--c-muted); margin-left: .5rem; }
.pm-pied .btn { width: 100%; }
.pm-pied .btn[disabled] { opacity: .45; cursor: not-allowed; }
.pm-note { color: var(--c-muted); font-size: .84rem; margin: .8rem 0 0; }

/* ---------- aperçu ---------- */
/* Sous les deux barres collantes (en-tête du site + barre boutique). */
.pm-apercu-sticky { position: sticky; top: calc(var(--bq-barres) + 1rem); }
.pm-apercu-titre { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 .6rem; }
.pm-apercu-note { color: var(--c-muted); font-size: .82rem; line-height: 1.5; margin: .7rem 0 0; }
#pm-rendu { transition: opacity .12s; }
#pm-rendu.charge { opacity: .55; }

/* ─────────── le panneau ───────────
   Les CORPS viennent du serveur, en variables (--c-titre, --c-valeur…) : ce sont
   les mêmes fractions de largeur que le PDF, échelle comprise.
   Ici, on n'applique que les MÊMES MULTIPLICATEURS D'INTERLIGNE que permis-pdf.php.
   Chaque valeur ci-dessous a son jumeau dans permis_dessiner() ; l'une ne bouge
   pas sans l'autre, sinon l'aperçu mentirait sur l'impression.

   ⚠️ La marge intérieure est portée par .pm-panneau-int, pas par .pm-panneau :
   une unité cqw posée sur le conteneur lui-même se résout contre la FENÊTRE,
   ce qui donnait des marges énormes sur grand écran. */
.pm-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, .6667);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.pm-panneau-int { height: 100%; padding: var(--pad-haut) 7.5cqw; }

.pm-titre   { font-size: var(--c-titre);   font-weight: 700; line-height: 1.18;
              margin: 0; letter-spacing: -.01em; white-space: nowrap; }
.pm-sstitre { font-size: var(--c-sstitre); color: #6b6b6b; line-height: 1.5; margin: 0; }

/* PDF : filet d'épaisseur --filet, puis un blanc de c_valeur × 0,85. */
.pm-filet { height: var(--filet); background: var(--c-magenta);
            margin: 0 0 calc(var(--c-valeur) * .85); }

.pm-mentions { margin: 0; }
/* PDF : label puis y += c_label × 1,5 */
.pm-mentions dt { font-size: var(--c-label); color: #6b6b6b; line-height: 1.5;
                  margin: 0; text-transform: uppercase; letter-spacing: .02em; }
/* PDF : chaque ligne de valeur à c_valeur × 1,26, puis un blanc de c_valeur × 0,42 */
.pm-mentions dd { font-size: var(--c-valeur); font-weight: 700; line-height: 1.26;
                  margin: 0; padding-bottom: .42em;
                  border-bottom: calc(var(--filet) * .24) solid #d2d2d2; }
/* PDF : après le filet, un blanc de c_valeur × 0,55 — exprimé ici en corps de dt */
.pm-mentions dd + dt { margin-top: calc(var(--c-valeur) * .55); }

/* PDF : un blanc de c_rec_t × 0,6, le titre, puis y += c_rec_t × 1,55 */
.pm-rec-titre { font-size: var(--c-rec-t); font-weight: 700; line-height: 1.55;
                margin: calc(var(--c-rec-t) * .6) 0 0; }
/* PDF : lignes à c_rec × 1,38, blanc de c_rec × 0,75 entre paragraphes */
.pm-rec { font-size: var(--c-rec); line-height: 1.38; margin: .75em 0 0; }
.pm-rec:first-of-type { margin-top: 0; }


.pm-exemple { display: block; font-family: var(--font-body); font-weight: 400; font-size: .82rem;
  color: var(--c-muted); margin-top: .15rem; }

/* Les radios sont masquées mais restent dans l'ordre de tabulation : l'étiquette
   montre le focus à leur place, sinon la page est inutilisable au clavier. */
.pm-cas-item:focus-within, .pm-format:focus-within, .pm-radios label:focus-within {
  outline: 2px solid var(--c-magenta); outline-offset: 2px;
}

/* ─────────── la plaque professionnelle ───────────
   Corps et espacements émis par le serveur, mêmes fractions que plaque-pdf.php.
   Le PDF avance de « corps + espace » par ligne : ici line-height:1 + marge basse.
   Chaque multiplicateur a son jumeau dans plaque_dessiner(). */
.pl-plaque {
  container-type: inline-size;
  aspect-ratio: var(--r, 1.5);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
/* Le bloc est centré verticalement, comme dans le PDF. */
.pl-plaque-int {
  height: 100%; padding: var(--marge); text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.pl-plaque-int > p { margin: 0; line-height: 1; }

.pl-nom     { font-size: var(--c-nom);     font-weight: 700; margin-bottom: calc(var(--c-nom) * .42) !important; letter-spacing: -.01em; }
.pl-titre   { font-size: var(--c-titre);   color: #616161; margin-bottom: calc(var(--c-titre) * .55) !important; }
.pl-mention { font-size: var(--c-mention); margin-bottom: calc(var(--c-mention) * .34) !important; }
.pl-contact { font-size: var(--c-contact); color: #616161; margin-bottom: calc(var(--c-contact) * .30) !important; }
.pl-contact:last-child { margin-bottom: 0 !important; }

.pl-filet { height: var(--filet); width: 44%; margin: 0 auto calc(var(--c-contact) * .62);
            background: #b8b8b8; }

/* ─────────── le panneau de chantier ───────────
   Corps émis par le serveur, mêmes fractions que chantier-pdf.php ; ici seuls
   les multiplicateurs d'interligne, chacun jumeau de chantier_dessiner(). */
.ch-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, .6667);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.ch-panneau-int { height: 100%; padding: var(--pad-haut) 7cqw; }

.ch-titre   { font-size: var(--c-titre);   font-weight: 700; line-height: 1.2; margin: 0;
              white-space: nowrap; letter-spacing: -.01em; }
.ch-adresse { font-size: var(--c-adresse); color: #6b6b6b; line-height: 1.35; margin: 0; }
/* PDF : un blanc de c_valeur × 0,35, le filet, puis c_valeur × 0,75 */
.ch-filet   { height: var(--filet); background: var(--c-magenta);
              margin: calc(var(--c-valeur) * .35) 0 calc(var(--c-valeur) * .75); }

.ch-acteurs { margin: 0; }
.ch-acteurs dt { font-size: var(--c-label);  color: #6b6b6b; line-height: 1.5; margin: 0;
                 text-transform: uppercase; letter-spacing: .02em; }
.ch-acteurs dd { font-size: var(--c-valeur); font-weight: 700; line-height: 1.26;
                 margin: 0 0 calc(var(--c-valeur) * .5); }

/* PDF : un blanc de c_valeur × 0,25, le trait, puis c_l_val × 1,1 */
.ch-separateur { height: .12cqw; background: #cccccc;
                 margin: calc(var(--c-valeur) * .25) 0 calc(var(--c-l-val) * 1.1); }

/* Les colonnes sont découpées par le serveur : on les pose côte à côte, on ne
   laisse pas CSS rééquilibrer — la répartition doit être celle de l'impression. */
.ch-lots { display: grid; grid-template-columns: 1fr; gap: 0 5%; }
.ch-lots.deux { grid-template-columns: 1fr 1fr; }
.ch-lots dl { margin: 0; }
.ch-lots dt { font-size: var(--c-l-label); color: #6b6b6b; line-height: 1.45; margin: 0;
              text-transform: uppercase; letter-spacing: .02em; }
.ch-lots dd { font-size: var(--c-l-val); font-weight: 700; line-height: 1.24;
              margin: 0 0 calc(var(--c-l-val) * .42); }

.ch-tel { font-size: var(--c-tel); font-weight: 700; line-height: 1.2;
          margin: calc(var(--c-tel) * .5) 0 0; }

/* ─────────── la numérotation en série ───────────
   Corps calculés par le serveur (taille COMMUNE à toute la série), convertis en
   pourcentage de la largeur du support. */
.se-support {
  container-type: inline-size;
  aspect-ratio: var(--r, 1);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.se-support-int { height: 100%; padding: var(--marge); text-align: center;
                  display: flex; flex-direction: column; justify-content: center; }
.se-intitule { font-size: var(--c-int); color: #6b6b6b; line-height: 1;
               letter-spacing: .04em; margin: 0 0 calc(var(--c-int) * .9); }
.se-element  { font-size: var(--c-el); font-weight: 700; line-height: 1.16; margin: 0; }

.se-compte { font-size: .9rem; margin: .8rem 0 .3rem; }
.se-liste  { font-size: .84rem; color: var(--c-muted); line-height: 1.6; margin: 0;
             max-height: 7.5rem; overflow-y: auto;
             border-left: 2px solid var(--c-gray-300); padding-left: .8rem; }

.pm-qte-auto { font-size: .95rem; margin: 0; padding: .55rem .8rem; border-radius: 6px;
  background: var(--c-gray-100, #f4f4f4); border: 1px solid var(--c-gray-300); display: inline-block; }
.pm-qte-auto strong { font-family: var(--font-head); font-size: 1.15rem; }



/* ─────────── la carte / liste de tarifs ───────────
   Corps émis par le serveur, mêmes fractions que carte-pdf.php.
   ⛔ Les rubriques sont NOIRES : le magenta est notre couleur, pas celle du
   restaurateur. Il ne sert que de filet sous le titre. */
.ca-carte {
  container-type: inline-size;
  aspect-ratio: var(--r, .714);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.ca-carte-int { height: 100%; padding: var(--pad-haut) 8.5cqw; }

.ca-titre   { font-size: var(--c-titre);   font-weight: 700; line-height: 1.2;
              text-align: center; margin: 0; letter-spacing: -.01em; }
.ca-sstitre { font-size: var(--c-sstitre); color: #6b6b6b; line-height: 1.5;
              text-align: center; margin: 0; }
/* PDF : un blanc de c_plat × 0,3, le filet centré sur 40 %, puis c_plat × 0,9 */
.ca-filet { height: var(--filet); width: 40%; background: var(--c-magenta);
            margin: calc(var(--c-plat) * .3) auto calc(var(--c-plat) * .9); }

/* PDF : un blanc de c_rubrique × 0,75 avant (sauf la première), puis × 1,25,
   le trait, puis c_plat × 0,55 */
.ca-rubrique { font-size: var(--c-rubrique); font-weight: 700; line-height: 1.25;
               margin: calc(var(--c-rubrique) * .75) 0 0;
               border-bottom: .12cqw solid #d2d2d2;
               padding-bottom: calc(var(--c-plat) * .1); }
.ca-rubrique.premiere { margin-top: 0; }
.ca-rubrique + .ca-plat { margin-top: calc(var(--c-plat) * .45); }

.ca-plat { font-size: var(--c-plat); line-height: 1.32; margin: 0;
           display: flex; justify-content: space-between; align-items: baseline; gap: 4%; }
.ca-plat b { font-weight: 700; white-space: nowrap; }

.ca-pied { font-size: var(--c-pied); color: #6b6b6b; line-height: 1.4;
           text-align: center; margin: calc(var(--c-pied) * 1.2) 0 0; }

/* ─────────── la photo ─────────── */
.pm-depot { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pm-depot-etat { font-size: .88rem; color: var(--c-muted); }
.pm-depot-etat.pret   { color: #1A7F37; font-weight: 600; }
.pm-depot-etat.erreur { color: #C8102E; font-weight: 600; }

.ph-cadre { position: relative; aspect-ratio: var(--r, 1.5); overflow: hidden;
  background: #f0f0f0; border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  cursor: grab; touch-action: none; }
.ph-cadre.glisse { cursor: grabbing; }
/* ⚠️⚠️ `max-width: none` et `max-height: none`, SANS QUOI RIEN NE MARCHE.
   `assets/css/doemo.css` pose `img { max-width: 100% }` sur tout le site. Le
   `width` d'ici gagne en spécificité, mais `max-width` est une AUTRE propriété :
   elle n'est pas écrasée, elle ÉCRÊTE. Une image d'aperçu qui doit déborder de
   son cadre — c'est le principe même du cadrage « couvrir », et c'est
   systématique sur un triptyque où l'image fait 300 % du panneau — était donc
   ramenée à 100 % : le premier panneau montrait toute la photo, les deux autres
   restaient vides. Mesuré en production : 160 px de large au lieu de 486. */
.ph-cadre img { position: absolute; left: var(--ix, 0); top: var(--iy, 0);
  width: var(--il, 100%); height: var(--ih, 100%); object-fit: fill;
  max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none; }
.ph-cadre.ph-vide { display: flex; align-items: center; justify-content: center;
  cursor: default; background: #fafafa; border-style: dashed; }
.ph-cadre.ph-vide p { color: var(--c-muted); font-size: .9rem; text-align: center; padding: 1.5rem; }

/* ---------- triptyque : trois panneaux, une seule image ----------
   L'écart entre les panneaux est VISUEL. L'image est coupée en trois tiers
   exacts, comme à l'impression : rien n'est retiré sous les écarts. */
.tr-cadre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; align-items: start; }
/* ⚠️ Le glissé de cadrage vise le cadre unique de la photo simple ; sur un
   triptyque il déplacerait UN panneau sur trois. Le cadrage se fait ailleurs. */
.tr-panneau { cursor: default; }
.tr-note { margin: .8rem 0 0; color: var(--c-muted); font-size: .9rem; line-height: 1.5; }

.ph-verdict { border-left: 4px solid var(--c-gray-300); padding: .7rem 1rem; margin-top: .9rem;
  border-radius: 0 6px 6px 0; font-size: .9rem; line-height: 1.55; }
.ph-verdict p { margin: 0; }
.ph-verdict-titre { font-weight: 700; margin-bottom: .2rem !important; }
.ph-verdict-titre span { font-weight: 400; color: var(--c-muted); font-size: .85rem; }
.ph-excellent, .ph-net { border-left-color: #1A7F37; background: #F1F8F3; }
.ph-correct     { border-left-color: #9A6700; background: #FFF9EC; }
.ph-insuffisant { border-left-color: #C8102E; background: #FFF5F6; }
.ph-conseil { margin-top: .4rem !important; }

.ph-zoom { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; font-size: .88rem; }
.ph-zoom label { color: var(--c-muted); white-space: nowrap; }
.ph-zoom input[type=range] { flex: 1; accent-color: var(--c-magenta); }
.ph-zoom span { font-family: var(--font-head); min-width: 2.4rem; text-align: right; }
.ph-aide { font-size: .84rem; color: var(--c-muted); line-height: 1.5; margin: .5rem 0 0; }

.pm-etat.refus { color: #C8102E; font-weight: 600; }

/* ─────────── la promotion de vitrine ───────────
   La forme découpée est rendue par un clip-path dont les points viennent du
   serveur, avec la MÊME géométrie que le tracé du PDF. */
.pr-support {
  container-type: inline-size;
  aspect-ratio: var(--r, .75);
  background: var(--fond, #fff); color: var(--encre, #1a1a1a);
  border-radius: var(--rayon, 0);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
/* Le texte se resserre dans les formes rondes : dans un cercle, les coins sont
   perdus, et un mot posé là serait coupé par le massicot. */
/* ⚠️⚠️ `width: var(--retrait, 100%)` NE MARCHAIT PAS, et de la pire façon.
   Le serveur envoie `--retrait:72.00`, un nombre SANS UNITÉ : la déclaration
   devient invalide à la substitution, et une propriété personnalisée invalide
   ne retombe PAS sur son repli — elle est simplement abandonnée. La largeur
   restait donc `auto`, et la mention débordait du disque à l'écran alors que
   le PDF, lui, la coupait au bon endroit. L'aperçu mentait.
   ⚠️ `--zone` est déjà la zone utile complète : marge de texte ET resserrement
   de la forme, calculés côté PHP pour rester d'accord avec promo_dessiner(). */
.pr-support-int { height: 100%; width: calc(var(--zone, 76) * 1%); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 12cqw 0; }
.pr-support-int > p { margin: 0; line-height: 1; }
.pr-accroche { font-size: var(--c-accroche); font-weight: 700; letter-spacing: .04em;
               margin-bottom: calc(var(--c-accroche) * .5) !important; }
.pr-chiffre  { font-size: var(--c-chiffre);  font-weight: 700; letter-spacing: -.02em;
               margin-bottom: calc(var(--c-chiffre) * .22) !important; white-space: nowrap; }
.pr-mention  { font-size: var(--c-mention); line-height: 1.3; }

.pr-decoupe { font-size: .86rem; line-height: 1.55; color: var(--c-muted);
  margin: .9rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--c-magenta);
  background: #fff6fb; border-radius: 0 6px 6px 0; }
.pr-decoupe.pr-droit { border-left-color: var(--c-gray-300); background: #f6f6f6; }
.pr-decoupe strong { color: var(--c-black); }

/* ─────────── la signalétique directionnelle ───────────
   Les flèches sont des SVG aux proportions exactes du polygone du PDF. */
.an-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, 4);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.an-panneau-int { height: 100%; padding: var(--marge);
  display: flex; flex-direction: column; justify-content: center; }
.an-titre { font-size: var(--c-titre); font-weight: 700; color: #6b6b6b; line-height: 1.25;
            margin: 0; letter-spacing: .03em; }
.an-filet { height: var(--filet); background: #b8b8b8; margin: 0 0 calc(var(--c-titre) * .65); }
.an-ligne { font-size: var(--c-nom); font-weight: 700; line-height: 1.85; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 4%; }
.an-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ligne b { font-size: var(--c-ment); font-weight: 400; color: #6b6b6b; white-space: nowrap; }
.an-fleche { width: 1.25em; height: .95em; flex: none; }

/* ─────────── les panneaux de sécurité ───────────
   ⛔ Aucun symbole ISO 7010 ici : seulement les FORMES de l'ISO 3864 (disque
   barré, disque plein, carré) et le texte du client. Voir inc/securite.php. */
.se-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, .75);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: Helvetica, Arial, sans-serif;
}
.se-int { height: 100%; padding: var(--marge); display: flex; flex-direction: column;
          align-items: center; text-align: center; }
.se-picto, .se-carre { width: var(--picto); height: var(--picto); flex: none; }
.se-picto-iso { object-fit: contain; }
.se-carre { background: var(--bloc); color: #fff; display: flex; align-items: center;
            justify-content: center; }
/* ⚠️ `--corps` est calculé par `securite_corps_carre()` (PHP), avec la même
   mesure de chasse que l'impression : une fraction écrite en dur ici faisait
   déborder toute mention de plus de quatre caractères. Le repli .42 ne sert
   que si la variable manque. */
.se-carre span { font-size: calc(var(--picto) * var(--corps, .42)); font-weight: 700;
                 line-height: 1; padding: 0 6%; white-space: nowrap; }
.se-texte { font-size: calc(8.5cqw * var(--taille-texte, 1)); font-weight: 700; line-height: 1.3;
            margin: 6cqw 0 0; }
.se-complement { font-size: 4.5cqw; color: #6b6b6b; line-height: 1.35; margin: 2.5cqw 0 0; }

/* ─────────── le panneau immobilier ─────────── */
.im-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, .75);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden; position: relative;
  font-family: Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
.im-bandeau { height: var(--hb); background: var(--bande); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; }
.im-bandeau span { font-size: 13cqw; font-weight: 700; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap; padding: 0 7cqw; }
/* Le bloc est centré dans ce qui reste : un panneau sans logo ne doit pas
   laisser un vide au milieu. Même règle que le PDF. */
.im-corps { flex: 1; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 5cqw var(--marge); gap: 0; }
.im-logo { max-width: 60%; max-height: 16cqw; object-fit: contain; margin-bottom: 5cqw; }
/* ⚠️ `--c-agence` et `--c-tel` sont calculés par `immo_corps_ligne()`, avec la
   même mesure que l'impression : en dur, un nom d'agence ou un téléphone long
   débordait du panneau à l'écran. Les replis ne servent que si la variable
   manque. */
.im-agence { font-size: var(--c-agence, 7.5cqw); font-weight: 700; line-height: 1.5;
             margin: 0; white-space: nowrap; }
.im-tel { font-size: var(--c-tel, 11.5cqw); font-weight: 700; line-height: 1.45;
          margin: 0; color: var(--bande); white-space: nowrap; }
.im-details { font-size: 4.5cqw; line-height: 1.4; margin: 0; }
.im-ref { position: absolute; left: 0; right: 0; bottom: var(--marge);
  font-size: 3.2cqw; color: #6b6b6b; text-align: center; margin: 0; }



/* Les finitions dans le composeur : mêmes choix qu'au configurateur ordinaire. */
.pm-finitions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem 1.1rem; margin: 0 0 1.2rem; }
.pm-finition label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.pm-finition select { width: 100%; border: 1px solid var(--c-gray-300); border-radius: 6px;
  padding: .5rem .65rem; font: inherit; font-size: .92rem; background: #fff; color: var(--c-black); }
.pm-finition select:focus { outline: 2px solid var(--c-magenta); outline-offset: 1px;
  border-color: transparent; }
.pm-finition .pm-indice { margin-top: .2rem; }

/* Vignette d'encart de fiche produit : l'image remplit le cadre sans se
   déformer, et le cadre ne se glisse pas — ce n'est pas un cadrage. */
.ph-cadre.ph-vignette { cursor: default; background: #fff; }
.ph-cadre.ph-vignette img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Calendrier mural composé ----------------------------------- */
/* ⚠️ Les unités cqw sont portées par les ENFANTS : posées sur .cal-panneau
   lui-même, elles se résoudraient contre la fenêtre et non contre l'aperçu. */
.cal-panneau {
  container-type: inline-size;
  aspect-ratio: var(--r, 1.35);
  background: #fff; color: #1a1a1a;
  border: 1px solid var(--c-gray-300); box-shadow: var(--shadow-md);
  overflow: hidden; position: relative;
  font-family: Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
.cal-bandeau { height: var(--hb); background: var(--bande); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding: 0 4.5cqw; }
.cal-bd-g { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
.cal-bd-d { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.cal-logo { max-height: 9cqw; max-width: 16cqw; object-fit: contain; }
.cal-nom { font-weight: 700; font-size: 4.6cqw; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tel { font-weight: 700; font-size: 4.6cqw; line-height: 1.15; white-space: nowrap; }
.cal-web { font-size: 2.6cqw; line-height: 1.2; opacity: .92; white-space: nowrap; }
.cal-corps { flex: 1; padding: 3.5cqw 4.5cqw 4.5cqw; display: flex; flex-direction: column;
  min-height: 0; }
.cal-an { font-weight: 700; font-size: 11cqw; line-height: 1; margin: 0 0 3cqw;
  color: var(--bande); }
.cal-grille { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 3cqw 3.4cqw; align-content: start; }
.cal-mois-nom { margin: 0 0 .5cqw; font-weight: 700; font-size: 2.6cqw; color: var(--bande);
  border-bottom: .28cqw solid var(--bande); padding-bottom: .5cqw; letter-spacing: .02em; }
.cal-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15cqw;
  font-size: 2.05cqw; line-height: 1.55; text-align: center; }
.cal-jours .cal-ent { font-weight: 700; color: #8b8b91; }
.cal-jours .cal-dim { color: var(--bande); }
.cal-jours .cal-ferie { color: var(--bande); font-weight: 700; }

/* Les douze mois de gauche à droite, avec les fêtes. L'aperçu est une
   maquette à l'échelle : le texte y est minuscule parce qu'il l'est aussi,
   proportionnellement, sur un panneau de 54 cm. */
/* ⚠️⚠️ `minmax(0, 1fr)` et NON `1fr`. Un `1fr` nu vaut `minmax(auto, 1fr)` : la
   colonne ne descend jamais sous la largeur minimale de son contenu — ici le
   nom du saint. Les douze colonnes se plantaient donc à 706 px quoi qu'on
   fasse, et dans la vignette de 160 px de la fiche produit le calendrier était
   ROGNÉ après février. Sans effet sur la page du composeur, où les colonnes ont
   la place : le plancher n'y était jamais atteint. */
.cal-bandes { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 .3cqw; align-content: start; min-height: 0; }
.cal-bande { overflow: hidden; }
.cal-bande-nom { margin: 0 0 .35cqw; background: var(--bande); color: #fff; text-align: center;
  font-weight: 700; font-size: .78cqw; line-height: 1.7; letter-spacing: .01em; }
.cal-j { display: grid; grid-template-columns: 1.05fr .7fr 4.6fr 1fr; align-items: baseline;
  gap: .12cqw; font-size: .62cqw; line-height: 1.62; color: #26262a; }
.cal-j-num { text-align: right; }
.cal-j-ini { text-align: center; }
.cal-j-fete { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-j-sem { text-align: right; color: #9a9aa2; font-size: .48cqw; }
.cal-j-dim { color: var(--bande); }
.cal-j-dim .cal-j-sem { color: #9a9aa2; }
.cal-j-ferie { color: var(--bande); font-weight: 700; }
.cal-j-dim, .cal-j-ferie { border-bottom: .06cqw solid #e6e6ea; }

/* Vacances scolaires : légende, puis trois filets en marge de chaque jour. */
.cal-zones { display: flex; flex-direction: column; gap: .35cqw; margin: -1.5cqw 0 2cqw; }
.cal-zone { display: flex; align-items: baseline; gap: .6cqw; font-size: .78cqw;
  line-height: 1.3; color: #55555c; }
.cal-zone i { width: .95cqw; height: .95cqw; flex: none; align-self: center; }
.cal-zone b { color: #26262a; }
.cal-j { grid-template-columns: 1.05fr .7fr 4.3fr .95fr .5fr; }
.cal-j-zones { display: flex; gap: .04cqw; align-self: stretch; }
.cal-j-zones i { flex: 1; min-width: .1cqw; }

/* L'année vit dans le bandeau : elle laissait sinon un grand vide sous lui,
   et les mois manquaient de hauteur. */
.cal-bandeau .cal-an { margin: 0; color: #fff; font-weight: 700; font-size: 9cqw;
  line-height: 1; flex: 1; text-align: center; white-space: nowrap; }
.cal-corps { padding-top: 2.2cqw; }
.cal-zones { flex-direction: row; gap: 2.4cqw; margin: 0 0 1.6cqw; }
.cal-zone { flex: 1; min-width: 0; align-items: center; }
.cal-zone span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chaque mois descend jusqu'en bas : février n'a que 28 jours et doit pourtant
   finir à la même hauteur que janvier, sinon le bas de la grille est en
   escalier. Les jours se partagent la hauteur restante. */
.cal-corps { padding: 1.1cqw 4.5cqw 1.2cqw; }
.cal-zones { margin: 0 0 .9cqw; }
.cal-bandes { align-items: stretch; }
.cal-bande { display: flex; flex-direction: column; min-height: 0; }
.cal-bande .cal-j { flex: 1 1 0; align-items: center; }
/* ⚠️ `align-content: start` (posé plus haut pour les blocs mensuels) empêchait
   la rangée de s'étirer : un tiers de la hauteur restait blanc sous la grille. */
.cal-bandes { align-content: stretch; grid-auto-rows: 1fr; }
.cal-bande { height: 100%; }

/* Retour à la fiche produit, en haut de la page de composition. */
.pm-retour { margin: 0 0 1.3rem; }
.pm-retour .btn { font-weight: 600; }

/* ---------- la grille « quantité × délai », sous l'aperçu ----------
   Mêmes classes que la fiche produit (`ex-grille`, `ex-prix`) : seul le cadre
   qui l'entoure est réglé ici. */
.pm-cote-prix { margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--c-gray-200, #e6e6e6); }
.pm-cote-titre { margin: 0 0 .8rem; font-size: 1.05rem; }
.pm-scroll { overflow-x: auto; }
/* ⚠️⚠️ `pm-tarifs`, et SURTOUT PAS `pm-grille` : cette classe-là est déjà celle
   de la mise en page en deux colonnes de la page (`display: grid`, tout en haut
   de cette feuille). Posée sur un `<table>`, elle en fait une grille CSS : les
   colonnes cessent d'exister et les prix se tassent sur 70 px. Une collision de
   nom ne se voit ni au lint ni dans le HTML — seulement en mesurant.
   ⚠️ `table-layout: fixed` : en répartition automatique, la colonne
   « Quantité » prenait presque toute la largeur, ses chiffres étant larges
   alors que les cellules de prix n'affichent qu'un tiret tant que la
   composition n'est pas complète. */
.pm-tarifs { table-layout: fixed; width: 100%; }
.pm-tarifs thead th:first-child { width: 5.5rem; }
.pm-tarifs .ex-prix { padding-inline: .3rem; }
/* La ligne dont la quantité part au panier se repère d'un coup d'œil. */
.pm-tarifs tr.est-actif > th { border-color: var(--c-magenta, #e5007d);
  color: var(--c-magenta, #e5007d); }
.pm-cote-attente { font-style: italic; }