/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1779266235
Updated: 2026-05-20 08:37:15

*/

/* ---------------------------------------------------------------------
   1. VARIABLES DE MARQUE
   Centralise la charte. Si une couleur change, on ne touche qu'ici.
   --------------------------------------------------------------------- */
:root {
  --amv-primary:      #DE4018; /* terracotta — couleur de marque        */
  --amv-secondary:    #F7F6EC; /* crème — fond de site                  */
  --amv-tertiary:     #D9D7BC; /* sauge / beige                         */
  --amv-black:        #000000;
  --amv-black-2:      #323232; /* boutons sombres, texte fort           */
  --amv-white:        #ffffff;
  --amv-grey:         #b5b5b5;
  --amv-grey-light:   #f1f1f1;
  --amv-grey-dark:    #333333;

  --amv-success:      #28a745;
  --amv-info:         #17a2b8;
  --amv-warning:      #ffc107;
  --amv-danger:       #dc3545;

  --amv-font-body:    'Lato', Arial, sans-serif;
  --amv-font-title:   'Playfair Display', Georgia, serif;
}

/* ---------------------------------------------------------------------
   2. BASE — fond crème, sélection, scrollbar
   (Elementor pilote déjà police/couleur du corps via les réglages
    globaux ; on ne garde ici que ce qui n'est PAS réglable en UI)
   --------------------------------------------------------------------- */
body {
  background: var(--amv-secondary);
  color: var(--amv-black);
}

::selection      { background: var(--amv-primary); color: var(--amv-white); }
::-moz-selection { background: var(--amv-primary); color: var(--amv-white); }

/* Scrollbar (WebKit) */
::-webkit-scrollbar        { width: 12px; height: 6px; background: var(--amv-white); }
::-webkit-scrollbar-track  { background: var(--amv-white); }
::-webkit-scrollbar-thumb  { background: var(--amv-primary); border-radius: 0; }

/* ---------------------------------------------------------------------
   3. LIENS dans le contenu
   Souligné par défaut, retrait du soulignement au survol
   --------------------------------------------------------------------- */
