/* ============================================================
   TECKINDUS — styles complémentaires
   Tout ce que theme.json ne sait pas exprimer.
   ============================================================ */

/* --- Le repère : étiquette technique, signature du thème ---
   Reprend le langage du repérage de câble : monospace, majuscules,
   très espacé, précédé d'un tiret. À utiliser sur un paragraphe
   auquel on donne la classe « repere ». */
.wp-block-group .repere,
p.repere {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--repere);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--laiton-fonce);
  margin-bottom: 0.9rem;
}
.repere::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  vertical-align: 0.28em;
  margin-right: 0.6rem;
}
.repere.sans-tiret::before { display: none; }

/* --- Le filet perforé : évoque le chemin de câbles ---
   Séparateur de section. Classe « perfore » sur un bloc séparateur. */
.wp-block-separator.perfore {
  border: none;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 6px;
  opacity: 1;
  background-image: linear-gradient(
    to right,
    var(--wp--preset--color--filet) 0 10px,
    transparent 10px 18px
  );
  background-repeat: repeat-x;
  background-size: 18px 2px;
  background-position: 0 50%;
}
.section-sombre .wp-block-separator.perfore {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.22) 0 10px,
    transparent 10px 18px
  );
}

/* --- Sections sombres : réglages de lisibilité --- */
.section-sombre { color: #ffffff; }
.section-sombre p { color: var(--wp--preset--color--sourdine-clair); }
.section-sombre .chiffre-legende { color: var(--wp--preset--color--sourdine-clair); }
.section-sombre p.repere,
.section-sombre p.chiffre { color: var(--wp--preset--color--laiton); }
.section-sombre h1,
.section-sombre h2,
.section-sombre h3,
.section-sombre h4 { color: #ffffff; }
.section-sombre a:not(.wp-element-button) { color: var(--wp--preset--color--laiton); }
.section-sombre a:not(.wp-element-button):hover { color: #ffffff; }

/* --- Chiffres clés --- */
.wp-block-group .chiffre,
p.chiffre {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--laiton-fonce);
  margin-bottom: 0.35rem;
}
.wp-block-group .chiffre-legende,
p.chiffre-legende {
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.45;
  color: var(--wp--preset--color--sourdine);
  margin: 0;
}

/* --- Cartes --- */
.carte {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
  height: 100%;
}
.carte h3,
.carte h4 { margin-top: 0; }

/* --- En-tête du site --- */
.site-entete {
  border-bottom: 1px solid var(--wp--preset--color--filet);
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar .site-entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-entete { top: 46px; } }

.site-entete .wp-block-site-logo img { display: block; }
.site-entete .wp-block-navigation { font-size: var(--wp--preset--font-size--petit); }
.site-entete .wp-block-navigation a { text-decoration: none; }
.site-entete .wp-block-navigation a:hover { text-decoration: underline; }

/* Le bouton « Espace Pilotage » dans le menu : cerclé, discret. */
.bouton-pilotage a {
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: 6px;
  padding: 0.45rem 0.85rem !important;
  font-size: var(--wp--preset--font-size--repere);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bouton-pilotage a:hover {
  background: #ffffff;
  text-decoration: none !important;
}

/* --- Images : jamais déformées --- */
.wp-block-image img { border-radius: 8px; }
.image-couvrante img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* --- Formulaires : lisibles, sobres --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="file"],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--normal);
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--wp--preset--color--filet);
  border-radius: 8px;
  background: #fbfbfc;
  color: var(--wp--preset--color--encre);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wp--preset--color--laiton);
  box-shadow: 0 0 0 3px rgba(181, 148, 106, 0.18);
  background: #ffffff;
}
label { font-weight: 700; font-size: var(--wp--preset--font-size--petit); }

/* --- Accessibilité : le focus doit rester visible --- */
:where(a, button, .wp-element-button):focus-visible {
  outline: 2px solid var(--wp--preset--color--laiton);
  outline-offset: 3px;
}

/* --- Mouvement réduit : on respecte le réglage système --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Impression : un devis imprimé doit rester lisible --- */
@media print {
  .site-entete,
  .site-pied { display: none; }
  body { color: #000; background: #fff; }
}

/* --- Bouton contour sur fond sombre --- */
.section-sombre .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.32);
  background: transparent;
}
.section-sombre .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--laiton);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

/* --- Photo du bandeau d'accueil ---
   Les clichés de chantier sont souvent très verticaux. On les recadre
   à une hauteur maîtrisée plutôt que de laisser la page s'étirer. */
