/** Shopify CDN: Minification failed

Line 42:72 Unexpected "*"
Line 47:76 Unterminated string token
Line 49:62 Unterminated string token
Line 50:73 Unterminated string token
Line 53:75 Unterminated string token
Line 60:78 Unterminated string token
Line 63:48 Unterminated string token
Line 67:75 Unterminated string token
Line 69:74 Unterminated string token
Line 70:78 Unterminated string token
... and 18 more hidden warnings

**/
/* ============================================================================
   efa-cta.css - feuille de style du composant CTA travaille.

   Le CSS n'est JAMAIS emis a l'interieur d'un contenu capture ou filtre : le
   snippet ne rend que du markup, chaque section porteuse charge cet asset une
   fois, hors de tout capture, EN FIN DE SECTION.

   ==========================================================================
   V3 - PASSE DU 05/08/2026, conversation CTA 2.
   Refonte du modele de reglages (SPEC_CTA_V2_REFONTE.md) + fleche dessinee +
   les 4 gestes issus de RECHERCHE_ANIMATION_CTA.md.

   [M] LA FLECHE EST DESORMAIS DESSINEE EN CSS. Elle ne depend plus de
       .icon-arrow-right ni d'aucune police d'icones.
       Demande de Timothee, 04/08, verbatim : < sa forme est trop differente
       de notre font, ca ne correspond pas >.

       (!) ET LE DIAGNOSTIC QUI CIRCULAIT ETAIT FAUX - correction mesuree le
       05/08, elle doit rester ecrite ici. SPEC_CTA_V2_REFONTE.md l. 99 disait
       que la fleche sortait a 13 x 1 px PARCE QUE < display: inline-flex a ete
       pose sur une icone de POLICE, ce qui effondre la hauteur de ligne >.
       CONTROLE POSITIF au rendu (brouillon EDIT CLAUDE, 05/08), sur les 14
       i.icon-arrow-right de la home :
         fleches du COMPOSANT (travaille)   -> 13,19 x 1,00 px
         fleches DU THEME    (non travaille) -> 13,47 x 1,00 px
       LES DEUX FONT 1 PX DE HAUT. La cause n'est pas notre display : c'est
       screen.css lui-meme, qui declare sur .icon-chevron-*/.icon-arrow-*
         display: inline-block; position: relative; top: -0.125em;
         font-size: 0.571429em; LINE-HEIGHT: 1PX;
       Le glyphe est peint EN DEBORDEMENT d'une boite de 1 px : c'est la
       convention d'icone du theme, presente a l'identique sur les 4 CTA que
       Timothee n'a jamais signales. Le < 13 x 1 px > etait une mesure JUSTE
       SUR LE MAUVAIS OBJET (gotcha du pilier : sur un element qui deborde, la
       boite de mise en page ment - on mesure l'enfant peint).
       => Retirer le display n'aurait RIEN change, et on aurait cru avoir
       corrige. Le geste juste est celui que Timothee a demande : dessiner.

       Ce que le dessin apporte, et qui n'etait pas atteignable autrement :
       - epaisseur 1 px, exactement celle du contour du bouton ;
       - taille en em, donc solidaire du libelle a toutes les tailles ;
       - alignement optique MESURE, cf. [N] ;
       - aucune dependance a une police externe, donc rien a attendre au
         chargement et aucun glyphe de remplacement possible.

   [N] L'ALIGNEMENT OPTIQUE EST MESURE, PAS ESTIME. Barlow 400 a 14 px, releve
       le 05/08 par canvas measureText sur le banc (document.fonts.check
       renvoie true, donc la police est bien chargee, pas un repli) :
         hauteur d'x         7,00 px  = 0,500 em
         hauteur de capitale 10,00 px = 0,714 em
         ascendante 14 / descendante 3 -> aire de contenu 17 px
       Avec line-height 16,8 px : ligne de base a 13,90 px du haut de la boite
       de ligne, donc MEDIANE DE LA HAUTEUR D'X a 10,40 px. Le centre de la
       boite est a 8,40 px. => la fleche doit DESCENDRE de 2,00 px, soit
       0,143 em, pour etre centree sur la hauteur d'x et non sur la boite.
       C'est --efa-cta-fl-y, et c'est pour ca qu'une fleche centree a la regle
       parait toujours trop haute a cote d'une capitale.

   [O] will-change RETIRE DE LA FEUILLE. Trois sources concordantes, aucune
       mesure locale contraire (RECHERCHE_ANIMATION_CTA.md section 2.2) :
       MDN will-change (MAJ 18/07/2026) - < Use the will-change property as a
       last resort to try to deal with existing performance problems. Don't use
       it to anticipate performance problems. > et < adding will-change
       directly to a stylesheet [...] the browser will keep the optimizations
       for a much longer time than it would have otherwise >.
       web.dev (20/03/2015) - < Do not promote elements unnecessarily [...]
       every layer you create requires memory and management, and that's not
       free. >
       (!) Le gain n'est PAS mesure - un profil de rendu exige la fenetre au
       premier plan. Le retrait est fonde sur la doctrine, et c'est dit.

   [P] prefers-reduced-motion REMPLACE au lieu de SUPPRIMER, et c'est un bloc
       de 12 lignes au lieu de 11 selecteurs. MDN prefers-reduced-motion (MAJ
       10/06/2026) : le reglage signale que l'utilisateur prefere une interface
       qui < removes, reduces, or REPLACES motion-based animations >, et
       l'exemple de MDN elle-meme remplace un agrandissement par un fondu,
       decrit comme < a more muted animation that is not a vestibular motion
       trigger >.
       WCAG 2.2 SC 2.3.3 (niveau AAA) exclut NOMMEMENT de la < motion
       animation > les < changes of color, blurring, or opacity which do not
       change the perceived size, shape, or position of the element >.
       => En mouvement reduit, on REPOSE LES JETONS pour que TOUTE option
       retombe sur un fondu d'opacite et une transition de couleur. Le bouton
       reste vivant, et il n'y a plus un seul declencheur vestibulaire.
       Le bloc n'enumere plus aucun selecteur d'etat : il ne peut donc plus
       oublier :active, ce qui etait le defaut D3.

   [Q] ANNEAU DE FOCUS. Il n'en existait AUCUN : :focus-visible declenchait
       exactement le geste de :hover. Sur les palettes contour_*, ou rien ne
       se remplit, un utilisateur au clavier n'avait donc aucun indicateur.
       Un remplissage n'est pas un indicateur de focus.
       (!) LIMITE NOMMEE : l'anneau prend currentColor. Sur un fond photo de
       valeur proche, il peut manquer de contraste. Le remede n'est pas dans
       ce fichier, il est editorial (cf. RECHERCHE section 5 combinaison 3).

   ---- CE QUI PRECEDE ET QUI NE DOIT PAS ETRE DEFAIT ----
   [H] LE ::before EST REPRIS PAR LE THEME s'il n'est pas rejoue en (0,2,1) :
       screen.css .link-btn a::before est en (0,1,2). Sans la parade, top/left
       tombent a 0, width a auto, le rayon a var(--button_corners) et le fond
       a var(--theme_bg_btn) : LE FRONT COURBE N'EST PAS PEINT.
   [I] --efa-cta-fond NE SE RESOUT JAMAIS EN currentColor. Sinon le
       remplissage suit le libelle au survol : contraste 1:1.
   [K] LA COULEUR DU LIBELLE passe par --efa-cta-libelle et par LUI SEUL,
       consomme en (0,4,0), parce que screen.css porte
       [class*="palette-"] .link-btn a:not(.loading) en (0,3,1).
   [L] RAYON DE REPOS 24 px, JAMAIS 999 px : border-radius s'interpole
       lineairement en pixels et un bouton de 48 px est deja une pastille a
       24 px. Partir de 999 px = 97,5 % de la duree sans changement visible,
       puis un claquement.

   CONTRAT : aucune couleur en dur (les litteraux ne sont que des replis de
   var()), aucun !important, animation sans decalage de mise en page,
   prefers-reduced-motion respecte, cible tactile >= 48 px SAUF
   .efa-cta--quiet.
   ==========================================================================
============================================================================ */

/* --- 1. JETONS ------------------------------------------------------------
   Tout ce qui se regle vit ici. Les blocs d'options plus bas ne font que
   REPOSER ces jetons : aucune option ne re-declare de geometrie. C'est ce qui
   permet au bloc tactile et au bloc mouvement-reduit de couvrir toutes les
   combinaisons sans une ligne de plus. */
.efa-cta {
  /* Temps. Une seule courbe, decelerante, zero delai - decision datee de
     Timothee du 04/08 : < supprimer toute notion d'accelerer / ralentissement >.
     (!) cubic-bezier(0,0,.2,1) est un choix MAISON, pas un standard : la
     valeur n'a pas pu etre verifiee a une source d'autorite. Documente : le
     mot-cle CSS ease-out vaut cubic-bezier(0, 0, 0.58, 1) - MDN, MAJ
     20/04/2026 - donc notre courbe decelere plus franchement. */
  --efa-cta-duree-entree: .34s;
  --efa-cta-duree-sortie: .26s;
  --efa-cta-easing: cubic-bezier(0, 0, .2, 1);

  /* Forme - cf. [L]. Independante du remplissage : c'est le point central de
     la refonte. Ces deux jetons sont portes par border-radius de .efa-cta,
     jamais par le ::before, donc la forme bouge meme sans aucun remplissage. */
  --efa-cta-rayon-repos: 24px;
  --efa-cta-rayon-plein: 0px;

  /* Remplissage */
  --efa-cta-courbe: 28px;   /* longueur de l'arc du front de remplissage */
  --efa-cta-retrait: -1px;  /* debord du remplissage hors de la boite */
  --efa-cta-tr-repos: translateX(-100%);
  --efa-cta-tr-plein: translateX(0);
  --efa-cta-op-repos: 1;
  --efa-cta-op-plein: 1;
  --efa-cta-origine: left center;

  /* Couleurs - [I] et [K]. --efa-cta-trait est pose par les palettes ; sans
     palette il reste indefini et tout retombe sur currentColor, donc sur la
     couleur que la section donne deja au lien. C'est le mode < herite >, et
     c'est le DEFAUT : aucune section n'est repeinte sans qu'on le demande. */
  --efa-cta-fond: var(--efa-cta-remplissage, var(--theme_bg_btn, #000));
  --efa-cta-libelle: var(--efa-cta-trait, currentColor);
  --efa-cta-encre: var(--body_bg, #fff);
  --efa-cta-fond-bord: 0;

  /* Fleche dessinee - cf. [M] et [N]. Tout est en em, donc solidaire du
     libelle. A 14 px : cote 4,48 px, diagonale 6,34 px, hampe 10,36 px, pour
     une hauteur d'x mesuree a 7,00 px. */
  --efa-cta-fl-cote: .32em;                                  /* cote du carre */
  --efa-cta-fl-diag: calc(var(--efa-cta-fl-cote) * 1.41421); /* sa diagonale  */
  --efa-cta-fl-hampe: .74em;                                 /* option fleche */
  --efa-cta-fl-large: var(--efa-cta-fl-diag);
  --efa-cta-fl-y: .18em;       /* [N] recale 05/08 apres retour Timothee : trop haute */
  --efa-cta-fl-avance: 3px;    /* avance au survol, transform seul */
}

/* --- 2. LE CONTRAT VISUEL, rejoue en (0,2,0) ------------------------------
   screen.css ".link-btn a" (0,1,1) bat ".efa-cta" (0,1,0) et remettait a zero
   la bordure et la hauteur. Chaque declaration ci-dessous a ete mesuree
   perdante au rendu. Aucun !important : on monte la specificite. */
.efa-cta.efa-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: max(48px, var(--button_height, 0px));
  padding: 12px 22px;
  border: 1px solid var(--efa-cta-trait, currentColor);
  border-radius: var(--efa-cta-rayon-repos);
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  transition:
    border-radius var(--efa-cta-duree-sortie) var(--efa-cta-easing),
    color var(--efa-cta-duree-sortie) var(--efa-cta-easing);
}

@media (min-width: 47.5em) {
  .efa-cta.efa-cta { display: inline-flex; padding: 12px 26px; }
}

/* --- 2bis. LA COULEUR DU LIBELLE, rejouee en (0,4,0) - cf. [K] ------------ */
.efa-cta.efa-cta.efa-cta.efa-cta { color: var(--efa-cta-libelle); }

/* --- 2ter. L'ANNEAU DE FOCUS - cf. [Q] ------------------------------------
   Declare AVANT le bloc 4 pour que l'etat de survol n'ait pas a le repeter.
   Il ne depend d'aucun remplissage : c'est la seule raison d'etre du bloc. */
.efa-cta.efa-cta:focus-visible {
  outline: 2px solid var(--efa-cta-trait, currentColor);
  outline-offset: 3px;
}

/* --- 3. LE FRONT DE REMPLISSAGE, rejoue en (0,2,1) - cf. [H] --------------
   Les quatre dernieres declarations annulent ce que le theme AJOUTE ; sans
   elles la parade laisserait passer une ombre portee et une bordure parasites.
   [O] : plus de will-change. transform et opacity sont les deux seules
   proprietes compositees (web.dev, 20/03/2015) : le compositeur promeut deja
   la couche pendant la transition, la promotion permanente n'achete rien. */
.efa-cta.efa-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--efa-cta-retrait);
  right: auto;
  bottom: var(--efa-cta-retrait);
  left: var(--efa-cta-retrait);
  width: calc(100% - 2 * var(--efa-cta-retrait) + var(--efa-cta-courbe));
  background: var(--efa-cta-fond);
  border-radius: 0 var(--efa-cta-courbe) var(--efa-cta-courbe) 0 / 0 50% 50% 0;
  transform-origin: var(--efa-cta-origine);
  transform: var(--efa-cta-tr-repos);
  opacity: var(--efa-cta-op-repos);
  max-width: none;
  margin: 0;
  border: var(--efa-cta-fond-bord) solid var(--efa-cta-fond);
  box-shadow: none;
  transition:
    transform var(--efa-cta-duree-sortie) var(--efa-cta-easing),
    opacity var(--efa-cta-duree-sortie) var(--efa-cta-easing);
}

/* --- 3bis. LA FLECHE DESSINEE - cf. [M] et [N] ----------------------------
   La boite ne contient AUCUN texte : c'est un rectangle vide dont les deux
   pseudo-elements portent le trace. Elle n'anime que transform, donc elle est
   compositee comme le remplissage.
   Le decalage optique --efa-cta-fl-y est ecrit DANS le meme transform que
   l'avance : les deux etats declarent le transform en entier, il n'y a donc
   aucun risque qu'un etat efface le calage de l'autre. */
.efa-cta.efa-cta .efa-cta__fleche {
  flex: 0 0 auto;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--efa-cta-fl-large);
  height: var(--efa-cta-fl-diag);
  margin: 0;
  padding: 0;
  top: 0;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  transform: translate(0, var(--efa-cta-fl-y));
  transition: transform var(--efa-cta-duree-sortie) var(--efa-cta-easing);
}

