/* ===============================
   Base typo / layout
   =============================== */
body{
  margin:0; background:#fff; color:#000;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
a:active{ opacity:.7; }
img{ display:block; max-width:100%; height:auto; border:0; }
ul,ol{ margin:0; padding:0 0 0 2.5em; }  /* desktop par défaut */
blockquote{ margin:0; padding:0 0 0 2em; }
hr{ background:rgba(0, 0, 0, 0.4); border:0; height:1px; margin:0; }

/* Titres Cargo (inchangés) */
[data-predefined-style="true"] bodycopy{font-size:1.5rem;line-height:1.2;font-weight:400;color:rgba(0,0,0,.85);font-family:"Goudy Bookletter 1911", Icons;}
[data-predefined-style="true"] h1{margin:0;padding:0;font-family:"Goudy Bookletter 1911", Icons;font-weight:400;font-size:2.5rem;line-height:.7;letter-spacing:-.04rem;color:rgba(0,0,0,.85);}
[data-predefined-style="true"] h2{margin:0;padding:0;color:rgba(0,0,0,.85);font-family:"Diatype Variable", Icons;font-weight:400;font-size:2.2rem;line-height:1.4;font-variation-settings:'slnt' 0,'MONO' 0;}
[data-predefined-style="true"] small{display:inline-block;font-size:0.9rem;font-family:"Monument Grotesk Semi-Mono Variable", Icons;font-weight:345;letter-spacing:.05em;color:rgba(0,0,0,.85);font-variation-settings:'slnt' 0,'MONO' .5;}
.gallery_image_caption{margin-top:1.2rem;margin-bottom:.5rem;font-size:.8rem;line-height:1.2;font-weight:400;color:rgba(0,0,0,.85);font-family:"Monument Grotesk Semi-Mono", Icons;}

/* Conteneur 85% (nav full-bleed) */
[data-css-preset] .container_width{ width:90%/*!content_center*/; }
[data-css-preset] .container{ margin-left:auto /*!content_center*/; margin-right:auto; text-align:left; }
[data-css-preset] .content_padding{ padding:1rem 2rem 2rem 2rem; }
[data-css-preset] text-limit{ display:inline-block;  }

/* ===============================
   NAV desktop
   =============================== */
#nav{
  width:100vw!important; max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important;
  padding:0 2rem; box-sizing:border-box; position:relative; z-index:5000;
  display:flex!important; align-items:center!important;
}
#nav > [grid-col], #nav > div{ display:flex!important; align-items:center!important; }
#nav > [grid-col]:first-child, #nav > div:first-child{ margin-right:auto!important; }
#nav .topbar-right, #nav > [grid-col]:last-child{
  margin-left:auto!important; display:flex!important; align-items:center!important; gap:1rem; justify-content:flex-end!important;
}

/* liens topbar + soulignement à l’hover/active */
#nav > div > ul{ display:flex; align-items:center; gap:.5rem; margin:0; padding:0; }
#nav > div > ul > li{ list-style:none; position:relative; }
#nav > div > ul > li > a{ display:block; padding:7px 15px; position:relative; color:inherit; text-decoration:none; }
#nav > div > ul > li > a::after, .topbar-right .nav-aux::after{
  content:""; position:absolute; left:15%; right:15%; bottom:-6px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
#nav > div > ul > li:hover > a::after,
#nav > div > ul > li.active > a::after,
.topbar-right .nav-aux:hover::after,
.topbar-right .nav-aux.active::after,
.topbar-right .nav-aux[aria-current="page"]::after{ transform:scaleX(1); }

/* Parents non cliquables (desktop) */
@media (hover:hover) and (pointer:fine){
  #nav .menu-drawing > a,
  #nav .menu-etching > a,
  #nav .menu-collections > a{ pointer-events:none!important; cursor:default!important; }
}

/* Sous-menus desktop : fermés par défaut, open au hover/focus clavier */
#nav li > .submenu{
  display:none!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important;
  position:absolute; top:calc(100% + 6px); left:50%!important; transform:translate(-50%,4px)!important;
  background:#fff; padding:6px 0; min-width:max-content; white-space:nowrap; text-align:center; box-shadow:none; z-index:5000;
}
#nav .submenu::before{ content:""; position:absolute; top:-6px; left:0; right:0; height:6px; }
#nav .submenu li{ list-style:none; padding:0 14px; }
#nav .submenu a{ display:inline-block; padding:7px 0; position:relative; color:inherit; }
#nav .submenu a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:currentColor;
  transform:scaleX(0); transition:transform .2s ease;
}
#nav .submenu a:hover::after{ transform:scaleX(1); }

@media (hover:hover) and (pointer:fine){
  #nav > div > ul > li:hover > .submenu{
    display:block!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
}
body.kbd-nav #nav > div > ul > li:focus-within > .submenu{
  display:block!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important;
  transform:translate(-50%,0)!important;
}
/* Empêcher l’état .active d’ouvrir le sous-menu */
#nav li.active > .submenu,
#nav li.is-parent-active > .submenu{ display:none!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; }



/* =========================================================
   MOBILE (≤768px) — Header centré + Overlay menu sans puces
   ========================================================= */
