/* ==========================================================================
   /garde-meuble/ — ce qui ne sert qu'à cette page, lié APRÈS ../system/site.css.
   Tout le reste (fil d'Ariane, héros à une photo, .cap, .media, .facts, .facts-media,
   .alt-offer, .crosslink, .be, .tbc) vit dans site.css.
   Aucun jeton nouveau, --k jamais redéfini.
    A. .sizer           section « taille » : plan à l'échelle (cotes dessinées) + photo
    B. .tf-…            bloc tarif (#tarif) : le ticket du premier mois (2026-09-28)
   ========================================================================== */

/* A. Section « taille » ------------------------------------------------------------
   Le plan reste à l'échelle commune (--k de :root, jamais redéfini ici). */
.sizer{display:grid;gap:2rem}
.sizer__plan{display:flex;flex-direction:column;align-items:flex-start;padding:var(--card-pad);background:var(--color-bg);
  border:1px solid var(--color-hair);border-radius:var(--radius-lg);--halo:var(--color-bg)}
.sizer__plan .plan{align-self:center;margin-block:.5rem 1rem}
.sizer__checks{align-self:stretch;margin-top:.25rem}
.sizer__more{margin-top:.75rem;align-self:stretch}
.sizer__photo{display:none}                          /* sous 768 px : le plan suffit, la photo du box chargé ouvre le bloc tarif */
.sizer__photo img{aspect-ratio:3/2;object-position:50% 42%}
@media (min-width:768px){
  .sizer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sizer{align-items:stretch}
  .sizer__photo{display:block}
  .sizer__photo img{height:100%;aspect-ratio:auto;min-height:16rem}
}
/* Deux colonnes dès 768 px : le plan et la photo du box vide, à même hauteur. */

/* B. Bloc tarif (#tarif) ----------------------------------------------------------------
   Dicté par Antoine le 2026-09-28 (variante E de options-tarif/, qui garde les autres pistes).
   Mobile, dans l'ordre du DOM : photo bord à bord avec l'étiquette « Box 33 m³ » (h3), la
   condition, le prix, une ligne de cotes, le relevé en bandeau noir (libellés blancs, montants
   jaunes), le total sous filet double, les deux actions, puis le talon (bord dentelé) : second
   box et un avis Google.
   Dès 768 px : le ticket à gauche (prix et bouton en haut à gauche), posé sur la photo grand
   format qui déborde à droite ; l'étiquette passe en bas à droite de la photo.
   Empilement : .tf-stage isole ; la photo (absolue dès 768 px, z-index:-1) passe sous le ticket,
   qui ne doit donc porter ni position, ni transform, ni filter (il deviendrait son bloc conteneur).
   Contrastes : #FFF sur #1A1A1A 17,4:1 · #F5C518 sur #1A1A1A 10,7:1 · #E8E6E1 sur #1A1A1A 14,2:1 */

#tarif.tf{padding-top:clamp(1.375rem,.25rem + 4.4vw,5rem)}
#tarif.tf .sec__hd{margin-bottom:clamp(.75rem,.4rem + 1.6vw,2.25rem)}
#tarif.tf .h2{margin-top:.35rem}

.tf-stage{position:relative;isolation:isolate}
.tf-ticket{--pad:1.125rem;max-width:34rem;background:var(--color-white);border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--shadow-lift);margin-bottom:12px}

/* Pastille de pictogramme : jaune, picto noir */
.tf-pic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);
  color:var(--color-dark);box-shadow:inset 0 -2px 0 rgba(26,26,26,.14)}
.tf-pic .ico{width:16px;height:16px}
.tf-pic--line{background:var(--color-white);box-shadow:inset 0 0 0 2px var(--color-dark)}

/* 1. La photo en bandeau, l'étiquette jaune « Box 33 m³ » posée dessus */
.tf-media{position:relative}
.tf-media img{width:100%;aspect-ratio:16/5;object-fit:cover;object-position:50% 60%;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.tf-media::after{content:'';position:absolute;inset:auto 0 0;height:50%;pointer-events:none;background:linear-gradient(transparent,rgba(26,26,26,.3))}
.tf-tag{position:absolute;z-index:1;left:.75rem;bottom:.65rem;padding:.28rem .7rem .3rem;border-radius:var(--radius-md);
  background:var(--color-primary);color:var(--color-dark);font-size:1.25rem;line-height:1.15;letter-spacing:-.015em;
  box-shadow:inset 0 -3px 0 rgba(26,26,26,.14),0 6px 14px -6px rgba(26,26,26,.55)}

.tf-main{padding:.8rem var(--pad) 1.1rem}

/* 2. La condition, puis le prix (le plus gros objet), puis les cotes en une ligne */
.tf-terms{display:flex;align-items:flex-start;gap:.55rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.28;letter-spacing:-.01em;color:var(--color-dark)}
.tf-terms .ico{width:20px;height:20px;margin-top:.1em}
.tf-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .55rem;margin-top:.45rem;font-family:var(--font-display)}
.tf-price b{font-weight:700;font-size:clamp(3.25rem,2.4rem + 3.6vw,5.5rem);line-height:.92;letter-spacing:-.055em;white-space:nowrap;
  background:linear-gradient(transparent 66%,var(--color-primary) 66%,var(--color-primary) 88%,transparent 88%);padding-inline:.04em;margin-left:-.04em;
  font-variant-numeric:tabular-nums}
.tf-price > span:not(.sr){font-weight:600;font-size:clamp(1.0625rem,1rem + .4vw,1.375rem);color:var(--color-ink-2);white-space:nowrap}
/* Sous le prix : sûreté + prix ramené au jour (130 € × 12 / 365 = 4,27 €), formule d'Antoine du 2026-09-28 */
.tf-dims{margin-top:.4rem;font-size:1rem;line-height:1.4;color:var(--color-ink-2);text-wrap:balance}