.image-couvrante .wp-block-image { margin: 0; }
.image-couvrante .wp-block-image {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.image-couvrante .wp-block-image img {
  width: 100%;
  height: clamp(260px, 26vw, 360px);
  object-fit: cover;
  object-position: center 45%;
  display: block;
  filter: saturate(0.92) contrast(0.98);
}
/* Un voile depuis le bas fond l'image dans la section plutôt que
   de la laisser flotter comme une vignette collée. */
.image-couvrante .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 39, 48, 0) 55%, rgba(30, 39, 48, 0.45) 100%);
  pointer-events: none;
}
@media (max-width: 781px) {
  .image-couvrante .wp-block-image img { height: 220px; }
}

/* --- Monogramme dans l'en-tête ---
   Servi depuis le thème : aucune manipulation dans la médiathèque,
   et le SVG reste net à toutes les tailles d'écran. */
.logo-marque {
  display: block;
  width: 46px;
  height: 21px;
  background: url("img/teckindus-monogramme-noir.svg") no-repeat center / contain;
  flex: none;
}
.site-pied .logo-marque { width: 64px; height: 29px; }

/* --- Bandeau de chiffres : quatre colonnes strictement égales ---
   Les contenus ont des longueurs très différentes ; sans grille imposée,
   l'œil perçoit un déséquilibre. On fixe donc des colonnes identiques,
   séparées par un filet, avec le même retrait de part et d'autre. */
.bandeau-chiffres .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
}
.bandeau-chiffres .wp-block-column {
  flex-basis: auto !important;
  padding: 0.25rem 1.75rem;
  border-left: 1px solid var(--wp--preset--color--filet);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bandeau-chiffres .wp-block-column:first-child {
  border-left: none;
  padding-left: 0;
}
.bandeau-chiffres .wp-block-column:last-child { padding-right: 0; }

/* Le chiffre garde la même hauteur d'un bloc à l'autre, même quand
   le texte est long : la ligne de base des légendes reste alignée. */
.bandeau-chiffres .chiffre {
  font-size: clamp(1.35rem, 0.9rem + 1.3vw, 1.9rem);
  min-height: 2.4em;
  display: flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.bandeau-chiffres .chiffre-legende { margin-top: auto; }

@media (max-width: 900px) {
  .bandeau-chiffres .wp-block-columns { grid-template-columns: repeat(2, 1fr); }
  .bandeau-chiffres .wp-block-column { padding: 1rem 1.25rem; }
  .bandeau-chiffres .wp-block-column:nth-child(odd) { border-left: none; padding-left: 0; }
  .bandeau-chiffres .wp-block-column:nth-child(n + 3) { border-top: 1px solid var(--wp--preset--color--filet); }
  .bandeau-chiffres .chiffre { min-height: 0; }
}
@media (max-width: 540px) {
  .bandeau-chiffres .wp-block-columns { grid-template-columns: 1fr; }
  .bandeau-chiffres .wp-block-column { border-left: none; padding-left: 0; padding-right: 0; }
  .bandeau-chiffres .wp-block-column + .wp-block-column { border-top: 1px solid var(--wp--preset--color--filet); }
}

/* --- Photo de fond, très assombrie ---
   La lisibilité passe avant l'effet : la photo est recouverte d'un voile
   anthracite quasi opaque. Elle apporte de la profondeur, pas du décor.
   Elle apporte de la profondeur, pas du décor. */
.fond-photo { position: relative; isolation: isolate; }
.fond-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(237, 239, 241, 0.95) 0%, rgba(237, 239, 241, 0.90) 100%),
    url("https://teckindus.fr/wp-content/uploads/2026/08/20.jpeg");
  background-size: cover, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
  z-index: -2;
}

/* --- Bandeau d'accueil clair ---
   Le contour du bouton secondaire doit rester discret mais visible
   sur le gris clair : filet neutre, jamais noir plein. */
.bandeau-clair .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: #c3c8cd;
  background: transparent;
}
.bandeau-clair .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--laiton-fonce);
  background: #ffffff;
}

/* Pied de page clair : filet supérieur pour le détacher du contenu. */
.site-pied { border-top: 1px solid var(--wp--preset--color--filet); }

/* --- En-tête en trois zones ---
   Une grille plutôt qu'un alignement souple : c'est le seul moyen de
   garantir que le monogramme tombe exactement au centre de la page,
   quelle que soit la longueur du nom à gauche ou du menu à droite. */
.site-entete .entete-grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.site-entete .entete-grille > *:nth-child(1) { justify-self: start; }
.site-entete .entete-grille > *:nth-child(2) { justify-self: center; }
.site-entete .entete-grille > *:nth-child(3) { justify-self: end; }
.site-entete .entete-nom { line-height: 1.05; }

