/* ==========================================================================
   Client Theme : CSS custom.
   Tout ce que theme.json ne sait pas faire, et rien d'autre.
   Chaque valeur vient d'une variable du design system.
   ========================================================================== */

/* --- Accessibilité : anneau de focus visible ----------------------------- */
/* WordPress ne définit pas de focus cohérent. C'est la base, pas un extra. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--brand);
  outline-offset: var(--wp--custom--focus--offset);
  border-radius: var(--wp--custom--radius--sm);
}

/* Sur fond sombre, l'anneau vert disparaîtrait. */
.has-brand-dark-background-color :where(a, button, summary):focus-visible,
.has-brand-background-color :where(a, button, summary):focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* --- Confort de lecture --------------------------------------------------- */
:where(h1, h2, h3, .wp-block-heading) {
  text-wrap: balance;
}

:where(p, li) {
  text-wrap: pretty;
}

/* --- Révélations au scroll ------------------------------------------------ */
/* Le masquage est conditionné à la classe "js" posée par functions.php.
   Sans JS, le contenu reste visible au lieu de disparaître pour toujours. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--wp--custom--transition--slow) var(--wp--custom--transition--ease),
    transform var(--wp--custom--transition--slow) var(--wp--custom--transition--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Décalages en cascade. Classes de bloc, pas d'attribut data : l'éditeur
   signale un bloc invalide dès qu'on ajoute un attribut HTML non déclaré. */
.js .reveal.is-delay-1 { transition-delay: 0.10s; }
.js .reveal.is-delay-2 { transition-delay: 0.20s; }
.js .reveal.is-delay-3 { transition-delay: 0.30s; }

/* --- Micro-interaction, uniquement sur ce qui est cliquable --------------- */
.wp-element-button,
.wp-block-button__link {
  transition:
    background-color var(--wp--custom--transition--base) var(--wp--custom--transition--ease),
    transform var(--wp--custom--transition--fast) var(--wp--custom--transition--ease);
}

.wp-element-button:active,
.wp-block-button__link:active {
  transform: translateY(1px);
}

/* --- Bouton d'appel d'urgence --------------------------------------------- */
/* Orange en fond, texte foncé : 8.8:1. L'orange en texte tomberait à 1.9:1. */
.wp-block-button.is-style-urgence > .wp-block-button__link {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-urgence > .wp-block-button__link:hover {
  background-color: #E08F12;
  color: var(--wp--preset--color--ink);
}

/* --- Bouton secondaire ---------------------------------------------------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-width: 1.5px;
}

/* --- Blocs Details : chevron natif, pas d'icône ajoutée ------------------- */
.wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: var(--wp--preset--spacing--xs);
}

.wp-block-details + .wp-block-details {
  border-top: 1px solid var(--wp--preset--color--line);
}

/* --- En-tête -------------------------------------------------------------- */
.site-header .wp-block-navigation a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

.site-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Pied de page --------------------------------------------------------- */
.site-footer a {
  color: inherit;
}

/* --- Respect du réglage système ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   WATER SUN : hero, cartes, bandeau de réassurance, formulaire.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
/* Fond bleu foncé, et une vague reprise du logo qui découpe le bas de la
   section. Le motif vient de l'identité, il n'est pas décoratif par défaut. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 85% 0%, #04538B 0%, transparent 60%),
    var(--wp--preset--color--brand-dark);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(40px, 6vw, 90px);
  background: var(--wp--preset--color--bg);
  -webkit-mask-image: var(--ws-wave);
  mask-image: var(--ws-wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --ws-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,52 C180,92 340,10 560,34 C780,58 900,96 1120,72 C1280,54 1360,26 1440,34 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Tout le hero est clair par défaut : les boutons contour héritaient sinon
   du texte foncé du corps, et devenaient illisibles sur le bleu. */
.hero {
  color: var(--wp--preset--color--bg);
}

.hero .wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--wp--preset--color--bg);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--bg);
  border-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--brand-dark);
}

/* La photo est en portrait. Sans limite de hauteur elle écrase le texte. */
.hero .wp-block-image img {
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--preset--shadow--lift);
}

.hero .wp-block-columns {
  align-items: center;
}

/* --- Puces de réassurance ------------------------------------------------ */
.ws-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  list-style: none;
  padding-left: 0;
  margin-inline: 0;
  margin-block-start: var(--wp--preset--spacing--sm);
  margin-block-end: 0;
}

.ws-chips li {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--wp--custom--radius--pill);
  padding: 0.35em 0.9em;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--bg);
}

/* --- Bandeau de réassurance sous le hero --------------------------------- */
.ws-band {
  border: 0;
}

.ws-band .wp-block-columns {
  gap: var(--wp--preset--spacing--sm);
}