@media (max-width:768px){

  /* ----- HEADER : logo centré et aligné avec le “+” ----- */
  #nav{ min-height:56px; position:relative; }
  /* montrer uniquement le 1er <li> (logo) du bloc gauche */
  #nav > [grid-col]:first-child > ul{ display:block!important; }
  #nav > [grid-col]:first-child > ul > li{ display:none!important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block!important;
    position:absolute; left:50%; top:12px; 
    z-index:10000;
  }
  /* taille du logo header mobile (petit & net) */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:56px!important; height:auto!important; max-width:none!important; transform:none!important;
  }
  /* bouton “+” */
  #site_menu_button{
    top:12px!important; right:12px!important;
    width:44px!important; height:44px!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    font-size:28px!important; z-index:10001!important;
  }
  #site_menu_button svg{ width:28px!important; height:28px!important; }

  /* ----- ESPACE sous le header avant le contenu ----- */
  .page_container .content{ padding-top:14px!important; }
  .page_container .content > *:first-child{ margin-top:14px!important; }

  /* ----- OVERLAY #site_menu (Cargo) ----- */
  #site_menu{
    position:fixed!important; inset:0!important;
    background:rgba(255,255,255,.95)!important;
    z-index:9999!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
    padding:20px!important; box-sizing:border-box!important;
    color:#000!important; font-family:"Goudy Bookletter 1911", serif;
  }
  /* ne garder que .mnav (si Cargo duplique) */
  #site_menu .page_container .content > *:not(.mnav){ display:none!important; }
  #site_menu .page_container .content .mnav + .mnav{ display:none!important; }

  /* ----- LOGO dans l’overlay à 50% ----- */
  #site_menu .mnav-logo img{ width:50px!important; height:auto!important; display:block; }

  /* ----- LISTES : suppression TOTALE des puces/indentations ----- */
  #site_menu .mnav ul,
  #site_menu .mnav ol,
  #site_menu ul,
  #site_menu ol{
    list-style:none!important; margin:0!important; padding:0!important;
  }
  #site_menu .mnav li,
  #site_menu li{
    list-style-type:none!important; margin-left:0!important; padding-left:0!important;
  }
  /* tue les puces natives et décoratives */
  #site_menu .mnav li::marker,
  #site_menu li::marker{ content:none!important; }
  #site_menu .mnav li::before,
  #site_menu li::before{ content:none!important; }

  /* ----- Bloc menu mobile (tout affiché) ----- */
  .mnav{ width:100%; max-width:520px; margin:80px auto 0; text-align:center; }
  .mnav-name{ display:block; font-size:2.4rem; font-weight:400; margin:0 0 22px; text-decoration:none; }

  .mnav-list{ margin:0; }
  .mnav-item{ margin:0; padding:0; border-bottom:1px solid rgba(0,0,0,.12); }

  /* parents (/drawing, /etching, /collections, /archive) – statiques, regular, noir */
  .mnav-tog{
    width:100%; padding:16px 12px; font:inherit; font-size:2rem; font-weight:400;
    color:#000!important; background:#f5f5f5; border:0; text-align:center;
    cursor:default; pointer-events:none; position:relative;
  }
  /* sous-menus toujours visibles (regular, gris foncé) */
  .mnav-sub{ display:block!important; padding:10px 0 16px; }
  .mnav-sub li{ margin:8px 0; }
  .mnav-sub a{ display:block; padding:6px 0; font-size:1.6rem; font-weight:400; color:#333!important; text-decoration:none!important; }

  /* liens simples (shop/about/contact/instagram) – regular noir */
  .mnav-link{ display:block; padding:16px 12px; font-size:2rem; font-weight:400; color:#000!important; text-decoration:none; }

  /* forcer le noir partout dans l’overlay (évite les bleus visités) */
  #site_menu, #site_menu *{
    color:#000!important;
  }

  /* close (croix) grande et cliquable */
  #site_menu .close{
    position:fixed!important; top:10px!important; right:10px!important;
    width:60px!important; height:60px!important; display:grid!important; place-items:center!important;
    font-size:40px!important; line-height:1!important; cursor:pointer!important; z-index:10001!important;
    background:transparent!important;
  }
  #site_menu .close svg{ width:40px!important; height:40px!important; }
  #site_menu .close svg *{ stroke:#000!important; fill:#000!important; }
}


/* ========= PATCH MOBILE (≤768px) — Header + Menu + Logo ========= */
@media (max-width:768px){

  /* 0) Forcer le noir et retirer toute puce résiduelle dans l’overlay */
  #site_menu, #site_menu *{ color:#000 !important; }
  #site_menu .mnav ul,
  #site_menu .mnav ol,
  #site_menu ul,
  #site_menu ol{
    list-style:none !important; margin:0 !important; padding:0 !important;
  }
  #site_menu li,
  #site_menu .mnav li{
    list-style-type:none !important; margin-left:0 !important; padding-left:0 !important;
  }
  #site_menu li::marker,
  #site_menu li::before{ content:none !important; }

  /* 1) HEADER : afficher le bouton “+”, cacher les autres icônes à droite,
        centrer le logo et l’aligner verticalement avec le “+” */
  #nav{ min-height:56px; position:relative; }
  #nav .topbar-right > *:not(#site_menu_button){ display:none !important; } /* masque mail/instagram */
  #site_menu_button{
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:fixed !important; top:12px !important; right:12px !important;
    width:44px !important; height:44px !important; font-size:28px !important; z-index:10001 !important;
  }
  #site_menu_button svg{ width:28px !important; height:28px !important; }

  /* garder UNIQUEMENT le logo au bloc gauche et le centrer */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important; position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  /* taille du logo du header (petit) */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:56px !important; height:auto !important; max-width:none !important; transform:none !important;
  }

  /* 2) ESPACE sous la barre pour aérer le titre/contenu */
  .page_container .content{ padding-top:14px !important; }
  .page_container .content > *:first-child{ margin-top:14px !important; }

  /* 3) LOGO DANS LE MENU MOBILE (overlay) — centré et 50% */
  #site_menu .mnav-logo{
    position:static !important; display:block !important; text-align:center !important; margin:0 0 10px !important;
  }
  #site_menu .mnav-logo img{
    width:50px !important; height:auto !important; margin:0 auto !important; display:block !important;
  }

  /* 4) LOGO "tampon" placé en haut des pages (contenu) — le réduire + centrer
        (on cible l’URL du fichier pour éviter d’impacter les autres images) */
  .page_container .content img[src*="logo-tampon"]{
    width:38vw !important; max-width:160px !important; height:auto !important;
    margin:0 auto 10px !important; display:block !important;
  }
}


/* =========================================
   PATCH MOBILE (≤768px) — logo + menu sans puces
   ========================================= */
@media (max-width:768px){

  /* ----- HEADER : logo petit centré + “+” visible ----- */
  #nav{ position:relative; min-height:56px; }

  /* bouton “+” (Cargo) */
  #site_menu_button{
    position:fixed !important;
    top:12px !important; right:12px !important;
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:28px !important; z-index:10001 !important;
  }
  #site_menu_button svg{ width:28px !important; height:28px !important; }

  /* ne garder que le 1er <li> (logo) dans le bloc gauche et le CENTRER */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed;              /* pour rester aligné avec le “+” */
    left:50%; top:12px;
    transform:translateX(-50%);
    z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:44px !important;       /* <<< taille réduite du logo header */
    height:auto !important;
    max-width:none !important;
  }

  /* ----- MENU MOBILE (overlay) : logo 50px et PAS DE PUCES ----- */

  /* logo du menu (la moitié, centré) */
  #site_menu .mnav-logo{ text-align:center !important; margin:0 0 12px !important; }
  #site_menu .mnav-logo img{
    width:50px !important;       /* <<< moitié de la taille courante */
    height:auto !important;
    display:block !important;
    margin:0 auto !important;
  }

  /* suppression ABSOLUE des puces + indentations */
  #site_menu .mnav ul,
  #site_menu .mnav ol{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  #site_menu .mnav li{
    list-style:none !important;
    margin:0 !important;
    padding-left:0 !important;
  }
  #site_menu .mnav li::marker,
  #site_menu .mnav li::before,
  #site_menu .mnav li::after{
    content:none !important;
  }
}


