/*
Pipeline de rendu, dans l'ordre :
  1. Style   : calcul des styles appliqués (cascade + spécificité)
  2. Layout  : calcul de la position/taille de CHAQUE boîte (= "reflow")
  3. Paint   : dessin des pixels (couleurs, ombres, texte) (= "repaint")
  4. Composite : assemblage des calques par le GPU

Modifier width/height/top/left/font-size -> refait TOUT depuis Layout (coûteux)
Modifier color/background      -> refait seulement depuis Paint
Modifier transform/opacity     -> ne touche QUE Composite -> le moins coûteux
*/

/* MAUVAIS : déclenche un reflow à chaque frame d'animation */
.mauvais {
    transition: width 0.3s, top 0.3s;
}

/* BON : reste dans le compositeur GPU */
.bon {
    transition: transform 0.3s;
    will-change: transform; /* prévient le navigateur -> peut pré-optimiser le calque */
}

/* will-change : puissant mais dangereux si mal utilisé */
.carousel-image {
    will-change: transform;
    /* crée son propre calque de composition -> évite de repeindre les voisins */
}

/* MAUVAIS : will-change sur TROP d'éléments épuise la mémoire GPU */
* { will-change: transform; } /* à ne jamais faire */

/* BON : appliqué juste avant l'animation, retiré juste après */

const image = document.querySelector(".carousel-image");

image.addEventListener("pointerenter", () => {
    image.style.willChange = "transform"; // prévient juste avant l'animation
});
image.addEventListener("transitionend", () => {
    image.style.willChange = "auto"; // libère la ressource GPU après coup
});

/* CSS containment : isole une sous-arborescence pour limiter la portée
   des recalculs de layout/paint aux seuls changements internes */
.widget-independant {
    contain: layout paint;
    /* layout : les changements internes n'affectent pas le layout externe
       paint  : le contenu ne dessine jamais hors de sa propre boîte */
}

.carte-liste {
    content-visibility: auto;
    /* ne calcule le layout/paint QUE si l'élément est proche du viewport --
       gain massif sur de longues listes (des centaines de cartes) */
    contain-intrinsic-size: auto 300px;
    /* taille estimée réservée pour les éléments pas encore rendus,
       évite un layout shift au scroll */
}

// Layout thrashing en JS : le piège classique à connaître même côté CSS
// MAUVAIS : lecture puis écriture en boucle -> force un reflow à CHAQUE itération
elements.forEach((el) => {
    const largeur = el.offsetWidth; // LECTURE -> force le navigateur à recalculer le layout
    el.style.width = largeur + 10 + "px"; // ÉCRITURE -> invalide le layout pour la lecture suivante
});

// BON : on sépare toutes les lectures, puis toutes les écritures
const largeurs = elements.map((el) => el.offsetWidth); // lectures groupées
elements.forEach((el, i) => {
    el.style.width = largeurs[i] + 10 + "px"; // écritures groupées
});