/*
 * Animations produit des pages Fonctionnalités (partials/feature-anim/*), à la
 * place des captures : nos vrais écrans (Studio, Clics par élément, Éléments
 * actifs) rejoués en HTML/CSS, en boucle, avec leurs textes et leurs styles.
 * Tailles en cqw : tout suit la largeur du cadre. Le conteneur est la figure
 * autour de .fa, pour que les cqw de .fa lui-même s'y rapportent aussi.
 */

@property --fa-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.fp-shot:has(> .fa) {
    container-type: inline-size;
}

/* Sections : hauteur plafonnée à ~34rem, la largeur suit les proportions. */
.fp-shot[style*="--fa-ratio"] {
    max-width: min(100%, calc(var(--fa-ratio) * 34rem));
    margin-inline: auto;
}

.fa {
    position: relative;
    background: #f1f3f4;
    color: var(--y-ink);
    line-height: 1.3;
}

.fa svg {
    flex-shrink: 0;
}

.fa code {
    padding: .25em .55em;
    border-radius: .4em;
    background: #e8eaed;
    color: #6b6670;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
}

.fa-pill {
    display: inline-block;
    padding: .2em .65em;
    border-radius: .45em;
    background: #e8eefc;
    color: #2c56d8;
    font-size: .92em;
    font-weight: 600;
    white-space: nowrap;
}

.fa-pill--green {
    background: #dcfce7;
    color: #15803d;
}

.fa-num {
    counter-reset: fa-n var(--fa-n);
}

.fa-num::after {
    content: counter(fa-n);
}

/* Carte d'élément du Studio (« Éléments actifs »), tailles en em. */
.fa-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6em;
    padding: 1em 1.1em;
    border: 1px solid #dadce0;
    border-radius: .75em;
    background: #fff;
    box-shadow: 0 .15em .5em rgba(30, 27, 75, .05);
}

.fa-card__main {
    display: grid;
    justify-items: start;
    gap: .55em;
}

.fa-card__main b {
    font-size: 1.1em;
    font-weight: 600;
}

.fa-scope {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: #2c56d8;
    font-size: .9em;
}

.fa-scope--green {
    color: #55505e;
}

.fa-scope--green > svg {
    color: #16a34a;
}

.fa-card__actions {
    display: flex;
    gap: .9em;
    color: #55505e;
    font-size: 1.3em;
}

.fa-studio__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.fa-studio__head > b {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--y-display);
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: -.02em;
}

.fa-studio__head > span {
    color: #5b5866;
    font-size: .85em;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
}

/* ---------- Studio : 12 s ----------
   0–10 % : la main clique « Scanner » · 11–23 % : analyse du site · 24 % : suggestions
   27–48 % : survol puis « Ajouter » du menu, « Suivre un élément », Ajouter
   50–72 % : idem pour « Choisir Eco » · 74–92 % : pause · 93–100 % : retour à vide */

.fa-studio {
    display: grid;
    grid-template-columns: 57fr 43fr;
    gap: 1.4cqw;
    padding: 1.4cqw;
}

.fa-studio__preview {
    overflow: hidden;
    border: 1px solid #dadce0;
    border-radius: 1.4cqw;
    background: #fff;
}

.fa-studio__toolbar {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    padding: 1cqw 1.2cqw;
    color: #5b5866;
    font-size: 1.25cqw;
}

.fa-studio__url {
    padding: .5cqw 1.8cqw;
    border-radius: 99px;
    background: #e8eaed;
}

.fa-studio__devices {
    display: flex;
    margin-left: auto;
    padding: .35cqw;
    border-radius: .9cqw;
    background: #e8eaed;
}

.fa-studio__devices > * {
    padding: .35cqw .9cqw;
    border-radius: .6cqw;
}

.fa-studio__devices b {
    background: #fff;
    color: #2c56d8;
    font-weight: 600;
}

/* Aperçu plus haut que la capture (960 / 779) : la colonne de droite a la place de ses deux cartes. */
.fa-studio__site {
    position: relative;
    aspect-ratio: 1100 / 960;
    overflow: hidden;
    background: #e8eaed;
}

.fa-studio__site img {
    display: block;
    width: 100%;
    height: auto;
}

/* Sans zoom : la page reste entière. Ancienne caméra (×1,6) : le menu, puis le bouton « Choisir Eco ».
   translate = 50 % − 1,6 × point visé, borné à [−60 %, 0] en x et [−38 %, 0] en y pour ne jamais montrer de vide. */
.fa-studio__cam {
    position: relative;
    transform-origin: 0 0;
    transform: none;
    animation: fa-cam 12s ease-in-out infinite;
}

@keyframes fa-cam {
    0%, 50%, 97%, 100% { transform: none; }
    56%, 93% { transform: none; }
}

