/*
Theme Name: Les Mouches
Description: Thème portfolio minimaliste sur mesure pour Les Mouches Graphic Design.
Version: 3.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: les-mouches
*/

@font-face{
  font-family:"Google Sans Flex";
  src:url("assets/fonts/google-sans-flex-wght.woff2") format("woff2");
  font-weight:1 1000;
  font-style:normal;
  font-display:swap;
}

/* Angle animable, pour le survol « dessiné » des flèches (balayage circulaire type cadran) */
/* ---------- Réglages (modifiables ici) ---------- */
:root{
  --green:#00ff00;
  --pink:#ff00ff;        /* couleur du survol (cercle + coup de crayon) */
  --bg:#f1f1f1;          /* fond du site ET du bandeau menu desktop (blanc cassé) */
  --white:#fff;          /* fond du carré burger et du panneau de menu (tablette/mobile) */
  --black:#000;
  --gut:24px;
  --rule:3px;            /* épaisseur des filets */
  --margin:8.333vw;      /* 120 px à 1440 px */
  --cols:4;
  --header-h:77px;
  --burger:100px;        /* carré du bouton burger */
  --burger-bar-w:40px;   /* largeur des tirets */
  --burger-bar-h:3px;    /* épaisseur des tirets */
  --btn:40px;            /* boutons flèches (desktop et tablette) */
  --title-h:40px;        /* bloc titre de la page projet, fixe sur toutes les tailles */
  --logo-w:282px;        /* logo, fixe sur toutes les tailles */
  --fs-nav:14px;         /* menu desktop */
  --fs-menu:24px;        /* menu burger tablette et mobile */
  --fs-title:20px;       /* titre de projet */
  --fs-thumb:10px;       /* titre de vignette */
  --fs-footer:14px;      /* texte du pied de page */
  --fs-text:15px;        /* texte page info */
  --head-min:280px;      /* hauteur du bloc logo / titre avant les filets */
  --thumb-blur:24px;     /* flou des vignettes au repos (0 = net en permanence) */
}
@media (max-width:1023px){
  :root{--cols:2;--margin:32px;--head-min:380px}
}
@media (max-width:767px){
  :root{--cols:1;--margin:20px;--head-min:390px;--btn:60px} /* boutons flèches inchangés sur mobile */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--black);
  font-family:"Google Sans Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;line-height:1.3;-webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:1px solid var(--green);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:calc(100% - 2 * var(--margin));max-width:1200px;margin-inline:auto}
.cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gut)}

/* ---------- Menu desktop ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
  background:var(--bg);color:var(--green);font-size:var(--fs-nav);
}
body.admin-bar .site-header{top:32px}
.site-header .wrap{height:100%}
.site-header .cols{height:100%;align-items:center}
.brand{font-weight:700}
.nav-link{position:relative;isolation:isolate;justify-self:start;padding:1px 3px;margin-left:-3px;transition:color .25s ease .05s}
.nav-link.is-current{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nav-pair{display:flex;gap:14px;align-items:center}
.nav-email{justify-self:end;text-align:right}
/* Remplissage vert, déployé depuis le coin haut-gauche (même principe que l'ouverture du menu mobile) */
.nav-link::before{
  content:"";position:absolute;inset:0;background:var(--green);
  clip-path:circle(0% at 0 0);z-index:-1;pointer-events:none;
  transition:clip-path .45s cubic-bezier(.65,0,.35,1);
}
.nav-link:active::before,.nav-link:focus-visible::before{clip-path:circle(150% at 0 0)}
.nav-link:active,.nav-link:focus-visible{color:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover::before{clip-path:circle(150% at 0 0)}
  .nav-link:hover{color:var(--bg)}
}

/* ---------- Burger + panneau (tablette et mobile) ---------- */
.burger,.menu-panel{display:none}

