/* ==========================================================================
   /garages/ — ce qui ne sert qu'à cette page, lié APRÈS ../system/site.css.
   Tout le reste (fil d'Ariane, héros à une photo, .cap, .terms, .offers/.offer,
   .facts, .tbc, .alt-offer, .crosslink, .be, .cities strong) vit dans site.css.
   Aucun jeton redéfini, --k jamais touché.
    1. .uses    trois usages d'un même espace
    2. .proof   les deux avis garage
       .uses__sub : le sous-titre « ce qu’on peut y laisser », sous les usages
    3. .sec--uses  la section des usages en aplat jaune : cartes blanches, disques noirs
    4. .door-pic   la porte de 4 m × 4 m dessinée avec ses cotes (fait .facts__door)
   ========================================================================== */

/* 1. Trois usages d'un même espace --------------------------------------------- */
.uses{display:grid;gap:1.5rem}
.uses li{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start}
.uses__pic{grid-row:1 / span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--color-dark);background:var(--color-white)}
.uses__pic .ico{width:20px;height:20px}
.uses h3{font-size:var(--fs-h3);line-height:1.25;padding-top:.45rem}
.uses p{margin-top:.35rem;color:var(--color-ink-2);line-height:1.55;max-width:40ch}
.uses__sub{margin:clamp(2rem,1.5rem + 2vw,3rem) 0 1rem;font-size:var(--fs-h3);line-height:1.25}
@media (min-width:768px){
  .uses{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .uses li{grid-template-columns:1fr}
  .uses__pic{grid-row:auto;margin-bottom:1rem}
  .uses h3{padding-top:0}
}

/* 2. Deux avis garage : deux colonnes dès 1 024 px (les faits du site sont dans la fiche .equip) */
@media (min-width:1024px){.proof .reviews{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 3. Section des usages en aplat jaune (le 1er des deux aplats de la page) ------------------
   Les trois usages deviennent des cartes blanches ; pictogramme jaune sur disque noir (10,7:1),
   comme .secure__pic. Les trois faits dessous (non roulant, pont, porte) sont des cartes blanches
   du même relief, pictogramme sur disque noir ; la porte de 4 × 4 m y est mise en avant. */
.sec--uses .sec__lead{color:var(--color-dark)}
.sec--uses .uses{gap:.75rem}
.sec--uses .uses li{align-content:start;padding:1.1rem 1.1rem 1.2rem;background:var(--color-white);border-radius:var(--radius-lg);
  box-shadow:0 2px 4px rgba(26,26,26,.1),0 22px 40px -18px rgba(26,26,26,.45)}
.sec--uses .uses__pic{width:48px;height:48px;background:var(--color-dark);color:var(--color-primary);box-shadow:none}
.sec--uses .uses__pic .ico{width:22px;height:22px}
.sec--uses .uses p{color:var(--color-ink-2)}
.sec--uses .facts{gap:.75rem;border-top:0}
.sec--uses .facts li{grid-template-columns:48px 1fr;gap:1rem;align-items:start;padding:1.1rem 1.1rem 1.2rem;border-bottom:0;
  background:var(--color-white);border-radius:var(--radius-lg);box-shadow:0 2px 4px rgba(26,26,26,.1),0 22px 40px -18px rgba(26,26,26,.45)}
.sec--uses .facts .uses__pic{grid-row:auto}
.sec--uses .facts b{padding-top:.2rem}
.sec--uses .facts p{color:var(--color-ink-2)}
.sec--uses .facts li.facts__door{grid-template-columns:96px 1fr;align-items:center}
@media (min-width:768px){
  .sec--uses .uses{gap:1.25rem}.sec--uses .uses li{padding:1.5rem}
  .sec--uses .facts{gap:1.25rem}.sec--uses .facts li{padding:1.5rem}
}
@media (min-width:768px) and (max-width:1023px){.sec--uses .facts li.facts__door{grid-column:1 / -1}}

/* 4. La porte de 4 m × 4 m : le fait coté, dessiné. span.door-pic (aria-hidden) > svg + i (« 4 m »
   posé sur la cote du haut) ; le texte du fait porte l'information. Dans la carte, la colonne du
   pictogramme passe à 96 px : la porte est le fait mis en avant, pas le plus petit élément. */
.facts li.facts__door{grid-template-columns:96px 1fr;align-items:center}
.door-pic{position:relative;width:96px;height:96px;border-radius:var(--radius-md);background:var(--color-white);
  box-shadow:0 1px 2px rgba(26,26,26,.12),inset 0 0 0 1px rgba(26,26,26,.08)}
.door-pic svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.door-pic__leaf{fill:var(--color-primary);stroke:none}
.door-pic__line{stroke:var(--color-dark);stroke-width:1.6}
.door-pic__dim{stroke:var(--color-dark);stroke-width:1.1}
.door-pic i{position:absolute;left:50%;top:12px;transform:translateX(-50%);padding:0 3px;background:var(--color-white);
  font-style:normal;font-family:var(--font-display);font-weight:700;font-size:15px;line-height:16px;letter-spacing:-.01em;white-space:nowrap}

/* ==========================================================================
   garages-dispo/ — ajouts du 2026-10-11 (tout ce qui précède est garages/page.css, inchangé)
    5. .ed        section « entrepôts disponibles » (#entrepots-disponibles)
    6. .ed-flag   le rappel discret du héros
   ========================================================================== */

/* 5. Entrepôts disponibles ---------------------------------------------------------------
   Deux échelles, aucune sur :root (--k reste celui du site) :
   --ed-k  px par mètre, COMMUNE aux trois plans de la rangée .ed-cmp. Paliers choisis pour que la
           rangée tienne dans .wrap : sous 768 px, 160 + 240 côte à côte et 600 dessous (le 600 m²
           mesure 66,55 m de viewBox : 339 px à 5,1) ; dès 768 px, les trois sur une ligne
           (28,44 + 33,64 + 66,55 = 128,6 m).
   --ed-fw largeur en px du plan d'UNE fiche. Son échelle --ed-px = --ed-fw / --w (la largeur du
           viewBox en mètres, posée sur la figure) ne vaut que pour ce plan : les fiches ne se comparent pas.
   --ed-px est l'échelle que lisent les cotes (.ed-ct), pour garder --ctpx à l'écran ; un <use> hérite
           des propriétés de son contexte, donc le même plan sert aux deux échelles. */
.ed{--ed-k:4.4;--ed-fw:220;--ed-fw-wide:220}
@media (min-width:375px){.ed{--ed-k:5.1}}
@media (min-width:600px){.ed{--ed-k:7;--ed-fw:220;--ed-fw-wide:300}}
@media (min-width:768px){.ed{--ed-k:5.2;--ed-fw:280;--ed-fw-wide:360}}
@media (min-width:1024px){.ed{--ed-k:7;--ed-fw:320;--ed-fw-wide:540}}
@media (min-width:1280px){.ed{--ed-k:8.6;--ed-fw:380;--ed-fw-wide:660}}
.ed .sec__lead{max-width:58ch}
.ed-defs{position:absolute;width:0;height:0;overflow:hidden}
.ed-plan{display:block;height:auto;max-width:none;overflow:visible}
.ed-ct{fill:var(--color-dark);font-family:var(--font-display);font-weight:600;
  font-size:calc(var(--ctpx,12px) * 21 / var(--ed-px));
  paint-order:stroke;stroke:var(--halo,#fff);stroke-width:calc(3px * 21 / var(--ed-px));stroke-linejoin:round}
.ed-door{fill:var(--tvof-car-a)}
.ed-door__slat{fill:none;stroke:var(--tvof-car-t);stroke-width:.8px;vector-effect:non-scaling-stroke}
/* 600 m² seulement (plans.py, extras_600) : porte piétonne, bureau vitré, mezzanine */
.ed-door--ped{fill:var(--tvof-car-b)}
.ed-glass{fill:var(--tvof-glass-b);fill-opacity:.35;stroke:var(--tvof-steel);stroke-width:.9px;vector-effect:non-scaling-stroke}
.ed-mez-t{fill:var(--tvof-wood)} .ed-mez-b{fill:var(--tvof-kraft-b)}
.ed-ct--note{font-weight:500;font-size:calc(var(--ctpx,12px) * .92 * 21 / var(--ed-px))}

/* 5a. Rangée de comparaison, à l'échelle commune --ed-k, alignée sur la ligne de sol */
.ed-cmp{--ed-px:var(--ed-k);--halo:var(--color-white);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:.9rem 12px;padding:1rem .5rem .9rem;background:var(--color-white);background-image:var(--dots);background-size:var(--dots-size);
  border:1px solid var(--color-hair);border-radius:var(--radius-xl)}
.ed-cmp__it{margin:0;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.ed-cmp .ed-plan{width:calc(var(--ed-k) * var(--w) * 1px)}
.ed-cmp figcaption{padding:.1rem .55rem;border-radius:var(--radius-sm);background:var(--color-white);box-shadow:var(--shadow-card);
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-meta);line-height:1.4}
@media (min-width:768px){.ed-cmp{flex-wrap:nowrap;justify-content:space-around;gap:16px;padding:2rem 1rem 1.25rem}}

/* 5b. Faits communs : écrits une fois, avant les fiches */
.ed-common{margin-block:1.25rem;padding:var(--card-pad);background:var(--color-white);border:1px solid var(--color-hair);border-radius:var(--radius-xl)}
.ed-common__title{margin-bottom:.75rem;font-size:var(--fs-h3);line-height:1.25}
.ed-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem;border-top:1px solid var(--color-hair)}
.ed-sheet > div{padding:.5rem 0 .55rem;border-bottom:1px solid var(--color-hair)}
.ed-sheet dt{font-size:var(--fs-meta);line-height:1.4;color:var(--color-gray)}
.ed-sheet dd{margin-top:.1rem;font-weight:500;line-height:1.4}
/* Trois lignes : en liste sous 480 px (libellé à gauche, valeur à droite), sur une ligne au-delà */
@media (max-width:479.98px){
  .ed-sheet--common{grid-template-columns:minmax(0,1fr)}
  .ed-sheet--common > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .ed-sheet--common dd{margin-top:0;text-align:right}
}
@media (min-width:480px){.ed-sheet--common{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 5c. Fiches : ce qui distingue chaque lot (titre, statut, cotes au sol, loyer, actions)
   Sous 600 px : texte seul (le plan est dans la rangée de comparaison juste au-dessus).
   600 – 1 023 px : plan à gauche (--ed-fw), texte à droite.
   Dès 1 024 px : les trois fiches côte à côte, plan en haut sur un panneau de hauteur commune. */
.ed-lots{display:grid;gap:1rem}
.ed-lot{--pad:var(--card-pad);display:grid;gap:1rem;padding:var(--pad);background:var(--color-white);
  border:1px solid rgba(26,26,26,.07);border-radius:var(--radius-xl);box-shadow:var(--shadow-lift);
  scroll-margin-top:var(--space-sm);grid-template-areas:"txt"}
.ed-lot__title{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);letter-spacing:-.02em;line-height:1.15}
/* Statut : vert = disponibilité (jeton --color-success), texte foncé dérivé pour tenir 4,5:1 sur le fond pâle */
.ed-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .65rem .25rem .55rem;border-radius:999px;
  background:color-mix(in srgb,var(--color-success) 11%,#fff);color:color-mix(in srgb,var(--color-success) 68%,#000);
  font-family:var(--font-body);font-size:var(--fs-meta);font-weight:500;letter-spacing:0;line-height:1.3;white-space:nowrap}
.ed-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-success)}
.ed-dims{margin-top:.5rem;font-weight:500}
.ed-extras{display:grid;gap:.3rem;margin-top:.6rem}
.ed-extras li{display:flex;align-items:flex-start;gap:.5rem;line-height:1.45;color:var(--color-ink-2)}
.ed-extras .ico{width:18px;height:18px;margin-top:.15em;color:var(--color-dark)}
/* Loyer : traitement neutre (filet gris, pas de jaune) */
.ed-rent{display:grid;justify-self:start;margin-top:.75rem;padding:.45rem .8rem .5rem;border:1px solid var(--color-hair);border-radius:var(--radius-md);
  background:var(--color-bg);font-family:var(--font-display);font-weight:700;font-size:1.0625rem;line-height:1.25}
.ed-rent small{margin-top:.1rem;font-family:var(--font-body);font-weight:400;font-size:var(--fs-meta);color:var(--color-ink-2)}

.ed-lot__plan{grid-area:plan;display:none;--halo:var(--color-bg);--ed-px:calc(var(--ed-fw) / var(--w));margin:0;
  flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--color-bg);background-image:var(--dots);background-size:var(--dots-size)}
.ed-lot__plan .ed-plan{width:calc(var(--ed-fw) * 1px)}
.ed-lot__txt{grid-area:txt;display:flex;flex-direction:column;align-items:flex-start}
.ed-lot .offer__act{display:grid;align-self:stretch;gap:.625rem;margin-top:1.25rem}
.ed-lot .offer__act .btn{width:100%}

@media (min-width:600px){
  .ed-lot{grid-template-columns:calc(var(--ed-fw) * 1px + 2rem) minmax(0,1fr);column-gap:1.75rem;grid-template-areas:"plan txt"}
  .ed-lot__plan{display:flex;margin:calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));padding:1.25rem 1rem;
    border-right:1px solid var(--color-hair);border-radius:var(--radius-xl) 0 0 var(--radius-xl)}
  .ed-lot__txt{justify-content:center}
  .ed-lot .offer__act{align-self:start;min-width:min(16rem,100%)}
}
@media (min-width:768px){.ed-lots{gap:1.25rem}}
/* Le 600 m² (.ed-lot--wide) : plan plus large (--ed-fw-wide) dès 600 px, pour que la mezzanine et
   la porte piétonne restent lisibles ; dès 1 024 px, il occupe toute la ligne sous le 160 et le 240. */