/* Élément survolé dans les suggestions : indigo ; une fois ajouté : vert, comme dans le Studio. */
.fa-hl {
    position: absolute;
    border: .2cqw solid transparent;
    border-radius: .35cqw;
    animation: 12s infinite;
}

.fa-hl--menu { left: 17.5%; top: 2.6%; width: 40%; height: 4.6%; animation-name: fa-hl-menu; }
.fa-hl--eco { left: 51.8%; top: 60.9%; width: 17.6%; height: 5.2%; animation-name: fa-hl-eco; }

@keyframes fa-hl-menu {
    0%, 29% { border-color: transparent; background: transparent; }
    30%, 46% { border-color: #6366f1; background: rgba(99, 102, 241, .08); }
    48%, 92% { border-color: #22c55e; background: rgba(34, 197, 94, .07); }
    95%, 100% { border-color: transparent; background: transparent; }
}

@keyframes fa-hl-eco {
    0%, 53% { border-color: transparent; background: transparent; }
    54%, 70% { border-color: #6366f1; background: rgba(99, 102, 241, .1); }
    72%, 92% { border-color: #22c55e; background: rgba(34, 197, 94, .1); }
    95%, 100% { border-color: transparent; background: transparent; }
}

/* « Analyse du site... » par-dessus l'aperçu, avec une ligne qui balaie la page. */
.fa-scan {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
    overflow: hidden;
    background: rgba(10, 46, 54, .8);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 1.3cqw;
    text-align: center;
    opacity: 0;
    animation: fa-scan 12s infinite;
}

.fa-scan b {
    font-size: 1.5em;
    font-weight: 800;
}

.fa-scan span {
    opacity: .8;
}

.fa-scan::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18%;
    border-bottom: .2cqw solid rgba(255, 255, 255, .7);
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .22));
    animation: fa-scan-line 12s linear infinite;
}

@keyframes fa-scan {
    0%, 10.5% { opacity: 0; }
    12%, 22% { opacity: 1; }
    24%, 100% { opacity: 0; }
}

@keyframes fa-scan-line {
    0%, 11% { transform: translateY(-100%); }
    23%, 100% { transform: translateY(460%); }
}

/* Colonne de droite : « Éléments actifs » puis « Suggestions », à la hauteur de l'aperçu. */
.fa-studio__side {
    display: flex;
    flex-direction: column;
    gap: 1.4cqw;
    min-height: 0;
    contain: size;
}

.fa-studio__panel {
    display: flex;
    flex-direction: column;
    gap: .9em;
    padding: 1.2em 1.1em;
    border: 1px solid #dadce0;
    border-radius: 1.4cqw;
    background: #fff;
    font-size: 1.3cqw;
}

.fa-studio__empty {
    margin: 0;
    color: #5b5866;
    font-size: .95em;
    text-align: center;
    animation: fa-empty 12s infinite;
}

@keyframes fa-empty {
    0%, 46% { display: block; opacity: 1; }
    47%, 94% { display: none; opacity: 0; }
    95%, 100% { display: block; opacity: 1; }
}

/* Cartes repliées (hauteur 0, marge négative qui annule l'écart) jusqu'à leur ajout. */
.fa-studio__panel .fa-card {
    max-height: 0;
    margin-top: -.9em;
    padding: 0 .9em;
    overflow: hidden;
    border-width: 0;
    opacity: 0;
    animation: 12s ease-out infinite;
}

.fa-studio__panel .fa-card__main {
    gap: .4em;
}

.fa-studio__panel .fa-in--1 { animation-name: fa-in-1; }
.fa-studio__panel .fa-in--2 { animation-name: fa-in-2; }

@keyframes fa-in-1 {
    0%, 46.5% { max-height: 0; margin-top: -.9em; padding-block: 0; border-width: 0; opacity: 0; }
    48.5% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 0; }
    50.5%, 92% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 1; }
    95% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 0; }
    97%, 100% { max-height: 0; margin-top: -.9em; padding-block: 0; border-width: 0; opacity: 0; }
}

@keyframes fa-in-2 {
    0%, 70.5% { max-height: 0; margin-top: -.9em; padding-block: 0; border-width: 0; opacity: 0; }
    72.5% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 0; }
    74.5%, 92% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 1; }
    95% { max-height: 8em; margin-top: 0; padding-block: .75em; border-width: 1px; opacity: 0; }
    97%, 100% { max-height: 0; margin-top: -.9em; padding-block: 0; border-width: 0; opacity: 0; }
}

.fa-count {
    counter-reset: fa-n var(--fa-n);
    animation: 12s infinite;
}

.fa-count--el {
    animation-name: fa-count-el;
}

