/*
Theme Name: WikiTree Group
Theme URI: https://www.wikitree.eu
Author: AFFINA SRL
Author URI: https://www.wikitree.eu
Description: Thème one-page du groupe WikiTree (IT et actuariat). Contenu 100 % éditable dans l'éditeur de blocs : sections en blocs natifs (Groupe, Titre, Paragraphe, Liste, Boutons), aucune balise div brute. Polices hébergées localement, aucun cookie, aucun service tiers.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Usage privé, AFFINA SRL
Text Domain: wikitree-group
*/

/* ===========================================================
   1. Polices locales (aucun appel à Google Fonts : pas de transfert d'IP)
=========================================================== */
@font-face{font-family:'Carlito';src:url('assets/fonts/carlito-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Carlito';src:url('assets/fonts/carlito-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ===========================================================
   2. Jetons de marque
=========================================================== */
:root{
  --green:#8DC63F; --green-deep:#4F7E20; --green-tint:#EAF5DB;
  --petrol:#205464; --petrol-tint:#E3EEF1;
  --logo-grey:#939498;
  --ink:#1B1C1E;          /* noir : activité IT, pied de page */
  --anthracite:#34363A;   /* bandeau d'accueil */
  --grey-900:#232427; --grey-800:#34363A; --grey-700:#4A4C50; --grey-600:#616266;
  --grey-400:#94969B; --grey-300:#B4B5B9; --grey-200:#DBDCDE; --grey-100:#EEEFEF;
  --paper:#FCFCFA; --paper-alt:#F5F4EF;
  --r-md:10px; --r-lg:16px; --r-xl:24px;
  --shadow-sm:0 1px 2px rgba(35,36,39,.06);
  --shadow-lift:0 18px 40px rgba(35,36,39,.14);
  --container:1180px;
  --font:'Carlito','Calibri','Segoe UI',sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}

/* ===========================================================
   3. Base
=========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep)}
a:hover{color:var(--grey-900)}
h1,h2,h3,h4{font-family:var(--font);line-height:1.12;letter-spacing:-0.01em;margin:0}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;background:#fff;padding:10px 16px;border-radius:var(--r-md)}

/* ===========================================================
   4. Filet de sécurité WordPress
   Leçon wikitree-it.be : les valeurs par défaut de wp-block-library
   (colonnes, groupes, boutons, marges de flux) cassent la mise en page.
   On neutralise ici une fois pour toutes.
=========================================================== */
/* Conteneur interne ajouté par WordPress aux groupes des thèmes classiques :
   rendu transparent pour que nos grilles s'appliquent aux vrais enfants */
.wp-block-group__inner-container{display:contents}
/* Pas de marges de flux automatiques : chaque élément gère ses espacements */
:where(.is-layout-flow,.is-layout-constrained) > *{margin-block-start:0;margin-block-end:0}
.wp-block-group{max-width:none}
/* Le contenu de page occupe toute la largeur : pas d'astuce -50vw nécessaire */
.wtg-page,.wtg-page > .entry-content{width:100%;max-width:none;margin:0;padding:0}

/* ===========================================================
   5. Mise en page générique
=========================================================== */
.wtg-container{width:100%;max-width:var(--container);margin-inline:auto!important;padding-inline:24px}
.wtg-section{padding-block:96px}
.wtg-section-tight{padding-block:0 96px}
.wtg-alt{background:var(--paper-alt)}
.wtg-dark{background:var(--ink);color:#fff}
.wtg-anthracite{background:var(--anthracite);color:#fff}

.wtg-kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:700;margin-bottom:14px!important}
.wtg-kicker::before{content:"";width:18px;height:2px;background:var(--green);flex-shrink:0}
.wtg-kicker.is-on-dark{color:var(--green)}
.wtg-kicker.is-center{justify-content:center}

.wtg-head{max-width:680px;margin-bottom:48px!important}
.wtg-head.is-center{margin-inline:auto!important;text-align:center}
.wtg-h2{font-size:clamp(30px,3.2vw,42px);line-height:1.1;letter-spacing:-0.015em;margin-bottom:14px!important}
.wtg-intro{font-size:18px;color:var(--grey-600)}
.wtg-body{font-size:17px;color:var(--grey-700);margin-bottom:16px!important}

/* ===========================================================
   6. Boutons (bloc Boutons natif + classes de style)
=========================================================== */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px!important}
.wp-block-button{margin:0}
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;font-size:15.5px;line-height:1.2;
  padding:13px 24px;border-radius:var(--r-xl);border:1.5px solid transparent;
  text-decoration:none;box-shadow:none;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.wp-block-button .wp-block-button__link:hover{transform:translateY(-2px)}
.wp-block-button.is-green .wp-block-button__link{background:var(--green);color:var(--grey-900)}
.wp-block-button.is-green .wp-block-button__link:hover{background:#7DB532}
.wp-block-button.is-black .wp-block-button__link{background:var(--grey-900);color:#fff}
.wp-block-button.is-petrol .wp-block-button__link{background:var(--petrol);color:#fff}
.wp-block-button.is-white .wp-block-button__link{background:#fff;color:var(--petrol)}
.wp-block-button.is-ghost .wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.wp-block-button.is-ghost .wp-block-button__link:hover{border-color:var(--green);color:var(--green)}
.wp-block-button.is-small .wp-block-button__link{font-size:14.5px;padding:10px 18px}
.wp-block-button.is-full{flex:1 1 100%}
.wp-block-button.is-full .wp-block-button__link{width:100%}

/* ===========================================================
   7. En-tête
=========================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,252,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--grey-100)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.site-header .wtg-container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.wtg-logo{display:flex;flex-direction:column;gap:5px;width:180px;text-decoration:none;flex-shrink:0}
.wtg-logo img,.wtg-logo svg{width:100%;height:auto;display:block}
.wtg-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.wtg-nav a{display:block;text-decoration:none;font-weight:700;font-size:15px;color:var(--grey-700);padding:10px 14px;border-radius:var(--r-xl);transition:background-color .15s ease,color .15s ease}
.wtg-nav a:hover{background:var(--green-tint);color:var(--green-deep)}
.wtg-nav li:last-child a{background:var(--green);color:var(--grey-900);padding-inline:20px;margin-left:6px}
.wtg-nav li:last-child a:hover{background:#7DB532}
.wtg-nav-toggle{display:none;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--grey-200);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.wtg-nav-toggle span,.wtg-nav-toggle span::before,.wtg-nav-toggle span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.wtg-nav-toggle span::before,.wtg-nav-toggle span::after{content:"";position:absolute;left:0}
.wtg-nav-toggle span::before{top:-6px}.wtg-nav-toggle span::after{top:6px}
@media (max-width:880px){
  .wtg-nav-toggle{display:flex}
  .wtg-nav{position:fixed;inset:76px 16px auto 16px;background:#fff;border:1px solid var(--grey-100);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:10px;transform-origin:top;transform:scaleY(0);opacity:0;pointer-events:none;transition:transform .18s ease,opacity .18s ease}
  .wtg-nav.is-open{transform:scaleY(1);opacity:1;pointer-events:auto}
  .wtg-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .wtg-nav a{padding:12px 14px}
  .wtg-nav li:last-child a{margin:6px 0 0;text-align:center}
  .wtg-logo{width:150px}
}

/* ===========================================================
   8. Bandeau d'accueil (anthracite)
=========================================================== */
.wtg-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:center;padding-block:88px 72px}
.wtg-hero h1{font-size:clamp(38px,4.8vw,62px);line-height:1.06;letter-spacing:-0.02em;color:#fff;margin-bottom:20px!important}
.wtg-hero h1 mark{background:transparent!important}
.wtg-lede{font-size:19px;color:var(--grey-200);max-width:50ch}
.wtg-hero .wp-block-buttons{margin-top:32px!important}
.wtg-hero-panel{position:relative;border-radius:28px;border:1px solid rgba(141,198,63,.22);background-color:#2A2C30;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;padding:72px 40px 44px}
.wtg-anim-logo{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.wtg-anim-logo img,.wtg-anim-logo svg{width:100%;height:auto;display:block;overflow:visible}
.wtg-anim-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:44px}
.wtg-tag{font-size:14px;font-weight:700;padding:7px 16px;border-radius:20px}
.wtg-tag.is-green{background:var(--green);color:var(--grey-900)}
.wtg-tag.is-petrol{background:var(--petrol);color:#fff}

.wtg-stats-band{border-top:1px solid rgba(255,255,255,.08)}
.wtg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.wtg-stat{padding:26px 8px}
.wtg-stat-num{font-weight:700;font-size:30px;line-height:1.1;color:#fff}
.wtg-stat-num.is-green{color:var(--green)}
.wtg-stat-cap{font-size:14px;color:var(--grey-300)}

/* ===========================================================
   9. Bandeau défilant des expertises
=========================================================== */
.wtg-marquee{overflow:hidden;background:#fff;border-bottom:1px solid var(--grey-100)}
.wtg-marquee-track{display:flex;width:max-content;animation:wtg-mq 45s linear infinite}
.wtg-marquee-group{display:flex;align-items:center;gap:36px;padding:18px 36px 18px 0;font-weight:700;font-size:17px;color:var(--grey-700);white-space:nowrap}
.wtg-marquee-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}
.wtg-marquee-dot.is-petrol{background:var(--petrol)}

/* ===========================================================
   10. Nos métiers
=========================================================== */
.wtg-metiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px}
.wtg-card{border-radius:var(--r-xl);padding:38px 34px!important;display:flex;flex-direction:column;color:#fff}
.wtg-card.is-it{background:var(--ink)}
.wtg-card.is-as{background:var(--petrol)}
.wtg-card-head{display:flex;align-items:center;gap:16px;margin-bottom:22px!important}
.wtg-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wtg-icon.is-green{background:var(--green);color:var(--grey-900)}
.wtg-icon.is-glass{background:rgba(255,255,255,.12);color:var(--green)}
.wtg-card h3{font-size:28px;line-height:1.15;color:#fff}
.wtg-card-text{font-size:16.5px;margin-bottom:24px!important}
.wtg-card.is-it .wtg-card-text{color:var(--grey-200)}
.wtg-card.is-as .wtg-card-text{color:#D6E4E8}
.wtg-card .wp-block-buttons{margin-top:auto!important}

.wtg-ticks{list-style:none;margin:0 0 30px!important;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 20px}
.wtg-ticks li{position:relative;padding-left:22px;font-size:15px;color:#fff;margin:0}
.wtg-ticks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

/* ===========================================================
   11. Notre histoire
=========================================================== */
.wtg-two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px;align-items:start}
.wtg-quote{border-left:4px solid var(--green);padding:6px 0 6px 24px;font-size:22px;line-height:1.4;color:var(--grey-900);font-weight:700;margin-top:28px!important}

.wtg-timeline{position:relative;padding-left:36px;display:flex;flex-direction:column;gap:12px}
.wtg-timeline::before,.wtg-timeline::after{content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:var(--grey-200)}
.wtg-timeline::after{background:var(--green);transform-origin:top}
.wtg-tl-item{position:relative;background:#fff;border:1px solid var(--grey-100);border-radius:var(--r-lg);padding:20px 22px!important}
.wtg-tl-item::before{content:"";position:absolute;left:-35px;top:24px;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--green);z-index:1}
.wtg-tl-item.is-petrol::before{border-color:var(--petrol)}
.wtg-tl-item.is-black{background:var(--grey-900);border-color:var(--grey-900)}
.wtg-tl-item.is-black::before{background:var(--green);border-color:var(--green)}
.wtg-tl-year{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--green-deep)}
.wtg-tl-item.is-petrol .wtg-tl-year{color:var(--petrol)}
.wtg-tl-item.is-black .wtg-tl-year{color:var(--green)}
.wtg-tl-item h3{font-size:19px;margin:2px 0 4px!important}
.wtg-tl-item.is-black h3{color:#fff}
.wtg-tl-text{font-size:15.5px;color:var(--grey-600)}
.wtg-tl-item.is-black .wtg-tl-text{color:var(--grey-200)}

/* ===========================================================
   12. Nos entités
=========================================================== */
.wtg-entities{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.wtg-entity{background:#fff;border:1px solid var(--grey-100);border-top:5px solid var(--green);border-radius:var(--r-lg);padding:30px 28px!important;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.wtg-entity.is-as{border-top-color:var(--petrol)}
.wtg-entity-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);font-weight:700;margin-bottom:8px!important}
.wtg-entity.is-as .wtg-entity-eyebrow{color:var(--petrol)}
.wtg-badge{align-self:flex-start;font-size:12px;font-weight:700;color:var(--petrol);background:var(--petrol-tint);padding:3px 10px;border-radius:20px;margin-bottom:10px!important}
.wtg-entity h3{font-size:22px;line-height:1.2;margin-bottom:8px!important}
.wtg-entity-text{font-size:15.5px;color:var(--grey-600);margin-bottom:20px!important}
.wtg-contact-list{list-style:none;margin:0 0 24px!important;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--grey-800)}
.wtg-contact-list li{margin:0}
.wtg-contact-list strong{display:inline-block;min-width:64px;font-weight:400;color:var(--grey-600)}
.wtg-contact-list a{text-decoration:none;font-weight:700}
.wtg-entity.is-as .wtg-contact-list a{color:var(--petrol)}
.wtg-entity .wp-block-buttons{margin-top:auto!important}

/* ===========================================================
   13. Bandeau contact
=========================================================== */
.wtg-cta{background-color:var(--grey-900);background-image:radial-gradient(rgba(141,198,63,.16) 1px,transparent 1px);background-size:20px 20px;border-radius:var(--r-xl);padding:52px 48px!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;color:#fff}
.wtg-cta-text{max-width:560px}
.wtg-cta h2{font-size:clamp(26px,2.8vw,34px);line-height:1.15;color:#fff;margin-bottom:10px!important}
.wtg-cta p{font-size:17px;color:var(--grey-200)}
@media (max-width:640px){.wtg-cta{padding:36px 24px!important}}

/* ===========================================================
   14. Pied de page
=========================================================== */
.site-footer{background:var(--ink);color:var(--grey-200);padding:52px 0 28px}
.wtg-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-bottom:36px}
.site-footer .wtg-logo{width:170px;margin-bottom:16px}
.site-footer p{font-size:14.5px;color:var(--grey-400);max-width:32ch}
.site-footer h4{font-size:14px;color:#fff;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.site-footer a{text-decoration:none;color:var(--grey-400)}
.site-footer a:hover{color:var(--green)}
.wtg-li-link{display:inline-flex;align-items:center;gap:10px}
.wtg-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:var(--grey-400)}

/* ===========================================================
   15. Mentions légales
=========================================================== */
.wtg-page-hero{background:var(--ink);color:#fff}
.wtg-page-hero .wtg-container{padding-block:64px 56px}
.wtg-page-hero h1{font-size:clamp(32px,3.8vw,46px);line-height:1.1;color:#fff;margin-bottom:10px!important}
.wtg-page-hero p{font-size:17px;color:var(--grey-200)}
.wtg-legal{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-block:64px 88px}
.wtg-legal-card{flex:1 1 300px;max-width:380px;background:#fff;border:1px solid var(--grey-100);border-top:5px solid var(--green);border-radius:var(--r-lg);padding:28px 26px!important;box-shadow:var(--shadow-sm)}
.wtg-legal-card h2{font-size:24px;margin-bottom:14px!important}
.wtg-legal-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--grey-800)}
.wtg-legal-body{flex:999 1 560px;min-width:0;max-width:760px}
.wtg-legal-body h2{font-size:24px;margin:36px 0 12px!important}
.wtg-legal-body h2:first-child{margin-top:0!important}
.wtg-legal-body p,.wtg-legal-body li{font-size:16px;color:var(--grey-700)}
.wtg-legal-body p{margin-bottom:14px!important}
.wtg-legal-body ul{margin:0 0 14px!important;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* ===========================================================
   16. Survols
=========================================================== */
.wtg-lift{transition:transform .25s ease,box-shadow .25s ease}
.wtg-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

/* ===========================================================
   17. Animations
=========================================================== */
@keyframes wtg-fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes wtg-fi{from{opacity:0}to{opacity:1}}
@keyframes wtg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wtg-gx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wtg-breathe{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes wtg-mq{to{transform:translateX(-50%)}}
@keyframes wtg-rv{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes wtg-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.wtg-hero .wtg-kicker,.wtg-hero h1,.wtg-hero .wtg-lede,.wtg-hero .wp-block-buttons,.wtg-hero-panel,.wtg-stat{animation:wtg-fu .9s cubic-bezier(.2,.7,.2,1) both}
.wtg-hero h1{animation-delay:.1s}
.wtg-hero .wtg-lede{animation-delay:.2s}
.wtg-hero .wp-block-buttons{animation-delay:.3s}
.wtg-hero-panel{animation-delay:.25s}
.wtg-stat:nth-child(1){animation-delay:.35s}.wtg-stat:nth-child(2){animation-delay:.45s}
.wtg-stat:nth-child(3){animation-delay:.55s}.wtg-stat:nth-child(4){animation-delay:.65s}

.wtg-anim-logo .wtg-wm{animation:wtg-fu .9s .35s cubic-bezier(.2,.7,.2,1) both}
.wtg-anim-logo .wtg-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:wtg-draw 1s .7s ease-out forwards}
.wtg-anim-logo .wtg-gx{transform-box:fill-box;transform-origin:left center;animation:wtg-gx .7s cubic-bezier(.2,.7,.2,1) both}
.wtg-anim-logo .wtg-gx:nth-of-type(1){animation-delay:1.3s}
.wtg-anim-logo .wtg-gx:nth-of-type(2){animation-delay:1.5s}
.wtg-anim-logo .wtg-gx:nth-of-type(3){animation-delay:1.7s}
.wtg-anim-logo .wtg-breathe{animation:wtg-breathe 3.5s 3s ease-in-out infinite}
.wtg-anim-logo .wtg-fi{animation:wtg-fi .8s 2.1s ease-out both}
.wtg-anim-tags .wtg-tag{animation:wtg-fi .8s 2.4s ease-out both}
.wtg-anim-tags .wtg-tag + .wtg-tag{animation-delay:2.6s}

@supports (animation-timeline: view()){
  .wtg-rv{animation:wtg-rv linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  .wtg-timeline::after{animation:wtg-grow linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .wtg-anim-logo .wtg-draw{stroke-dashoffset:0}
}