/*
Theme Name: Logilec
Theme URI:
Author: Alsacréations
Author URI:
Description: Thème Logilec
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: twentytwentyfive-logilec
Tags:
*/

/* Utilitaires */
.balance-text {
  text-wrap: balance;
}
.pretty-text {
  text-wrap: pretty;
}

/* Bloc clicable de la page "Nos métiers" */
/* Permet de rendre tout le bloc cliquable en utilisant un pseudo-élément car Gutenberg n'autorise pas l'insertion d'un lien englobant */
.is-link-block a:first-child:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* Il doit être au-dessus du contenu */
    cursor: pointer; /* Indique clairement qu'il est cliquable */
}

.is-link-block a:hover {
    text-decoration: underline;
    color: var(--wp--preset--color--custom-bleu-leclerc);
}

/* Visibilité du focus */
:focus-visible {
    outline: 3px solid var(--wp--preset--color--custom-bleu-leclerc);
    outline-offset: 2px;
}
.has-custom-orange-leclerc-background-color :focus-visible {
    outline-color: #000;
}
.has-custom-bleu-leclerc-background-color :focus-visible {
    outline-color: #fff;
}

/* Image de fond de la page "Contact" */
body:has(.wpcf7-form) {
    background-image: url(/uploads/2024/06/Design-sans-titre.png);
    background-size: cover;
    background-blend-mode: multiply;
}

