/* ================================================== */
/* Pinceau le Clown — styles spécifiques              */
/* ================================================== */

/* Polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* Surcharge des variables de polices du template */
:root {
  --heading-font: "Baloo 2", Helvetica, Arial, sans-serif;
  --body-font: "Open Sans", Helvetica, Arial, sans-serif;
  --heading-font-color: #1C1C2E;
  --body-font-color: #4A4A6A;
}

/* Palette officielle Pinceau (extraite du logo) */
:root {
  --color-primary:        #1A3FA0;
  --color-primary-hover:  #153382;
  --color-primary-active: #0F2660;
  --color-accent:         #F5C800;
  --color-accent-hover:   #D4AC00;
  --color-danger:         #E8321A;
  --color-purple:         #8B2FC9;
  --color-green:          #1DB87A;
  --color-orange:         #F47C20;
  --color-bg:             #FFFFFF;
  --color-bg-soft:        #FFF9E6;
  --color-text:           #1C1C2E;
  --color-text-muted:     #4A4A6A;
  --color-focus-ring:     #F5C800;
}

/* Widget téléphone */
.pinceau-phone-col {
  text-align: left;
}

.h-phone {
  white-space: nowrap;
  line-height: 1.4;
}

/* Widget téléphone — icône + textes en flex */
.pinceau-phone-widget {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--secondary-color) !important;
  text-decoration: none;
  white-space: nowrap;
  justify-content: flex-end;
}

.pinceau-phone-icon {
  font-size: 34px !important;  /* calé sur la hauteur combinée des deux lignes de texte */
  line-height: 1 !important;
  top: 0 !important;
  flex-shrink: 0;
}

.pinceau-phone-text {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.pinceau-phone-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.85;
  line-height: 1.3;
}

.pinceau-phone-number {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* Desktop : logo sorti du flux, ne contribue pas à la hauteur du header */
@media (min-width: 992px) {
  /* La colonne logo réserve son espace dans le flex sans imposer de hauteur */
  header .de-flex-col:first-child {
    min-width: var(--logo-width, 200px);
    align-self: stretch;
    position: relative;
  }

  /* Logo en absolu : hors du flux, se positionne depuis le coin supérieur gauche */
  #logo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    transition: opacity 0.5s;
  }

  header.scroll-down #logo {
    opacity: 0;
    pointer-events: none;
  }

  #logo img.logo-main,
  #logo img.logo-scroll {
    width: var(--logo-width, 200px);
    height: auto;
    max-height: none;
  }
}

/* Mobile/tablette — logo contraint à la hauteur du header */
@media (max-width: 991px) {
  #logo img.logo-main,
  #logo img.logo-scroll,
  #logo img.logo-mobile {
    max-height: 50px;
    width: auto;
    height: auto;
  }

  /* Menu caché jusqu'au clic sur le hamburger */
  .de-flex-col .header-col-mid {
    display: none;
  }

  header.menu-open .de-flex-col .header-col-mid {
    display: block;
  }
}

/* Forcer l'affichage du téléphone sur tous les formats (le template le cache sur mobile) */
.h-phone {
  display: inline-block !important;
}

/* Centrage du téléphone entre logo et hamburger sur mobile */
@media (max-width: 991px) {
  .pinceau-phone-col {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Citation hero — légèrement plus grande, alignée à droite */
p#citation-pinceau {
  font-size: 1.15em !important;
  font-style: italic !important;
  text-align: right !important;
  width: 100% !important;
  opacity: 0.85;
  margin-top: 1rem !important;
}