/* =====================================================================
   INDUSTRIEUSE FOURMI — animations partagées du site
   Inclus une seule fois par les fichiers de navigation (nav-public.php…).
   CSS pur (indépendant de Tailwind : aucune recompilation nécessaire).
   Couleurs : variables de la charte graphique écrites par charte-css.php
   (--if-marron et --if-gold, au format « R G B »).
   ===================================================================== */

:root {
  --if-c-marron: rgb(var(--if-marron, 101 56 24));
  --if-c-gold:   rgb(var(--if-gold, 255 152 0));
  --if-creme:    #fffaf3;
}

/* =====================================================================
   1. TRANSITION DE PAGE « LA FOURMI TRACE SON CHEMIN »
   Départ (clic sur un lien .nav-transition) :
     - un voile crème s'ouvre en cercle depuis le point cliqué ;
     - une fourmi aux couleurs du logo arrive en poussant un crayon qui
       laisse un trait, puis dessine un cercle à main levée au centre ;
     - quand le cercle se referme, le favicon apparaît dedans (rebond + onde).
   Arrivée (page suivante) : le voile s'efface pendant que le logo grandit.
   ===================================================================== */
.if-voile {
  --x: 50vw; --y: 50vh;
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; visibility: hidden; overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgb(var(--if-gold, 255 152 0) / .16) 0, transparent 38%),
    radial-gradient(circle at 50% 55%, var(--if-creme) 0%, #fbf0e1 62%, #f2dcc2 100%);
  clip-path: circle(0 at var(--x) var(--y));
}
/* Fines rayures de « terre » qui défilent doucement derrière la fourmi */
.if-voile::before {
  content: ''; position: absolute; inset: -40px;
  background-image: radial-gradient(rgb(var(--if-marron, 101 56 24) / .07) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: 0;
}

.if-voile__scene {
  position: relative; width: min(94vw, 900px); height: auto; overflow: visible; display: block;
}
/* Trait de crayon : graphite marron, avec un second passage plus léger pour l'effet « dessiné à la main » */
.if-voile__piste { fill: none; stroke: var(--if-c-marron); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: .82; }
.if-voile__piste--repasse { stroke-width: 1.3; opacity: .35; }
/* Fourmi : couleurs du logo (corps marron, reflets blancs, touche or sur l'abdomen) */
.if-voile__fourmi .if-f-corps  { fill: var(--if-c-marron); }
.if-voile__fourmi .if-f-patte  { fill: none; stroke: var(--if-c-marron); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.if-voile__fourmi .if-f-reflet { fill: #fff; opacity: .85; }
.if-voile__fourmi .if-f-or     { fill: var(--if-c-gold); }
.if-voile__fourmi .if-f-antenne { fill: none; stroke: var(--if-c-marron); stroke-width: 1.1; stroke-linecap: round; }
/* Crayon : corps or (couleur secondaire de la charte), bois clair, mine graphite, gomme rose */
.if-crayon__corps  { fill: var(--if-c-gold); }
.if-crayon__strie  { fill: #fff; opacity: .35; }
.if-crayon__virole { fill: #b9b2aa; }
.if-crayon__gomme  { fill: #ee98a6; }
.if-crayon__bois   { fill: #f3d6ad; }
.if-crayon__mine   { fill: var(--if-c-marron); }

.if-voile__logo {
  position: absolute; left: 50%; top: 50%;
  /* Proportionnel à la scène pour tenir dans le cercle dessiné par la fourmi, même sur smartphone */
  width: clamp(56px, calc(min(94vw, 900px) * .165), 150px); aspect-ratio: 262 / 247;
  margin: 0; transform: translate(-50%, -50%) scale(.3); opacity: 0;
}
.if-voile__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgb(var(--if-marron, 101 56 24) / .28)); }
.if-voile__logo::before,
.if-voile__logo::after {            /* ondes or qui partent du logo */
  content: ''; position: absolute; inset: -14%; border-radius: 50%;
  border: 2px solid var(--if-c-gold); opacity: 0; transform: scale(.7);
}

/* --- Départ ---------------------------------------------------------- */
.if-voile.is-depart {
  visibility: visible; pointer-events: auto;
  clip-path: circle(150% at var(--x) var(--y));
  transition: clip-path .55s cubic-bezier(.7, 0, .3, 1);
}
.if-voile.is-depart::before { animation: if-terre 1.4s linear both; }
.if-voile.is-depart .if-voile__logo { animation: if-logo-pop .5s cubic-bezier(.2, .9, .3, 1.35) var(--if-pop, .95s) both; }
.if-voile.is-depart .if-voile__logo::before { animation: if-onde 1s ease-out calc(var(--if-pop, .95s) + .12s) infinite; }
.if-voile.is-depart .if-voile__logo::after  { animation: if-onde 1s ease-out calc(var(--if-pop, .95s) + .45s) infinite; }

@keyframes if-terre    { from { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } to { opacity: 1; transform: translateX(-44px); } }
@keyframes if-logo-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-14deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes if-onde     { 0% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.65); } }

/* --- Arrivée (classe posée sur <html> avant le premier affichage) -------
   L'effacement est une animation CSS : même si le JavaScript ne se charge
   pas, le voile disparaît tout seul et ne bloque jamais la page.          */
html.if-arrivee .if-voile { visibility: visible; clip-path: none; animation: if-voile-sortie .55s ease .3s forwards; }
html.if-arrivee .if-voile__scene { display: none; }
html.if-arrivee .if-voile__logo { opacity: 1; transform: translate(-50%, -50%); animation: if-logo-sortie .65s ease .2s forwards; }

@keyframes if-voile-sortie { to { opacity: 0; visibility: hidden; } }
@keyframes if-logo-sortie  { to { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } }

/* Pendant la transition : on évite tout défilement parasite */
html.if-transition-en-cours { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .if-voile { display: none !important; }
}