/* =====================================================
   MOBILE (≤768px) — header logo + menu logo + NO bullets
   ===================================================== */
@media (max-width:768px){

  /* ----- HEADER : logo centré & petit, aligné avec le “+” ----- */
  #nav{ position:relative; min-height:56px; }

  /* bouton “+” (ne pas masquer) */
  #site_menu_button{
    position:fixed !important;
    top:12px !important; right:12px !important;
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:28px !important; z-index:10001 !important;
  }
  #site_menu_button svg{ width:28px !important; height:28px !important; }

  /* ne garder que le 1er <li> (logo) dans le bloc gauche et le CENTRER */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px;            /* même Y que le “+” */
    transform:translateX(-50%); z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link{ padding:0 !important; }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:44px !important;                          /* <<< LOGO HEADER réduit */
    height:auto !important; max-width:none !important;
  }

  /* petit “saut de ligne” sous la barre sur mobile */
  .page_container .content{ padding-top:64px !important; }

  /* ----- MENU MOBILE (overlay) : logo plus petit & PAS DE PUCES ----- */

  /* texte noir partout pour éviter le bleu par défaut */
  #site_menu, #site_menu *{ color:#000 !important; }

  /* logo du menu (50px, centré) */
  #site_menu .mnav-logo{ text-align:center !important; margin:0 0 12px !important; }
  #site_menu .mnav-logo img{
    width:50px !important;                          /* <<< LOGO MENU à 50px */
    height:auto !important; display:block !important;
    margin:0 auto !important;
  }

  /* suppression ABSOLUE des puces + indentations dans le menu */
  #site_menu ul, #site_menu ol,
  #site_menu .mnav ul, #site_menu .mnav ol{
    list-style:none !important; margin:0 !important; padding:0 !important;
  }
  #site_menu li{
    list-style:none !important; margin:0 !important; padding-left:0 !important;
  }
  #site_menu li::marker,           /* puces natives */
  #site_menu li::before,           /* puces ajoutées par thème */
  #site_menu li::after{
    content:none !important;
  }
}


/* ==============================
   MOBILE FIX — bullets off + logos plus petits
   ============================== */
@media (max-width:768px){

  /* ----- 0) Espace sous la barre ----- */
  #nav{ position:relative; min-height:40px; }
  .page_container .content{ padding-top:50px !important; }

  /* ----- 1) Logo du header : centré & PETIT ----- */
  /* on ne garde que le 1er <li> (logo) côté gauche et on le centre */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:26px !important;   /* <<< encore plus petit */
    height:auto !important; max-width:none !important; transform:none !important;
  }

  /* ----- 2) Logo du MENU mobile (overlay) : ~50% ----- */
  #site_menu .mnav-logo{ text-align:center !important; margin:0 0 12px !important; }
  #site_menu .mnav-logo img{
    width:10px !important;   /* ~50% d’avant */
    height:auto !important; display:block !important; margin:0 auto !important;
  }

  /* ----- 3) Logos “tampon” insérés dans la PAGE : plus petits aussi ----- */
  /* cible les images dont l'URL contient "logo" ou "tampon" */
  .page_container .content img[src*="logo"],
  .page_container .content img[src*="tampon"]{
    width:96px !important;
    height:auto !important;
    margin-left:auto !important; margin-right:auto !important;
    display:block !important;
  }

  /* ----- 4) SUPPRESSION ABSOLUE DES PUCES ----- */
  /* dans le contenu des pages */
  .page_container .content ul,
  .page_container .content ol{
    list-style:none !important;
    margin-left:0 !important; padding-left:0 !important;
  }
  .page_container .content li{
    list-style-type:none !important;
    margin-left:0 !important; padding-left:0 !important;
  }
  .page_container .content li::marker,
  .page_container .content li::before,
  .page_container .content li::after{
    content:none !important;
  }

  /* et dans le menu mobile (au cas où) */
  #site_menu ul, #site_menu ol,
  #site_menu .mnav ul, #site_menu .mnav ol{
    list-style:none !important; margin:0 !important; padding:0 !important;
  }
  #site_menu li{
    list-style-type:none !important; margin:0 !important; padding-left:0 !important;
  }
  #site_menu li::marker, #site_menu li::before, #site_menu li::after{
    content:none !important;
  }
}


/* ==============================
   MOBILE — logo plus petit & pas de flèches
   ============================== */
@media (max-width:768px){

  /* Logo du header réduit à 40% de la taille actuelle (~ -60%) */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img {
    width: 22px !important;   /* ajuste si besoin (avant c’était 56px → 22px ≈ -60%) */
    height: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  /* Logo du menu mobile (overlay) réduit à 40% aussi */
  #site_menu .mnav-logo img {
    width: 24px !important;
    height: auto !important;
  }
}

/* ==============================
   SUPPRESSION des petites flèches ↗ →
   ============================== */
a[target="_blank"]::after,
a.external::after,
a[href*="about"]::after,
a[href*="contact"]::after {
  content: none !important;
  display: none !important;
}


/* ================================
   MOBILE (≤768px) — fixes rapides
   ================================ */

/* 1) Logo HEADER : -60% et centré, aligné avec le + */
@media (max-width:768px){
  /* garde uniquement le 1er <li> (logo) côté gauche et centre-le */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }

  /* taille logo header ≈ -60% (ex : 56px → 22px) */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:22px !important;
    height:auto !important;
    max-width:none !important;
    transform:none !important;
  }

  /* bouton “+” visible et aligné */
  #site_menu_button{
    position:fixed !important;
    top:12px !important; right:12px !important;
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:28px !important; z-index:10001 !important;
  }
  #site_menu_button svg{ width:28px !important; height:28px !important; }

  /* petit espace sous la barre pour décoller le titre/contenu */
  .page_container .content{ padding-top:56px !important; }
}