/* Le nom porte l'identité : on lui donne du corps, mais avec un
   dimensionnement fluide pour qu'il ne déborde jamais du bandeau,
   même sur un écran étroit. Le suivi resserré évite l'effet étiré. */
.site-entete .wp-block-site-title {
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem) !important;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.site-entete .wp-block-site-tagline {
  margin-top: 0.28rem;
  white-space: nowrap;
}

/* En dessous de 1100 px, le menu et le nom se disputent la place :
   on rend la main au dimensionnement fluide en réduisant l'écart. */
@media (max-width: 1100px) {
  .site-entete .entete-grille { gap: 1rem; }
}
@media (max-width: 900px) {
  .site-entete .wp-block-site-title {
    font-size: clamp(1.15rem, 0.9rem + 1.4vw, 1.5rem) !important;
  }
}
.site-entete .logo-marque { width: 58px; height: 26px; }

/* Sous 900 px, le menu se replie en bouton : on masque le monogramme
   central pour laisser la place au nom et au bouton du menu. */
@media (max-width: 900px) {
  .site-entete .entete-grille {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }
  .site-entete .entete-grille > *:nth-child(2) { display: none; }
  .site-entete .entete-grille > *:nth-child(3) { justify-self: end; }
}

/* --- En-tête pleine largeur ---
   Le nom se plaque à gauche, le menu à droite, avec une simple marge
   de respiration. Le monogramme reste exactement au centre de l'écran. */
.site-entete .entete-grille {
  max-width: none;
  padding-left: clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
}

/* --- Lien d'accueil : une icône, pas un mot ---
   Le texte reste présent pour les lecteurs d'écran, simplement rendu
   invisible à l'œil. L'icône est posée par-dessus en masque, ce qui lui
   permet de changer de couleur au survol. */
.lien-accueil a {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: transparent !important;
  overflow: hidden;
  vertical-align: middle;
}
.lien-accueil a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--encre);
  -webkit-mask: url("img/icone-accueil.svg") no-repeat center / 20px 20px;
  mask: url("img/icone-accueil.svg") no-repeat center / 20px 20px;
}
.lien-accueil a:hover::before {
  background-color: var(--wp--preset--color--laiton-fonce);
}
.lien-accueil a:focus-visible {
  outline: 2px solid var(--wp--preset--color--laiton-fonce);
  outline-offset: 3px;
}

/* --- Formulaires Contact Form 7 ---
   L'extension produit un balisage minimal. On lui applique la même
   grammaire que le reste du site : champs bordés, focus laiton,
   messages d'erreur lisibles. */
.wpcf7 { margin-top: var(--wp--preset--spacing--20); }
.wpcf7 label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--petit);
}
.wpcf7 label input,
.wpcf7 label select,
.wpcf7 label textarea {
  margin-top: 0.35rem;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--normal);
}
.wpcf7 input[type="file"] {
  padding: 0.55rem 0.6rem;
  background: #fbfbfc;
  font-size: var(--wp--preset--font-size--petit);
}
.wpcf7 .wpcf7-acceptance {
  display: block;
  margin: 1.25rem 0;
  font-size: var(--wp--preset--font-size--petit);
  color: var(--wp--preset--color--sourdine);
}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
  vertical-align: -1px;
}
.wpcf7 input[type="submit"] {
  width: auto;
  background: var(--wp--preset--color--laiton);
  color: var(--wp--preset--color--encre);
  border: none;
  border-radius: 6px;
  padding: 0.85rem 1.6rem;
  font-family: inherit;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--petit);
  cursor: pointer;
  transition: background 0.15s;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--wp--preset--color--laiton-fonce);
  color: #ffffff;
}
.wpcf7 input[type="submit"]:disabled { opacity: 0.6; cursor: wait; }

/* Retours à l'utilisateur : dire ce qui ne va pas, où et pourquoi. */
.wpcf7 .wpcf7-not-valid { border-color: #d63a3a; }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--petit);
  color: #b02a2a;
}
.wpcf7 form .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  border-width: 1px;
  font-size: var(--wp--preset--font-size--petit);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2c9a3f;
  background: #f0f8f1;
  color: #1d6b2b;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #d63a3a;
  background: #fdf1f1;
  color: #b02a2a;
}
.wpcf7-spinner { vertical-align: middle; }

/* --- Bouton principal du bandeau ---
   C'est l'action qu'on veut voir cliquée : on lui donne davantage de
   corps que le bouton secondaire, sans tomber dans le criard. */
