/*
Theme Name: Wallify
Theme URI: https://www.wallify.be/
Author: DigiWall
Author URI: https://www.digiwall.be/
Description: Thème bloc du site Wallify, généré depuis la maquette Claude Design puis assaini (hover reconstruits, responsive complété, navigation mobile réécrite).
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.32.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wallify
*/

/* ------------------------------------------------------- base (de l'export) */
* { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:'Inter',system-ui,-apple-system,sans-serif; color:#23284d; background:#fafafc; line-height:1.6; font-size:16.5px; -webkit-font-smoothing:antialiased; }
  img { max-width:100%; display:block; }
  a { color:#e31c79; text-decoration:none; }
  a:hover { color:#b81261; }
  @keyframes aurora { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(6%,4%) scale(1.15);} 100%{transform:translate(0,0) scale(1);} }
  @keyframes aurora2 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5%,-6%) scale(1.2);} 100%{transform:translate(0,0) scale(1);} }
  @keyframes floaty { 0%{transform:translateY(0);} 50%{transform:translateY(-12px);} 100%{transform:translateY(0);} }
  @keyframes riseIn { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
  @keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
  @keyframes pulseDot { 0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1);} }
  @keyframes revealUp { from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:translateY(0);} }
  .reveal { animation:revealUp both; animation-timeline:view(); animation-range:entry 0% cover 22%; }
  @media (prefers-reduced-motion:reduce){ .reveal{animation:none;} }