.elementor-widget-text-editor a,
.entry-content a,
.amv-content a {
  color: var(--amv-primary);
  text-decoration: underline;
  transition: all .3s ease;
}
.elementor-widget-text-editor a:hover,
.entry-content a:hover,
.amv-content a:hover,
.elementor-widget-text-editor a:focus,
.entry-content a:focus,
.amv-content a:focus {
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   4. BOUTONS — angles droits + inversion au survol
   S'applique aux boutons Elementor ET aux boutons natifs WP/formulaires.
   La couleur de fond vient de la couleur globale "Primaire" ; on force
   ici le rayon nul et le comportement hover de l'ancien thème.
   --------------------------------------------------------------------- */
.elementor-button,
.wp-block-button__link,
button:not(.elementor-clickable):not([class*="dialog"]),
input[type="submit"],
input[type="button"],
.amv-btn {
  border-radius: 0 !important;
  font-family: var(--amv-font-body);
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  transition: all .3s ease;
}

/* Bouton primaire (couleur de marque) */
.elementor-button,
.amv-btn,
.amv-btn-primary {
  background: var(--amv-primary);
  color: var(--amv-white);
  border: 2px solid var(--amv-primary);
}
.elementor-button:hover,
.elementor-button:focus,
.amv-btn:hover,
.amv-btn:focus,
.amv-btn-primary:hover,
.amv-btn-primary:focus {
  background: transparent;
  color: var(--amv-primary);
}

/* Bouton sombre (noir-2) — classe utilitaire .amv-btn-dark */
.amv-btn-dark {
  background: var(--amv-black-2);
  color: var(--amv-white);
  border: 2px solid var(--amv-black-2);
}
.amv-btn-dark:hover,
.amv-btn-dark:focus {
  background: transparent;
  color: var(--amv-black-2);
}

/* Bouton tertiaire (sauge) — classe utilitaire .amv-btn-tertiary */
.amv-btn-tertiary {
  background: var(--amv-tertiary);
  color: var(--amv-white);
  border: 2px solid var(--amv-tertiary);
}
.amv-btn-tertiary:hover,
.amv-btn-tertiary:focus {
  background: transparent;
  color: var(--amv-tertiary);
}

/* ---------------------------------------------------------------------
   5. LISTES — puces rondes terracotta dans le contenu éditorial
   À appliquer sur le widget Éditeur de texte (classe .amv-content
   conseillée) ou via .entry-content.
   --------------------------------------------------------------------- */
.amv-content ul,
.entry-content ul {
  padding-left: 1rem;
  list-style: none;
}
.amv-content ul > li,
.entry-content ul > li {
  position: relative;
  padding-left: 16px;
  list-style: none;
}
.amv-content ul > li::before,
.entry-content ul > li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amv-primary);
}
.amv-content ol > li::marker,
.entry-content ol > li::marker {
  color: var(--amv-primary);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   6. CITATIONS
   --------------------------------------------------------------------- */
.amv-content blockquote,
.entry-content blockquote,
.elementor-widget-blockquote blockquote {
  border-left: 4px solid var(--amv-primary);
  background: var(--amv-grey-light);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  font-family: var(--amv-font-title);
  font-style: italic;
}

/* ---------------------------------------------------------------------
   7. TABLEAUX
   --------------------------------------------------------------------- */
.amv-content table,
.entry-content table,
.elementor-widget-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.amv-content table th,
.entry-content table th {
  background: var(--amv-black-2);
  color: var(--amv-white);
  text-align: left;
  padding: 12px 15px;
  font-family: var(--amv-font-body);
  font-weight: 700;
}
.amv-content table td,
.entry-content table td {
  padding: 10px 15px;
  border-bottom: 1px solid var(--amv-grey);
}
.amv-content table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td {
  background: var(--amv-grey-light);
}

/* ---------------------------------------------------------------------
   8. ALERTES — classes utilitaires .alert / .alert-*
   (utiles pour messages d'inscription, quotas, confirmations)
   --------------------------------------------------------------------- */
.alert {
  margin: 20px 0;
  padding: 15px 25px;
  color: var(--amv-white);
  clear: both;
}
.alert-success { background: var(--amv-success); color: var(--amv-black-2); }
.alert-info    { background: var(--amv-primary);  color: var(--amv-black-2); }
.alert-warning { background: var(--amv-warning);  color: var(--amv-black-2); }
.alert-danger  { background: var(--amv-danger);   color: var(--amv-white);  }

/* ---------------------------------------------------------------------
   9. CLASSES UTILITAIRES couleur / fond (reprises du thème)
   --------------------------------------------------------------------- */
.amv-c-primary   { color: var(--amv-primary)   !important; }
.amv-c-tertiary  { color: var(--amv-tertiary)  !important; }
.amv-c-dark      { color: var(--amv-black-2)   !important; }
.amv-bg-primary  { background: var(--amv-primary)   !important; }
.amv-bg-secondary{ background: var(--amv-secondary) !important; }
.amv-bg-tertiary { background: var(--amv-tertiary)  !important; }
.amv-bg-light    { background: var(--amv-grey-light)!important; }

/* ---------------------------------------------------------------------
   10. CHAMPS DE FORMULAIRE (inscriptions / contact)
   Angles droits, focus terracotta
   --------------------------------------------------------------------- */
.elementor-field-group input:not([type="submit"]):not([type="button"]),
.elementor-field-group select,
.elementor-field-group textarea,
.amv-content input:not([type="submit"]):not([type="button"]),
.amv-content select,
.amv-content textarea {
  border-radius: 0 !important;
  border: 1px solid var(--amv-grey);
  font-family: var(--amv-font-body);
}
.elementor-field-group input:focus,
.elementor-field-group select:focus,
.elementor-field-group textarea:focus {
  border-color: var(--amv-primary);
  outline: none;
}

/* =====================================================================
   AMV — Menu principal DESKTOP (reproduction fidèle de l'ancien thème)

   PRÉREQUIS Elementor : widget Menu → onglet Style → « Pointeur »
   (effet de survol) = AUCUN. Sinon Elementor occupe le ::after des
   liens. Les !important ci-dessous rendent malgré tout l'affichage
   fiable même si l'effet reste activé.

   « Demander la brochure » = élément Bouton distinct (pas géré ici).
   ===================================================================== */

/* Liens de 1er niveau : place pour l'icône à droite + soulignement au survol */
.elementor-nav-menu--main .elementor-item {
  position: relative;
  padding-right: 22px;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus {
  text-decoration: underline;
}

/* Masque le chevron natif d'Elementor pour ne garder que le nôtre (DESKTOP UNIQUEMENT) */
.elementor-nav-menu--main .sub-arrow { display: none !important; }

/* PARENTS (L'association, Les activités) : chevron bas ↓ au repos,
   glisse vers le bas et disparaît au survol */
.elementor-nav-menu--main .menu-item-has-children > .elementor-item::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: calc(50% + 1px) !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 7px !important;
  opacity: 1 !important;
  background: url("assets/svg/icon-arrow-down.svg") no-repeat center / contain !important;
  transition: all .2s ease !important;
}
.elementor-nav-menu--main .menu-item-has-children > .elementor-item:hover::after,
.elementor-nav-menu--main .menu-item-has-children > .elementor-item:focus::after {
  top: 80% !important;
  opacity: 0 !important;
}

/* « S'inscrire à une manifestation » (.arrow) : flèche ↗ au repos,
   glisse en haut-droite et disparaît au survol */
.elementor-nav-menu--main .menu-item.arrow > .elementor-item::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 11px !important;
  height: 11px !important;
  opacity: 1 !important;
  background: url("assets/svg/icon-feather-arrow-up-right.svg") no-repeat center / contain !important;
  transition: all .2s ease !important;
}
.elementor-nav-menu--main .menu-item.arrow > .elementor-item:hover::after,
.elementor-nav-menu--main .menu-item.arrow > .elementor-item:focus::after {
  top: 30% !important;
  right: -10px !important;
  opacity: 0 !important;
}

