/* HEADER 13 - PASTILLES
   ---------------------------------------------------------------------------
   Réf. Dujardin et Compagnons (maquette B, étude C76). Le logo à gauche — le
   nom et la ville quand le thème n'a pas de logo —, les liens en clair (le
   menu des services tombe sous la barre), puis trois pastilles : l'appel
   (accent, le numéro lisible) si le site a un téléphone, « Devis » (claire),
   et sous 1024 px un burger cerclé. Sous 600 px, l'appel n'est plus qu'une
   pastille ronde et « Devis » prend son libellé court.

   ÉTATS : sur un héros `data-hero-immersif`, la barre est TRANSPARENTE à
   toutes les largeurs, 390 px compris : le header ne pose aucun fond ni
   dégradé en haut de page (EX-117) ; seules les pastilles, qui portent du
   texte, écrivent leur propre fond (§4.14). Hors du héros, et en haut d'une
   page dont le héros n'est pas immersif, la barre prend un voile sombre de la
   charte (`--black`) : le texte y reste blanc dans tous les états, le logo
   s'y lit en clair (`mcl_header_logos()`).
   L'état vient de headers/main.js (`data-header-immersif`, D-40). */

.header-13 {
  --header-13-voile: color-mix(in srgb, var(--black) 82%, transparent);
  --header-13-verre: color-mix(in srgb, var(--black) 20%, transparent);
  --header-13-verre-survol: color-mix(in srgb, var(--black) 45%, transparent);
  --header-13-cercle: color-mix(in srgb, var(--white) 40%, transparent);
  --header-13-texte: var(--white);
  --header-13-texte-doux: color-mix(in srgb, var(--white) 72%, transparent);
  --header-13-flou: blur(14px);
  --header-13-pastille: 46px;
  /* Sur la photo, sans voile de barre : une ombre neutre porte le contraste. */
  --header-13-ombre-texte: 0 1px 12px rgba(0, 0, 0, 0.4);

  /* Réglages du burger optionnel (menu-burger/main.css) : posé sur la barre. */
  --burger-color: var(--header-13-texte);
  --burger-color-hover: var(--header-13-texte);
  --burger-bg: var(--header-13-verre);
  --burger-bg-hover: var(--header-13-verre-survol);
  --burger-reserve: 0;

  background: none;
}

/* Aucun rembourrage vertical sur la barre : la navigation la remplit sur
   toute sa hauteur (main.css, `align-self: stretch`), et le pointeur passe de
   l'onglet « Services » au panneau, ancré sous le header, sans zone morte. */