/* ---------- En-tête de page (logo ou titre) + filets ---------- */
.page-head{
  display:flex;align-items:flex-end;min-height:var(--head-min);
  padding-top:calc(var(--header-h) + 40px);padding-bottom:var(--gut);
}
/* Pages projet : pas de logo au-dessus, donc 100px de moins qu'ailleurs */
.page-head--tight{padding-top:calc(var(--header-h) + 70px);min-height:0} /* 70px sous le bandeau menu (desktop) ; min-height:0 annule la réserve de hauteur du logo, sinon le titre est repoussé plus bas */
.page-head > *{width:100%}
.logo{width:var(--logo-w);margin-bottom:var(--gut)}
.logo img,.logo svg{width:100%;height:auto;display:block}
.rules{margin-bottom:var(--gut)}
.rules span{border-top:var(--rule) solid var(--green)}
.rules span:nth-child(n+3){display:none}
@media (min-width:1024px){.rules span:nth-child(n+3){display:block}}
@media (max-width:767px){.rules span:nth-child(n+2){display:none}}

/* ---------- Grille d'accueil ---------- */
.grid{row-gap:var(--gut)}
.vignette{position:relative}
.vignette a{display:block}
.thumb{position:relative;aspect-ratio:1/1;background:var(--bg);overflow:hidden}
/* Deux images superposées (floue fournie + nette), ou une seule avec flou automatique si aucune n'a été choisie */
.thumb-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease,filter .35s ease;
}
.thumb-img--blur{opacity:1}
.thumb-img--sharp{opacity:0}
.thumb-img--auto-blur{opacity:1;filter:blur(var(--thumb-blur))} /* image unique, flou automatique par le code */
/* Le cadre suit exactement la taille de l'image : même transform, mêmes dimensions que .thumb */
.frame{
  position:absolute;inset:0;border:1px solid var(--green);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%2300ff00' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
.vignette-title{
  display:block;font-size:var(--fs-thumb);font-weight:500;text-transform:uppercase;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Souris : le rétrécissement de l'image (centré, -20%) libère une bande tout autour ;
   le titre occupe la bande basse, à l'intérieur du carré (la vignette garde sa hauteur fixe) */
@media (hover:hover) and (pointer:fine){
  .vignette-title{
    position:absolute;left:0;right:0;bottom:0;height:10%;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .25s ease;
  }
  .vignette a:hover .thumb-img,.vignette a:focus-visible .thumb-img,
  .vignette a:hover .frame,.vignette a:focus-visible .frame{transform:scale(.8)}
  .vignette a:hover .thumb-img--sharp,.vignette a:focus-visible .thumb-img--sharp{opacity:1}
  .vignette a:hover .thumb-img--blur,.vignette a:focus-visible .thumb-img--blur{opacity:0}
  .vignette a:hover .thumb-img--auto-blur,.vignette a:focus-visible .thumb-img--auto-blur{filter:blur(0)}
  .vignette a:hover .frame,.vignette a:focus-visible .frame,
  .vignette a:hover .vignette-title,.vignette a:focus-visible .vignette-title{opacity:1}
}
/* Tactile : titre toujours visible, cadre vert et image nette au toucher */
@media (hover:none),(pointer:coarse){
  .vignette-title{margin-top:8px}
  .vignette a.is-pressed .thumb-img,.vignette a:active .thumb-img,
  .vignette a.is-pressed .frame,.vignette a:active .frame{transform:scale(.8)}
  .vignette a.is-pressed .thumb-img--sharp,.vignette a:active .thumb-img--sharp{opacity:1}
  .vignette a.is-pressed .thumb-img--blur,.vignette a:active .thumb-img--blur{opacity:0}
  .vignette a.is-pressed .thumb-img--auto-blur,.vignette a:active .thumb-img--auto-blur{filter:blur(0)}
  .vignette a.is-pressed .frame,.vignette a:active .frame{opacity:1}
}

/* ---------- Page projet ---------- */
.project-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gut)}
.project-title{
  flex:1 1 auto;min-width:0;background:var(--green);color:var(--white);
  font-size:var(--fs-title);font-weight:700;text-transform:uppercase;line-height:1.1;
  height:var(--title-h);overflow:hidden;padding:8px 12px;display:flex;align-items:center;margin:0;
}
.arrows{flex:0 0 auto;display:flex;gap:var(--gut)}
.arrow{
  position:relative;isolation:isolate;
  width:var(--btn);height:var(--btn);display:block;color:var(--green);
  border:1px solid var(--green);transition:color .25s ease .05s;
}
.floating-nav .arrow{background:var(--bg)} /* fond de repos, lisible sur les images */
.arrow svg{position:relative;display:block;width:100%;height:100%}
/* Remplissage vert, déployé depuis le coin haut-gauche (même principe que l'ouverture du menu mobile) */
.arrow::before{
  content:"";position:absolute;inset:0;background:var(--green);
  clip-path:circle(0% at 0 0);z-index:-1;pointer-events:none;
  transition:clip-path .45s cubic-bezier(.65,0,.35,1);
}
/* Cercle rose « dessiné à la main » : un vrai tracé SVG (pas une image), qui se dessine
   au survol comme un stylo qui trace, grâce à stroke-dasharray/dashoffset. Longueur du
   tracé fournie par Les Mouches : 358,34 (arrondie à 359 pour fermer proprement le trait). */