/* La pointe : un carre de 1 px de filet, borde en haut et a droite, tourne de
   45 deg autour de son centre. Ancrage :
   - le carre non tourne a son bord droit a 0,20711 * cote du bord de la boite,
     donc son CENTRE a 0,70711 * cote, qui vaut exactement la demi-diagonale ;
   - la boite tournee deborde de la demi-diagonale de chaque cote du centre ;
   => le sommet du chevron tombe PILE sur le bord droit de la boite, sans
   debordement et sans reglage a la main. */
.efa-cta.efa-cta .efa-cta__fleche::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--efa-cta-fl-cote) * .20711);
  width: var(--efa-cta-fl-cote);
  height: var(--efa-cta-fl-cote);
  border: 0 solid currentColor;
  border-top-width: 1px;
  border-right-width: 1px;
  transform: translateY(-50%) rotate(45deg);
}

/* La hampe n'existe que sur l'option < fleche >. Elle s'arrete a 0,35 * cote
   du sommet : le trait ne traverse pas la pointe, il la rejoint.
   (!) LIMITE ASSUMEE ET NOMMEE : la hampe est un filet de 1 px pose au centre
   d'une boite de 6,34 px, donc sur une demi-position en pixels entiers. Sur un
   ecran a 1x elle peut rendre 1 px gris plutot que 1 px net ; a 2x elle est
   exacte. Les deux traits du chevron, eux, sont diagonaux donc lisses par
   construction - c'est une raison de plus de garder < chevron > par defaut. */