.ws-band strong {
  display: block;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--brand);
  line-height: 1.2;
}

/* --- Cartes de service ---------------------------------------------------- */
/* Un filet orange en haut, et un léger soulèvement au survol. Rien d'autre. */
.ws-card {
  border: 1px solid var(--wp--preset--color--line);
  border-top: 3px solid var(--wp--preset--color--brand);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--bg);
  transition:
    transform var(--wp--custom--transition--base) var(--wp--custom--transition--ease),
    box-shadow var(--wp--custom--transition--base) var(--wp--custom--transition--ease);
}

.ws-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--soft);
}

.ws-card > .wp-block-heading {
  color: var(--wp--preset--color--brand);
}

/* --- Listes : marqueur à la couleur de marque ---------------------------- */
.entry-content li::marker,
main li::marker {
  color: var(--wp--preset--color--accent);
}

/* --- Pied de page : couleurs explicites ---------------------------------- */
/* Aucune couleur héritée ici. Un lien bleu marque sur fond bleu foncé serait
   illisible, et l'héritage se casse au moindre bloc intermédiaire. */
.site-footer,
.site-footer :where(p, li, h1, h2, h3, strong, cite, .wp-block-site-title) {
  color: var(--wp--preset--color--bg);
}

.site-footer :where(a) {
  color: var(--wp--preset--color--bg);
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 0.2em;
}

.site-footer :where(a):hover {
  color: var(--wp--preset--color--accent);
  text-decoration-color: currentColor;
}

.site-footer .wp-block-heading {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.site-footer .wp-block-list {
  list-style: none;
  padding-left: 0;
}

/* --- Pas d'écart entre l'en-tête, le contenu et le pied de page ---------- */
/* wp-site-blocks insère un blockGap entre ses enfants directs. Résultat :
   une bande de fond visible entre l'en-tête et la première section. */
.wp-site-blocks > main {
  margin-block-start: 0;
}

/* Avant le pied de page, l'écart est au contraire souhaitable : il sépare
   la dernière section du bandeau sombre. */
.wp-site-blocks > footer {
  margin-block-start: var(--wp--preset--spacing--lg);
}

/* --- En-tête -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--wp--preset--color--bg);
}

/* --- Formulaire Contact Form 7 ------------------------------------------- */
.wpcf7 label {
  display: block;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--sm);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.wpcf7 :where(input[type="text"], input[type="tel"], input[type="email"], textarea) {
  /* Sans box-sizing, le padding s'ajoutait aux 100 % et le champ débordait de
     la colonne : toute la page partait alors en défilement horizontal. */
  box-sizing: border-box;
  width: 100%;
  padding: 0.7em 0.9em;
  font: inherit;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--custom--border--strong);
  border-radius: var(--wp--custom--radius--sm);
}

.wpcf7 :where(input, textarea):focus-visible {
  border-color: var(--wp--preset--color--brand);
}

.wpcf7 textarea {
  min-height: 8rem;
  resize: vertical;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.wpcf7 .wpcf7-submit {
  font: inherit;
  font-weight: 600;
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--accent);
  border: 0;
  border-radius: var(--wp--custom--radius--md);
  padding: 0.85em 1.8em;
  cursor: pointer;
  transition: background-color var(--wp--custom--transition--base) var(--wp--custom--transition--ease);
}

.wpcf7 .wpcf7-submit:hover {
  background: #E08F12;
}

/* Champ piège anti-robot. Invisible à l'écran, lisible par les robots. */
.ws-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --- Décalage automatique des cartes en colonnes ------------------------- */
/* Le retard suit la position dans la rangée, sans classe à poser à la main. */
.wp-block-column:nth-child(2) .reveal { transition-delay: 0.10s; }
.wp-block-column:nth-child(3) .reveal { transition-delay: 0.20s; }
.wp-block-column:nth-child(4) .reveal { transition-delay: 0.30s; }

/* --- Moment signature : entrée du hero au chargement --------------------- */
/* Une seule animation par page, sur le seul écran que tout le monde voit.
   Pas de GSAP : trois keyframes suffisent. */
@keyframes ws-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.js .hero-signature :where(h1, p, .wp-block-buttons, .ws-chips, .wp-block-image) {
  animation: ws-rise 0.7s var(--wp--custom--transition--ease) backwards;
}

.js .hero-signature h1                 { animation-delay: 0.05s; }
.js .hero-signature p                  { animation-delay: 0.15s; }
.js .hero-signature .wp-block-buttons  { animation-delay: 0.25s; }
.js .hero-signature .ws-chips          { animation-delay: 0.35s; }
.js .hero-signature .wp-block-image    { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-signature :where(h1, p, .wp-block-buttons, .ws-chips, .wp-block-image) {
    animation: none;
  }
}