.fa-count--el::after {
    content: counter(fa-n) " / 50";
}

.fa-count--loop {
    animation-name: fa-count-loop;
}

.fa-count--loop::after {
    content: counter(fa-n) " / 30";
}

/* Comme dans l'app : un menu compte comme une boucle, un bouton comme un élément. */
@keyframes fa-count-el {
    0%, 71% { --fa-n: 0; }
    72%, 94% { --fa-n: 1; }
    95%, 100% { --fa-n: 0; }
}

@keyframes fa-count-loop {
    0%, 47% { --fa-n: 0; }
    48%, 94% { --fa-n: 1; }
    95%, 100% { --fa-n: 0; }
}

/* Suggestions */
.fa-sugg {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.fa-studio__head > .fa-sugg__scan {
    padding: .55em 1.2em;
    border-radius: 99px;
    background: #cd3761;
    box-shadow: 0 .2em .5em rgba(205, 55, 97, .3);
    color: #fff;
    font-size: .9em;
    font-weight: 700;
}

.fa-sugg__body {
    display: flex;
    flex-direction: column;
    gap: .8em;
    opacity: 0;
    animation: fa-sugg 12s infinite;
}

@keyframes fa-sugg {
    0%, 23% { opacity: 0; transform: translateY(1cqw); }
    26%, 93% { opacity: 1; transform: none; }
    97%, 100% { opacity: 0; transform: none; }
}

.fa-sugg__search {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .6em 1em;
    overflow: hidden;
    border-radius: 99px;
    background: #f1f3f4;
    color: #5f6368;
    font-size: .85em;
    white-space: nowrap;
}

.fa-sugg__group {
    overflow: hidden;
    border: 1px solid #dadce0;
    border-radius: .8em;
}

.fa-sugg__title {
    display: flex;
    align-items: center;
    gap: .35em;
    padding: .65em .9em;
    background: #f8f9fa;
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fa-sugg__title > span {
    color: #5f6368;
    font-weight: 500;
}

.fa-sugg__title > svg {
    margin-left: auto;
    transform: rotate(180deg);
}

.fa-sugg__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
    height: 3.6em;
    padding: 0 .9em;
    overflow: hidden;
    border-top: 1px solid #f1f3f4;
}

.fa-sugg__row > span:first-child {
    display: grid;
    justify-items: start;
    gap: .3em;
    min-width: 0;
}

.fa-sugg__row b {
    font-size: .9em;
    font-weight: 500;
    white-space: nowrap;
}

.fa-sugg__row code {
    font-size: .75em;
    white-space: nowrap;
}

.fa-sugg__add {
    flex-shrink: 0;
    padding: .45em .95em;
    border-radius: .45em;
    background: #e5ebfc;
    color: #2c56d8;
    font-size: .8em;
    font-weight: 600;
}

/* Survol de la suggestion, puis elle quitte la liste une fois ajoutée. */
.fa-sugg__row--menu { animation: fa-row-menu 12s infinite; }
.fa-sugg__row--eco { animation: fa-row-eco 12s infinite; }
.fa-sugg__row--menu .fa-sugg__add { animation: fa-add-menu 12s infinite; }
.fa-sugg__row--eco .fa-sugg__add { animation: fa-add-eco 12s infinite; }

@keyframes fa-row-menu {
    0%, 29% { height: 3.6em; background: transparent; opacity: 1; }
    30%, 46% { height: 3.6em; background: #f8f9fa; opacity: 1; }
    47% { height: 3.6em; background: #f8f9fa; opacity: 0; }
    49%, 94% { height: 0; border-top-width: 0; opacity: 0; }
    96%, 100% { height: 3.6em; background: transparent; opacity: 1; }
}

@keyframes fa-row-eco {
    0%, 53% { height: 3.6em; background: transparent; opacity: 1; }
    54%, 70% { height: 3.6em; background: #f8f9fa; opacity: 1; }
    71% { height: 3.6em; background: #f8f9fa; opacity: 0; }
    73%, 94% { height: 0; border-top-width: 0; opacity: 0; }
    96%, 100% { height: 3.6em; background: transparent; opacity: 1; }
}

@keyframes fa-add-menu {
    0%, 34%, 40%, 100% { background: #e5ebfc; color: #2c56d8; }
    35%, 39% { background: #2c56d8; color: #fff; }
}

@keyframes fa-add-eco {
    0%, 58%, 64%, 100% { background: #e5ebfc; color: #2c56d8; }
    59%, 63% { background: #2c56d8; color: #fff; }
}

/* « Suivre un élément » */
.fa-modal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    animation: fa-modal 12s infinite;
}

@keyframes fa-modal {
    0%, 37% { opacity: 0; }
    38.5%, 46% { opacity: 1; }
    47.5%, 61% { opacity: 0; }
    62.5%, 70% { opacity: 1; }
    71.5%, 100% { opacity: 0; }
}

.fa-modal__box {
    display: flex;
    flex-direction: column;
    gap: .7em;
    width: 46%;
    padding: 1.6em 1.7em;
    border-radius: 1.4em;
    background: #fff;
    box-shadow: 0 1.5em 3em -.8em rgba(15, 23, 42, .25);
    font-size: 1.3cqw;
    animation: fa-modal-box 12s infinite;
}

@keyframes fa-modal-box {
    0%, 37%, 47.5%, 61%, 71.5%, 100% { transform: scale(.92); }
    39%, 46%, 63%, 70% { transform: none; }
}

.fa-modal__title {
    display: flex;
    align-items: center;
    gap: .45em;
    font-size: 1.3em;
    font-weight: 700;
}

.fa-modal__title svg {
    color: #2c56d8;
}

.fa-modal__box p {
    margin: 0;
    color: #5f6368;
    font-size: .95em;
}

.fa-modal__label {
    margin-bottom: -.35em;
    color: #5f6368;
    font-size: .8em;
    font-weight: 600;
}

.fa-modal__input,
.fa-modal__select {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .75em .9em;
    border: 1.5px solid #dadce0;
    border-radius: .65em;
    background: #f8f9fa;
}

/* Les deux noms superposés : celui du menu, puis celui du bouton. */
.fa-modal__input {
    display: grid;
    justify-items: start;
    border-color: #2c56d8;
    background: #fff;
}

.fa-modal__name {
    grid-area: 1 / 1;
    background: #c9d7fb;
    color: inherit;
}

.fa-modal__name--1 { animation: fa-name-1 12s infinite; }
.fa-modal__name--2 { animation: fa-name-2 12s infinite; }

@keyframes fa-name-1 {
    0%, 49% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}

@keyframes fa-name-2 {
    0%, 49% { visibility: hidden; }
    50%, 100% { visibility: visible; }
}

.fa-modal__select > svg:last-child {
    margin-left: auto;
}

.fa-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: .6em;
    margin-top: .4em;
}

.fa-modal__actions > span {
    padding: .65em 1.3em;
    border: 1.5px solid var(--y-navy);
    border-radius: .65em;
    font-weight: 600;
}

.fa-modal__actions > .fa-modal__ok {
    border-color: #cd3761;
    background: #cd3761;
    color: #fff;
}

/* Main de la vidéo d'accueil : le bout de l'index (41 % de la largeur) est la pointe du curseur.
   Positions en % du cadre : « Scanner », puis « Ajouter » des suggestions et de la fenêtre. */
.fa-cursor {
    position: absolute;
    z-index: 3;
    left: 30%;
    top: 70%;
    width: 2.6cqw;
    margin-left: -1.07cqw;
    transform-origin: 41% 2%;
    animation: fa-cursor 12s ease-in-out infinite;
}

.fa-cursor svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    fill: #fff;
    stroke: #111;
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 .3cqw .5cqw rgba(30, 27, 75, .25));
}

/* Onde de clic framboise, centrée sur le bout du doigt. */
.fa-click {
    position: absolute;
    left: 41%;
    top: 2%;
    width: 3cqw;
    aspect-ratio: 1;
    border: .25cqw solid rgba(205, 55, 97, .55);
    border-radius: 50%;
    background: rgba(205, 55, 97, .12);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3);
    animation: fa-click 12s ease-out infinite;
}

@keyframes fa-click {
    0%, 9.9%, 36.9%, 45.9%, 60.9%, 69.9% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    10%, 37%, 46%, 61%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
    14%, 41%, 50%, 65%, 74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes fa-cursor {
    0%, 3% { left: 35%; top: 75%; transform: scale(1); }
    9% { left: 93.6%; top: 27.1%; transform: scale(1); }
    10% { left: 93.6%; top: 27.1%; transform: scale(.8); }
    11% { left: 93.6%; top: 27.1%; transform: scale(1); }
    16%, 25% { left: 80%; top: 42%; transform: scale(1); }
    30% { left: 66.3%; top: 46.2%; transform: scale(1); }
    35% { left: 93%; top: 48.1%; transform: scale(1); }
    37% { left: 93%; top: 48.1%; transform: scale(.8); }
    38% { left: 93%; top: 48.1%; transform: scale(1); }
    44% { left: 66.8%; top: 67.7%; transform: scale(1); }
    46% { left: 66.8%; top: 67.7%; transform: scale(.8); }
    47% { left: 66.8%; top: 67.7%; transform: scale(1); }
    54% { left: 64.6%; top: 75.3%; transform: scale(1); }
    59% { left: 93%; top: 77.2%; transform: scale(1); }
    61% { left: 93%; top: 77.2%; transform: scale(.8); }
    62% { left: 93%; top: 77.2%; transform: scale(1); }
    68% { left: 66.8%; top: 67.7%; transform: scale(1); }
    70% { left: 66.8%; top: 67.7%; transform: scale(.8); }
    71% { left: 66.8%; top: 67.7%; transform: scale(1); }
    84%, 100% { left: 35%; top: 75%; transform: scale(1); }
}

/* ---------- Clics par élément : 8 s (proportions de la capture, 1 cqw = 12 px) ---------- */

.fa-clicks {
    display: grid;
    gap: 2.2cqw;
    padding: 3.5cqw;
    background: #fff;
    font-size: 1.6cqw;
}

.fa-clicks__title {
    font-family: var(--y-display);
    font-size: 2.7cqw;
    font-weight: 600;
    letter-spacing: -.02em;
}

.fa-clicks__filter {
    display: flex;
    align-items: center;
    gap: 1cqw;
    padding: 1.6cqw 2.2cqw;
    border: 1px solid #dadce0;
    border-radius: 99px;
    background: #e8eaed;
    color: #6b6670;
    font-size: 1.7cqw;
}

.fa-clicks__urls {
    display: flex;
    gap: .9cqw;
    margin-top: -.6cqw;
}

.fa-clicks__urls span {
    padding: .6cqw 1.4cqw;
    border: 1px solid #dadce0;
    border-radius: 99px;
    background: #e8eaed;
    color: #5b5866;
    font-size: 1.4cqw;
}

.fa-clicks__urls .is-on {
    border-color: #2c56d8;
    background: #2c56d8;
    color: #fff;
    font-weight: 600;
}

.fa-clicks__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5cqw;
}

.fa-clicks__stats div {
    display: grid;
    justify-items: center;
    gap: .3cqw;
    padding: 2cqw 1cqw;
    border-radius: 1.4cqw;
    background: #e8eaed;
}

.fa-clicks__stats span {
    color: #5b5866;
    font-size: 1.5cqw;
    font-weight: 600;
}

.fa-clicks__stats b {
    font-size: 3.2cqw;
    font-weight: 700;
}

.fa-clicks__stats .fa-num,
.fa-clicks__card .fa-num {
    animation: fa-num 8s ease-out infinite;
}

.fa-clicks__card {
    overflow: hidden;
    border: 1px solid #dadce0;
    border-radius: 1.8cqw;
}

.fa-clicks__name {
    display: flex;
    align-items: center;
    gap: 1.4cqw;
    padding: 2cqw;
    font-size: 1.75cqw;
}

.fa-clicks__name .fa-pill {
    font-size: 1.3cqw;
}

.fa-clicks__name b:first-of-type {
    flex: 1;
    font-weight: 600;
}

.fa-num--clics {
    font-weight: 600;
}

.fa-num--clics::after {
    content: counter(fa-n) " clics";
}

.fa-clicks__rows,
.fa-clicks__pages {
    display: grid;
    gap: 1.1cqw;
    padding: 2cqw;
    border-top: 1px solid #dadce0;
}

.fa-clicks__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14cqw 4cqw 3.4cqw;
    align-items: center;
    gap: 1.4cqw;
}

.fa-clicks__row b,
.fa-clicks__page b {
    text-align: right;
    font-weight: 600;
}

.fa-clicks__row small {
    color: #6b6670;
    font-size: 1.4cqw;
    text-align: right;
}

.fa-clicks__row i,
.fa-clicks__page i {
    height: .45cqw;
    border-radius: 99px;
    background: #dadce0;
}

.fa-clicks__row i::before,
.fa-clicks__page i::before {
    content: "";
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: #2c56d8;
    transform-origin: left;
    animation: fa-bar 8s cubic-bezier(.2, .7, .2, 1) infinite;
    animation-delay: calc(var(--i) * .12s);
}

.fa-clicks__page i::before {
    background: #10b981;
}

.fa-clicks__row .fa-num,
.fa-clicks__page .fa-num {
    animation-delay: calc(var(--i) * .12s);
}

.fa-clicks__pages small {
    color: #5b5866;
    font-size: 1.45cqw;
    font-weight: 600;
}

.fa-clicks__page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5cqw 4cqw;
    align-items: center;
    gap: 1.4cqw;
}

.fa-clicks__page code {
    justify-self: start;
    padding: 0;
    background: none;
    color: #4b4857;
    font-size: 1.4cqw;
}

@keyframes fa-bar {
    0%, 6% { transform: scaleX(0); }
    35%, 90% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}

@keyframes fa-num {
    0%, 6% { --fa-n: 0; }
    35%, 90% { --fa-n: var(--to); }
    100% { --fa-n: 0; }
}

/* ---------- Éléments actifs : 9 s (proportions de la capture, 1 cqw = 5,9 px) ---------- */

.fa-manage {
    display: grid;
    gap: 3.4cqw;
    padding: 5cqw 5.5cqw;
    background: #fff;
    font-size: 2.6cqw;
}

.fa-manage .fa-studio__head {
    margin-bottom: -1cqw;
}

.fa-count--manage {
    animation: fa-count-manage 9s infinite;
}

.fa-count--manage::after {
    content: counter(fa-n);
}

@keyframes fa-count-manage {
    0%, 12% { --fa-n: 2; }
    13%, 94% { --fa-n: 3; }
    95%, 100% { --fa-n: 2; }
}

.fa-manage__new {
    opacity: 0;
    transform: translateY(3cqw);
    animation: fa-new 9s ease-out infinite;
}

@keyframes fa-new {
    0%, 8% { opacity: 0; transform: translateY(3cqw); box-shadow: none; }
    13% { opacity: 1; transform: none; box-shadow: 0 0 0 1cqw rgba(205, 55, 97, .18); }
    28%, 92% { opacity: 1; transform: none; box-shadow: 0 .15em .5em rgba(30, 27, 75, .05); }
    97%, 100% { opacity: 0; transform: none; }
}

.fa-manage__name {
    display: grid;
}

.fa-manage__name > span {
    grid-area: 1 / 1;
}

.fa-manage__old {
    animation: fa-old 9s infinite;
}

@keyframes fa-old {
    0%, 39% { visibility: visible; }
    40%, 95% { visibility: hidden; }
    96%, 100% { visibility: visible; }
}

.fa-type {
    max-width: 0;
    overflow: hidden;
    border-right: .4cqw solid var(--y-orange);
    white-space: nowrap;
    visibility: hidden;
    animation: fa-type 9s steps(25) infinite;
}

@keyframes fa-type {
    0%, 39% { max-width: 0; visibility: hidden; }
    40% { max-width: 0; visibility: visible; }
    68%, 95% { max-width: 15em; visibility: visible; }
    96%, 100% { max-width: 15em; visibility: hidden; }
}

.fa-manage__pen {
    display: inline-flex;
    animation: fa-pen 9s infinite;
}

@keyframes fa-pen {
    0%, 30% { color: inherit; transform: none; }
    34% { color: var(--y-orange); transform: scale(1.3); }
    38%, 70% { color: var(--y-orange); transform: none; }
    74%, 100% { color: inherit; transform: none; }
}

/* Mouvement réduit : l'état final, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .fa *,
    .fa *::before,
    .fa *::after {
        animation: none !important;
    }
    .fa-hl { border-color: #22c55e; }
    .fa-studio__panel .fa-card { max-height: none; margin-top: 0; padding-block: .75em; border-width: 1px; }
    .fa-sugg__body,
    .fa-manage__new { opacity: 1; transform: none; }
    .fa-studio__empty,
    .fa-scan,
    .fa-modal,
    .fa-sugg__row--menu,
    .fa-sugg__row--eco { display: none; }
    .fa-count--el,
    .fa-count--loop { --fa-n: 1; }
    .fa-count--manage { --fa-n: 3; }
    .fa-num { --fa-n: var(--to); }
    .fa-cursor,
    .fa-type { display: none; }
}

/* ---------- Captures animées par calques (partials/feature-anim/shot) ---------- */

.fa-shot {
    overflow: hidden;
    background: #fff;
}

.fa-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.fa-o {
    position: absolute;
    display: block;
    font-style: normal;
    background: var(--c);
    animation-duration: var(--t);
    animation-delay: var(--d, 0s);
    animation-iteration-count: infinite;
}

.fa-o--fade {
    animation-name: fa-o-fade;
}

@keyframes fa-o-fade {
    0% { opacity: 1; }
    8%, 88% { opacity: 0; }
    94%, 100% { opacity: 1; }
}

.fa-o--wipe {
    transform-origin: right;
    animation-name: fa-o-wipe;
    animation-timing-function: ease-in-out;
}

@keyframes fa-o-wipe {
    0% { transform: scaleX(1); }
    22%, 88% { transform: scaleX(0); }
    94%, 100% { transform: scaleX(1); }
}

.fa-o--rise {
    transform-origin: top;
    animation-name: fa-o-rise;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

@keyframes fa-o-rise {
    0% { transform: scaleY(1); }
    14%, 88% { transform: scaleY(0); }
    94%, 100% { transform: scaleY(1); }
}

/* Onde de clic : un point framboise et un cercle qui s'élargit. */
.fa-o--ripple {
    width: 3.4%;
    aspect-ratio: 1;
    margin: -1.7% 0 0 -1.7%;
    border: .35cqw solid var(--y-orange);
    border-radius: 50%;
    background: none;
    opacity: 0;
    animation-name: fa-o-ripple;
    animation-timing-function: ease-out;
}

.fa-o--ripple::after {
    content: "";
    position: absolute;
    inset: 32%;
    border-radius: 50%;
    background: var(--y-orange);
}

@keyframes fa-o-ripple {
    0% { transform: scale(.4); opacity: 0; }
    3% { transform: scale(.6); opacity: 1; }
    16%, 100% { transform: scale(2.2); opacity: 0; }
}

.fa-o--slide {
    background: center bottom / 100% auto no-repeat;
    transform: translateY(100%);
    animation-name: fa-o-slide;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

@keyframes fa-o-slide {
    0%, 4% { transform: translateY(100%); }
    14%, 84% { transform: none; }
    92%, 100% { transform: translateY(100%); }
}

/* Interrupteur : gris, puis vert, comme dans les réglages du bandeau. */
.fa-o--switch {
    display: grid;
    place-items: center;
}

.fa-o--switch b {
    position: relative;
    width: 89%;
    height: 81%;
    border-radius: 999px;
    background: #cfcac2;
    animation: fa-o-switch-bg var(--t) var(--d) infinite;
}

.fa-o--switch b::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 6%;
    height: 76%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(30, 27, 75, .25);
    animation: fa-o-switch-knob var(--t) var(--d) infinite;
}

@keyframes fa-o-switch-bg {
    0%, 6% { background: #8c87a5; }
    12%, 88% { background: #cd3761; }
    94%, 100% { background: #8c87a5; }
}

@keyframes fa-o-switch-knob {
    0%, 6% { left: 6%; }
    12%, 88% { left: 52%; }
    94%, 100% { left: 6%; }
}

@media (prefers-reduced-motion: reduce) {
    .fa-o:not(.fa-o--switch, .fa-o--slide, .fa-o--tabs, .fa-o--swatch) {
        display: none;
    }
    .fa-o--slide {
        transform: none;
    }
    .fa-o--switch b {
        background: #cd3761;
    }
    .fa-o--switch b::after {
        left: 52%;
    }
}

/* ---------- Bandeau de consentement : 8 s ---------- */

.fa-cookies {
    overflow: hidden;
    background: #e8eaed;
}

.fa-cookies > img {
    display: block;
    width: 100%;
    height: auto;
}

.fa-cookies__banner {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.6cqw 2.6cqw 2.2cqw;
    background: var(--y-navy);
    box-shadow: 0 -.2cqw 1cqw rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 1.2cqw;
    transform: translateY(105%);
    animation: fa-banner 8s cubic-bezier(.2, .7, .2, 1) infinite;
}

@keyframes fa-banner {
    0%, 6% { transform: translateY(105%); }
    14%, 60% { transform: none; }
    68%, 100% { transform: translateY(105%); }
}

.fa-cookies__top {
    display: flex;
    align-items: flex-start;
    gap: 1.7cqw;
    margin-bottom: 1.2cqw;
}

.fa-cookies .fa-cookies__logo {
    width: 4.4cqw;
    height: auto;
    padding: .35cqw;
    border-radius: .7cqw;
    background: #fff;
}

.fa-cookies__top > div {
    flex: 1;
}

.fa-cookies__top > div > b {
    display: block;
    margin-bottom: .6cqw;
    font-size: 1.4cqw;
    font-weight: 600;
}

.fa-cookies__top p {
    margin: 0 0 1cqw;
    opacity: .9;
}

.fa-cookies__cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1cqw;
}

.fa-cookies__cats > span {
    display: flex;
    align-items: center;
    gap: .9cqw;
    padding: .85cqw;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .5cqw;
    background: rgba(255, 255, 255, .05);
}

.fa-cookies__cats i {
    flex-shrink: 0;
    width: 1.35cqw;
    height: 1.35cqw;
    border-radius: .25cqw;
    background: #3b82f6 no-repeat center / 75% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fa-cookies__cats b {
    display: block;
    font-size: 1.1cqw;
    font-weight: 500;
}

.fa-cookies__cats small {
    display: block;
    font-size: .95cqw;
    opacity: .7;
}

.fa-cookies__actions {
    display: flex;
    justify-content: flex-end;
    gap: .9cqw;
}

.fa-cookies__actions span {
    position: relative;
    min-width: 13cqw;
    padding: .9cqw 1.9cqw;
    border: .12cqw solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 1.2cqw;
    font-weight: 600;
    text-align: center;
}

.fa-cookies__actions .fa-cookies__accept {
    border-color: var(--y-orange);
    background: var(--y-orange);
    animation: fa-accept 8s infinite;
}

/* Clic sur « Tout accepter » : le bouton s'enfonce, une onde part. */
.fa-cookies__accept::after {
    content: "";
    position: absolute;
    inset: -.4cqw;
    border: .3cqw solid #fff;
    border-radius: inherit;
    opacity: 0;
    animation: fa-accept-ring 8s infinite;
}

@keyframes fa-accept {
    0%, 50% { transform: none; }
    52% { transform: scale(.93); }
    55%, 100% { transform: none; }
}

@keyframes fa-accept-ring {
    0%, 51% { opacity: 0; transform: scale(.9); }
    53% { opacity: .8; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1.25); }
}

/* Pastille de couleur des réglages du bandeau, redessinée avec la couleur actuelle. */
.fa-o--swatch {
    display: flex;
    align-items: center;
    gap: 7%;
}

.fa-o--swatch b {
    flex-shrink: 0;
    width: 34%;
    aspect-ratio: 1;
    border: .5cqw solid #fff;
    border-radius: .7cqw;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #dadce0;
}

.fa-o--swatch code {
    padding: 0;
    background: none;
    color: #4b4857;
    font-size: 1.35cqw;
}

@media (prefers-reduced-motion: reduce) {
    .fa-cookies__banner {
        transform: none;
    }
}

/* Onglets redessinés sur une capture (Ordinateur / Mobile de la heatmap). */
.fa-o--tabs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.fa-o--tabs > span {
    display: flex;
    height: 100%;
    padding: .3em;
    border-radius: .55em;
    background: #dadce0;
}

.fa-o--tabs b {
    display: flex;
    align-items: center;
    padding: 0 1em;
    border-radius: .4em;
    color: #5b5866;
    font-weight: 600;
}

.fa-o--tabs b.is-on {
    background: #fff;
    color: var(--y-ink);
    box-shadow: 0 1px 2px rgba(30, 27, 75, .08);
}

/* Plan de taggage : les couleurs du site (framboise, indigo) au lieu du bleu et du vert de l'application. */
.fa-clicks .fa-pill,
.fa-manage .fa-pill {
    background: var(--y-orange-soft);
    color: var(--y-orange);
}

.fa-clicks .fa-pill--green,
.fa-manage .fa-pill--green {
    background: var(--y-navy);
    color: #fff;
}

.fa-clicks__urls .is-on {
    border-color: var(--y-navy);
    background: var(--y-navy);
}

.fa-clicks__row i {
    height: .8cqw;
}

.fa-clicks__row i::before {
    background: var(--y-orange);
}

.fa-manage .fa-scope {
    color: var(--y-navy);
}

.fa-manage .fa-scope > svg {
    color: var(--y-orange);
}

.fa-manage__new {
    border-color: var(--y-orange);
}

/* Clics par élément : comme la page Clics actuelle du dashboard (fond clair, chiffres sur une
   bande, une ligne par élément avec sa barre de part et sa flèche). */
.fa-clicks {
    background: #f6f5f9;
}

.fa-clicks__urls span {
    border-color: rgba(30, 27, 75, .1);
    background: #fff;
    color: var(--y-ink);
}

.fa-clicks__urls .is-on {
    border-color: var(--y-orange);
    background: var(--y-orange);
    color: #fff;
}

.fa-clicks__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 1.4cqw .5cqw;
    border: 1px solid rgba(30, 27, 75, .07);
    border-radius: 1.6cqw;
    background: #fff;
}

.fa-clicks__stats div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .8cqw;
    padding: 0 1cqw;
    border-radius: 0;
    background: none;
}

.fa-clicks__stats div + div {
    border-left: 1px solid #ecebf3;
}

.fa-clicks__stats b {
    order: -1;
    color: var(--y-navy);
    font-size: 2.6cqw;
}

.fa-clicks__stats span {
    font-weight: 500;
}

.fa-clicks__card {
    border-color: rgba(30, 27, 75, .07);
    border-radius: 1.6cqw;
    background: #fff;
}

.fa-clicks__name {
    padding: 1.6cqw 2cqw;
}

.fa-clicks__share {
    position: relative;
    flex: 0 0 9cqw;
    height: .7cqw;
    overflow: hidden;
    border-radius: 99px;
    background: #f1f0f5;
}

.fa-clicks__share::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: 99px;
    background: #eba4b9;
}

.fa-clicks__chev {
    flex: 0 0 auto;
    width: 2cqw;
    height: 2cqw;
    color: #8a8598;
}

.fa-clicks__rows {
    border-top-color: #f1f0f5;
}