/* 2) Logo dans le MENU mobile (overlay) : moitié plus petit (~50px max) */
@media (max-width:768px){
  #site_menu .mnav-logo img{
    width:50px !important;   /* ajuste si tu veux encore plus petit */
    height:auto !important;
    display:block !important;
    margin:0 auto 10px !important;
  }
}

/* 3) Logo “tampon” en haut des PAGES (contenu) : réduis-le fortement sans toucher aux œuvres */
@media (max-width:768px){
  /* cible le PREMIER visuel du contenu (ton logo est tout en haut) */
  .page_container .content > img:first-of-type{
    max-width:140px !important;   /* ≈ très petit sur mobile */
    width:40vw !important;
    height:auto !important;
    display:block !important;
    margin:0 auto 12px !important;
  }
}

/* 4) SUPPRIMER TOUTES LES PUCES (contenu + menu mobile) */
@media (max-width:768px){
  /* contenu des pages */
  .page_container .content ul,
  .page_container .content ol{
    list-style:none !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }
  .page_container .content li{
    list-style-type:none !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }
  .page_container .content li::marker,
  .page_container .content li::before,
  .page_container .content li::after{ content:none !important; }

  /* menu mobile (overlay) */
  #site_menu ul, #site_menu ol,
  #site_menu .mnav ul, #site_menu .mnav ol{
    list-style:none !important; margin:0 !important; padding:0 !important;
  }
  #site_menu li{ list-style:none !important; margin:0 !important; padding-left:0 !important; }
  #site_menu li::marker, #site_menu li::before, #site_menu li::after{ content:none !important; }
}

/* 5) Enlever les petites flèches ↗ / → ajoutées aux liens (about, contact, etc.) */
a[target="_blank"]::after,
a.external::after,
.external-link-icon,
.link-icon,
.topbar-right a::after{            /* tue tout ajout décoratif dans la topbar */
  content:none !important;
  display:none !important;
}


/* ================================
   MOBILE (≤768px) — fix: logos + puces + flèches
   ================================ */
@media (max-width:768px){

  /* 0) ENLEVER TOUTES LES PUCES (contenu + menu) */
  ul, ol{ list-style:none !important; margin:0 !important; padding:0 !important; }
  li{ list-style-type:none !important; margin:0 !important; padding-left:0 !important; }
  li::marker, li::before, li::after{ content:none !important; }

  /* 1) HEADER — logo centré et -60%, aligné avec le “+” */
  #nav{ position:relative; min-height:56px; }
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:22px !important;             /* ≈ -60% */
    height:auto !important; max-width:none !important;
  }
  #site_menu_button{
    position:fixed !important; right:12px !important; top:12px !important;
    width:44px !important; height:44px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    font-size:28px !important; z-index:10001 !important;
  }
  #site_menu_button svg{ width:28px !important; height:28px !important; }

  /* 2) ESPACE sous la barre pour décoller le titre */
  .page_container .content{ padding-top:56px !important; }

  /* 3) LOGO tout en haut des pages (première image du contenu) : petit */
  .page_container .content > img:first-of-type{
    max-width:140px !important; width:40vw !important;
    height:auto !important; display:block !important; margin:0 auto 12px !important;
  }

  /* 4) MENU MOBILE (overlay) — logo moitié plus petit */
  #site_menu img{ max-width:50px !important; height:auto !important; }

  /* 5) MASQUER les petites flèches décoratives */
  a[target="_blank"]::after,
  a.external::after,
  .topbar-right a::after,
  .page_container .content a::after{
    content:none !important; display:none !important;
  }
}

/* === MOBILE ≤768px — logo à 50% (menu + pages), pas de flèches === */
@media (max-width:768px){

  /* HEADER : garder le logo centré et cliquable, réduit à ~50% */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  /* si ton logo header faisait ~56px, 50% ≈ 28px */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:20px !important; height:auto !important; max-width:none !important;
  }
  /* s’assure que le logo est bien un lien cliquable */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link{
    display:inline-block !important; pointer-events:auto !important;
  }

  /* MENU OVERLAY : logo à 50% */
  #site_menu .mnav-logo{ text-align:center !important; margin:0 0 12px !important; }
  #site_menu .mnav-logo img{
    /* si l’ancien visuel faisait ~100px, on force 50px */
    width:50px !important; height:auto !important; display:block !important; margin:0 auto !important;
  }

  /* LOGO "tampon" inséré en haut des pages : réduit à 50% env. */
  .page_container .content > img:first-of-type,
  .page_container .content img[src*="logo"],
  .page_container .content img[src*="tampon"]{
    max-width:40px !important;      /* limite dure pour éviter l’énorme */
    width:40vw !important;           /* ≈ la moitié d’un logo plein écran */
    height:auto !important; display:block !important; margin:0 auto 12px !important;
  }
}

/* Masque les petites flèches ajoutées aux liens About/Contact (et externes) */
a[target="_blank"]::after,
a.external::after,
a[href*="about"]::after,
a[href*="contact"]::after{
  content:none !important; display:none !important;
}


/* ===========================
   PATCH — flèches OFF / espace / logo cliquable
   =========================== */

/* 1) Retirer toutes les flèches décoratives du menu + topbar */
#site_menu .mnav a::after,
#site_menu .mnav button::after,
#site_menu .mnav .link-icon,
#site_menu .mnav .external-link-icon,
#site_menu .mnav [class*="arrow"],
#site_menu .mnav a > svg,
#site_menu .mnav button > svg,
.topbar-right a::after,
a[target="_blank"]::after,
a.external::after{
  content:none !important;
  display:none !important;
}

/* 2) Moins d’espace sous le header sur mobile */
@media (max-width:768px){
  /* réduit l’espace ajouté par les règles précédentes */
  .page_container .content{
    padding-top:28px !important;   /* avant tu avais souvent ~56–64px */
  }
}

/* 3) Logo cliquable (ne jamais le “désactiver”) */
#nav > [grid-col]:first-child > ul > li:first-child a.image-link{
  display:inline-block !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* (rappel) logo menu mobile à ~50% si besoin */