@media (min-width:600px){.ed-lot--wide{--ed-fw:var(--ed-fw-wide)}}
@media (min-width:1024px){
  .ed-lots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed-lot:not(.ed-lot--wide){grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "txt";grid-template-rows:auto 1fr;row-gap:1.25rem}
  /* Panneau de hauteur commune (rapport hauteur/largeur du plus haut plan, le 160 m² : 0,756) */
  .ed-lot:not(.ed-lot--wide) .ed-lot__plan{margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;min-height:calc(var(--ed-fw) * .756px + 2.5rem);
    border-right:0;border-bottom:1px solid var(--color-hair);border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .ed-lot:not(.ed-lot--wide) .ed-lot__txt{justify-content:flex-start}
  .ed-lot:not(.ed-lot--wide) .offer__act{align-self:stretch;min-width:0;margin-top:auto;padding-top:1.25rem}
  .ed-lot--wide{grid-column:1 / -1;column-gap:2.5rem}
  .ed-lot--wide .offer__act{grid-template-columns:repeat(2,minmax(0,max-content));min-width:0}
}

/* État « Loué » : plan atténué, badge gris, ni loyer ni boutons (voir le commentaire du gabarit) */
.ed-loue{display:none}
.ed-lot--loue{box-shadow:var(--shadow-card)}
.ed-lot--loue .ed-lot__plan,.ed-lot--loue .ed-dims,.ed-lot--loue .ed-extras{opacity:.5;filter:grayscale(1)}
.ed-lot--loue .ed-badge{background:var(--color-gray-light);color:var(--color-ink-2)}
.ed-lot--loue .ed-badge::before{background:var(--color-gray)}
.ed-lot--loue .ed-rent,.ed-lot--loue .offer__act{display:none}
.ed-lot--loue .ed-loue{display:block;margin-top:auto;padding-top:1.25rem;font-weight:500}

/* 6. Rappel du héros : une pastille, lien vers la section ------------------------------- */
.ed-flag{margin-top:1rem}
.ed-flag a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.4rem .95rem .4rem .8rem;
  border:1px solid var(--color-hair);border-radius:999px;background:var(--color-white);
  font-size:var(--fs-meta);font-weight:500;line-height:1.3;color:var(--color-dark);text-decoration:none}
.ed-flag__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--color-success);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-success) 18%,transparent)}
.ed-flag .ico{width:16px;height:16px}
@media (hover:hover){.ed-flag a:hover{border-color:var(--color-dark)}}