/* Bouton « Demander la brochure » : graisse normale (non gras),
   cohérent avec la charte (boutons en 400) */
.elementor-button {
  font-weight: 400 !important;
}

/* =====================================================================
   AMV — Menu DÉROULANT (mobile / burger)  ← CORRECTIF

   Le widget Menu d'Elementor sort DEUX menus : .elementor-nav-menu--main
   (desktop, traité au-dessus) et .elementor-nav-menu--dropdown (le panneau
   du burger). Les règles --main ne touchent PAS le déroulant : on y reporte
   donc l'icône ↗ de « S'inscrire ».

   Les PARENTS (L'association, Les activités) : on GARDE le span.sub-arrow
   en place (c'est lui le toggle au tap) mais on cache son SVG natif (le
   caret plein) et on y peint le MÊME chevron fin que le desktop, avec
   rotation 180° à l'ouverture du sous-menu.
   ===================================================================== */

/* ↗ « S'inscrire à une manifestation » — visible AUSSI dans le déroulant.
   Inline, juste APRÈS le texte (comme les chevrons). IMPORTANT : Elementor
   se sert du ::after des liens pour son effet « Pointeur » (position:absolute
   left:0) → on force position:static pour remettre la flèche dans le flux,
   sinon elle se superpose au début du texte. */
.elementor-nav-menu--dropdown .menu-item.arrow > .elementor-item::after {
  content: '' !important;
  position: static !important;
  display: inline-block !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  background: url("assets/svg/icon-feather-arrow-up-right.svg") no-repeat center / contain !important;
}

/* PARENTS dans le déroulant : remplacer le caret plein natif d'Elementor
   par le même chevron fin que le desktop, sans casser le toggle au tap.
   (On cache le contenu natif du .sub-arrow et on dessine le chevron en fond.) */
.elementor-nav-menu--dropdown .menu-item-has-children > .elementor-item .sub-arrow > * {
  display: none !important;
}
.elementor-nav-menu--dropdown .menu-item-has-children > .elementor-item .sub-arrow {
  display: inline-block !important;
  width: 12px !important;
  height: 7px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  background: url("assets/svg/icon-arrow-down.svg") no-repeat center / contain !important;
  transition: transform .2s ease !important;
}
/* Rotation du chevron quand le sous-menu est ouvert (retour visuel accordéon) */
.elementor-nav-menu--dropdown .menu-item-has-children > .elementor-item[aria-expanded="true"] .sub-arrow {
  transform: rotate(180deg) !important;
}

/* « Demander la brochure » présenté en BOUTON dans la liste mobile (li.btn)
   — repris de l'ancien thème (_menu.scss &.btn). À mettre sur l'item du
   menu WP mobile : Apparence → Menus → Classes CSS = btn.
   --amv-menu-indent = retrait gauche des items du déroulant (≈ padding
   horizontal réglé dans le widget). Ajuste cette seule valeur si le bord
   gauche du bouton ne tombe pas pile sous le texte des items. */
