/*
 * Systeme graphique applique a TOUT le site.
 *
 * Les regles de systeme.css ne touchent que les blocs des pages refaites.
 * Ce fichier etend les memes principes aux pages existantes, qui utilisent
 * les elements natifs de Salient : boutons nectar-cta, colonnes du
 * constructeur, accordeons, images.
 *
 * On ne retouche ni les couleurs ni les espacements du site : uniquement
 * le survol, l'alignement et l'arrivee des blocs.
 */

/* ==========================================================================
   1. Survol des boutons Salient

   Meme grammaire que les boutons maison : inversion, elevation de 2 px,
   ombre portee. Enferme dans (hover: hover), sinon l'etat reste colle
   apres un appui sur ecran tactile.
   ========================================================================== */

.nectar-cta a.link_text,
a.nectar-button,
.wpb_button,
.nectar-button {
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .nectar-cta:hover a.link_text,
  a.nectar-button:hover,
  .wpb_button:hover,
  .nectar-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(127, 76, 41, 0.3);
  }

  /* l'icone du bouton avance legerement */
  .nectar-cta:hover .link_wrap [class*="fa-"],
  .nectar-cta:hover .link_wrap svg {
    transform: translateX(2px);
  }
}

.nectar-cta .link_wrap [class*="fa-"],
.nectar-cta .link_wrap svg {
  transition: transform 0.2s ease;
}

.nectar-cta a.link_text:active,
a.nectar-button:active,
.wpb_button:active {
  transform: translateY(0) scale(0.98);
}

/* ==========================================================================
   2. Survol des blocs de contenu

   Les colonnes qui portent une bordure ou un fond se comportent comme des
   cartes : elles reagissent au survol. Les colonnes nues sont ignorees,
   pour ne pas faire bouger des blocs de texte.
   ========================================================================== */

.wpb_column[class*="column_container"] > .vc_column-inner[style*="background"],
.nectar-post-grid-item,
.portfolio-items .col {
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

@media (hover: hover) {
  .wpb_column[class*="column_container"] > .vc_column-inner[style*="background"]:hover,
  .nectar-post-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(60, 43, 31, 0.14);
  }
}

/* ==========================================================================
   3. Accordeons : le survol doit se voir
   ========================================================================== */

.toggle > .toggle-title,
.toggle h3 a {
  transition: color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .toggle:hover > .toggle-title,
  .toggle:hover h3 a {
    color: var(--coffice-brun);
  }
}

/* ==========================================================================
   4. Arrivee des blocs

   anim.js pose .coffice-anim sur les colonnes des rangees de contenu.
   Meme reglage que sur les pages refaites, pour que le site entier ait le
   meme rythme.
   ========================================================================== */

.coffice-anim-site {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--rang, 0) * 80ms);
}

.coffice-anim-site.est-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   5. Images de contenu : meme respiration que sur les pages refaites
   ========================================================================== */

.wpb_single_image img,
.nectar-flickity img {
  transition: transform 0.5s ease;
}

@media (hover: hover) {
  .wpb_single_image:hover img {
    transform: scale(1.03);
  }
}

.wpb_single_image .vc_single_image-wrapper {
  overflow: hidden;
  border-radius: 18px;
}

/* ==========================================================================
   6. Liens de contenu : soulignement anime plutot que brutal
   ========================================================================== */

/*
 * Ne vise que les liens de TEXTE. Trois composants ont ete attrapes a tort
 * en une journee, le 05.09.2026 : les icones sociales, les cartes du bandeau
 * d'infos rapides, puis le bouton clair du hero -- une variante de bouton
 * qui n'etait pas dans la liste. D'ou [class*="coffice-btn"] : toute
 * variante presente ou future, plutot qu'une enumeration qui prend du
 * retard. Controle : node tools/verif-soulignement.js survole chaque lien
 * des six pages et echoue si un composant se souligne.
 */

.wpb_text_column a:not([class*="coffice-btn"]):not(.coffice-lien):not(.coffice-reseau):not(.coffice-info > a) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  text-decoration: none;
  transition: background-size 0.25s ease;
}

@media (hover: hover) {
  .wpb_text_column a:not([class*="coffice-btn"]):not(.coffice-lien):not(.coffice-reseau):not(.coffice-info > a):hover {
    background-size: 100% 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coffice-anim-site,
  .coffice-anim-site.est-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nectar-cta a.link_text,
  a.nectar-button,
  .wpb_button,
  .wpb_single_image img,
  .wpb_text_column a {
    transition: none;
  }
}

/* ==========================================================================
   Icone deduite de la destination, sur les boutons Salient

   « Tout element d'action doit porter une icone qui represente l'action. »
   Les pages refaites le font dans leur contenu. Les pages existantes, elles,
   contiennent des boutons Salient poses avec icon_family="none" : c'est le
   cas du bouton « Email » de la section globale « Infos pratiques », donc
   present au bas de chaque page du site.

   Plutot que de modifier ces contenus un a un, on deduit l'icone de la
   destination du lien. Le trace vient des variables de icones.css : une
   seule source, pas de data-URI recopiee ici.
   ========================================================================== */

.nectar-cta a.link_text[href^="mailto:"]::before,
.nectar-cta a.link_text[href^="tel:"]::before,
.nectar-cta a.link_text[href*="wa.me"]::before,
.nectar-cta a.link_text[href*="google.com/maps"]::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.5em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.nectar-cta a.link_text[href^="mailto:"]::before {
  -webkit-mask-image: var(--coffice-ico-courriel);
  mask-image: var(--coffice-ico-courriel);
}

.nectar-cta a.link_text[href^="tel:"]::before {
  -webkit-mask-image: var(--coffice-ico-telephone);
  mask-image: var(--coffice-ico-telephone);
}

.nectar-cta a.link_text[href*="wa.me"]::before {
  -webkit-mask-image: var(--coffice-ico-whatsapp);
  mask-image: var(--coffice-ico-whatsapp);
}

.nectar-cta a.link_text[href*="google.com/maps"]::before {
  -webkit-mask-image: var(--coffice-ico-pin);
  mask-image: var(--coffice-ico-pin);
}

/* ==========================================================================
   Carte du lieu, dans « Infos pratiques »

   Posee par tools/ajouter-carte.php dans les sections globales 163 et 269,
   via [vc_raw_html]. Le rapport d'aspect evite de fixer une hauteur, qui
   serait fausse a une largeur ou a une autre.
   ========================================================================== */

.coffice-carte-lieu {
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 20px;
  aspect-ratio: 21 / 9;
  background: #ece5dd;
}

.coffice-carte-lieu iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media only screen and (max-width: 690px) {
  .coffice-carte-lieu {
    border-radius: 16px;
    aspect-ratio: 4 / 3;
  }
}