.header-13__barre {
  display: flex;
  align-items: stretch;
  gap: clamp(14px, 2vw, 28px);
  min-height: 78px;
  padding: 0 clamp(16px, 3vw, 40px);
  background-color: var(--header-13-voile);
  -webkit-backdrop-filter: var(--header-13-flou);
  backdrop-filter: var(--header-13-flou);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

/* Posé sur le héros immersif : rien d'opaque, pas même un dégradé. */
html:has([data-hero-immersif]) .header-13.at-top .header-13__barre {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- Marque ---- */
.header-13__marque,
.header-13__marque:hover,
.header-13__marque:focus {
  align-self: center;
  flex: 0 1 auto;
  display: inline-grid;
  /* La colonne peut rétrécir sous la largeur du nom : la marque cède la
     place aux pastilles, jamais l'inverse (nom long, prise de rendez-vous). */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  min-width: 0;
  min-height: 44px;
  color: var(--header-13-texte);
  text-decoration: none;
}
.header-13__marque:focus-visible {
  outline: 2px solid var(--header-13-texte);
  outline-offset: 4px;
}

.header-13__logo {
  display: block;
  max-height: 46px;
}
/* Pas de logo clair dans le thème : le logo est passé en blanc. */
.header-13__logo--filtre {
  filter: brightness(0) invert(1);
}

.header-13__nom {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: min(22ch, 100%);
  /* Un mot plus long que la colonne (« Dupont-Lefebvre ») se coupe au lieu
     de déborder sous les pastilles ; au-delà de deux lignes, points de suite. */
  overflow-wrap: anywhere;
  color: var(--header-13-texte);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.05;
  text-shadow: var(--header-13-ombre-texte);
}

.header-13__ville {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  max-width: 100%;
  color: var(--header-13-texte-doux);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: var(--header-13-ombre-texte);
}

/* ---- Liens en clair ---- */
.header-13__nav {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin-left: auto;
}

[data-header] .header-13__lien,
[data-header] .header-13__lien:hover,
[data-header] .header-13__lien:focus {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--header-13-texte);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: var(--header-13-ombre-texte);
  cursor: pointer;
  transition: color 0.2s ease;
}
[data-header] .header-13__lien:hover,
[data-header] .header-13__item:hover .header-13__lien,
[data-header] .header-13__item:focus-within .header-13__lien {
  color: var(--header-13-texte-doux);
}
[data-header] .header-13__lien:focus-visible {
  outline: 2px solid var(--header-13-texte);
  outline-offset: 4px;
}

.header-13__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.header-13__item:hover .header-13__chevron,
.header-13__item:focus-within .header-13__chevron {
  transform: rotate(180deg);
}

/* ---- Les pastilles ---- */
.header-13__actions {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

[data-header] .header-13__appel,
[data-header] .header-13__appel:hover,
[data-header] .header-13__appel:focus,
[data-header] .header-13__devis,
[data-header] .header-13__devis:hover,
[data-header] .header-13__devis:focus {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--header-13-pastille);
  margin: 0;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* L'appel : la couleur d'action de la charte (§4.14, `--accent`). */
[data-header] .header-13__appel,
[data-header] .header-13__appel:focus {
  padding: 0 18px;
  background: var(--accent);
  color: var(--on-accent);
}
[data-header] .header-13__appel:hover {
  padding: 0 18px;
  background: var(--secondary);
  color: var(--on-secondary);
}
.header-13__appel-icone {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.header-13__appel-numero {
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}

/* « Devis » : la pastille claire. */
[data-header] .header-13__devis,
[data-header] .header-13__devis:focus {
  padding: 0 20px;
  background: var(--white);
  color: var(--black);
}
[data-header] .header-13__devis:hover {
  padding: 0 20px;
  background: var(--gray-light);
  color: var(--black);
}
.header-13__devis-long,
.header-13__devis-court {
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}
.header-13__devis-court {
  display: none;
}

[data-header] .header-13__appel:focus-visible,
[data-header] .header-13__devis:focus-visible {
  outline: 2px solid var(--header-13-texte);
  outline-offset: 3px;
}

/* ---- Le burger cerclé (tablette et mobile) ---- */
.header-13__toggle,
.header-13__toggle:hover,
.header-13__toggle:focus {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--header-13-pastille);
  height: var(--header-13-pastille);
  margin: 0;
  padding: 0;
  border: 1px solid var(--header-13-cercle);
  border-radius: 50%;
  background-color: var(--header-13-verre);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--header-13-texte);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.header-13__toggle:hover {
  background-color: var(--header-13-verre-survol);
}
.header-13__toggle:focus-visible {
  outline: 2px solid var(--header-13-texte);
  outline-offset: 2px;
}
.header-13__toggle-icone {
  width: 22px;
  height: 22px;
}

.header-13__annexes {
  display: contents;
}

/* ---- Menu burger (sous-composant optionnel, menu-burger/main.css) ----
   Le déclencheur se pose SUR la barre, à droite : la barre lui fait la
   place (`--burger-reserve: 0` sur la racine). Il remplace le burger cerclé
   (`.menu-btn`, masqué par le socle du burger). */
.header-13[data-burger] .header-13__barre {
  padding-right: calc(clamp(0.9rem, 2.5vw, 1.6rem) + clamp(42px, 5vw, 50px) + clamp(0.5rem, 1.2vw, 1rem));
}

/* ---- Tablette : la navigation laisse la place au burger ---- */
@media (max-width: 1024px) {
  .header-13__nav {
    display: none;
  }

  /* Plus de navigation pour pousser les pastilles : la marque prend la place. */
  .header-13__marque,
  .header-13__marque:hover,
  .header-13__marque:focus {
    margin-right: auto;
  }

  .header-13__toggle,
  .header-13__toggle:hover,
  .header-13__toggle:focus {
    display: inline-flex;
  }
}

/* ---- Mobile : appel rond, « Devis » court ---- */
@media (max-width: 600px) {
  .header-13 {
    --header-13-pastille: 44px;
  }

  .header-13__barre {
    gap: 10px;
    min-height: 70px;
    padding: 0 14px;
  }

  .header-13__nom {
    font-size: 1.05rem;
  }

  .header-13__logo {
    max-height: 40px;
  }

  [data-header] .header-13__appel,
  [data-header] .header-13__appel:hover,
  [data-header] .header-13__appel:focus {
    width: var(--header-13-pastille);
    padding: 0;
  }
  .header-13__appel-numero {
    display: none;
  }

  [data-header] .header-13__devis,
  [data-header] .header-13__devis:hover,
  [data-header] .header-13__devis:focus {
    padding: 0 16px;
  }

  /* Le libellé long reste le nom du lien pour les lecteurs d'écran : seul
     l'œil lit le court. */
  .header-13__devis--court .header-13__devis-long {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .header-13__devis--court .header-13__devis-court {
    display: inline;
  }
}

/* ---- Petit mobile : les pastilles se resserrent ----
   Le libellé long reste affiché sur un site à prise de rendez-vous : sous
   380 px, la pastille d'action et les espacements rétrécissent pour laisser
   une colonne lisible à la marque. */
@media (max-width: 380px) {
  .header-13 {
    --header-13-pastille: 40px;
  }

  .header-13__barre {
    gap: 8px;
    padding: 0 12px;
  }

  .header-13__actions {
    gap: 6px;
  }

  .header-13__nom {
    font-size: 0.98rem;
  }

  [data-header] .header-13__devis,
  [data-header] .header-13__devis:hover,
  [data-header] .header-13__devis:focus {
    padding: 0 12px;
  }
  .header-13__devis-long,
  .header-13__devis-court {
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-13__barre,
  .header-13__chevron,
  [data-header] .header-13__lien,
  [data-header] .header-13__appel,
  [data-header] .header-13__devis,
  .header-13__toggle {
    transition: none;
  }
}