/* --- Page courante dans le menu ------------------------------------------ */
/* Les liens de menu pointent vers des pages, pas des URL brutes : WordPress
   pose alors current-menu-item tout seul. */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current-menu-ancestor > a,
.site-header .wp-block-navigation [aria-current="page"] {
  color: var(--wp--preset--color--brand);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* --- Cartouche du logo dans le pied de page ------------------------------ */
.ws-footer-logo {
  border-radius: var(--wp--custom--radius--md);
  width: fit-content;
}

.ws-footer-logo .wp-block-site-logo {
  margin: 0;
}


/* --- Alignement et longueur de ligne dans les sections ------------------- */
/* Tout part du même bord gauche que les colonnes. Seuls les paragraphes et
   les listes de premier niveau sont bridés, pour rester lisibles. */
.ws-section > :where(p, ul, ol) {
  max-width: 46rem;
  /* La mise en page contrainte de WordPress centre ses enfants avec un margin
     auto en !important. Sur une section pleine largeur, un paragraphe bridé à
     46rem se retrouvait donc centré, décalé sous un titre resté à 76rem. On
     recalcule le bord gauche du bloc de contenu pour aligner les deux. */
  margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
  margin-right: auto !important;
}

/* --- Cartes de même hauteur ---------------------------------------------- */
/* Sans ça, la carte la plus courte flotte et la rangée paraît bancale. */
.ws-section .wp-block-columns > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .ws-card {
  flex: 1;
}

/* --- Photos de galerie au même format ------------------------------------ */
/* Les photos du client sont en portrait, avec des rapports différents.
   Un cadrage commun évite la rangée en escalier. */
.ws-gallery > .wp-block-column > .wp-block-image {
  margin: 0;
}

.ws-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--md);
}

/* Photo d'illustration en colonne texte plus image : rapport d'origine
   conservé, seule la hauteur est bornée pour ne pas écraser le texte. */
.ws-section .wp-block-columns:not(.ws-gallery) .wp-block-image img {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--md);
}

.ws-section .wp-block-columns:not(.ws-gallery) {
  align-items: flex-start;
}

/* Le label de certification garde son cadrage : c'est une marque, pas une photo.
   Le sélecteur reprend .wp-block-columns : sans lui il pesait moins lourd que
   la règle de recadrage juste au-dessus, qui étirait le logo et le rognait. */
.ws-section .wp-block-columns .wp-block-image img[src*="professionnel-du-gaz"] {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 13rem;
  max-height: none;
  background: var(--wp--preset--color--bg);
  padding: var(--wp--preset--spacing--sm);
}


/* --- Label de certification : la colonne se règle sur la marque ----------- */
/* La colonne était figée à 30 % de la section pour une image de 13rem, ce qui
   laissait presque 200 px de vide entre le label et le texte. */
.ws-section .wp-block-column:has(.wp-block-image img[src*="professionnel-du-gaz"]) {
  flex: 0 0 auto !important;
}

/* --- En-tête : une seule ligne, jusqu'au plus petit écran ---------------- */
/* Logo à taille fixe, l'en-tête passait sur deux lignes sous 420 px. */
.site-header .wp-block-site-logo img {
  width: clamp(112px, 36vw, 190px);
}

/* Seul le bloc de droite est bloqué sur une ligne. La rangée, elle, garde le
   droit de passer à la ligne sous 340 px : mieux vaut deux lignes qu'un
   défilement horizontal. */
.site-header__row > .wp-block-group {
  flex-wrap: nowrap;
}

@media (max-width: 600px) {
  .site-header__row,
  .site-header__row > .wp-block-group {
    gap: var(--wp--preset--spacing--xs);
  }

  .site-header .header-call .wp-block-button__link {
    padding: 0.6em 0.75em;
    font-size: var(--wp--preset--font-size--xs);
  }

  /* Le numéro ne se coupe pas en deux lignes : l'en-tête doublerait de haut. */
  .site-header .header-call {
    flex-shrink: 0;
  }

  .site-header .header-call .wp-block-button__link {
    white-space: nowrap;
  }
}

/* --- Menu mobile --------------------------------------------------------- */
/* Le bouton d'appel du menu ne sert qu'au format téléphone : sur grand écran
   celui de l'en-tête est déjà visible. */
@media (min-width: 782px) {
  .site-header .nav-call {
    display: none;
  }
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--sm);
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.15;
  padding-block: 0.12em;
}

/* Sur le fond sombre du menu, le bleu de marque de la page courante ne
   ressort plus. L'orange, lui, tient à 7.9:1. */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open [aria-current="page"] {
  color: var(--wp--preset--color--accent);
  text-decoration-color: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container.is-menu-open .nav-call {
  margin-block-start: var(--wp--preset--spacing--md);
}