/* ==================================================================
   CLARIFY — les doodles
   ------------------------------------------------------------------
   Petits gribouillis au trait, posés dans les marges des sections,
   dans l'esprit du visuel imgs/module-21.jpg.

   Ce fichier ne s'occupe QUE de la mise en place et des animations.
   Les formes elles-mêmes (le "vocabulaire") sont dans doodles.js,
   c'est là qu'il faut aller pour en ajouter une.
   ================================================================== */

/* Les doodles se placent en absolu par rapport à leur section.
   Vérifié : tous les éléments déjà en position:absolute du site ont
   un parent relatif plus proche (.diapo, .acti, .last_actus_1,
   .video_frame), donc cette ligne ne déplace rien d'existant. */
section.panel,
section[data-doodles] { position: relative; }

.doodle-layer {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0; /* repli pour les vieux navigateurs */
    overflow: hidden;      /* un doodle ne déborde jamais de sa section */
    pointer-events: none;  /* la couche entière laisse passer les clics... */
    z-index: 2;
}

.doodle {
    position: absolute;
    width: var(--d-size, 54px);
    color: var(--doodle-ink, #000000);
    opacity: 0;
    transition: opacity 700ms ease;
    /* la parallaxe agit ici, l'animation de flottement sur .doodle-in :
       deux transform séparées, sinon elles s'écrasent l'une l'autre */
    transform: translateY(var(--d-par, 0px));
}
.doodle.is-in { opacity: 1; }

.doodle-in {
    display: block;
    transform: rotate(var(--d-rot, 0deg));
}
.doodle.is-in .doodle-in {
    animation: doodle-bob var(--d-dur, 5.5s) ease-in-out infinite;
    animation-delay: var(--d-delay, 0s);
}

.doodle svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    /* le tremblé "fait main" — le filtre est injecté par doodles.js */
    filter: url(#doodle-roughen);
}
/* Les formes ne portent aucune couleur en dur : elles se repèrent à
   leur stroke-width, et prennent l'encre de la section. */
.doodle svg [stroke-width]:not([data-hit]):not([data-halo]) { stroke: currentColor; }
.doodle svg [data-fill]:not([data-halo]) { fill: currentColor; stroke: none; }
/* les aplats évidés en leur centre (le cœur des étincelles) */
.doodle svg [data-troue] { fill-rule: evenodd; }

/* --- le halo « sticker » ------------------------------------------
   Le contour de découpe de l'autocollant, relevé sur
   doodles-stickers.png : une copie crème très épaisse de chaque tracé,
   glissée dessous par doodles.js. Sur les sections noires la couleur
   passe à transparent et il ne reste que le trait — les deux tenues
   sont expliquées dans encreSur(), dans doodles.js.

   Le halo ne se dessine pas au trait comme le reste : il apparaît en
   fondu pendant que le trait se trace par-dessus. On voit d'abord la
   pastille, puis le feutre qui la remplit. */
.doodle svg [data-halo] {
    stroke: var(--doodle-halo, transparent);
    fill: none;
    pointer-events: none;   /* jamais de clic volé au trait ni aux liens */
}
.doodle svg [data-halo][data-fill] { fill: var(--doodle-halo, transparent); }
.doodle svg [data-halo-group] {
    opacity: 0;
    transition: opacity 550ms ease;
}
.doodle.is-in svg [data-halo-group] { opacity: 1; }

/* --- la zone de clic ---------------------------------------------
   Le trait visible fait 2,4 px et il flotte : impossible à viser.
   doodles.js glisse donc sous chaque tracé une copie transparente de
   18 px de large, et c'est elle qui reçoit le clic.
   pointer-events:stroke = seule la bande du tracé réagit, pas le
   rectangle du doodle : un doodle ne vole jamais un clic à un lien
   qui passerait dessous. */
.doodle svg [data-hit] {
    stroke: transparent;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}
/* les aplats sont assez gros pour être visés directement */
.doodle svg [data-fill]:not([data-halo]) { pointer-events: fill; cursor: pointer; }
/* le trait visible, lui, laisse tout passer vers la zone de clic */
.doodle svg [stroke-width]:not([data-hit]) { pointer-events: none; }

/* Viser une cible qui bouge reste pénible : le flottement s'arrête
   dès que la souris entre dans le doodle.
   Le :not(.is-poked) compte — sans lui, la pause s'appliquerait aussi
   à l'animation du clic, qui se jouerait donc figée, la souris étant
   forcément sur le doodle au moment où l'on clique. */
.doodle:hover:not(.is-poked) .doodle-in { animation-play-state: paused; }

/* --- le trait se dessine à l'arrivée dans l'écran ---------------- */
/* --d-len est posé en ligne par doodles.js, mesuré sur chaque tracé */
.doodle svg [stroke-width]:not([data-hit]):not([data-halo]) {
    stroke-dasharray: var(--d-len, none);
    stroke-dashoffset: var(--d-len, 0);
    transition: stroke-dashoffset 900ms cubic-bezier(.25, .6, .3, 1);
    transition-delay: var(--d-draw-delay, 0s);
}
.doodle.is-in svg [stroke-width]:not([data-hit]):not([data-halo]) { stroke-dashoffset: 0; }

/* les aplats (têtes de note, étincelles) n'ont pas de tracé à
   dessiner : ils apparaissent en fondu, une fois le trait fini.
   Le halo est exclu : il a son propre fondu, plus tôt et sans délai,
   sinon la pastille se remplirait après coup. */
.doodle svg [data-fill]:not([data-halo]) {
    opacity: 0;
    transition: opacity 400ms ease 700ms;
}
.doodle.is-in svg [data-fill]:not([data-halo]) { opacity: 1; }

@keyframes doodle-bob {
    0%, 100% { transform: rotate(var(--d-rot, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--d-rot, 0deg)) translateY(-9px); }
}

/* --- réaction au clic ------------------------------------------- */
.doodle.is-poked .doodle-in {
    animation: doodle-poke 620ms cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes doodle-poke {
    0%   { transform: rotate(var(--d-rot, 0deg)) scale(1); }
    25%  { transform: rotate(calc(var(--d-rot, 0deg) - 16deg)) scale(1.28); }
    55%  { transform: rotate(calc(var(--d-rot, 0deg) + 12deg)) scale(1.1); }
    100% { transform: rotate(var(--d-rot, 0deg)) scale(1); }
}

/* ==================================================================
   L'œuf de Pâques : au 5e doodle réveillé, tout le mur se décolle
   ================================================================== */
/* Pendant l'envol, la couche doit laisser sortir les doodles… mais pas
   sur les côtés : un doodle qui dépasse à droite allonge la page et fait
   apparaître une barre de défilement horizontale.
   D'où "clip" et non "hidden" : hidden sur un axe force l'autre axe à
   défiler, ce qui rognerait l'envol vers le haut. clip + visible est la
   seule combinaison qui bloque une direction en laissant l'autre libre. */
body.doodles-loose .doodle-layer {
    overflow: visible;      /* repli si overflow:clip n'est pas connu */
    overflow-x: clip;
    overflow-y: visible;
}
body.doodles-loose .doodle {
    transition: transform 2600ms cubic-bezier(.2, .8, .3, 1),
                opacity 700ms ease;
    transform: translate(var(--d-fly-x, 0px), var(--d-fly-y, 0px))
               rotate(var(--d-fly-r, 0deg)) scale(var(--d-fly-s, 1));
    z-index: 3000;
}
body.doodles-loose .doodle .doodle-in { animation: none; }

/* ==================================================================
   Petits écrans : un seul doodle par section, plus discret.
   Les autres seraient forcément dans le texte, la colonne
   n'ayant plus de marge où les poser.
   ================================================================== */
@media screen and (max-width: 900px) {
    .doodle { width: calc(var(--d-size, 54px) * .62); }
    .doodle[data-d-index="1"],
    .doodle[data-d-index="2"] { display: none; }
}
@media screen and (max-width: 480px) {
    .doodle-layer { display: none; }
}

/* ==================================================================
   Mouvement réduit : on garde le dessin, on enlève tout ce qui bouge
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .doodle,
    .doodle.is-in .doodle-in,
    .doodle.is-poked .doodle-in {
        animation: none !important;
        transform: none;
    }
    .doodle svg { filter: none; }
    .doodle svg [stroke-width]:not([data-hit]):not([data-halo]) {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }
    .doodle svg [data-fill] { opacity: 1; transition: none; }
    .doodle svg [data-halo-group] { opacity: 1; transition: none; }
    .doodle-in { transform: rotate(var(--d-rot, 0deg)); }
}

/* Impression : pas de gribouillis sur le papier */
@media print {
    .doodle-layer { display: none !important; }
}