@media (max-width:768px){
  #site_menu .mnav-logo img{ width:50px !important; height:auto !important; }
  /* si ton logo header doit rester petit */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:28px !important; height:auto !important; max-width:none !important;
  }
}



/* ============= FIX MOBILE — flèches OFF + logo cliquable ============= */
@media (max-width:768px){

  /* ceinture & bretelles si Cargo réinjecte des icônes */
  #nav .topbar-right a::after,
  #nav .topbar-right a svg{
    display:none !important;
    content:none !important;
  }

  /* 2) Logo au centre : visible et cliquable */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000; /* le + est à 10001 : les deux restent cliquables */
  }
  #nav > [grid-col]:first-child > ul > li:first-child a{
    display:inline-block !important;
    pointer-events:auto !important;   /* jamais désactivé */
    cursor:pointer !important;
  }
  /* taille du logo (ajuste si besoin) */
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:28px !important; height:auto !important; max-width:none !important;
  }

  /* 3) Réduire un peu l’espace sous la barre si trop grand */
  .page_container .content{ padding-top:34px !important; }
}

/* =========================
   1) MOBILE — cacher les 2 flèches de la topbar
   ========================= */
@media (max-width:768px){

  /* Au cas où ces flèches seraient des SVG ou spans : */
  #nav .topbar-right svg,
  #nav .topbar-right .link-icon,
  #nav .topbar-right .external-link-icon,
  #nav .topbar-right [class*="arrow"]{
    display:none !important;
  }
  /* On ne touche pas au bouton + */
  #site_menu_button{ display:flex !important; }
}

/* =========================
   2) Logo cliquable UNIQUEMENT quand le menu n'est PAS ouvert
   ========================= */

/* Par défaut : logo cliquable (sur pages) */
@media (max-width:768px){
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a{
    display:inline-block !important;
    pointer-events:auto !important;   /* ← clic ON */
    cursor:pointer !important;
  }
}



/* ===== FINAL PATCH (append-only) — mobile arrows OFF / small logo / click logic ===== */
@media (max-width:768px){


  /* 2) Logo centré, PETIT, et cliquable (sur les pages) */
  #nav > [grid-col]:first-child > ul{ display:block !important; }
  #nav > [grid-col]:first-child > ul > li{ display:none !important; }
  #nav > [grid-col]:first-child > ul > li:first-child{
    display:block !important;
    position:fixed; left:50%; top:12px; transform:translateX(-50%);
    z-index:10000;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a{ 
    display:inline-block !important; pointer-events:auto !important; cursor:pointer !important;
  }
  #nav > [grid-col]:first-child > ul > li:first-child a.image-link img{
    width:28px !important;   /* ← petite taille fiable */
    height:auto !important; max-width:none !important; transform:none !important;
  }

  /* 3) Un peu moins d’espace sous la barre */
  .page_container .content{ padding-top:36px !important; }
}

/* 4) Quand le MENU est ouvert, on désactive **uniquement** le clic du logo */
@media (max-width:768px){
  body.site_menu_open #nav > [grid-col]:first-child > ul > li:first-child a,
  #site_menu[aria-hidden="false"] ~ #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events:none !important;
  }
}

/* === PATCH : nav lisible sur petits desktops === */
@media (min-width:769px) and (max-width:1440px){

  /* liens du menu */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux {
    font-size: 1.5rem !important;   /* un cran plus grand */
    padding: 6px 8px !important;     /* réduit pour éviter 2 lignes */
    white-space: nowrap !important;  /* force 1 ligne */
  }

  /* ajuster l’espacement entre les liens */
  #nav > div > ul {
    gap: 0.75rem !important;         /* avant ≈0.5 → + respiration */
  }
}


/* === PATCH : rétablir soulignement hover/active === */
@media (min-width:769px) and (max-width:1440px){

  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux {
    position: relative !important;   /* nécessaire pour le ::after */
  }

  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after {
    left: 10% !important;   /* réduis pour compenser le padding */
    right: 10% !important;
    bottom: -4px !important;
  }
}

/* ==== FIX NAV (desktop) — rétablir le soulignement, garder les flèches masquées seulement dans #site_menu ==== */

/* 1) RÉTABLIR le soulignement des liens de la nav (dont Shop / About) */
@media (min-width:769px){
  /* s'assure que les ancres sont le conteneur de leur ::after */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position: relative !important;
  }

  /* underline par pseudo-élément (réactive même si un content:none !important existe plus haut) */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 12% !important;
    right: 12% !important;
    bottom: -6px !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }

  /* états hover/actif rétablis */
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav .topbar-right .nav-aux:hover::after,
  #nav .topbar-right .nav-aux.active::after,
  #nav .topbar-right .nav-aux[aria-current="page"]::after{
    transform: scaleX(1);
  }

  /* annule les anciennes règles globales qui tuaient ::after sur About/Contact */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content: "" !important;
    display: block !important;
  }
}

/* 2) Conserver la suppression des flèches UNIQUEMENT dans l’overlay menu */
#site_menu .mnav a::after,
#site_menu a::after,
#site_menu .mnav .link-icon,
#site_menu .mnav .external-link-icon,
#site_menu .mnav a > svg{
  content: none !important;
  display: none !important;
}


/* ==== FIX NAV (desktop) — rétablir le soulignement, garder les flèches masquées seulement dans #site_menu ==== */

/* 1) RÉTABLIR le soulignement des liens de la nav (dont Shop / About) */
@media (min-width:769px){
  /* s'assure que les ancres sont le conteneur de leur ::after */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position: relative !important;
  }

  /* underline par pseudo-élément (réactive même si un content:none !important existe plus haut) */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 12% !important;
    right: 12% !important;
    bottom: -6px !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }

  /* états hover/actif rétablis */
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav .topbar-right .nav-aux:hover::after,
  #nav .topbar-right .nav-aux.active::after,
  #nav .topbar-right .nav-aux[aria-current="page"]::after{
    transform: scaleX(1);
  }

  /* annule les anciennes règles globales qui tuaient ::after sur About/Contact */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content: "" !important;
    display: block !important;
  }
}

/* 2) Conserver la suppression des flèches UNIQUEMENT dans l’overlay menu */
#site_menu .mnav a::after,
#site_menu a::after,
#site_menu .mnav .link-icon,
#site_menu .mnav .external-link-icon,
#site_menu .mnav a > svg{
  content: none !important;
  display: none !important;
}


