/* =====================================================================
   Fiche d'un detaillant (V2, 2026-10-01) : /partenaires/<slug>.
   Chargee par templates/v2/detaillant.twig seulement, apres v2.css.

   QUE DES CLASSES NOUVELLES (prefixe .detaillant-) : les composants de la
   V2 que la page reprend (bouton, surtitre, titre-affiche, lien-fleche,
   choix-projet, temoignage, texte-riche, image-texte, fin-accueil) gardent
   leur regle, rien ici ne la touche.

   Le systeme : Gilroy 400 et 500, espacements en multiples de 4, 64 a
   96 px entre deux sections, boutons de 40 px (44 au doigt) a coins de
   4 px, photos et cartes a coins de 8 px, texte jamais sous 12 px, les
   jetons de :root. Telephone d'abord ; deux colonnes des 720 px.
   ===================================================================== */

/* ---------- Le rythme entre les sections ----------
   Nos sections blanches portent leur espace en bas : deux sections qui se
   suivent sont separees par 64 a 96 px, jamais par le double. Le jeton de
   v2.css (--espace-section), pas sa valeur recopiee : si le systeme change,
   cette page suit. */
.detaillant-haut { padding-block: 16px var(--espace-section); }
.detaillant-section { padding-bottom: var(--espace-section); }
/* Apres une section grise du CMS, l'espace du haut revient. */
.detaillant-section--apres-gris { padding-top: var(--espace-section); }
.detaillant-section__titre { margin-bottom: var(--espace-titre, 24px); }

/* ---------- Le haut : le nom, la ville, les deux gestes, la photo ---------- */
.detaillant-tete { display: grid; gap: 24px; }
@media (min-width: 720px) {
  .detaillant-tete--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
}
@media (min-width: 1024px) {
  .detaillant-tete--photo { gap: 64px; }
}
.detaillant-tete__texte { display: grid; gap: 12px; justify-items: start; align-content: start; min-width: 0; }
/* Les logos du reseau sont des panneaux noirs : hauteur fixe, largeur libre. */
.detaillant-tete__logo { display: block; width: auto; height: 48px; max-width: 100%; object-fit: contain; border-radius: var(--rayon); margin-bottom: 4px; }
.detaillant-tete__lieu { display: flex; align-items: center; gap: 8px; font-size: var(--fs-chapeau, 17px); line-height: 1.4; color: var(--texte-2); }
.detaillant-tete__lieu svg { flex: none; color: var(--texte-3); }
.detaillant-tete__accroche { max-width: 46ch; font-size: var(--fs-chapeau, 17px); line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }
.detaillant-tete__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-self: stretch; margin-top: 12px; }
/* Au telephone, les deux gestes se partagent la largeur. */
.detaillant-action { flex: 1 1 auto; }
@media (min-width: 720px) {
  .detaillant-action { flex: 0 0 auto; }
}
/* La photo a son propre format, jamais recadree : ce sont des montages de logos. */
.detaillant-tete__photo { margin: 0; overflow: hidden; border-radius: var(--rayon-photo); background: var(--surface); }
.detaillant-tete__photo img { display: block; width: 100%; height: auto; }

/* ---------- Coordonnees et offre : deux cartes ---------- */
.detaillant-infos { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 720px) {
  /* Chaque carte garde sa hauteur : etiree, une carte courte (une seule
     offre) laissait un grand vide encadre. */
  .detaillant-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; margin-top: 48px; }
  /* Une seule carte : elle ne s'etire pas sur toute la largeur. */
  .detaillant-infos--seul { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
.detaillant-carte { padding: 24px; border-radius: var(--rayon-photo); box-shadow: inset 0 0 0 1px var(--bordure); }
@media (max-width: 479px) {
  .detaillant-carte { padding: 20px; }
}
.detaillant-carte__titre { margin-bottom: 16px; }

.detaillant-coordonnees { display: grid; gap: 16px; margin: 0; }
.detaillant-coordonnees dt { font-size: 14px; font-weight: 500; color: var(--texte-3); }
.detaillant-coordonnees dd { margin: 4px 0 0; color: var(--texte); overflow-wrap: anywhere; }
.detaillant-coordonnees__suite { padding-top: 4px; }
.detaillant-lien {
  text-decoration: underline; text-decoration-color: var(--bordure); text-underline-offset: 3px;
  transition: text-decoration-color var(--duree-courte) var(--courbe);
}
.detaillant-lien:hover { text-decoration-color: currentColor; }
/* Au doigt : 36 px de zone touchable sans changer le dessin. */
@media (pointer: coarse) {
  .detaillant-lien { display: inline-block; padding-block: 6px; margin-block: -6px; }
}

.detaillant-offres { display: grid; gap: 20px; }
.detaillant-offre { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.detaillant-offre__icone { color: var(--texte); }
.detaillant-offre strong { display: block; font-weight: 500; line-height: 1.4; color: var(--texte); }
.detaillant-offre p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--texte-2); text-wrap: pretty; }
.detaillant-offre__suite { margin-top: 8px; }

/* ---------- A propos : l'intro et le second texte du CMS ---------- */
.detaillant-apropos__titre { margin-bottom: var(--espace-titre, 24px); }
.detaillant-apropos__texte + .detaillant-apropos__texte { margin-top: 16px; }
.detaillant-apropos__sous { margin: 32px 0 12px; }

/* ---------- Temoignages : jamais une carte seule sur sa rangee ---------- */
.detaillant-avis { display: grid; gap: 16px; }
@media (min-width: 720px) {
  .detaillant-avis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detaillant-avis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .detaillant-avis { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .detaillant-avis > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- Les autres detaillants ---------- */
.detaillant-autres { display: grid; gap: 8px; }
@media (min-width: 720px) {
  .detaillant-autres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .detaillant-autres > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .detaillant-autres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .detaillant-autres > :last-child:nth-child(odd) { grid-column: auto; }
}
.detaillant-autre { height: 100%; }

/* Le premier bloc du CMS apporte son propre espace du haut : la section qui
   le precede rend le sien (place en dernier pour l'emporter). */
.detaillant-suivi { padding-bottom: 0; }