.efa-cta.efa-cta.efa-cta--fleche-pleine .efa-cta__fleche::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: calc(var(--efa-cta-fl-cote) * .35);
  height: 0;
  border-top: 1px solid currentColor;
  transform: translateY(-50%);
}
.efa-cta.efa-cta--fleche-pleine { --efa-cta-fl-large: var(--efa-cta-fl-hampe); }

/* --- 4. L'ETAT PLEIN ------------------------------------------------------
   Declare dans l'etat actif : c'est ce qui permet a l'entree d'avoir sa propre
   duree sans avoir besoin d'un delai ni d'une seconde courbe. */
.efa-cta.efa-cta.efa-cta:hover,
.efa-cta.efa-cta.efa-cta:focus-visible {
  border-radius: var(--efa-cta-rayon-plein);
  color: var(--efa-cta-encre);
  transition:
    border-radius var(--efa-cta-duree-entree) var(--efa-cta-easing),
    color var(--efa-cta-duree-entree) var(--efa-cta-easing);
}
.efa-cta.efa-cta.efa-cta:hover::before,
.efa-cta.efa-cta.efa-cta:focus-visible::before {
  transform: var(--efa-cta-tr-plein);
  opacity: var(--efa-cta-op-plein);
  transition:
    transform var(--efa-cta-duree-entree) var(--efa-cta-easing),
    opacity var(--efa-cta-duree-entree) var(--efa-cta-easing);
}
.efa-cta.efa-cta.efa-cta:hover .efa-cta__fleche,
.efa-cta.efa-cta.efa-cta:focus-visible .efa-cta__fleche {
  transform: translate(var(--efa-cta-fl-avance), var(--efa-cta-fl-y));
  transition: transform var(--efa-cta-duree-entree) var(--efa-cta-easing);
}