.elementor-nav-menu--dropdown .menu-item.btn {
  --amv-menu-indent: 40px;
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;               /* air en bas, sous le bouton (dernier item) */
}
.elementor-nav-menu--dropdown .menu-item.btn > .elementor-item {
  display: inline-block !important;
  margin-left: var(--amv-menu-indent); /* aligne le bord gauche du bouton sur le TEXTE des items */
  padding: 15px 20px !important;
  background: var(--amv-primary) !important;
  color: var(--amv-white) !important;
  border: 2px solid var(--amv-primary) !important;
  font-size: 1.125rem !important;
  text-decoration: none !important;
  transition: all .3s ease !important;
}
.elementor-nav-menu--dropdown .menu-item.btn > .elementor-item::after {
  content: none !important;            /* pas de flèche/chevron sur le bouton */
}
.elementor-nav-menu--dropdown .menu-item.btn > .elementor-item:hover,
.elementor-nav-menu--dropdown .menu-item.btn > .elementor-item:focus {
  background: transparent !important;
  color: var(--amv-primary) !important;
}

/* =====================================================================
   AMV — Sous-menus : flèche droite à gauche de chaque entrée,
   qui glisse vers la droite au survol (desktop déroulant + mobile).
   Volontairement NON scopé → fonctionne déjà dans les deux menus.
   N'affecte pas les icônes de 1er niveau (cible .elementor-sub-item).
   ===================================================================== */
.elementor-sub-item {
  position: relative;
  padding-left: 30px !important;
}
.elementor-sub-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 11px;
  background: url("assets/svg/icon-feather-arrow-right.svg") no-repeat center left / contain;
  transition: left .3s ease;
}
.elementor-sub-item:hover::before,
.elementor-sub-item:focus::before {
  left: 10px;
}

/* =====================================================================
   AMV — Mégaphone « voir les manifestations » (mobile uniquement)
   Équivalent de .btn-manifestations de l'ancien thème : icône seule,
   lien vers l'archive des manifestations, dans la barre mobile.

   USAGE (Elementor) : widget HTML dans le conteneur header :
     <a class="amv-megaphone" href="/manifestations/"
        aria-label="Voir les manifestations"></a>
   L'icône vient du fichier via mask → couleur pilotée par background-color
   (noir au repos, terracotta au survol). Avantage : indépendant de la
   couleur de lien d'Elementor, donc plus de risque de terracotta forcé.
   Visibilité : règle Responsive du widget = masquer Desktop + Tablette.
   ===================================================================== */
.amv-megaphone {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background-color: var(--amv-black);   /* couleur de l'icône (mask) */
  -webkit-mask: url("assets/svg/icon-megaphone.svg") no-repeat center / contain;
          mask: url("assets/svg/icon-megaphone.svg") no-repeat center / contain;
  transition: background-color .3s ease;
}
.amv-megaphone:hover,
.amv-megaphone:focus {
  background-color: var(--amv-primary);
}
@media (max-width: 575px) {
  .amv-megaphone { width: 26px; height: 26px; }
}

/* Centre l'icône horizontalement ET verticalement dans la cellule du
   widget HTML. Ajoute la classe CSS "amv-megaphone-cell" sur le widget
   HTML (Avancé → Classes CSS). On évite :has() → compatible partout et
   pas de faux-positif d'éditeur / de minifieur de cache. */
.amv-megaphone-cell .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* =====================================================================
   AMV — Fil d'Ariane (SEOPress) : TOUT sur une seule ligne
   Le <ol class="breadcrumb"> est en display:block par défaut → il passe
   sous « Vous êtes ici : ». On remet le nav + la liste en ligne, et on
   reprend le style de l'ancien thème (petit, liens noirs, séparateur ">").
   Scopé au widget SEOPress (.elementor-widget-sp-breadcrumbs).
   ===================================================================== */
.elementor-widget-sp-breadcrumbs nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  font-size: 0.75rem;
  color: var(--amv-black);
}
.elementor-widget-sp-breadcrumbs .breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elementor-widget-sp-breadcrumbs .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--amv-black);
}
.elementor-widget-sp-breadcrumbs .breadcrumb-item a {
  color: var(--amv-black);
  text-decoration: none;
}
.elementor-widget-sp-breadcrumbs .breadcrumb-item a:hover,
.elementor-widget-sp-breadcrumbs .breadcrumb-item a:focus {
  text-decoration: underline;
}
/* NB : le séparateur ">" est fourni par SEOPress lui-même
   (réglage seopress_breadcrumbs_separator). On ne le redessine donc PAS
   en CSS, sinon il s'affiche en double (« > > »). */