/* === FIX NAV — underline plein mot + taille lisible sur petits desktops === */

/* 1) Desktop & petits desktops : underline sur toute la largeur du lien */
@media (min-width:769px){
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position:relative !important;
  }

  /* réactive et étire l'underline sur 100% du lien */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;               /* plein mot */
    right:0 !important;              /* plein mot */
    bottom:-6px !important;
    height:1px !important;
    background:currentColor !important;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
    display:block !important;
  }
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav .topbar-right .nav-aux:hover::after,
  #nav .topbar-right .nav-aux.active::after,
  #nav .topbar-right .nav-aux[aria-current="page"]::after{
    transform:scaleX(1);
  }

  /* annule les règles globales qui cassaient l'underline d'About/Contact */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content:"" !important;
    display:block !important;
  }
}

/* 2) Petits desktops : texte un peu plus grand, padding réduit, 1 seule ligne */
@media (min-width:769px) and (max-width:1440px){
  #nav > div > ul{
    gap:0.6rem !important;                    /* un peu d’air sans étaler */
  }
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    font-size:1.5rem !important;             /* + lisible */
    padding:4px 8px !important;               /* réduit pour éviter 2 lignes */
    line-height:1.15 !important;
    white-space:nowrap !important;            /* force 1 ligne */
  }
}


/* === PATCH : légendes plus grandes sur petits desktops === */
@media (min-width:769px) and (max-width:1440px){
  .gallery_image_caption{
    font-size: 0.95rem !important;   /* avant ~0.8rem */
    line-height: 1.35 !important;    /* un peu plus d'air */
  }

  /* si certaines légendes sont en <figcaption> / .caption, on les couvre aussi */
  figcaption,
  .caption,
  .image-caption,
  .gallery_caption{
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
  }
}

/* === OVERLAY BLANC 90% AU CLIC SUR IMAGE — sans :has() === */

/* 1) CAS PRINCIPAL : images cliquables (dans un <a><img>…) 
      → on met un overlay plein écran via le lien qui devient :active */
a:active::before,
.image-link:active::before,
a.image-link:active::before,
.gallery a:active::before,
.project a:active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.9);   /* blanc 90% */
  z-index: 9998;                      /* sous ton menu mobile (9999+) */
  pointer-events: none;               /* ne bloque pas le clic */
}

/* 2) FALLBACK : images non-liées (rare) → halo géant autour de l’image
      (utile si l’image n’est pas dans un <a>) */
img:active {
  position: relative;                 /* crée un contexte d’empilement */
  z-index: 9998;
  box-shadow: 0 0 0 100vmax rgba(255,255,255,.9);  /* “overlay” géant */
}

/* 3) Si le menu mobile est ouvert, on ne veut pas d’overlay au clic */
body.site_menu_open a:active::before,
body.site_menu_open img:active {
  /* désactivation “douce” sans :has() */
  box-shadow: none !important;
  content: none !important;
}

/* 4) Compat : si tu utilises une lightbox (Fancybox/Photoswipe/Magnific), 
      on force aussi son backdrop à 90% blanc */
.mfp-bg,
.pswp__bg,
.fancybox__backdrop,
.fancybox__overlay,
.lightbox,
.lightbox-overlay,
#lightbox {
  background: rgba(255,255,255,.9) !important;
}



/* ===== PATCH FINAL (append-only) — underline nav + logo cliquable mobile ===== */

/* 1) NAV (desktop) — underline sur toute la largeur du lien + états actifs/parents */
@media (min-width:769px){
  /* s'assurer que le ::after se positionne sur le lien */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position: relative !important;
  }

  /* réactive et étire l’underline (écrase les content:none globaux) */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;               /* plein mot */
    right: 0 !important;              /* plein mot */
    bottom: -6px !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }

  /* hover / lien actif / parent actif / aria-current */
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav > div > ul > li.is-parent-active > a::after,
  #nav > div > ul > li > a[aria-current="page"]::after,
  #nav > div > ul > li > a[aria-current="true"]::after,
  #nav .topbar-right .nav-aux:hover::after,
  #nav .topbar-right .nav-aux.active::after,
  #nav .topbar-right .nav-aux[aria-current="page"]::after{
    transform: scaleX(1) !important;
  }

  /* annule les règles globales "anti-flèches" qui tuaient About/Contact dans la nav */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content: "" !important;
    display: block !important;
  }
}

/* 2) Logo du header — cliquable UNIQUEMENT sur mobile */
@media (max-width:768px){
  #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events: auto !important;   /* clic ON sur mobile */
    cursor: pointer !important;
  }
}
@media (min-width:769px){
  #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events: none !important;   /* clic OFF sur ordi */
    cursor: default !important;
  }
}


/* ===== PATCH MINIMAL — underline fiable + logo cliquable mobile ===== */

/* 1) NAV (desktop ≥769px) — underline plein mot + états actifs fiables */
@media (min-width:769px){
  /* le lien porte le ::after */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position:relative !important;
  }

  /* réactive un ::after sur TOUT le mot (écrase les content:none globaux) */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important; right:0 !important;   /* plein mot */
    bottom:-6px !important;
    height:1px !important;
    background:currentColor !important;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
    display:block !important;
  }

  /* afficher l'underline dans tous les cas "actifs" connus par Cargo */
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav > div > ul > li.current > a::after,
  #nav > div > ul > li.is-active > a::after,
  #nav > div > ul > li.parent-active > a::after,
  #nav > div > ul > li.is-parent-active > a::after,
  #nav > div > ul > li.has-active-child > a::after,
  #nav > div > ul > li.is-ancestor-active > a::after,
  #nav > div > ul > li > a[aria-current]::after,
  #nav > div > ul > li > a[aria-current="page"]::after,
  #nav > div > ul > li > a[aria-current="true"]::after{
    transform:scaleX(1) !important;
  }

  /* si des règles globales ont tué ::after pour About/Contact, on réactive dans la NAV uniquement */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content:"" !important;
    display:block !important;
  }
}

/* 2) Logo header cliquable UNIQUEMENT sur mobile */
@media (max-width:768px){
  html body #nav > [grid-col]:first-child > ul > li:first-child a.image-link{
    pointer-events:auto !important;   /* clic ON sur mobile */
    cursor:pointer !important;
  }
}
@media (min-width:769px){
  html body #nav > [grid-col]:first-child > ul > li:first-child a.image-link{
    pointer-events:none !important;   /* clic OFF sur ordi */
    cursor:default !important;
  }
}