/* ------------- états de survol reconstruits depuis les attributs style-hover */
.wf-h-e1813d{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-e1813d:hover{background:#fdeef5}
.wf-h-71c3e1{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-71c3e1:hover{color:#ffc933}
.wf-h-0184b6{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-0184b6:hover{background:#6c4bd8;color:#fff}
.wf-h-0c3e92{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-0c3e92:hover{background:#b81261;transform:translateY(-2px)}
.wf-h-6391f8{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-6391f8:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.wf-h-1de5f7{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-1de5f7:hover{transform:translateY(-2px)}
.wf-h-33e6f0{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-33e6f0:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(20,24,58,.08)}
.wf-h-db55cf{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-db55cf:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(20,24,58,.1)}
.wf-h-ab6f30{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-ab6f30:hover{background:#f7f8fb}
.wf-h-cd0d68{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-cd0d68:hover{background:#f7f8fb;border-left-color:#e8e9f1}
.wf-h-a10a29{transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wf-h-a10a29:hover{color:#e31c79}

/* ------------------------------------------------------------------
   Ajouts d'intégration — absents de l'export d'origine
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   Les attributs width et height des <img> servent à réserver la place avant
   chargement. Mais l'attribut height est un hint de présentation : sans règle
   CSS pour l'écraser, il impose une hauteur en pixels et écrase le ratio dès
   que la largeur est contrainte (width:100%). height:auto rétablit le ratio
   tout en conservant le bénéfice sur le CLS, le navigateur déduisant
   l'aspect-ratio des deux attributs. Une hauteur posée en style inline
   continue de primer, ce qui préserve les vignettes en object-fit.
   --------------------------------------------------------------------------- */
img { height: auto; }

/* Réinitialisation des styles de bloc WordPress sur nos sections brutes */
.wf-page > *,
.wf-part > * { max-width: none; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks { padding: 0; }
body {
  --wp--style--global--content-size: 1180px;
  overflow-x: hidden; /* remplace le <div style="overflow-x:hidden"> de l'export */
}

/* ---------------------------------------------------------------------------
   Entête : tenir sur une seule ligne dans les trois langues.

   Les libellés français sont les plus longs (« Demander une démo »,
   « Formules & tarifs ») : la barre dépassait la largeur de 1180 px et le menu
   basculait sous le logo, alors qu'en néerlandais et en anglais il tenait.
   On resserre les espacements plutôt que d'élargir le conteneur, pour rester
   aligné sur la largeur du reste du site.
   --------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .wf-head { flex-wrap: nowrap !important; }
  .wf-nav {
    flex-wrap: nowrap !important;
    gap: clamp(10px, 1.3vw, 22px) !important;
  }
  .wf-nav a { white-space: nowrap; }
  .wf-nav > a:last-child { padding: 12px clamp(15px, 1.7vw, 24px) !important; }
}

/* Sous 1240 px, le numéro cède la place : il reste dans le pied de page. */
@media (min-width: 901px) and (max-width: 1240px) {
  .wf-tel { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Conteneurs de base. Utilisés par les compositions d'article et par tout ce
   que le thème génère lui-même : sans eux, le contenu colle aux bords.
   --------------------------------------------------------------------------- */
.wf-sec { padding: 72px 0; }
.wf-sec--tint { background: #fafafc; }
.wf-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* ---------------------------------------------------------------------------
   Navigation mobile.

   L'export livrait un toggle vide (toggleNav: () => {}) : tout est écrit ici.
   La difficulté est que chaque lien de l'entête porte ses styles en attribut
   « style », dessinés pour une barre horizontale : la pastille violette de
   Wallify + IA et le bouton rose de la démo se retrouvaient au milieu d'une
   liste verticale, chacun à sa propre taille. On remet donc tous les liens de
   premier niveau à plat, puis on redessine les deux qui doivent ressortir.

   Les !important sont nécessaires : ils écrasent des attributs style, qui
   l'emportent sinon sur toute règle de feuille.
   --------------------------------------------------------------------------- */
.wf-burger { display: none; }
@media (max-width: 900px) {
  .wf-burger {
    display: block; background: none; border: 0; color: #fff;
    font-size: 1.65rem; line-height: 1; cursor: pointer;
    width: 44px; height: 44px; padding: 0;
  }

  .wf-nav {
    display: none !important; width: 100%;
    flex-direction: column; align-items: stretch !important;
    gap: 0 !important; padding: 6px 0 18px !important;
  }
  /* Le panneau peut dépasser la hauteur de l'écran : il défile seul, sans
     entraîner la page derrière lui. dvh plutôt que vh, sinon la barre
     d'adresse d'iOS mange le bas du menu. */
  .wf-nav.is-open {
    display: flex !important;
    max-height: calc(100dvh - 78px);
    overflow-y: auto; overscroll-behavior: contain;
  }

  /* L'entête est translucide avec un flou d'arrière-plan : agréable sur une
     barre de 60 px, illisible sur un panneau plein écran posé au-dessus d'une
     section claire. Ouvert, il devient opaque. */
  header:has(.wf-nav.is-open) { background: #14183a !important; }

  /* Remise à plat des liens de premier niveau : une rangée, un filet. */
  .wf-nav > a,
  .wf-nav > div[data-wf-sub-open] > a {
    display: block !important;
    padding: 15px 2px !important;
    font-size: 1.02rem !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .wf-nav > div { width: 100%; }

  /* Le numéro de téléphone reprend sa place, il est utile au pouce. */
  .wf-tel { display: block !important; color: rgba(255, 255, 255, .55) !important; }

  /* Sous-menu Modules : bloc en retrait, aux couleurs du panneau. La carte
     blanche du bureau serait illisible ici, et ses libellés sont en #23284d. */
  .wf-sub { position: static !important; padding-top: 0 !important; }
  .wf-sub > div {
    min-width: 0 !important; width: 100%;
    background: rgba(255, 255, 255, .05) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 8px 0 4px !important;
  }
  .wf-sub a { color: #fff !important; padding: 12px 12px !important; }
  .wf-sub small { color: rgba(255, 255, 255, .5) !important; }

  /* Sélecteur de langue : trois cibles de 44 px, pas trois mots collés. */
  .wf-nav > div:not([data-wf-sub-open]) {
    display: flex !important; gap: 8px !important;
    padding: 16px 0 4px !important;
  }
  .wf-nav > div:not([data-wf-sub-open]) > a,
  .wf-nav > div:not([data-wf-sub-open]) > span {
    flex: 1; text-align: center;
    padding: 11px 0 !important; border-radius: 10px !important;
    font-size: .9rem !important;
  }
  .wf-nav > div:not([data-wf-sub-open]) > a {
    background: rgba(255, 255, 255, .07) !important;
    color: rgba(255, 255, 255, .75) !important;
  }

  /* Le dernier lien est l'appel à l'action : seul bouton du panneau. */
  .wf-nav > a:last-child {
    text-align: center;
    margin-top: 10px !important;
    padding: 16px 22px !important;
    background: #e31c79 !important;
    border-radius: 999px !important;
    border-bottom: 0 !important;
    font-size: 1rem !important;
  }
}

/* Révélations au scroll : animation-timeline n'est supporté que par Chrome.
   Fallback IntersectionObserver, activé par wallify.js. */
.wf-io .reveal { animation: none; opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease; }
.wf-io .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wf-io .reveal { opacity: 1; transform: none; transition: none; }
}

/* Garde-fous responsive : l'export ne contenait qu'une seule media query */
@media (max-width: 768px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
   Mobile : un bloc « sticky » de pleine largeur devient un couvercle.

   Signale par Nicolas sur la page Actualites, inutilisable sur telephone. La
   cause est un enchainement : la grille « 280px + 1fr » passe en une colonne
   sous 768 px grace au garde-fou ci-dessus, la barre laterale se retrouve donc
   pleine largeur ET en premier, et comme elle est en position:sticky top:160px
   elle se colle sous l'entete en couvrant les articles.

   Le probleme s'est aggrave avec les neuf nouveaux articles : la liste des
   categories est passee de deux a une douzaine d'entrees, soit plus de 500 px
   de hauteur.

   Trois corrections : on decolle la barre, on la renvoie apres les articles, et
   ses categories passent en pastilles sur une ou deux lignes au lieu d'une
   colonne. L'entete garde son sticky, qui est voulu.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wf-page aside[style*="position:sticky"],
  .wf-page div[style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* les articles d'abord, la barre laterale ensuite */
  .wf-page aside[style*="position:sticky"] { order: 2; margin-top: 30px; }
  .wf-page aside[style*="position:sticky"] ~ div { order: 1; }

  /* categories en pastilles : le titre garde sa ligne, les liens s'alignent */
  .wf-page aside [style*="border-radius:16px"][style*="padding:20px"] {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .wf-page aside [style*="border-radius:16px"][style*="padding:20px"]
    > [style*="text-transform:uppercase"] {
    flex: 1 0 100%; margin-bottom: 2px !important;
  }
  .wf-page aside a[style*="justify-content:space-between"][style*="padding:9px 12px"] {
    background: #fafafc; border: 1px solid #eef0f6;
  }
}

/* ---------------------------------------------------------------------------
   Contraste : #9aa0b8 sur fond clair plafonne à 2,48:1, très loin du seuil AA
   de 4,5:1. On assombrit ce gris de service partout où il est posé en inline,
   sans toucher aux couleurs de marque. Même traitement pour le vert de statut.
   --------------------------------------------------------------------------- */
[style*="color:#9aa0b8"] { color: #6b7089 !important; }
[style*="color:#1b9e57"] { color: #157a43 !important; }

/* Accessibilité : cible de focus visible (absente de l'export) */
a:focus-visible, button:focus-visible {
  outline: 3px solid #ffc933; outline-offset: 3px; border-radius: 4px;
}