/* 3. Le relevé : bandeau noir pleine largeur du ticket.
   dl > div > dt (pastille + libellé + points de conduite) + dd (montant jaune) [+ dd.tf-note] */
.tf-bill{margin:.7rem calc(-1 * var(--pad)) 0;padding:.4rem var(--pad) .5rem;background:var(--color-dark);color:var(--color-white)}
.tf-bill > div{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;padding-block:.15rem}
.tf-bill dt{flex:1 1 auto;min-width:0;white-space:nowrap;display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:600;
  font-size:1.0625rem;line-height:1.3}
.tf-bill dt::after{content:'';flex:1 1 .75rem;min-width:0;align-self:flex-end;margin-bottom:.4em;border-bottom:2px dotted rgba(255,255,255,.35)}
.tf-bill dd{flex:none;font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.3;color:var(--color-primary);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tf-bill dd.tf-note{flex:1 0 100%;margin-top:-.1rem;padding-left:calc(30px + .6rem);font-family:var(--font-body);font-weight:400;
  font-size:1rem;line-height:1.3;color:var(--color-gray-light);text-align:left;white-space:normal}
.tf-offert{font-style:normal;font-size:.9375rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
  padding:.1rem .35rem;border-radius:var(--radius-sm);background:var(--color-primary);color:var(--color-dark);white-space:nowrap}

/* 4. Le total : filet double, comme au bas d'un ticket */
.tf-total{margin-top:.65rem;padding-top:.45rem;border-top:4px double var(--color-dark);font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.0625rem,1rem + .35vw,1.3125rem);line-height:1.3;letter-spacing:-.01em}

/* 5. Les deux actions : un bouton plein, le numéro écrit en lien (48 px de haut) */
.tf-act{margin-top:.7rem}
.tf-act__main{width:100%}
.tf-tel{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;margin-top:.2rem;
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:rgba(26,26,26,.4)}
.tf-tel .ico{width:18px;height:18px}
.tf-tel b{font-weight:700}
@media (hover:hover){.tf-tel:hover{text-decoration-color:currentColor}}

/* 6. Le talon, sous une ligne de découpe, bord dentelé : le second box, puis un avis Google (verbatim) */
.tf-stub{position:relative;display:grid;gap:.9rem;padding:1rem var(--pad) 1.1rem;background:var(--color-bg);
  border-top:2px dashed rgba(26,26,26,.28)}
.tf-stub::after{content:'';position:absolute;left:0;right:0;top:100%;height:9px;background:var(--color-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 0h16L8 9z'/%3E%3C/svg%3E") 0 0/16px 9px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 0h16L8 9z'/%3E%3C/svg%3E") 0 0/16px 9px repeat-x}
.tf-second{display:flex;align-items:flex-start;gap:.7rem;font-size:1rem;line-height:1.5;color:var(--color-ink-2)}
.tf-second b{color:var(--color-dark);font-weight:700}
.tf-quote{margin:0;padding-left:.9rem;border-left:3px solid var(--color-primary)}
.tf-quote blockquote p{margin-top:.3rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);
  line-height:1.35;letter-spacing:-.01em;color:var(--color-dark)}
.tf-quote figcaption{margin-top:.25rem;font-size:.9375rem;line-height:1.4;color:var(--color-ink-2)}
.tf-quote .stars svg{width:18px;height:18px}
.tf-quote cite{font-style:normal;font-weight:600;color:var(--color-dark)}

/* Dès 768 px : le ticket sur la photo grand format */
@media (min-width:768px){
  .tf-ticket{--pad:1.75rem;width:26rem;max-width:none;border-top:6px solid var(--color-primary)}
  .tf-media{position:absolute;z-index:-1;top:3rem;bottom:4rem;left:calc(26rem - 3rem);right:0}
  .tf-media img{height:100%;aspect-ratio:auto;border-radius:var(--radius-lg);object-position:55% 60%;box-shadow:var(--shadow-float)}
  .tf-media::after{border-radius:0 0 var(--radius-lg) var(--radius-lg)}
  .tf-tag{left:auto;right:1.25rem;bottom:1.1rem;font-size:1.5rem;padding:.35rem .85rem .4rem}
  .tf-main{padding:1.5rem var(--pad) 1.5rem}
  .tf-price{margin-top:.8rem}
  .tf-dims{margin-top:.5rem}
  .tf-bill{margin-top:1.1rem;padding-block:.8rem .9rem}
  .tf-bill > div{padding-block:.3rem}
  .tf-total{margin-top:1rem;padding-top:.75rem}
  .tf-act{margin-top:1.1rem}
}
@media (min-width:1024px){
  .tf-ticket{--pad:2.25rem;width:31rem}
  .tf-media{left:calc(31rem - 3.5rem);top:4rem;bottom:5rem}
  .tf-main{padding:2rem var(--pad) 1.75rem}
  .tf-bill{padding-block:1rem 1.1rem}
  .tf-bill > div{padding-block:.4rem}
  .tf-pic{width:38px;height:38px}
  .tf-pic .ico{width:20px;height:20px}
  .tf-bill dt{font-size:1.125rem}
  .tf-bill dd{font-size:1.375rem}
  .tf-bill dd.tf-note{padding-left:calc(38px + .6rem)}
  .tf-stub{padding-block:1.25rem 1.35rem}
}
@media (min-width:1280px){
  .tf-ticket{width:33rem}
  .tf-media{left:calc(33rem - 4rem)}
}