.bouton-principal .wp-block-button__link {
  font-size: var(--wp--preset--font-size--normal);
  padding: 1.05rem 2.1rem;
  border-radius: 7px;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .bouton-principal .wp-block-button__link {
    padding: 0.95rem 1.5rem;
    font-size: var(--wp--preset--font-size--petit);
  }
}

/* Mention d'aide sous un champ de fichier : discrète, mais lue. */
.wpcf7 .aide-fichier {
  margin: -0.5rem 0 1.25rem;
  font-size: var(--wp--preset--font-size--petit);
  line-height: 1.5;
  color: var(--wp--preset--color--sourdine);
}

/* --- Photos dans les pages intérieures ---
   Les clichés de chantier ont des cadrages très variés. On impose une
   hauteur commune pour que les fiches restent alignées entre elles, et
   on recadre au centre plutôt que de déformer l'image. */
.visuel-fiche { margin: 0 0 0.9rem; }
.visuel-fiche img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 10px;
  display: block;
}
.visuel-large { margin: var(--wp--preset--spacing--20) 0 0; }
.visuel-large img {
  width: 100%;
  height: clamp(240px, 30vw, 380px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: 10px;
  display: block;
}
@media (max-width: 781px) {
  .visuel-fiche img { height: 200px; }
  .visuel-large img { height: 210px; }
}

/* --- Carte avec photo intégrée ---
   Sélecteurs volontairement appuyés : WordPress impose ses propres
   règles sur les images de bloc, et il faut passer devant. */
.wp-block-group.carte-photo {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--filet);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.wp-block-group.carte-photo > figure.wp-block-image,
.wp-block-group.carte-photo figure.wp-block-image {
  margin: 0 !important;
  border-radius: 0;
  width: 100%;
  max-width: none;
  overflow: hidden;
}
.wp-block-group.carte-photo figure.wp-block-image img {
  width: 100% !important;
  max-width: none !important;
  height: 240px !important;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0 !important;
  display: block;
}

/* Le texte respire : un retrait franc, et un filet laiton qui sépare
   la photo du propos, comme un repère de câble. */
.wp-block-group.carte-photo > h3 {
  margin: 0 !important;
  padding: 1.5rem 1.6rem 0;
  font-size: var(--wp--preset--font-size--moyen);
  line-height: 1.25;
  position: relative;
}
.wp-block-group.carte-photo > h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.6rem;
  width: 34px;
  height: 3px;
  background: var(--wp--preset--color--laiton);
}
.wp-block-group.carte-photo > p {
  margin: 0 !important;
  padding: 0.7rem 1.6rem 1.7rem;
  line-height: 1.65;
}

/* Les colonnes respirent aussi : un écart plus large entre les cartes. */
.wp-block-columns:has(.carte-photo) { gap: 1.5rem; }

@media (max-width: 781px) {
  .wp-block-group.carte-photo figure.wp-block-image img { height: 200px !important; }
  .wp-block-group.carte-photo > h3 { padding: 1.3rem 1.3rem 0; }
  .wp-block-group.carte-photo > h3::before { left: 1.3rem; }
  .wp-block-group.carte-photo > p { padding: 0.6rem 1.3rem 1.4rem; }
}

/* --- En-tête sur mobile : le menu prime ---
   La mention sous le nom ne doit jamais repousser le bouton du menu
   hors de l'écran. Les colonnes de la grille doivent pouvoir se
   rétrécir, et la mention s'efface sur les écrans étroits : le titre
   de la page dit déjà le métier. */
.site-entete .entete-grille > * { min-width: 0; }
.site-entete .entete-nom { overflow: hidden; }

@media (max-width: 900px) {
  .site-entete .wp-block-site-tagline { white-space: normal; }
}
@media (max-width: 700px) {
  .site-entete .wp-block-site-tagline { display: none; }
  .site-entete .wp-block-site-title {
    font-size: clamp(1.1rem, 0.85rem + 1.6vw, 1.4rem) !important;
    white-space: nowrap;
  }
  .site-entete .entete-grille { gap: 0.75rem; }
}


/* --- Lien d'accueil : icône sur grand écran, mot sur mobile ---
   Dans la barre horizontale, l'espace est compté : une maison suffit.
   Dans le panneau déplié du mobile, la liste est verticale et le mot
   se lit mieux seul. On bascule donc de l'un à l'autre. */
.wp-block-navigation__responsive-container.is-menu-open .lien-accueil a {
  position: static;
  display: inline;
  width: auto !important;
  height: auto !important;
  overflow: visible;
  color: inherit !important;
  padding-left: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .lien-accueil a::before {
  content: none;
  display: none;
}