/* --- 5. PALETTE - efa_cta_palette ----------------------------------------
   4 valeurs, et chacune est un COUPLE COMPLET : contour+libelle au repos,
   remplissage, libelle une fois rempli. Aucune ne se resout en currentColor,
   c'est ce qui rend le contraste prouvable dans les 4 cas.
   Jetons mesures au rendu du 04/08 sur les 6 sections de la home :
   --theme_bg_btn = #000000 partout, --body_bg = #ffffff partout -> 21:1.

   (!) LE DEFAUT N'EST AUCUNE DE CES 4 VALEURS, ET C'EST DELIBERE.
   Le defaut du reglage est < herite >, qui n'emet AUCUNE classe : le bouton
   garde la couleur que la section donne deja a ses liens. Motif, et c'est un
   arbitrage DATE de L'ARCHITECTE 6 du 04/08 qu'il ne faut pas re-debattre :
   la couleur du texte VARIE d'une section a l'autre - rgb(255,255,255) sur
   slideshow / banner-columns / featured-products / image-with-text < Dixon >,
   rgb(0,0,0) sur image-with-text < Artemide >, rgb(25,25,25) sur
   featured-collection. Aucune valeur unique n'est juste sur les 6, et
   < un reglage qui repeint sans qu'on le lui demande est pire qu'un reglage
   qui ne fait rien >. */
