@charset "UTF-8";
/*
Theme Name: Etiqazur Light
Author: Théo
Version: 1.0.4
Requires at least: 6.6
Tested up to: 6.6
Text Domain: etiqazur-light
Description: Block theme minimal, sans Divi. HTML/JS/CSS-first pour préparer une future migration headless.
*/

/* =================================================
   1) FONTS (variables locales)
   ================================================= */
/* Satoshi (headings) - Variable font avec fallbacks */
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/satoshi/satoshi-variable.woff2') format('woff2-variations'),
      url('assets/fonts/satoshi/satoshi-variable.woff') format('woff-variations');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

/* Satoshi static fallback (Regular 400) */
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/satoshi/satoshi-regular.woff2') format('woff2'),
      url('assets/fonts/satoshi/satoshi-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Satoshi static fallback (Medium 500) */
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/satoshi/satoshi-medium.woff2') format('woff2'),
      url('assets/fonts/satoshi/satoshi-medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* Satoshi static fallback (Bold 700) */
@font-face{
  font-family:'Satoshi';
  src:url('assets/fonts/satoshi/satoshi-bold.woff2') format('woff2'),
      url('assets/fonts/satoshi/satoshi-bold.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* General Sans (body) - Variable font avec fallbacks */
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/general-sans/general-sans-variable.woff2') format('woff2-variations'),
      url('assets/fonts/general-sans/general-sans-variable.woff') format('woff-variations');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}

/* General Sans static fallback (Regular 400) */
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/general-sans/general-sans-regular.woff2') format('woff2'),
      url('assets/fonts/general-sans/general-sans-regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* General Sans static fallback (Medium 500) */
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/general-sans/general-sans-medium.woff2') format('woff2'),
      url('assets/fonts/general-sans/general-sans-medium.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

/* General Sans static fallback (Semibold 600) */
@font-face{
  font-family:'General Sans';
  src:url('assets/fonts/general-sans/general-sans-semibold.woff2') format('woff2'),
      url('assets/fonts/general-sans/general-sans-semibold.woff') format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
   
   /* =================================================
      2) TOKENS (couleurs, échelles, typo fluide)
      ================================================= */
   :root{
     /* Couleurs */
     --text:#212529;
     --bleu-principal:#0F182E;
     --bleu-secondaire:#182136;
     --bleu-etiquette:#119FAE;
     --bleu-imprimante:#3C95D2;
     --bleu-etiqueteuse:#2645BC;
     --jaune:#F3C62B;
     --blanc:#FFFFFF;
     --gris:#F2F2F2;
     --gris-fonce:#CECECE;
     --muted:#64748B;
     --header-shadow:0 2px 12px rgba(15,24,46,.2);
   
     /* Grille */
     --container:1280px;
     --container-wide:1440px;
   
     /* Spacing (4/8 scale) */
     --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
     --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
     --s-9:5rem; --s-10:6rem; --s-11:7rem; --s-12:8rem;
   
      /* Tailles FLUIDES (clamp) */
      --fs-h1: clamp(2rem, 2.2vw + 1.3rem, 2.8125rem);      /* ≈ 32 → 45 */
      --fs-h2: clamp(1.5rem, 1.3vw + 1.1rem, 2rem);         /* ≈ 24 → 32 */
      --fs-h3: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);       /* ≈ 18 → 24 */
      --fs-h4: clamp(1rem, 0.7vw + 0.85rem, 1.3125rem);     /* ≈ 16 → 21 */
      --fs-h5: clamp(0.9375rem, 0.6vw + 0.85rem, 1.1875rem);/* ≈ 15 → 19 */
      --fs-h6: clamp(0.875rem, 0.5vw + 0.8rem, 1.0625rem);  /* ≈ 14 → 17 */
      --fs-body:  clamp(0.9375rem, 0.2vw + 0.9rem, 1rem);       /* ≈ 15 → 16 */
      --fs-small: clamp(0.8125rem, 0.18vw + 0.8rem, 0.875rem);  /* ≈ 13 → 14 */
      --fs-badge: clamp(0.75rem, 0.2vw + 0.72rem, 0.8125rem);   /* ≈ 12 → 13 */
    
      /* Interlignes */
      --lh-h1: 1.15;
      --lh-h2: 1.18;
      --lh-h3: 1.22;
      --lh-h4: 1.25;
      --lh-h5: 1.3;
      --lh-h6: 1.3;
      --lh-body: 1.55;
      --lh-small: 1.45;
    }
    
   
   /* =================================================
      3) RESET & BASE
      ================================================= */
   html{scroll-behavior:smooth;text-rendering:optimizeLegibility;overflow-x:clip;width:100%}
   body{
     margin:0;
     font-family:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
     color:var(--text);
     line-height:1.5;
     width:100%;
     max-width:100%;
     overflow-x:clip;
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
   }
   *{box-sizing:border-box}
   main,section,.container{max-width:100%}
   img,svg,video,canvas{max-width:100%;height:auto}
   img{display:block}
   
   /* Annuler la règle WordPress/Gutenberg problématique */
   body .is-layout-grid{display:block !important}

   /* Suppression du margin-block WordPress par défaut */
   :where(.wp-site-blocks) > * {
     margin-block-start: 0 !important;
     margin-block-end: 0 !important;
   }
   :where(.wp-site-blocks) > :first-child {
     margin-block-start: 0 !important;
   }
   
   /* =================================================
      4) TYPO GLOBAL (hiérarchie + overrides sûrs)
      ================================================= */
   h1,h2,h3,h4,h5,h6{font-family:'Satoshi',sans-serif;margin:0 0 var(--s-4)}
   h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700}
   h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:600}
   h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
   h4{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:600}
   h5{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:600}
   h6{font-size:var(--fs-h6);line-height:var(--lh-h6);font-weight:600}
  p,li{font-size:var(--fs-body);line-height:var(--lh-body);color:inherit}
  p{margin:0 0 var(--s-4)}
  ul,ol{list-style:none;padding:0}
  small,.text-small{font-size:var(--fs-small);line-height:var(--lh-small)}
   a:not(.wp-element-button){color:inherit;text-decoration:none}
   a:not(.wp-element-button):hover{color:inherit}
   
   /* Surcouche anti-conflits éditeur/blocs/Woo */
   .wp-site-blocks,.wp-block,.woocommerce,.wc-block-components{
     font-family:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial !important;
     color:var(--text);
   }
   
   /* =================================================
      5) LAYOUT (sections, containers)
      ================================================= */
   section{padding-block:var(--s-10)}
   .fullheight{height:calc(100vh - 70px)}
   .section-bleu{background:var(--bleu-principal);color:var(--blanc)}
   .section-blanc{background:var(--blanc);color:var(--text)}
   .section-gris{background:var(--gris);color:var(--text)}
   .section-transparent{background:transparent;color:var(--blanc)}
   .overlay::before{content:'';position:absolute;inset:0;background:rgba(15,24,46,.75);z-index:1}
   .container{max-width:var(--container);margin-inline:auto;padding:0 1.5rem;height:100%;align-content:center}
   .section-header{text-align:center}
   .section-header p{font-size:var(--fs-h5);color:var(--muted)}
   .grid-2cols{display:grid;gap:3rem;align-items:center}
   .grid-2cols.grid-2cols--20-80{grid-template-columns:1fr 4fr}
   .grid-2cols.grid-2cols--25-75{grid-template-columns:1fr 3fr}
   .grid-2cols.grid-2cols--30-70{grid-template-columns:3fr 7fr}
   .grid-2cols.grid-2cols--35-65{grid-template-columns:7fr 13fr}
   .grid-2cols.grid-2cols--40-60{grid-template-columns:2fr 3fr}
   .grid-2cols.grid-2cols--45-55{grid-template-columns:9fr 11fr}
   .grid-2cols.grid-2cols--50-50{grid-template-columns:1fr 1fr}
   .grid-2cols.grid-2cols--55-45{grid-template-columns:11fr 9fr}
   .grid-2cols.grid-2cols--60-40{grid-template-columns:3fr 2fr}
   .grid-2cols.grid-2cols--65-35{grid-template-columns:13fr 7fr}
   .grid-2cols.grid-2cols--70-30{grid-template-columns:7fr 3fr}
   .grid-2cols.grid-2cols--75-25{grid-template-columns:3fr 1fr}
   .grid-2cols.grid-2cols--80-20{grid-template-columns:4fr 1fr}
   .grid-2cols__img{position:relative;width:100%}
   .grid-2cols__img img{width:100%;height:auto;display:block}
   @media (max-width:1024px){
     .grid-2cols:not(.archive-hero-grid):not(.expertise-icons){grid-template-columns:100%}
   }
   
   /* =================================================
      6) HEADER / NAV
      ================================================= */
   .admin-bar .site-header{top:32px}
   @media screen and (max-width:782px){.admin-bar .site-header{top:46px}}
   .admin-bar .main-nav{top:32px !important}
   @media screen and (max-width:782px){.admin-bar .main-nav{top:46px !important}}
   .admin-bar .mobile-header{top:32px}
   @media screen and (max-width:782px){.admin-bar .mobile-header{top:46px}}
   .admin-bar .mobile-menu{top:92px;height:calc(100vh - 92px)}
   @media screen and (max-width:782px){.admin-bar .mobile-menu{top:106px;height:calc(100vh - 106px)}}
   .admin-bar .mega-menu{top:102px}
   @media screen and (max-width:782px){.admin-bar .mega-menu{top:116px}}
   .menu-toggle{background:none;border:0;font-size:1rem}
   
   /* =================================================
      7) BRANDING (slash, badges, boutons)
      ================================================= */
   /* Slash */
   .slash:before{content:'/';font-weight:700;font-size:1em;line-height:inherit;color:var(--jaune);font-style:italic;vertical-align:baseline;margin-right:.45em;position:relative}
   .slashslider .item-title::before{content:'/';font-weight:700;font-size:1em;color:var(--jaune);letter-spacing:16px;position:relative;font-style:italic;vertical-align:middle}
   b,strong{font-weight:500}
   
   /* Boutons */
   .bouton-bleu,.bouton-blanc{display:inline-block;font-family:'Satoshi',sans-serif;font-size:1rem;font-weight:600;text-align:center;text-decoration:none;border-radius:0;position:relative;overflow:hidden;transition:background-color .3s,color .3s,border-color .3s}
   .bouton-bleu:active,.bouton-blanc:active{transform:scale(0.95)}
   .bouton-bleu::before,.bouton-bleu::after,.bouton-blanc::before,.bouton-blanc::after{content:"";position:absolute;inset:0;box-sizing:border-box;transition:.35s ease-in-out;z-index:1;pointer-events:none}
   
   .bouton-bleu{color:var(--blanc);background:var(--bleu-principal);padding:13px 35px}
   .bouton-bleu::before{left:-50px;border-left:50px solid transparent;border-bottom:52px solid #182136;transform:translateX(100%)}
   .bouton-bleu::after{right:-50px;border-right:50px solid transparent;border-top:52px solid #182136;transform:translateX(-100%)}
   .bouton-bleu:hover::before{transform:translateX(49%)} .bouton-bleu:hover::after{transform:translateX(-49%)}
   .bouton-bleu .texte-bouton{position:relative;z-index:2;color:var(--blanc)}
   
   .bouton-blanc{color:var(--text);background:var(--blanc);border:1px solid var(--gris);padding:12px 34px}
   .bouton-blanc::before{left:-50px;border-left:50px solid transparent;border-bottom:52px solid #f6f6f7;transform:translateX(100%)}
   .bouton-blanc::after{right:-50px;border-right:50px solid transparent;border-top:52px solid #f6f6f7;transform:translateX(-100%)}
   .bouton-blanc:hover::before{transform:translateX(49%)} .bouton-blanc:hover::after{transform:translateX(-49%)}
   .bouton-blanc .texte-bouton{position:relative;z-index:2;color:var(--text)}

   /* CTA téléphone : numéro sur desktop, "Appeler un expert" sur mobile */
   .cta-phone-desktop{display:none}
   .cta-phone-mobile{display:inline}
   @media (min-width:769px){.cta-phone-desktop{display:inline}.cta-phone-mobile{display:none}}

   /* =================================================
      8) MICRO-EFFETS & DIVERS UI
      ================================================= */
   .upandshadow img:hover{transform:translate(0,-8px)}
   .swiper-pagination-bullet{padding:5.5px;border:none}
   #modalOpen:target{display:flex}
   .clearboth{clear:both}
   code{line-height:1;margin-bottom:0;font-family:Arial}
   .ph,i.ph{line-height:normal}
   hr{clear:both;border:0}
   .soulignement{border-bottom:4px solid;display:inline-block;margin-bottom:12px}
   .kbd{border:1px solid;border-top-left-radius:.5em;border-top-right-radius:.5em;padding:0 .25em}
   
   /* =================================================
      9) ANNUAIRES (MARQUES / LEXIQUE)
      ================================================= */
   .annuaire-subtitle{color:var(--muted);font-size:var(--fs-h5)}
   .annuaire-content{margin-top:var(--s-5)}
   .annuaire-alpha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-6);padding:var(--s-3) 0;border-bottom:1px solid var(--gris)}
   .annuaire-alpha-link{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 var(--s-1);font-size:var(--fs-small);font-weight:600;color:var(--bleu-principal);text-decoration:none;border-radius:4px;transition:background .2s,color .2s}
   .annuaire-alpha-link:hover{background:var(--gris);color:var(--bleu-principal)}
   .annuaire-alpha-link.is-empty{color:var(--gris-fonce);cursor:default;font-weight:400}
   .annuaire-letter{scroll-margin-top:6rem;padding:0}
   .annuaire-letter-title{display:block;width:100%;margin:0 0 var(--s-5);padding:var(--s-2) 0;font-size:var(--fs-h4);font-weight:700;color:var(--text);background:var(--gris);padding-left:var(--s-4);border-radius:4px}
   .annuaire-list{list-style:none;padding:0;margin:0 0 var(--s-7);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:var(--s-4)}
   .annuaire-item{margin:0}
   .annuaire-link{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:8px;text-decoration:none;color:var(--text);border:1px solid transparent;transition:box-shadow .25s ease,transform .25s ease}
   .annuaire-link:hover{box-shadow:0 4px 20px rgba(15,24,46,.06);transform:translateY(-2px)}
   .annuaire-link--card{flex-direction:column;align-items:center;text-align:center;padding:var(--s-4)}
   .annuaire-logo{flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2)}
   .annuaire-logo img{width:100%;height:100%;object-fit:contain}
   .annuaire-logo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:var(--muted);background:var(--gris)}
   .annuaire-name{font-weight:600;font-size:var(--fs-body);margin:0}
   .annuaire-list--marques .annuaire-name{font-size:var(--fs-small);font-weight:500;line-height:1.3}
   .annuaire-list--lexique .annuaire-link--card .annuaire-name{font-size:var(--fs-body)}
   .annuaire-empty{margin-top:var(--s-4);color:var(--muted)}

   /* =================================================
      10) GUARDRAILS (CLS / médias)
      ================================================= */
   .media-16x9{position:relative;padding-top:56.25%}
   .media-16x9>*{position:absolute;inset:0}