/* Formulaire de la page "Contact" */
.wpcf7-form {

  /* On change le modèle de boîte */
  & * {
    box-sizing: border-box;
  }
  /* Grille de deux colonnes si écran >= 768px */
  @media (width >= 48rem) {
    display: grid;
    column-gap: var(--wp--preset--spacing--50);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Champs input */
input:not(
    [type="button"],
    [type="reset"],
    [type="submit"],
    [type="checkbox"],
    [type="radio"],
    [type="range"]
  ) {
  --input-background-color: var(--wp--preset--color--custom-blanc, Field);
  --input-border-color: var(--wp--preset--color--cyan-bluish-gray, ButtonBorder);
  --input-border-radius: 3px;
  --input-border-width: 1px;
  --input-text-color: var(--wp--preset--color--custom-dark, ButtonText);
  --input-placeholder-color: GrayText;

  display: block;
  width: 100%;
  padding: var(--form-control-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--input-border-radius);
  background-color: var(--input-background-color);
  box-shadow: inset 0 0 0 var(--input-border-width) var(--input-border-color);
  color: var(--input-text-color);
  font: inherit;
  line-height: 1.5;

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    cursor: not-allowed;
  }

  /* État invalide après interaction utilisateur */
  &:user-invalid {
    --input-border-color: var(--wp--preset--color--vivid-red);
    --input-border-width: 2px;
  }

  /* Placeholder */
  &::placeholder {
    opacity: 100%;
    color: var(--wp--preset--color--custom-dark);
  }
}

/* Textarea */
textarea {
  --textarea-background-color: var(--wp--preset--color--custom-blanc, Field);
  --textarea-border-color: var(--wp--preset--color--cyan-bluish-gray, ButtonBorder);
  --textarea-border-radius: 3px;
  --textarea-border-width: 1px;
  --textarea-text-color: var(--wp--preset--color--custom-dark, ButtonText);

  display: block;
  width: 100%;
  min-height: 4lh;
  padding: var(--form-control-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--textarea-border-radius);
  background-color: var(--textarea-background-color);
  box-shadow: inset 0 0 0 var(--textarea-border-width)
    var(--textarea-border-color);
  color: var(--textarea-text-color);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  field-sizing: content;

  /* État désactivé */
  &:disabled {
    opacity: 50%;
    resize: none;
    cursor: not-allowed;
  }

  /* État invalide après interaction utilisateur */
  &:user-invalid {
    --input-border-color: var(--wp--preset--color--vivid-red);
    --input-border-width: 2px;
  }

  /* Placeholder */
  &::placeholder {
    opacity: 100%;
    color: var(--wp--preset--color--custom-dark);
  }
}


/* Boutons */
button,
a:where(.btn),
input:where([type="button"], [type="reset"], [type="submit"]) {
  --button-background-color: var(--wp--preset--color--custom-blanc, Field);
  --button-background-color-hover: oklch(
    from var(--button-background-color) calc(l * 0.9) c h
  );
  --button-background-color-active: oklch(
    from var(--button-background-color) calc(l * 0.8) c h
  );
  --button-border-color: var(--wp--preset--color--cyan-bluish-gray, ButtonBorder);
  --button-border-color-hover: var(--button-border-color);
  --button-border-color-active: var(--button-border-color);
  --button-border-radius: 3px;
  --button-border-width: 1px;
  --button-text-color: var(--wp--preset--color--custom-dark, ButtonText);
  --button-text-color-hover: var(--button-text-color);
  --button-text-color-active: var(--button-text-color);
  --button-font-weight: 400;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: var(--form-control-spacing, 12px 16px);
  transition-property: background, border, box-shadow, color;
  transition-duration: var(--transition-duration, 0.25s);
  border: 0;
  border-radius: var(--button-border-radius);
  background-color: var(--button-background-color);
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  color: var(--button-text-color);
  font: inherit;
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  /* Base button */
  &:is(:not(:disabled, [disabled])) {
    &:hover {
      background-color: var(--button-background-color-hover);
      box-shadow: inset 0 0 0 var(--button-border-width)
        var(--button-border-color-hover);
      color: var(--button-text-color-hover);
    }

    &:active {
      background-color: var(--button-background-color-active);
      box-shadow: inset 0 0 0 var(--button-border-width)
        var(--button-border-color-active);
      color: var(--button-text-color-active);
    }
  }

    /* Submit button */
&[type="submit"]:where(:not(:disabled, [disabled])) {
    --button-background-color: var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
    --button-border-color: transparent;
    --button-text-color: var(--wp--preset--color--custom-blanc, #ffffff);
  }

  /* States */
  &:is(:disabled, [disabled]) {
    opacity: 50%;
    cursor: not-allowed;

    & * {
      pointer-events: none;
    }
  }
}

  /* File button */
input[type="file"]::-webkit-file-upload-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6rem 1rem;
  margin-right: 0.75rem;
  background-color: var(--wp--preset--color--custom-blanc, #ffffff);
  border-radius: 3px;
  border: 1px solid var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  box-shadow: none;
  color: var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  cursor: pointer;
  transition: background .15s ease;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background-color: oklch(
    from var(--wp--preset--color--custom-blanc) calc(l * 0.95) c h
  );
}

input[type="file"]::file-selector-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6rem 1rem;
  margin-right: 0.75rem;
  background-color: var(--wp--preset--color--custom-blanc, #ffffff);
  border-radius: 3px;
  border: 1px solid var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  box-shadow: none;
  color: var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  cursor: pointer;
  transition: background .15s ease;
}

input[type="file"]::file-selector-button:hover {
  background-color: oklch(
    from var(--wp--preset--color--custom-blanc) calc(l * 0.95) c h
  );
}

input[type="file"]::-ms-browse {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.6rem 1rem;
  margin-right: 0.75rem;
  background-color: var(--wp--preset--color--custom-blanc, #ffffff);
  border-radius: 3px;
  border: 1px solid var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  box-shadow: none;
  color: var(--wp--preset--color--custom-bleu-leclerc, AccentColor);
  cursor: pointer;
  transition: background .15s ease;
}

input[type="file"]::-ms-browse:hover {
  background-color: oklch(
    from var(--wp--preset--color--custom-blanc) calc(l * 0.95) c h
  );
}

/* Navigation : mettre en valeur l'item actif */
.wp-block-navigation .current-menu-item {
  font-weight: 600;
}

/* Header sticky pour TwentyTwentyFive */
header.is-sticky {
  position: sticky;
  top: 0;           /* toujours en haut */
  z-index: 9999;    /* au-dessus des autres blocs */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Images à la une en panoramique dans les pages */
.wp-block-post-featured-image :where(img) {
  max-height: 500px;
}