/* ===== PATCH MINIMAL — underline fiable (nav) + logo cliquable mobile ===== */

/* 1) NAV (desktop ≥769px) — réactiver/étirer l'underline et couvrir TOUS les états "actifs" */
@media (min-width:769px){

  /* NAV: s'assurer que le ::after vit sur le lien et n'a pas été tué par des règles globales */
  #nav > div > ul > li > a,
  #nav .topbar-right .nav-aux{
    position: relative !important;
  }

  /* réinjecte un ::after utilisable DANS #nav uniquement (écrase les content:none globaux) */
  #nav > div > ul > li > a::after,
  #nav .topbar-right .nav-aux::after{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;                 /* plein mot */
    right: 0 !important;                /* plein mot */
    bottom: -6px !important;
    height: 1px !important;
    background: currentColor !important;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }

  /* états à souligner (hover + actif + PARENT actif + aria-current) */
  #nav > div > ul > li:hover > a::after,
  #nav > div > ul > li.active > a::after,
  #nav > div > ul > li.is-parent-active > a::after,
  #nav > div > ul > li.current > a::after,
  #nav > div > ul > li.current_page_item > a::after,
  #nav > div > ul > li[class*="current"] > a::after,
  #nav > div > ul > li[class*="active"] > a::after,
  #nav > div > ul > li > a[aria-current]::after,
  #nav > div > ul > li > a[aria-current="page"]::after,
  #nav > div > ul > li > a[aria-current="true"]::after{
    transform: scaleX(1) !important;
  }

  /* IMPORTANT : annule les règles globales "anti-flèches" pour About/Contact DANS #nav seulement */
  #nav a[href*="about"]::after,
  #nav a[href*="contact"]::after{
    content: "" !important;
    display: block !important;
  }
}

/* 2) Logo du header — cliquable UNIQUEMENT sur mobile (et désactivé si menu ouvert) */
@media (max-width:768px){
  #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events: auto !important;   /* clic ON sur mobile */
    cursor: pointer !important;
  }
  /* option : quand le menu mobile est ouvert, on coupe le clic du logo */
  body.site_menu_open #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events: none !important;
  }
}
@media (min-width:769px){
  #nav > [grid-col]:first-child > ul > li:first-child a{
    pointer-events: none !important;   /* clic OFF sur ordi */
    cursor: default !important;
  }
}



/* Conteneur général */
.about {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px);
}


#nav > div > ul > li.is-parent-active > a::after {
  transform: scaleX(1);
}


#nav li.ca-force-open > .submenu {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
#nav > div > ul > li.is-parent-active > a::after {
  transform: scaleX(1);
}


/* ===== NAV: underline propre et exclusif ===== */
#nav > div[grid-col] > ul > li > a{
  position:relative; text-decoration:none;
}
#nav > div[grid-col] > ul > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
#nav > div[grid-col] > ul > li[data-parent-active="true"] > a::after,
#nav > div[grid-col] > ul > li > a.is-current::after{
  transform:scaleX(1) !important;
}
/* jamais d’underline pour logo + nom */
#nav a[data-no-underline]::after{ content:none !important; display:none !important; }

/* ===== Sous-menus: FERMÉS par défaut ===== */
#nav li > .submenu{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  position:absolute; top:calc(100% + 6px); left:50%; transform:translate(-50%,4px);
  background:#fff; padding:6px 0; white-space:nowrap; z-index:5000; min-width:max-content;
  transition:opacity .15s ease, transform .15s ease;
}

/* Desktop : ouvre uniquement quand le parent est "hoveré" (avec une petite persistance JS) */
@media (hover:hover) and (pointer:fine){
  #nav > div[grid-col] > ul > li[data-hover="1"] > .submenu,
  #nav > div[grid-col] > ul > li:hover > .submenu{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate(-50%,0) !important;
  }
}

/* Sécurité : aucune classe "active/current/open" héritée ne doit forcer l'ouverture par défaut */
#nav li.active > .submenu,
#nav li.is-parent-active > .submenu,
#nav li.open > .submenu,
#nav li.has-touch-open > .submenu{ /* on n’ouvre pas avec ces classes */
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}


/* === HARD SCOPE NAV FIX — écrase les règles précédentes en douceur === */

/* 0) Jamais d’underline pour logo + nom (même si un bloc plus haut le remet) */
#nav a[data-no-underline]::after { content:none !important; display:none !important; }

/* 1) Underline exclusif : uniquement le gagnant JS
   - on neutralise toute autre logique "active/current" héritée plus haut */
#nav > div[grid-col] > ul > li > a{
  position:relative !important;
}
#nav > div[grid-col] > ul > li > a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important; bottom:-6px !important; height:1px !important;
  background:currentColor !important;
  transform:scaleX(0) !important; transform-origin:left !important;
  transition:transform .25s ease !important;
}

/* ← le SEUL état qui doit afficher le soulignement */
#nav > div[grid-col] > ul > li[data-parent-active="true"] > a::after,
#nav > div[grid-col] > ul > li > a.is-current::after{
  transform:scaleX(1) !important;
}

/* neutralise tous les autres états "actifs" possibles qui traînent plus haut */
#nav > div[grid-col] > ul > li.active > a::after,
#nav > div[grid-col] > ul > li.current > a::after,
#nav > div[grid-col] > ul > li.is-active > a::after,
#nav > div[grid-col] > ul > li.parent-active > a::after,
#nav > div[grid-col] > ul > li.is-parent-active > a::after,
#nav > div[grid-col] > ul > li.has-active-child > a::after,
#nav > div[grid-col] > ul > li.is-ancestor-active > a::after,
#nav > div[grid-col] > ul > li > a[aria-current]::after{
  transform:scaleX(0) !important;
}

/* 2) Sous-menus du header : fermés par défaut, ouverts UNIQUEMENT si [data-hover="1"] (posé par JS) */
#nav li > .submenu{
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  position:absolute !important; top:calc(100% + 6px) !important; left:50% !important; transform:translate(-50%,4px) !important;
  background:#fff !important; padding:6px 0 !important; white-space:nowrap !important; z-index:5000 !important;
  transition:opacity .15s ease, transform .15s ease !important;
}
@media (hover:hover) and (pointer:fine){
  #nav > div[grid-col] > ul > li[data-hover="1"] > .submenu{
    display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transform:translate(-50%,0) !important;
  }
}
/* tue toute ouverture héritée par d’anciennes classes */
#nav li.active > .submenu,
#nav li.is-parent-active > .submenu,
#nav li.open > .submenu,
#nav li.has-touch-open > .submenu{
  display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* 3) Topbar (Shop / About) : underline uniquement au vrai actif */