.efa-cta.efa-cta--pal-clair {
  --efa-cta-trait: var(--body_bg, #fff);
  --efa-cta-fond: var(--body_bg, #fff);
  --efa-cta-encre: var(--theme_bg_btn, #000);
}
.efa-cta.efa-cta--pal-sombre {
  --efa-cta-trait: var(--theme_bg_btn, #000);
  --efa-cta-fond: var(--theme_bg_btn, #000);
  --efa-cta-encre: var(--body_bg, #fff);
}
/* Les deux contour_* : le bouton ne se remplit JAMAIS, seule la forme bouge.
   C'est le < contours only > demande, et c'est possible parce que la forme est
   portee par border-radius de .efa-cta, pas par le ::before.
   Le contraste ne peut pas se degrader : c'est celui du repos, inchange. */
.efa-cta.efa-cta--pal-contour-clair {
  --efa-cta-trait: var(--body_bg, #fff);
  --efa-cta-encre: var(--efa-cta-libelle);
}
.efa-cta.efa-cta--pal-contour-sombre {
  --efa-cta-trait: var(--theme_bg_btn, #000);
  --efa-cta-encre: var(--efa-cta-libelle);
}
/* (0,2,1), donc a specificite egale au bloc 3 et PLACE APRES : il gagne.
   Toute future montee de specificite du bloc 3 doit etre repercutee ici,
   sinon un remplissage reapparait sous une palette < contour > sans qu'aucune
   mesure de rendu ne le signale. Meme piege que --quiet, cf. bloc 9. */
.efa-cta.efa-cta--pal-contour-clair::before,
.efa-cta.efa-cta--pal-contour-sombre::before,
.efa-cta.efa-cta--remp-aucun::before { content: none; }

/* --- 6. FORME - efa_cta_forme --------------------------------------------
   La forme est INDEPENDANTE du remplissage : ces deux jetons ne sont lus que
   par border-radius de .efa-cta. Le defaut (pastille_vers_rectangle) n'emet
   aucune classe - c'est exactement le rendu actuel. */
.efa-cta.efa-cta--forme-rect-vers-pastille {
  --efa-cta-rayon-repos: 0px;
  --efa-cta-rayon-plein: 24px;
}
.efa-cta.efa-cta--forme-pastille-fixe {
  --efa-cta-rayon-repos: 24px;
  --efa-cta-rayon-plein: 24px;
}
.efa-cta.efa-cta--forme-rect-fixe {
  --efa-cta-rayon-repos: 0px;
  --efa-cta-rayon-plein: 0px;
}

/* --- 7. REMPLISSAGE - efa_cta_remplissage --------------------------------
   COMMENT le remplissage arrive. < aucun > le supprime entierement (bloc 5,
   content: none) : pas de pseudo-element, donc pas de couche de composition.
   Le defaut (balayage) n'emet aucune classe. */
.efa-cta.efa-cta--remp-fondu {
  --efa-cta-courbe: 0px;
  --efa-cta-tr-repos: translateX(0);
  --efa-cta-op-repos: 0;
}
.efa-cta.efa-cta--remp-montee {
  --efa-cta-courbe: 0px;
  --efa-cta-origine: center bottom;
  --efa-cta-tr-repos: scaleY(0);
  --efa-cta-tr-plein: scaleY(1);
}
.efa-cta.efa-cta--remp-centre {
  --efa-cta-courbe: 0px;
  --efa-cta-origine: center center;
  --efa-cta-tr-repos: scaleX(0);
  --efa-cta-tr-plein: scaleX(1);
}

/* --- 8. VITESSE - efa_cta_vitesse ----------------------------------------
   La sortie reste ~25 % plus courte que l'entree : un etat qui se retire
   lentement donne l'impression d'un bouton qui colle.
   Le defaut (standard, .34/.26) est plus POSE que la valeur precedemment en
   production (.26/.20) - demande datee de Timothee du 04/08 : < l'animation
   s'execute legerement trop rapidement >. */
.efa-cta.efa-cta--vit-posee { --efa-cta-duree-entree: .42s; --efa-cta-duree-sortie: .32s; }
.efa-cta.efa-cta--vit-vive  { --efa-cta-duree-entree: .26s; --efa-cta-duree-sortie: .20s; }

/* --- 9. FLECHE - efa_cta_fleche ------------------------------------------
   < chevron > est le defaut et n'emet aucune classe. < aucune > n'emet pas la
   balise du tout (c'est le snippet qui tranche), donc rien ici.
   < fleche > ajoute la hampe, cf. bloc 3bis. */

/* --- 10. TACTILE ---------------------------------------------------------
   Pas de survol sur un ecran tactile : le :hover y reste colle apres l'appui.
   On le neutralise et on rejoue la meme sequence sur :active, en plus court.
   Les jetons font que ces regles suffisent, quelle que soit la combinaison. */
@media (hover: none) {
  .efa-cta.efa-cta.efa-cta:hover {
    border-radius: var(--efa-cta-rayon-repos);
    color: var(--efa-cta-libelle);
  }
  .efa-cta.efa-cta.efa-cta:hover::before {
    transform: var(--efa-cta-tr-repos);
    opacity: var(--efa-cta-op-repos);
  }
  .efa-cta.efa-cta.efa-cta:hover .efa-cta__fleche {
    transform: translate(0, var(--efa-cta-fl-y));
  }
  .efa-cta.efa-cta.efa-cta:active {
    border-radius: var(--efa-cta-rayon-plein);
    color: var(--efa-cta-encre);
    transition:
      border-radius .16s var(--efa-cta-easing),
      color .16s var(--efa-cta-easing);
  }
  .efa-cta.efa-cta.efa-cta:active::before {
    transform: var(--efa-cta-tr-plein);
    opacity: var(--efa-cta-op-plein);
    transition:
      transform .16s var(--efa-cta-easing),
      opacity .16s var(--efa-cta-easing);
  }
  .efa-cta.efa-cta.efa-cta:active .efa-cta__fleche {
    transform: translate(var(--efa-cta-fl-avance), var(--efa-cta-fl-y));
    transition: transform .16s var(--efa-cta-easing);
  }
}

/* --- 11. Le CTA ne doit plus faire descendre le titre qu'il accompagne ---- */
header.title-styling .efa-cta { margin-top: 0; margin-bottom: 0; }

/* --- 12. EXTENSION : les 3 variantes de l'espace client -------------------
   Elles ne font que POSER les jetons ci-dessus. Chaque var() porte son repli,
   donc le composant reste juste hors espace client. */
.efa-cta--fill {
  --efa-cta-trait: var(--efa-ink, #1a1a1a);
  --efa-cta-remplissage: var(--efa-page, #fff);
  --efa-cta-libelle: var(--efa-page, #fff);
  --efa-cta-encre: var(--efa-ink, #1a1a1a);
}
.efa-cta.efa-cta--fill { background: var(--efa-ink, #1a1a1a); }
.efa-cta--line {
  --efa-cta-trait: var(--efa-ink, #1a1a1a);
  --efa-cta-remplissage: var(--efa-ink, #1a1a1a);
  --efa-cta-encre: var(--efa-page, #fff);
}

/* --quiet : tertiaire, retour, declencheur destructif.
   Pas de remplissage, pas de bordure, PAS de plancher de 48 px : < Supprimer
   une adresse > est le seul endroit du chantier ou agrandir une cible DEGRADE
   la securite (SPEC_UX_ESPACE_CLIENT l. 111).
   Rejoue en (0,2,0) ET place APRES le bloc 2, donc il gagne.
   ATTENTION - son ::before est rejoue en (0,2,1) LUI AUSSI : le bloc 3 etant
   en (0,2,1), un .efa-cta--quiet::before simple perdrait, content: none
   sauterait, et un remplissage apparaitrait sous < Supprimer une adresse >
   SANS QU'AUCUNE MESURE DE RENDU NE LE SIGNALE (l'ecran n'est pas la home). */
.efa-cta.efa-cta--quiet {
  --efa-cta-trait: transparent;
  --efa-cta-libelle: var(--efa-mute, #6f6a63);
  --efa-cta-encre: var(--efa-ink, #1a1a1a);
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.efa-cta.efa-cta.efa-cta--quiet:hover,
.efa-cta.efa-cta.efa-cta--quiet:focus-visible { border-radius: 0; }
.efa-cta.efa-cta--quiet::before { content: none; }

/* --- 13. ENTREE LIEE AU DEFILEMENT - efa_cta_entree ----------------------
   Option, DEFAUT DESACTIVE. Sources et raisons : RECHERCHE_ANIMATION_CTA.md
   sections 1 et 5-6.
   - @supports : animation-timeline n'est PAS Baseline. Chrome 115+, Edge 115+,
     Safari 26+ ; Firefox stable ne l'a pas (MDN browser-compat-data, lu le
     05/08/2026). Sans le garde, rien ne joue - acceptable UNIQUEMENT parce que
     l'etat de repos est deja l'etat lisible.
   - (!) LE RACCOURCI animation DOIT ETRE DECLARE AVANT animation-timeline.
     MDN (MAJ 22/04/2026) : < including animation resets a previously-declared
     animation-timeline value to auto >. L'ordre inverse donne un fichier qui a
     l'air juste et ne fait RIEN, sans aucun avertissement.
   - both : le bouton RESTE a son etat final une fois la plage franchie. Sans
     lui il redeviendrait invisible en continuant de defiler.
   - la plage se termine a cover 25 % : l'animation ne rejoue jamais et ne dure
     jamais 5 s en parallele du contenu -> hors du champ de WCAG 2.2 SC 2.2.2,
     qui est de NIVEAU A et qui considere qu'un contenu declenche par
     < scrolling an element into view > demarre AUTOMATIQUEMENT.
   - no-preference : translateY change la position percue, donc c'est une
     < motion animation > au sens de SC 2.3.3. En mouvement reduit l'animation
     n'existe pas du tout.
   - opacity + transform seuls : les deux seules proprietes compositees.
   (!) AUCUNE LIGNE DE CE BLOC N'A ETE VUE TOURNER - le defilement ne fonctionne
   pas en onglet cache. A recetter avant d'etre declare livre. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes efa-cta-entree {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .efa-cta.efa-cta--entree {
      animation: efa-cta-entree linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }
  }
}

/* --- 14. prefers-reduced-motion - cf. [P] --------------------------------
   EN DERNIER DANS LE FICHIER, et en (0,2,0) : a specificite egale aux blocs
   d'options, c'est l'ordre qui le fait gagner.
   Il n'enumere plus AUCUN selecteur d'etat - il repose les jetons, donc il
   couvre :hover, :focus-visible, :active, le bloc tactile et les 4 palettes
   sans pouvoir en oublier un. C'etait la cause du defaut D3.
   Effet net : toute option retombe sur un FONDU D'OPACITE + une transition de
   COULEUR, les deux nommement exclues de la < motion animation > par WCAG 2.2
   SC 2.3.3. Le bouton reste vivant, sans declencheur vestibulaire. */
@media (prefers-reduced-motion: reduce) {
  .efa-cta.efa-cta {
    --efa-cta-rayon-plein: var(--efa-cta-rayon-repos); /* la forme ne bouge plus */
    --efa-cta-tr-repos: translateX(0);                 /* plus aucun deplacement */
    --efa-cta-tr-plein: translateX(0);
    --efa-cta-op-repos: 0;                             /* ... remplace par un fondu */
    --efa-cta-op-plein: 1;
    --efa-cta-courbe: 0px;
    --efa-cta-fl-avance: 0px;                          /* la fleche n'avance plus */
  }
}