.arrow__pink{
  position:absolute;left:50%;top:50%;width:155%;aspect-ratio:71.1/57;
  transform:translate(-50%,-50%);overflow:visible;
  z-index:3;pointer-events:none;
}
.arrow__pink svg{display:block;width:100%;height:100%;overflow:visible}
.arrow__pink .pink-trace{
  fill:none;stroke:var(--pink);stroke-linecap:round;stroke-width:var(--pink-stroke,2);
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset .5s ease;
}
.arrow:active::before,.arrow:focus-visible::before{clip-path:circle(150% at 0 0)}
.arrow:active .pink-trace,.arrow:focus-visible .pink-trace{stroke-dashoffset:0}
.arrow:active,.arrow:focus-visible{color:var(--white)}
@media (hover:hover){
  .arrow:hover::before{clip-path:circle(150% at 0 0)}
  .arrow:hover .pink-trace{stroke-dashoffset:0}
  .arrow:hover{color:var(--white)}
}
@media (max-width:767px){
  .project-head{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .arrows{order:-1;justify-content:flex-end}
  .project-title{order:0}
}

.entry-content > *{margin-block:0}
.entry-content > * + *{margin-top:var(--gut)}
.entry-content figure,.entry-content .wp-block-image{margin:0;max-width:none}
.entry-content img{width:100%;height:auto}
/* Marge de 24px aussi entre images qui ne seraient pas des blocs de premier niveau
   (ex. plusieurs images ajoutées dans un bloc Galerie plutôt qu'en blocs Image séparés) */
.entry-content img + img,
.entry-content figure + figure,
.entry-content .wp-block-image + .wp-block-image{margin-top:var(--gut)}
.entry-content .alignwide,.entry-content .alignfull,.entry-content .aligncenter{max-width:none;width:100%;margin-inline:0}
.entry-content figcaption{font-size:var(--fs-thumb);margin-top:6px}

/* Navigation flottante entre projets : masquée tant que le bloc titre du haut est visible.
   Alignée dans la même zone centrale de 1200 px que le reste du contenu (jamais collée au bord de l'écran). */
.floating-nav{
  position:fixed;left:0;right:0;bottom:24px;z-index:40;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.floating-nav.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.floating-nav__inner{display:flex;justify-content:flex-end;gap:var(--gut)}

/* ---------- Page info (texte) ---------- */
.text-page .entry-content{max-width:600px;font-size:var(--fs-text);line-height:1.5}
.text-page .entry-content > * + *{margin-top:1em}
.text-page .entry-content a{text-decoration:underline;text-underline-offset:3px}
.info-title{display:inline-flex;width:auto;max-width:100%}

/* ---------- Pied de page ---------- */
.site-footer{margin-top:var(--gut);padding-bottom:40px;color:var(--green);font-size:var(--fs-footer)}
.site-footer .line{border-top:1px solid var(--green);margin-bottom:8px}
.site-footer p{margin:0;text-align:right}

/* ---------- Tablette et mobile : burger ---------- */
@media (max-width:1023px){
  .site-header{display:none}
  .page-head{padding-top:130px}
  .page-head--tight{padding-top:calc(var(--burger) + 70px)} /* 70px sous le burger (tablette) */
  .burger{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:70;top:0;left:0;
    width:var(--burger);height:var(--burger);padding:0;border:0;background:var(--white);
    color:var(--green);cursor:pointer;
  }
  body.admin-bar .burger{top:32px} /* hauteur de la barre d'administration WordPress */
  /* 5 tirets de 40 x 3 px, répartis pour former un carré de 40 x 40 px */
  .burger .bars{position:relative;width:var(--burger-bar-w);height:var(--burger-bar-w)}
  .burger .bars span{
    position:absolute;left:0;width:var(--burger-bar-w);height:var(--burger-bar-h);background:currentColor;
    top:calc(var(--i) * (100% - var(--burger-bar-h)) / 4);
    transition:top .3s cubic-bezier(.6,0,.2,1),transform .3s cubic-bezier(.6,0,.2,1) .1s,opacity .2s;
    transform-origin:center;
  }
  .burger.is-open .bars span{top:50%;transform:translateY(-50%)}
  .burger.is-open .bars span:nth-child(1),
  .burger.is-open .bars span:nth-child(3),
  .burger.is-open .bars span:nth-child(5){opacity:0}
  .burger.is-open .bars span:nth-child(2){transform:translateY(-50%) rotate(45deg)}
  .burger.is-open .bars span:nth-child(4){transform:translateY(-50%) rotate(-45deg)}

  /* Le fond blanc se déploie depuis le burger pour révéler le menu */
  .menu-panel{
    display:block;position:fixed;inset:0;z-index:60;background:var(--white);color:var(--green);
    padding:140px var(--margin) 40px 88px;font-size:var(--fs-menu);line-height:1.25;
    clip-path:circle(0% at 50px 50px);pointer-events:none;
    transition:clip-path .55s cubic-bezier(.7,0,.3,1);
  }
  body.admin-bar .menu-panel{padding-top:172px;clip-path:circle(0% at 50px 82px)}
  .menu-panel.is-open{clip-path:circle(150% at 50px 50px);pointer-events:auto}
  body.admin-bar .menu-panel.is-open{clip-path:circle(150% at 50px 82px)}
  .menu-panel ul{list-style:none;margin:0;padding:0}
  .menu-panel li{margin-bottom:1.1em}
  .menu-panel .brand-block{margin-bottom:1.6em}
  .menu-panel .is-current{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
@media (max-width:767px){
  .menu-panel{padding-left:calc(var(--margin) + 12px)}
  /* Pages projet et info : 0px entre le burger et le premier élément (flèches, ou titre sur la page info) */
  .page-head--tight{padding-top:var(--burger)}
}
@media (prefers-reduced-motion:reduce){
  .menu-panel{transition:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* ---------- Curseur personnalisé (souris uniquement, ajouté par le script) ---------- */
html.has-cursor-dot,html.has-cursor-dot a,html.has-cursor-dot button{cursor:none}
.cursor-dot{position:fixed;top:0;left:0;width:0;height:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .2s ease}
html.has-cursor-dot .cursor-dot{opacity:1}
.cursor-dot__mark{position:absolute;left:-15px;top:-15px;width:30px;height:30px;transition:transform .2s ease}
.cursor-dot__mark::before,.cursor-dot__mark::after{content:"";position:absolute;background:var(--pink)}
.cursor-dot__mark::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px}
.cursor-dot__mark::after{top:50%;left:0;width:100%;height:1px;margin-top:-.5px}
.cursor-dot.is-active .cursor-dot__mark{transform:rotate(45deg)}