#nav .topbar-right .nav-aux{ position:relative !important; }
#nav .topbar-right .nav-aux::after{
  content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:-6px !important; height:1px !important;
  background:currentColor !important; transform:scaleX(0) !important; transform-origin:left !important; transition:transform .25s ease !important;
}
#nav .topbar-right .nav-aux[aria-current="page"]::after,
#nav .topbar-right .nav-aux.active::after{ transform:scaleX(1) !important; }


/* === About: clients & editorial en 3 colonnes, sans puces === */
.about-list.clients{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .25rem 1rem;              /* espace vertical / horizontal */
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-list.clients li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* retire toute puce native/ajoutée par le thème */
.about-list.clients li::marker{ content: none !important; }
.about-list.clients li::before,
.about-list.clients li::after{ content: none !important; }

/* responsive : 2 colonnes puis 1 colonne si étroit */
@media (max-width: 900px){
  .about-list.clients{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px){
  .about-list.clients{ grid-template-columns: 1fr !important; }
}




/* === About : toutes les listes sans puces === */
.about-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-list li {
  list-style: none !important;
  margin: 0 0 .35em 0 !important; /* petit espacement entre lignes */
  padding: 0 !important;
}

.about-list li::marker { content: none !important; }
.about-list li::before,
.about-list li::after { content: none !important; }

/* clients + editorial : grille 3 colonnes */
.about-list.clients {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .25rem 1rem;  /* vertical / horizontal spacing */
}

@media (max-width: 900px){
  .about-list.clients { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px){
  .about-list.clients { grid-template-columns: 1fr !important; }
}

/* === OVERRIDE LISIBILITÉ — Mobile + Petits écrans === */

/* Mobiles ≤768px */
@media (max-width: 768px){

  /* Paragraphes About */
  [data-predefined-style="true"] bodycopy,
  .about p {
    font-size: 2rem !important;       /* ≈18px */
    line-height: 1.55 !important;
  }

  /* Titres About */
  .about h1 {
    font-size: 2rem !important;       /* ≈21–22px */
    line-height: 1.3 !important;
  }

  /* Textes d’intro projets */
  .project-intro,
  .project-intro p,
  .project-description,
  .project-description p,
  .project_text,
  .project_text p,
  .gallery_text,
  .gallery_text p,
  .project-copy,
  .project-copy p {
    font-size: 2rem !important;       /* ≈18px */
    line-height: 1.55 !important;
  }

  /* Légendes */
  .gallery_image_caption,
  figcaption,
  .caption,
  .image-caption,
  .gallery_caption {
    font-size: 1rem !important;       /* ≈16px */
    line-height: 1.45 !important;
  }
}


/* === Etching : pleine largeur ============ */
body[data-page-path^="/etching"] .container_width,
body[class*="etching"] .container_width{
  width:100vw !important;
}

body[data-page-path^="/etching"] .container,
body[class*="etching"] .container{
  max-width:100vw !important;
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* (optionnel) si tu veux aussi enlever les marges latérales du contenu */
body[data-page-path^="/etching"] .content_padding{
  padding-left:0 !important;
  padding-right:0 !important;
}



/* Remet 100% de largeur aux pages images (etching/collections/editorial/portraits) */
.gallery text-limit,
.project text-limit,
.grid_gallery text-limit,
.page_container .content text-limit{
  max-width:none !important;
  width:100% !important;
  display:block !important;
}

/* Si tu veux garder About en largeur limitée : (adapte la classe/slug si besoin) */
body.about-page text-limit{
  max-width:66rem !important;
  margin:0 auto !important;
  display:block !important;
}



/* ===== STYLE GLOBAL POUR <small> ===== */
small {
  display: block;           /* chaque <small> sur sa propre ligne */
  margin: 0;
  line-height: 1rem;         /* interlignage réduit */
  font-size: 0.9rem;        /* taille lisible mais discrète */
  color: #444;              /* gris par défaut */
}

/* Si plusieurs <small> se suivent, on espace légèrement */
small + small {
  margin-top: 0.2em;
}

/* Première phrase (souvent en anglais) → noir */
small:first-of-type {
  color: #000;
}

/* Deuxième phrase (souvent en français) → gris plus clair */
small:nth-of-type(2) {
  color: #919191;
}





/* === ESPACEMENT NAV/LOGO EN HAUT === */
#nav {
  padding-top: 1px !important;  /* espace interne haut */
  margin-top: 0 !important;      /* pas de marge supplémentaire */
}

/* === LOGO === */
#nav li.logo a.image-link img {
  display: block !important;
  height: 40px !important;     /* fixe la hauteur */
  width: auto !important;      /* largeur auto → garde le ratio */
  max-height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}


/* === LOGO dans la navigation === */
#nav li:first-child img {
  display: block !important;
  height: 40px !important;   /* fixe la hauteur */
  width: auto !important;    /* largeur auto pour garder les proportions */
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* mobile : logo plus petit */
@media (max-width: 768px) {
  #nav li:first-child img {
    height: 48px !important;
  }
}

/* === ESPACE en haut === */
#nav {
  padding-top: 10px !important;
    
}

/* Ajoute de l'espace entre la nav et le contenu */
#nav {
}

/* On peut aussi cibler les titres principaux */
h1, .project-title, .site-intro {
  margin-top: 24px !important;     /* décale un peu le titre */
}


/* Réduction sur mobile */
@media (max-width: 768px) {
  #nav {
    margin-bottom: -50px !important; /* beaucoup moins d'espace */
  }
}

/* Barre de navigation avec fond blanc qui couvre toute sa hauteur */
#nav {
  background: #fff !important;   /* fond blanc */
  display: flex !important;      /* s’assure que les enfants s’alignent correctement */
  align-items: center !important;/* centre verticalement logo + liens */
  padding: 0px 20px !important; /* espace interne haut/bas + côtés */
  position: relative;            /* garde le flux normal */
  z-index: 1000;                 /* passe au-dessus du contenu */
}