/* ==========================================================================
   /a-propos/ — ce qui ne sert qu'à cette page, lié APRÈS ../system/site.css (passe 8, 2026-09-28).
   Tout le reste (héros à une photo, .facts, .checks, .reviews, .crosslink, .cities, .brief, .tbc,
   bandeau de contact) vit dans site.css et n'est pas redéfini ici. Aucun jeton redéfini, --k jamais touché.
    1. .ab-who     « Votre contact » : la note de domiciliation sous les faits
    2. .ab-site    le site en vraies photos : texte + mosaïque de trois photos (.ab-shots)
    3. .ab-offers  les deux renvois vers /garde-meuble/ et /garages/
    4. .ab-areas   les communes desservies, France et Belgique, en deux cartes
    5. .ab-brief   la fiche « en bref » en section à part (titre h2, date de mise à jour)
    6. .ab-tbc     phrase « à confirmer » posée sous un titre
   ========================================================================== */

/* 1. Votre contact -------------------------------------------------------------------------- */
.ab-who .facts .tbc{display:inline;padding:.05rem .3rem;outline-offset:1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ab-who__note{margin-top:1.25rem;max-width:60ch;color:var(--color-ink-2);line-height:1.5}
@media (min-width:1024px){
  /* Titre à gauche, faits à droite sur deux colonnes : la section tient en une hauteur d'écran */
  .ab-who{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);column-gap:clamp(2.5rem,1rem + 3vw,4.5rem);align-items:start}
  .ab-who > .sec__hd{grid-row:1 / span 2;margin-bottom:0}
  .ab-who__note{grid-column:2}
  /* Titre dans une demi-colonne : un cran plus petit que le H2 plein format, pour tenir en trois lignes */
  .ab-who .h2,.ab-site .h2{font-size:clamp(2rem,1rem + 1.9vw,2.75rem)}
}

/* 2. Le site en vraies photos -----------------------------------------------------------------
   Sous 1 024 px : texte, puis la grande photo pleine largeur et deux vignettes côte à côte.
   Dès 1 024 px : texte à gauche, mosaïque à droite. Les photos gardent un ratio fixe (pas de CLS). */
.ab-site{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem)}
.ab-site .sec__hd{margin-bottom:1rem}
.ab-site__p{max-width:52ch;color:var(--color-ink-2);line-height:1.55}
.ab-site__p + .ab-site__secu{margin-top:1rem}
.ab-site__secu{max-width:52ch}
.ab-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;align-items:start}
.ab-shot{margin:0}
.ab-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);background:var(--color-hair);box-shadow:var(--shadow-card)}
.ab-shot--main{grid-column:1 / -1}
.ab-shot--main img{aspect-ratio:3/2}
.ab-shot .cap{margin-top:.45rem}
@media (min-width:768px){.ab-shots{gap:1rem}}
@media (min-width:1024px){
  .ab-site{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2.5rem,1rem + 3vw,4.5rem);align-items:start}
  .ab-site__txt{position:sticky;top:calc(var(--hd-top,0px) + 1.5rem)}
}

/* 3. Les deux renvois ------------------------------------------------------------------------ */
.ab-offers{display:grid;gap:.75rem}
.ab-offers > li{display:flex}
.ab-offers .crosslink{flex:1}
@media (min-width:768px){.ab-offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}

/* 4. Communes desservies ------------------------------------------------------------------------
   Deux cartes blanches sur le blanc cassé de la section. Dans une carte, chaque ligne de .cities
   passe sur deux rangées : la commune (lien ou <strong>) et sa précision dessous, le temps à droite
   sur les deux rangées ; sans précision, la ligne tient sur une rangée. Toute la ligne reste cliquable (a::after de site.css). */
.ab-areas{display:grid;gap:1rem}
.ab-area{padding:1.1rem var(--card-pad) 1.25rem;background:var(--color-white);border:1px solid rgba(26,26,26,.07);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.ab-area h3{font-size:var(--fs-h3);line-height:1.25;margin-bottom:.75rem}
.ab-area .cities li{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.05rem 1rem;padding-block:.65rem}
.ab-area .cities li > a,.ab-area .cities li > strong{grid-column:1;grid-row:1}
.ab-area .cities li > span{grid-column:1;grid-row:2}
.ab-area .cities b{grid-column:2;grid-row:1 / span 2;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);letter-spacing:-.01em}
.ab-area__more{margin-top:.9rem;color:var(--color-ink-2);line-height:1.5}
.ab-area__more a{color:var(--color-dark);font-weight:500;text-underline-offset:.2em;text-decoration-thickness:1px}
@media (min-width:768px){.ab-areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start}}

/* 5. La fiche « en bref » en section à part -----------------------------------------------------
   L'ordre des tuiles du gabarit ne laisse aucun trou à deux colonnes (paires de tuiles chiffrées) et
   à quatre colonnes (six rangées pleines, la dernière tuile sur toute la largeur : .ab-brief__full). Entre 768 et 1 023 px, le composant passe à trois colonnes,
   qui laisseraient des trous : cette page garde deux colonnes jusqu'à 1 024 px. */
.ab-brief .brief{margin-top:0}
.ab-brief .brief__title{font-size:var(--fs-h2);letter-spacing:-.03em;line-height:1.02}
.brief__date{margin-top:.875rem;padding-inline:.4rem;font-size:var(--fs-meta);color:var(--color-ink-2)}
@media (min-width:768px) and (max-width:1023.98px){.ab-brief .brief__dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ab-brief__full{grid-column:1 / -1}}

/* 6. Phrase « à confirmer » sous un titre ---------------------------------------------------- */
.ab-tbc{max-width:60ch;margin-bottom:1rem}
.sec__hd .ab-tbc{margin:1rem 0 0}