/* =====================================================================
   AMV — Liste "sommaire" de pages (item-list / item-from-list)
   Repris de l'ancien thème (_nodes.scss + .use-as-link) : chaque item est
   un bloc blanc avec une barre terracotta à gauche ; au survol la barre
   remplit tout le bloc (fond terracotta, texte blanc) en glissant.

   HTML attendu (à coller dans un widget HTML, ou sortie d'un Loop) :
     <ul class="item-list">
       <li class="item-from-list use-as-link"><a href="…">Présentation</a></li>
       <li class="item-from-list use-as-link"><a href="…">Adhérer à l'association</a></li>
       <li class="item-from-list use-as-link"><a href="…">Mécénat</a></li>
     </ul>
   ===================================================================== */
.item-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.item-list .item-from-list {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--amv-font-title);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--amv-black);
}
.item-list .item-from-list::before {
  content: none !important;   /* neutralise une éventuelle puce */
}
.item-list .item-from-list:last-child {
  margin-bottom: 0;
}
.item-list .item-from-list a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 20px 25px;
  background: var(--amv-white);
  color: var(--amv-black);
  text-decoration: none;
}
/* Barre terracotta à gauche, qui s'étend à 100% au survol (z-index:-1
   => derrière le texte mais au-dessus du fond blanc du lien). */
.item-list .item-from-list a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 5px;
  height: 100%;
  background: var(--amv-primary);
  transition: all .3s ease;
}
.item-list .item-from-list a:hover::before,
.item-list .item-from-list a:focus::before {
  width: 100%;
}
.item-list .item-from-list a:hover,
.item-list .item-from-list a:focus {
  color: var(--amv-white);
}
@media (max-width: 575px) {
  .item-list .item-from-list { font-size: 1.2rem; }
}

/* Tout l'item est cliquable / curseur pointeur (.use-as-link) */
.use-as-link,
.use-as-link a { cursor: pointer; }
.use-as-link a { text-decoration: none; }

/* === Bouton AMV "En savoir plus" — centralisé (kit) === */
a.calltoaction.calltoaction-secondary,
.elementor-button.calltoaction-secondary{
  background:transparent !important;
  background-image:none !important;
  color:#000 !important;
  fill:#000 !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:.875rem !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  line-height:1 !important;
  min-height:0 !important;
  width:auto !important;
  padding:0 48px 0 0 !important;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  cursor:pointer !important;
}
a.calltoaction.calltoaction-secondary:hover,
a.calltoaction.calltoaction-secondary:focus,
.elementor-button.calltoaction-secondary:hover,
.elementor-button.calltoaction-secondary:focus{
  background:transparent !important;
  color:#000 !important;
  text-decoration:none !important;
}

/* le cercle terracotta */
a.calltoaction.calltoaction-secondary::before,
.elementor-button.calltoaction-secondary::before{
  content:'' !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  height:27px !important;
  width:27px !important;
  border:1px solid #DE4018 !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
  transition:all .3s ease !important;
}

/* la flèche (tête dans le cercle, pointe à droite) */
a.calltoaction.calltoaction-secondary::after,
.elementor-button.calltoaction-secondary::after{
  content:'' !important;
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  height:10px !important;
  width:27px !important;
  transform:translateY(-50%) !important;
  background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229.382%22%20height%3D%2212.684%22%20viewBox%3D%220%200%2029.382%2012.684%22%3E%3Cg%20transform%3D%22translate%280.132%20-11.346%29%22%3E%3Cpath%20d%3D%22M23.53%2C12.4%2C28.5%2C18l-4.97%2C4.969%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M.618%2C18H28.5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center right !important;
  background-size:contain !important;
  transition:all .3s ease !important;
}

/* survol : cercle qui grossit + flèche qui avance */
a.calltoaction.calltoaction-secondary:hover::before,
a.calltoaction.calltoaction-secondary:focus::before,
.elementor-button.calltoaction-secondary:hover::before,
.elementor-button.calltoaction-secondary:focus::before{
  transform:translateY(-50%) scale(1.2) !important;
}
a.calltoaction.calltoaction-secondary:hover::after,
a.calltoaction.calltoaction-secondary:focus::after,
.elementor-button.calltoaction-secondary:hover::after,
.elementor-button.calltoaction-secondary:focus::after{
  right:8px !important;
}

/* neutralise l'icône interne d'Elementor (on garde TA flèche en ::after) */
.calltoaction-secondary .elementor-button-icon,
.calltoaction-secondary .elementor-align-icon-right,
.calltoaction-secondary .elementor-align-icon-left{ display:none !important; }
.calltoaction-secondary .elementor-button-content-wrapper{ display:inline-flex !important; align-items:center !important; }
.calltoaction-secondary .elementor-button-text{ display:inline !important; }