.elementor-kit-4{--e-global-color-primary:#1A1A1A;--e-global-color-secondary:#FFBD20;--e-global-color-text:#666666;--e-global-color-accent:#20C4C3;--e-global-color-3868200:#2927281F;--e-global-color-7f6fce9:#29272840;--e-global-color-9d3eb75:#E0A800;--e-global-color-1b4051f:#189998;--e-global-color-b34f43e:#292728;--e-global-color-fb8464c:#FFFFFF;--e-global-color-5bb3dfe:#FFBD20;--e-global-color-e4ad1db:#F7F7F7;--e-global-typography-primary-font-family:"Nunito";--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Nunito";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-secondary );font-family:"Nunito", Sans-serif;font-size:13px;font-weight:700;color:var( --e-global-color-primary );border-radius:9px 9px 9px 9px;padding:11px 16px 11px 16px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:var( --e-global-color-9d3eb75 );border-style:none;border-radius:9px 9px 9px 9px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a:hover{font-style:normal;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ────────────────────────────────────────────────
   BASE COLOR TOKENS
   ──────────────────────────────────────────────── */
:root {
  /* Brand palette */
      --teal: #20c4c3;
    --teal-dark: #189998;
    --teal-soft: #e8f8f8;
    --yellow: #ffbd20;
    --yellow-dark: #e0a800;
    --orange: #ff8a3d;
    --orange-soft: #fff1e8;
    --blue: #4a8bf5;
    --blue-soft: #ecf3ff;
    --indigo: #6366f1;
    --indigo-soft: #eef0ff;
    --green: #10b981;
    --green-soft: #e6f7f1;
    --ink: #1a1a1a;
    --ink-2: #4a4748;
    --ink-3: #6b6b6b;
    --ink-4: #9a9a9a;
    --line: rgba(0, 0, 0, 0.07);
    --line-2: rgba(0, 0, 0, 0.12);
    --bg-soft: #fafafa;
    --bg-soft-2: #f5f5f6;
  --color-yellow:       #ffbd20;
  --color-yellow-dark:  #e0a800;
  --color-yellow-light: #fff3cc;

  --color-teal:         #20c4c3;
  --color-teal-dark:    #189998;
  --color-teal-light:   #d0f4f4;

  --color-dark:         #292728;
  --color-dark-muted:   #4a4748;

  --color-white:        #ffffff;
  --color-light-bg:     #f5f5f5;
  --color-border:       rgba(41, 39, 40, 0.12);
  --color-border-strong:rgba(41, 39, 40, 0.25);

  /* ────────────────────────────────────────────────
     SEMANTIC COLOR TOKENS
     ──────────────────────────────────────────────── */

  /* Foreground */
  --fg-primary:   var(--color-dark);
  --fg-secondary: var(--color-dark-muted);
  --fg-muted:     #888486;
  --fg-inverted:  var(--color-white);
  --fg-accent:    var(--color-teal);
  --fg-highlight: var(--color-yellow);

  /* Backgrounds */
  --bg-page:      var(--color-white);
  --bg-subtle:    var(--color-light-bg);
  --bg-accent:    var(--color-teal);
  --bg-accent-lt: var(--color-teal-light);
  --bg-cta:       var(--color-yellow);
  --bg-dark:      var(--color-dark);

  /* Interactive */
  --interactive-primary:        var(--color-teal);
  --interactive-primary-hover:  var(--color-teal-dark);
  --interactive-cta:            var(--color-yellow);
  --interactive-cta-hover:      var(--color-yellow-dark);
  --interactive-link:           var(--color-teal);
  --interactive-link-hover:     var(--color-teal-dark);

  /* Status */
  --status-success: #28a745;
  --status-warning: var(--color-yellow);
  --status-error :   #dc3545;
  --status-info:    var(--color-teal);

  /* ────────────────────────────────────────────────
     TYPOGRAPHY TOKENS
     ──────────────────────────────────────────────── */

  /* Font families */
  --font-sans:  'Nunito', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;

  /* Font sizes — base 16px */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  /* Font weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* ────────────────────────────────────────────────
     SPACING TOKENS (base 8px)
     ──────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ────────────────────────────────────────────────
     BORDER RADIUS TOKENS
     ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ────────────────────────────────────────────────
     SHADOW TOKENS
     ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(41,39,40,0.08);
  --shadow-md:  0 2px 12px rgba(41,39,40,0.10);
  --shadow-lg:  0 6px 24px rgba(41,39,40,0.14);
  --shadow-xl:  0 12px 40px rgba(41,39,40,0.18);

  /* ────────────────────────────────────────────────
     TRANSITION TOKENS
     ──────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ────────────────────────────────────────────────
     LAYOUT
     ──────────────────────────────────────────────── */
  --max-width:         1200px;
  --section-padding-y: 80px;
  --section-padding-x: 24px;
}

/* ────────────────────────────────────────────────
   SEMANTIC TYPE ELEMENTS
   ──────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-secondary);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p {
 
  line-height: var(--leading-relaxed);
  
}

p.lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

a {
  color: var(--interactive-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--interactive-link-hover);
  text-decoration: none;
}

strong, b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-xs);
  color: var(--fg-muted);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Label / eyebrow style */
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Accent label in teal */
.label-accent {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-teal);
}
.jet-form-builder-row {

    padding: 0px!important;

}
body:not(.woocommerce-checkout) .form-row,
.jet-form-builder-row:is(.field-type-text-field, .field-type-select-field, .field-type-number-field, .field-type-textarea):not(:has(#remember_me)):not(:has(#terms)) {
    position: relative;
    display: flex;
    flex-direction: column;
}

body:not(.woocommerce-checkout) .form-row label,
.jet-form-builder-row:is(.field-type-text-field, .field-type-select-field, .field-type-number-field, .field-type-textarea):not(:has(#remember_me)):not(:has(#terms)) .jet-form-builder__label {
    line-height: 1;
    position: absolute;
    z-index: 10;
    pointer-events: none;
    left: 13px;
    top: 17px;
    transform: none;
    margin: 0;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.woocommerce-checkout) .form-row.textarea-row label,
.jet-form-builder-row.field-type-textarea:not(:has(#remember_me)):not(:has(#terms)) .jet-form-builder__label {
    top: 18px;
    transform: none;
}

body:not(.woocommerce-checkout) .form-row label,
.jet-form-builder-row:not(:has(#remember_me)):not(:has(#terms)) .jet-form-builder__label-text {
    color: #999;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    background: transparent;
    transition: inherit;
}

body:not(.woocommerce-checkout) .form-row:is(:has(input:focus), :has(textarea:focus), :has(select:focus), :has(.select2-container--focus), :has(input:not(:placeholder-shown)), :has(textarea:not(:placeholder-shown))) label,
.jet-form-builder-row:is(.field-type-text-field, .field-type-select-field, .field-type-number-field, .field-type-textarea):not(:has(#remember_me)):not(:has(#terms)):is(
    :has(input:focus), 
    :has(textarea:focus), 
    :has(.select2-container--focus), 
    :has(input:not(:placeholder-shown)), 
    :has(textarea:not(:placeholder-shown)),
    :has(input:-webkit-autofill),
    :has(.select2-selection__rendered:not(:empty))
) .jet-form-builder__label {
    top: 6px;
    transform: none;
}

body:not(.woocommerce-checkout) .form-row:is(:has(input:focus), :has(textarea:focus), :has(input:not(:placeholder-shown)), :has(textarea:not(:placeholder-shown))) label,
.jet-form-builder-row:is(.field-type-text-field, .field-type-select-field, .field-type-number-field, .field-type-textarea):not(:has(#remember_me)):not(:has(#terms)):is(
    :has(input:focus), 
    :has(textarea:focus), 
    :has(.select2-container--focus), 
    :has(input:not(:placeholder-shown)), 
    :has(textarea:not(:placeholder-shown)),
    :has(input:-webkit-autofill)
) .jet-form-builder__label-text {
    color: #20c4c3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.woocommerce-checkout) .form-row input:not(#remember_me):not(#terms), 
body:not(.woocommerce-checkout) .form-row select, 
body:not(.woocommerce-checkout) .form-row textarea,
.jet-form-builder-row .jet-form-builder__field:not(#remember_me):not(#terms),
.jet-form-builder-row .select2-selection--single {
    width: 100% !important;
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 8px !important;
    padding: 20px 13px 7px !important;
    background: #fff !important;
    outline: none !important;
    transition: all 150ms ease !important;
    appearance: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 52px !important;
}

.jet-form-builder-row .jet-form-builder__field:not(#remember_me):not(#terms):focus,
.jet-form-builder-row .select2-selection--single:focus,
.jet-form-builder-row:has(.select2-container--focus) .select2-selection--single {
    border-color: #20c4c3 !important;
    box-shadow: 0 0 0 3px rgba(32, 196, 195, 0.1) !important;
}

.jet-form-builder-row.field-type-textarea:not(:has(#remember_me)):not(:has(#terms)) .jet-form-builder__field {
    min-height: 100px !important;
    padding-top: 24px !important;
}

.jet-form-builder-row input:not(#remember_me):not(#terms)::placeholder,
.jet-form-builder-row textarea::placeholder {
    color: transparent !important;
}

.jet-form-builder__action-button.jet-form-builder__submit {
    width: 100% !important;
    background: #ffbd20 !important;
    color: #1a1a1a !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 14px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 10px;
}

.jet-form-builder__action-button.jet-form-builder__submit:hover {
    background: #e0a800 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 189, 32, 0.2);
}

.jet-form-builder__action-button.jet-form-builder__submit:active {
    transform: translateY(0);
}

.field-error, .error-message{
    color:var(--status-error)!important;
    font-size: 13px!important;
}








/* ar-step-line (stepper accueil) */
.e-con:has(&gt; .elementor-widget-heading.ar-step-line){position:relative;}
.e-con:has(&gt; .elementor-widget-heading.ar-step-line)::after{
  content:"";
  position:absolute;
  top:28px;
  left:calc(50% + 36px);
  width:calc(100% - 40px);
  height:1px;
  background:repeating-linear-gradient(to right,#20c4c3 0,#20c4c3 8px,transparent 8px,transparent 16px);
}
@media (max-width:1024px){
  .e-con:has(&gt; .elementor-widget-heading.ar-step-line)::after{display:none;}
}

/* ar-footer links */
.ar-flink{color:#666666;text-decoration:none;display:block;transition:color .15s;}
.ar-flink:hover{color:#1a1a1a;}
.ar-botlink{color:#aaaaaa;text-decoration:none;transition:color .15s;}
.ar-botlink:hover{color:#1a1a1a;}

/* === ar-controles (généré par script — ne pas éditer à la main) === */
.ar-eyebrow .elementor-heading-title { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#20c4c3; }
.ar-section-title .elementor-heading-title em { font-style:normal; color:#20c4c3; }
.ar-section-sub p { font-size:16px; color:#666; line-height:1.7; margin:0; }

/* Grille prestations — le gap vient du widget (horizontal_gap/vertical_gap), PAS d'un gap CSS */
.ar-presta-grid .jet-listing-grid__item &gt; .elementor { height:100%; }
.ar-presta-card { height:100%; transition:transform .2s, box-shadow .2s, border-color .2s; }
.ar-presta-card:hover { transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.10); border-color:rgba(32,196,195,.4); }
.ar-presta-name .jet-listing-dynamic-field__content { font-size:17px; font-weight:800; color:#1a1a1a; line-height:1.25; }
.ar-presta-price .jet-listing-dynamic-field__content { font-size:24px; font-weight:900; color:#1a1a1a; letter-spacing:-.02em; white-space:nowrap; }
.ar-presta-price .woocommerce-Price-amount { font-weight:inherit; }
/* le widget dynamic-field est flex+centré par défaut chez JetEngine → on force l'alignement haut */
/* NB : en optimized DOM la classe jet-listing-dynamic-field n'est pas presente, on cible notre classe */
.ar-presta-card &gt; .ar-presta-list { flex-grow:1 !important; align-items:flex-start !important; }
.ar-presta-list .jet-listing-dynamic-field__content { width:100%; }
.ar-presta-list p { font-size:13px; color:#555; line-height:1.5; margin:0 0 20px; }
.ar-presta-list ul { list-style:none; display:flex; flex-direction:column; gap:8px; margin:0 0 20px; padding:0; }
.ar-presta-list li { font-size:13px; color:#555; line-height:1.5; display:flex; align-items:flex-start; gap:9px; }
.ar-presta-list li::before { content:''; width:15px; height:15px; flex-shrink:0; margin-top:2px; background:#20c4c3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }
.ar-presta-btn { width:100%; }
.ar-presta-btn .jet-listing-dynamic-link__link { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:#f0fafa; color:#189998; font-weight:800; font-size:14px; padding:12px; border-radius:8px; text-decoration:none;
  transition:background .15s, color .15s; }
.ar-presta-btn .jet-listing-dynamic-link__link:hover { background:#20c4c3; color:#fff; }

/* Carte mise en avant = 2e produit (Révision périodique, tri par meta order).
   Le badge est sur le widget titre (::before sur .e-con est réservé par Elementor pour les overlays). */
.ar-presta-grid .jet-listing-grid__item:nth-child(2) .ar-presta-card { border-color:#20c4c3; box-shadow:0 8px 28px rgba(32,196,195,.14); }
.ar-presta-grid .jet-listing-grid__item:nth-child(2) .ar-presta-name .jet-listing-dynamic-field__content::before {
  content:'Le plus complet'; display:block; width:fit-content; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#189998; background:#d0f4f4; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.ar-presta-grid .jet-listing-grid__item:nth-child(2) .ar-presta-btn .jet-listing-dynamic-link__link { background:#ffbd20; color:#1a1a1a; }
.ar-presta-grid .jet-listing-grid__item:nth-child(2) .ar-presta-btn .jet-listing-dynamic-link__link:hover { background:#e0a800; }
.ar-presta-note p { font-size:13px; color:#999; margin:0; }

/* FAQ — nested accordion (les bordures/padding d'items sont réglés dans le widget) */
.ar-faq .e-n-accordion { display:flex; flex-direction:column; gap:12px; }
.ar-faq .e-n-accordion-item { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.ar-faq .e-n-accordion-item-title { font-size:15px; font-weight:800; }
.ar-faq .e-n-accordion-item-title, .ar-faq .e-n-accordion-item[open] .e-n-accordion-item-title { color:#1a1a1a !important; } /* maquette : titre noir meme ouvert */
.ar-faq .e-n-accordion-item-title-icon { color:#20c4c3; font-size:16px; }
.ar-faq .e-con { --container-default-padding-top:0; --container-default-padding-bottom:0; }
.ar-faq .e-n-accordion-item &gt; .e-con p { font-size:14px; color:#666; line-height:1.7; margin:0; }
.ar-faq .e-n-accordion-item &gt; .e-con strong { color:#1a1a1a; }
/* === /ar-controles === */


/* === ar-controles-sections === */
.ar-title-em em, .ar-title-em i { font-style: normal; color: #20c4c3; }
/* connecteur pointillé du process */
.ar-process-step { position: relative; }
.ar-process-step .ar-process-num { position: relative; z-index: 2; }
.ar-process-step::after {
  content: ''; position: absolute; top: 23px; left: 56px; right: -12px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0 6px, transparent 6px 12px); z-index: 1;
}
.ar-process .ar-process-step:last-child::after { display: none; }
@media (max-width: 1024px) { .ar-process-step::after { display: none; } }
/* icônes svg des boutons */
.ar-btn-icon .elementor-button-icon svg { width: 17px; height: 17px; }
/* strip social : hauteur des icônes */
.ar-strip-items .elementor-icon-list-icon svg { width: 15px; height: 15px; }
/* éditorial SEO */
.ar-editorial-aside { position: sticky; top: 88px; }
@media (max-width: 1024px) { .ar-editorial-aside { position: static; } }
.ar-editorial-kw .ar-kw-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ar-editorial-kw .ar-kw-pills span { font-size: 11px; font-weight: 700; color: #189998; background: #f0fafa; padding: 6px 11px; border-radius: 999px; }
.ar-editorial-body { columns: 2; column-gap: 44px; }
@media (max-width: 1024px) { .ar-editorial-body { columns: 1; } }
.ar-editorial-body h3 { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px; break-after: avoid; }
.ar-editorial-body p { font-size: 14px; color: #555; line-height: 1.75; margin: 0 0 20px; break-inside: avoid; }
.ar-editorial-body strong { color: #1a1a1a; font-weight: 700; }
.ar-editorial-body .kw { color: #189998; font-weight: 700; }
/* CTA final : lien téléphone */
.ar-cta-tel .elementor-button-icon svg { stroke: #20c4c3; }
/* hero */
.ar-breadcrumb .ar-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #999; margin: 0; }
.ar-breadcrumb .ar-crumbs a { color: #999; text-decoration: none; }
.ar-breadcrumb .ar-crumbs a:hover { color: #20c4c3; }
.ar-breadcrumb .ar-crumbs .sep { color: #ccc; }
.ar-breadcrumb .ar-crumbs .cur { color: #1a1a1a; }
.ar-hero-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 9px; }
.ar-hero-eyebrow .elementor-heading-title::before { content: ''; display: block; width: 26px; height: 2px; background: #20c4c3; border-radius: 2px; }
.ar-hero-trust { position: relative; }
.ar-trust-txt strong { color: #1a1a1a; }
.ar-collage { aspect-ratio: 1.02 / 1; }
.ar-collage .ar-collage-img, .ar-collage .ar-collage-img .elementor-widget-container,
.ar-collage .ar-collage-img img { height: 100%; width: 100%; object-fit: cover; }
.ar-collage .ar-collage-tall { grid-row: span 2; }
.ar-hero-badge2 { background: #20c4c3; border-radius: 11px; padding: 12px 16px; box-shadow: 0 12px 32px rgba(32,196,195,0.35); color: #fff; text-align: center; }
.ar-hero-badge2 .num { font-size: 22px; font-weight: 900; line-height: 1; }
.ar-hero-badge2 .num span { font-size: 13px; }
.ar-hero-badge2 .lbl { font-size: 10px; font-weight: 700; opacity: 0.9; margin-top: 3px; letter-spacing: 0.03em; }
@media (max-width: 767px) {
  .ar-collage .elementor-widget:is([data-id]) { position: relative; }
}
/* instruments */
.ar-instr-photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: #eef4f4; }
.ar-instr-card { transition: transform 200ms, box-shadow 200ms; }
/* Chevauchement mobile : la photo est en aspect-ratio 4/3 mais, dans une carte en
   flex column, le widget image ne reprend pas la hauteur calculee de l'img — le texte
   se retrouve par-dessus la photo. On repasse la carte en flux normal (meme rendu). */
.ar-instruments .ar-instr-card { display: block; }

.ar-instr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.10); }
.ar-hero-trust img { width: auto; height: 46px; }
/* alignement optique texte/icone des boutons (texte sans jambage = optiquement haut) */
.ar-btn-icon .elementor-button-text { transform: translateY(1.5px); }
/* ancres : dégagement sous le header collant.
   NE PAS ajouter html{scroll-behavior:smooth} : sur ce site (Elementor + JetPlugins) un
   ecouteur de defilement interrompt l'animation et la navigation par ancre ne fait plus rien. */
html { scroll-behavior: auto !important; }
#services, #prestations { scroll-margin-top: 90px; }
/* liens secondaires soulignés (btn-secondary / btn-ghost-white de la maquette) */
.ar-btn-underline .elementor-button { transition: border-color 150ms; }
/* === /ar-controles-sections === */

/* === ar-pliages (généré par script — ne pas éditer à la main) === */
.ar-fold-num .elementor-heading-title{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:0 auto;border-radius:50%;background:#20c4c3;color:#fff;}
.ar-fold-img img{width:100%;max-width:150px;border-radius:10px;display:block;margin:0 auto;}
.ar-fold-card{overflow:hidden;}
.ar-presta-plain .jet-listing-grid__item:nth-child(2) .ar-presta-card{border-color:rgba(0,0,0,0.08);box-shadow:none;}
.ar-presta-plain .jet-listing-grid__item:nth-child(2) .ar-presta-card:hover{box-shadow:0 16px 44px rgba(0,0,0,.10);border-color:rgba(32,196,195,.4);}
.ar-presta-plain .jet-listing-grid__item:nth-child(2) .ar-presta-name .jet-listing-dynamic-field__content::before{content:none;}
.ar-presta-plain .jet-listing-grid__item:nth-child(2) .ar-presta-btn .jet-listing-dynamic-link__link{background:#f0fafa;color:#189998;}
.ar-presta-plain .jet-listing-grid__item:nth-child(2) .ar-presta-btn .jet-listing-dynamic-link__link:hover{background:#20c4c3;color:#fff;}
/* === /ar-pliages === */

/* === ar-reparations (généré par script — ne pas éditer à la main) === */
.ar-repair-pillbox .ar-repair-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0;max-width:640px;}
.ar-repair-pillbox .ar-repair-pills span{font-size:13px;font-weight:700;color:#189998;background:#f0fafa;padding:8px 16px;border-radius:999px;}
/* === /ar-reparations === */

/* === ar-suspentes (généré par script — ne pas éditer à la main) === */
.ar-hero-video-wrap{position:relative;}
.ar-hero-video .elementor-wrapper{border-radius:16px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,0.14);}
.ar-hero-video .elementor-custom-embed-image-overlay img{border-radius:16px;display:block;}
.ar-hero-video-wrap .elementor-widget-icon-box{align-self:flex-start;}
/* === /ar-suspentes === */

/* === ar-contact (généré par script — ne pas éditer à la main) === */
/* Page Contact (1276) — maquette « Contact - Floating Labels » */

/* Peinture des icônes (portée : la page Contact). On pilote « color » sur le ,
   puis on force tout élément peint à suivre currentColor — les icônes « pleines »
   portent leur peinture sur leurs enfants et n'héritent de rien. Le garde-fou
   svg[fill="none"] est indispensable : Elementor génère un fill: visant
   directement le , qui écrase l'attribut fill="none" des icônes tracées. */
.page-id-1276 .elementor-icon svg,
.page-id-1276 .elementor-icon-list-icon svg { color:#20c4c3; }
.page-id-1276 .elementor-icon svg[fill="none"],
.page-id-1276 .elementor-icon-list-icon svg[fill="none"] { fill:none !important; }
.page-id-1276 .elementor-icon svg:not([fill="none"]),
.page-id-1276 .elementor-icon-list-icon svg:not([fill="none"]) { fill:currentColor !important; }
.page-id-1276 .elementor-icon svg [fill]:not([fill="none"]),
.page-id-1276 .elementor-icon-list-icon svg [fill]:not([fill="none"]) { fill:currentColor; }
.page-id-1276 .elementor-icon svg [stroke]:not([stroke="none"]),
.page-id-1276 .elementor-icon-list-icon svg [stroke]:not([stroke="none"]) { stroke:currentColor; }
/* Icônes de bouton : la peinture suit « color » (hérité du bouton, donc son survol).
   Garde-fou : Elementor génère un fill: posé sur le  lui-même (règles
   :hover), qui écrase l'attribut fill="none" — on le réaffirme pour les icônes
   tracées au stroke. Les icônes « pleines » portent leur peinture sur leurs enfants :
   on les repeint aussi, sinon elles resteraient figées dans leur couleur d'origine. */
.page-id-1276 .elementor-button-icon svg[fill="none"] { fill:none !important; }
.page-id-1276 .elementor-button-icon svg:not([fill="none"]) { fill:currentColor !important; }
.page-id-1276 .elementor-button-icon svg [fill]:not([fill="none"]) { fill:currentColor; }
.page-id-1276 .elementor-button-icon svg [stroke]:not([stroke="none"]) { stroke:currentColor; }
.page-id-1276 .ar-aside-tel .elementor-button-icon svg,
.page-id-1276 .ar-btn-outline .elementor-button-icon svg,
.page-id-1276 .ar-cta-tel .elementor-button-icon svg { color:#20c4c3; }

/* ── HERO ── */
.ar-contact-hero .ar-hero-sub p { font-size:16px; font-weight:500; line-height:1.7; color:#555; max-width:520px; margin:0; }
.ar-contact-hero .ar-hero-sub strong { color:#1a1a1a; font-weight:700; }
.ar-hero-side .elementor-icon-list-item { align-items:center; }
.ar-hero-side .elementor-icon-list-icon svg { width:17px; height:17px; }

/* ── CARTES DE CONTACT ── */
.ar-cc { height:100%; transition:transform 200ms, box-shadow 200ms, border-color 200ms; }
.ar-cc:hover { transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,0.08); border-color:rgba(32,196,195,0.35); }
.ar-cc-label .elementor-heading-title { font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:#aaa; }
.ar-cc-main .elementor-heading-title a { color:#1a1a1a; }
.ar-cc-main .elementor-heading-title a:hover { color:#20c4c3; }
.ar-cc &gt; .ar-cc-sub { flex-grow:1 !important; }
.ar-cc-sub p { font-size:13px; color:#777; line-height:1.6; margin:0; }
.ar-cc-link .elementor-button { padding:0; }
.ar-cc-link .elementor-button-icon svg { width:14px; height:14px; }

/* ── FORMULAIRE ── */
.ar-form-intro p { font-size:14px; color:#777; line-height:1.65; margin:0; }
.ar-form-intro .req { color:#20c4c3; font-weight:800; }
.ar-contact-form .jet-form-builder-row { margin-bottom:16px; border:none; }
.ar-contact-form .wp-block-columns { gap:16px; margin-bottom:0; }

/* ── Messages d'erreur JetFormBuilder (règles VOLONTAIREMENT globales : les deux
   formulaires du site doivent se comporter pareil) ──
   L'espacement entre champs vient du margin-bottom du  : on le déplace sur
   la ligne, sinon le message d'erreur atterrit 20 px trop bas. Total inchangé. */
.jet-form-builder-row .jet-form-builder__field:not(#zz-a):not(#zz-b) { margin-bottom:0 !important; }
.jet-form-builder-row { margin-bottom:20px; }
.jet-form-builder-row .error-message,
.jet-form-builder-row .field-error {
  display:block; margin:6px 0 0; padding:0 2px;
  font-size:12px !important; line-height:1.4; font-weight:600; color:#dc3545 !important; }
.jet-form-builder-row.field-has-error .jet-form-builder__field { border-color:#dc3545 !important; }
.jet-form-builder-row.field-has-error .jet-form-builder__label-text { color:#dc3545 !important; }

/* Le bloc « floating label » global du kit ne cible que .field-type-textarea ;
   JetFormBuilder rend en réalité .field-type-textarea-field → on l'ajoute ici. */
.ar-contact-form .jet-form-builder-row.field-type-textarea-field { position:relative; display:flex; flex-direction:column; }
.ar-contact-form .jet-form-builder-row.field-type-textarea-field .jet-form-builder__label {
  position:absolute; z-index:10; pointer-events:none; left:13px; top:22px; margin:0; line-height:1;
  transition:all 150ms cubic-bezier(0.4,0,0.2,1); }
.ar-contact-form .jet-form-builder-row.field-type-textarea-field .jet-form-builder__label-text {
  color:#999; font-size:15px; font-weight:600; line-height:1; background:transparent; transition:inherit; }
.ar-contact-form .jet-form-builder-row.field-type-textarea-field:has(textarea:focus) .jet-form-builder__label,
.ar-contact-form .jet-form-builder-row.field-type-textarea-field:has(textarea:not(:placeholder-shown)) .jet-form-builder__label { top:6px; }
/* le :not(#id) reproduit la spécificité de la règle globale du kit, sinon elle gagne */
.ar-contact-form .jet-form-builder-row.field-type-textarea-field:not(#zz-a):not(#zz-b):has(textarea:focus) .jet-form-builder__label-text,
.ar-contact-form .jet-form-builder-row.field-type-textarea-field:not(#zz-a):not(#zz-b):has(textarea:not(:placeholder-shown)) .jet-form-builder__label-text {
  color:#20c4c3; font-size:10px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }

/* Le kit ne fait remonter le label d'un select que sur :focus (ou select2) : hors focus,
   il retombe sur la valeur choisie. On le maintient haut dès qu'une option est retenue. */
.ar-contact-form .jet-form-builder-row.field-type-select-field:not(#zz-a):not(#zz-b):has(select option:checked:not([value=""])) .jet-form-builder__label { top:6px; transform:none; }
.ar-contact-form .jet-form-builder-row.field-type-select-field:not(#zz-a):not(#zz-b):has(select option:checked:not([value=""])) .jet-form-builder__label-text {
  color:#20c4c3; font-size:10px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }

/* Consentement RGPD : la règle globale des champs (spécificité relevée par ses :not(#id))
   habille la case à cocher comme un champ texte — on la neutralise avec la même arme. */
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field:not(#zz-a):not(#zz-b) {
  width:18px !important; min-width:18px; height:18px; min-height:0 !important; padding:0 !important;
  margin:1px 0 0; border:1.5px solid rgba(0,0,0,0.25) !important; border-radius:4px !important;
  appearance:auto !important; accent-color:#20c4c3; flex-shrink:0; }
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__fields-group,
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-wrap { display:block; }
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label {
  display:flex; align-items:flex-start; gap:11px; font-size:12px; color:#888; line-height:1.65; font-weight:500; }
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__desc {
  font-size:12px; color:#888; line-height:1.65; margin-top:6px; padding-left:29px; }
.ar-contact-form .jet-form-builder-row.field-type-checkbox-field &gt; .jet-form-builder__label { display:none; }
/* bouton d'envoi : inline comme sur la maquette, pas pleine largeur */
.ar-contact-form .jet-form-builder__action-button.jet-form-builder__submit {
  width:auto !important; padding:13px 22px !important; margin-top:6px; }
.ar-form-note-wrap p.ar-form-note {
  font-size:12px; color:#999; margin:0; display:flex; align-items:center; gap:7px; }
.ar-form-note-wrap p.ar-form-note::before {
  content:''; width:14px; height:14px; flex-shrink:0; background:#20c4c3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain; }

/* ── ENCARTS LATÉRAUX ── */
.ar-aside-intro p { font-size:13px; color:#777; line-height:1.65; margin:0; }
.ar-aside-link { transition:border-color 150ms, background 150ms; }
.ar-aside-link:hover { border-color:rgba(32,196,195,0.45); background:#f0fafa; }
.ar-aside-link .elementor-icon svg { width:18px; height:18px; }
.ar-aside-link-txt p.ar-aside-txt { margin:0; line-height:1.35; }
.ar-aside-link-txt strong { display:block; font-size:13px; font-weight:800; color:#1a1a1a; }
.ar-aside-link-txt small { display:block; font-size:11.5px; color:#999; margin-top:2px; }
.ar-aside-teal-txt p { color:rgba(255,255,255,0.88); font-size:13px; line-height:1.7; margin:0; }
.ar-aside-tel .elementor-button-icon svg { width:16px; height:16px; }

/* ── CARTE &amp; ACCÈS ── */
.ar-map-wrap, .ar-map-wrap .elementor-widget-container { height:100%; }
.ar-map-frame { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 14px 44px rgba(0,0,0,0.12);
  min-height:460px; height:100%; background:#e8ecec; }
.ar-map-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(1) contrast(0.95) brightness(1.06); }
.ar-map-tint { position:absolute; inset:0; background:#20c4c3; mix-blend-mode:multiply; opacity:0.16; pointer-events:none; }
.ar-map-vignette { position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.10), inset 0 0 70px rgba(24,153,152,0.14); }
.ar-map-pin { position:absolute; top:18px; left:18px; background:#fff; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,0.16); padding:13px 16px; display:flex; align-items:center; gap:11px; z-index:4; }
.ar-map-pin svg { width:20px; height:20px; flex-shrink:0; }
.ar-map-pin strong { display:block; font-size:13px; font-weight:900; color:#1a1a1a; }
.ar-map-pin small { font-size:11.5px; color:#888; }
.ar-info-block .ar-info-head .elementor-icon-box-description { display:none; }
.ar-info-block .ar-info-head .elementor-icon svg { width:17px; height:17px; }
/* le h3 du titre garde ses marges par défaut (8/16 px) : la boîte de contenu fait
   44 px de haut pour 20 px de texte, et le centrage vertical d'Elementor décale
   l'icône de 4 px sous le titre. Marges à zéro → les deux se recentrent. */
.ar-info-block .ar-info-head .elementor-icon-box-title { margin:0; }
.ar-info-block .ar-addr { font-size:14px; color:#555; line-height:1.8; margin:0; }
.ar-info-block .ar-addr strong { color:#1a1a1a; font-weight:800; }
.ar-info-block .ar-gps { font-size:11.5px; color:#aaa; font-weight:600; line-height:1.6; margin:0; }
.ar-hours { display:flex; flex-direction:column; margin:0; }
.ar-hours .ar-hrow { display:flex; justify-content:space-between; align-items:center; padding:9px 0;
  border-bottom:1px dashed rgba(0,0,0,0.08); font-size:13.5px; }
.ar-hours .ar-hrow:last-child { border-bottom:none; }
.ar-hours .ar-hrow &gt; span:first-child { font-weight:700; color:#4a4748; }
.ar-hours .ar-hrow &gt; span:last-child { font-weight:700; color:#1a1a1a; font-variant-numeric:tabular-nums; }
.ar-hours .ar-hrow.closed &gt; span { color:#bbb; font-weight:600; }
.ar-hours-note { margin:14px 0 0; padding-top:14px; border-top:1px solid rgba(0,0,0,0.07);
  font-size:12px; color:#888; line-height:1.6; }
.ar-btn-outline .elementor-button:hover { border-color:#1a1a1a; }
.ar-btn-outline .elementor-button-icon svg { width:16px; height:16px; }

/* ── ENVOYER SON MATÉRIEL ── */
.ar-ship-label .elementor-heading-title { color:rgba(255,255,255,0.45); }
.ar-ship-lines { font-size:15px; line-height:1.85; font-weight:600; color:#fff; margin:0; }
.ar-ship-lines strong { font-weight:900; color:#20c4c3; }
/* le kit style tous les <button> en jaune : on repasse au teal de la maquette */
.page-id-1276 button.ar-ship-copy { display:inline-flex; align-items:center; gap:8px; font-family:'Nunito',sans-serif;
  font-size:12.5px; font-weight:800; color:#1a1a1a; background:#20c4c3 !important; border:none;
  padding:10px 15px; border-radius:8px; cursor:pointer; transition:background 150ms; }
.page-id-1276 button.ar-ship-copy:hover { background:#38d6d5 !important; }
.ar-ship-copy svg { width:14px; height:14px; }
.ar-ship-num .elementor-heading-title { display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; background:#f0fafa; color:#189998; font-size:13px; font-weight:900; }
.ar-ship-txt p { font-size:13.5px; color:#666; line-height:1.65; margin:0; }
.ar-ship-txt em { font-style:normal; font-weight:800; color:#1a1a1a; }

/* ── ancres ── */
#faq { scroll-margin-top:90px; }
/* en-tête non collant sur la page Contact : une simple respiration suffit */
#ecrivez-nous { scroll-margin-top:16px; }
html:has(body.page-id-1276) { scroll-behavior:smooth; }

/* ── CTA « Nous écrire » du hero ── */
.ar-hero-cta .elementor-button { transition:background 150ms, transform 150ms; }
.ar-hero-cta .elementor-button:hover { transform:translateY(-1px); }
.ar-hero-cta .elementor-button-icon svg { width:16px; height:16px; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  /* empilement des rangées : les largeurs en % des colonnes passent à 100 %
     (Elementor n'émet pas les valeurs width_tablet des conteneurs) */
  .page-id-1276 .ar-row &gt; .e-con { --width:100% !important; }
  .ar-map-frame { min-height:380px; }
  .ar-contact-hero .ar-hero-sub p { max-width:none; }
}
@media (max-width:767px) {
  .ar-map-frame { min-height:340px; }
  .ar-contact-form .wp-block-columns { gap:0; }
  .ar-ship-copy { width:100%; justify-content:center; }
}
/* === /ar-contact === */

/* === ar-tarifs (généré par script — ne pas éditer à la main) === */
/* Page Tarifs (1274) — maquette « Tarifs.html » */

/* ── ancres : dégagement sous la barre d'ancres collante ── */
#paracheck, #ciblees, #secours, #suspentes, #supplements, #reparations { scroll-margin-top: 70px; }

/* ⚠ SPÉCIFICITÉ : le CSS de page (post-.css) contient
   `.elementor-widget-heading .elementor-heading-title{color:…}` et
   `.elementor-widget-button .elementor-button{background:…}` — même spécificité (0,2,0)
   que les règles du kit, mais chargé APRÈS, donc il gagne à égalité. Toute règle du kit
   qui vise la couleur d'un heading ou le fond d'un bouton doit passer à 0,3,0 en
   préfixant la classe du widget. */
.elementor-widget-heading.ar-eyebrow .elementor-heading-title { color: #20c4c3; }

/* sous-titre de section sur fond sombre (ar-section-sub est verrouillé en #666) */
.ar-section-sub-dark p { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; margin: 0; }

/* le « € » en petit dans les prix */
.ar-band-price .elementor-heading-title span,
.ar-secours-price .elementor-heading-title span { font-size: 16px; font-weight: 800; }
.ar-secours-price .elementor-heading-title span { font-size: 18px; }

/* ── barre d'ancres ── */
body.admin-bar .ar-anchors { top: 32px; }
.ar-anchors { position: sticky; top: 0; z-index: 150; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ar-anchor-label .elementor-heading-title { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ccc; white-space: nowrap; }
.elementor-widget-button.ar-anchor-btn .elementor-button { font-size: 13px; font-weight: 700; color: #666; background: transparent; padding: 7px 13px; border-radius: 7px; white-space: nowrap; transition: color .15s, background .15s; }
.ar-anchor-btn .elementor-button:hover { color: #189998; background: #f0fafa; }
.elementor-widget-button.ar-anchor-btn.is-current .elementor-button { color: #189998; background: #f0fafa; }

/* ── tableau comparatif ── */
.ar-cmp-seat { display: flex; justify-content: center; }
.ar-cmp-seat-inner { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 999px; padding: 5px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ar-cmp-root .ar-cmp-seat-inner .ar-seat-btn { font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; color: #777; background: none; border: none; padding: 9px 20px; border-radius: 999px; cursor: pointer; line-height: 1.25; transition: color .15s, background .15s; }
.ar-cmp-root .ar-cmp-seat-inner .ar-seat-btn:hover { color: #189998; }
.ar-cmp-root .ar-cmp-seat-inner .ar-seat-btn.on { background: #20c4c3; color: #fff; }
.ar-cmp-root .ar-cmp-seat-inner .ar-seat-btn small { display: block; font-size: 10px; font-weight: 700; opacity: .7; margin-top: 1px; }

.ar-cmp-scroll { overflow-x: auto; background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 18px; }
.ar-cmp { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; background: #fff; }
/* ⚠ reset.css du thème : `table td, table th { border: 1px solid rgba(128,128,128,.5); padding:15px;
   vertical-align: top }` et un zébrage `tbody &gt; tr:nth-child(2n+1) &gt; td { background: rgba(128,128,128,.07) }`.
   Sans cette remise à zéro, les bordures fines de la maquette se doublent d'un liseré gris épais à
   droite et en bas de chaque cellule, et une ligne sur deux se retrouve grisée. */
.ar-cmp th, .ar-cmp td { text-align: center; border: 0; vertical-align: middle; }
.ar-cmp tbody &gt; tr &gt; td, .ar-cmp tbody &gt; tr &gt; th { background-color: transparent; }
/* le reset pose AUSSI `table thead:first-child tr:first-child th { border-block-start: 1px solid
   hsla(0,0%,50%,.502) }` — spécificité (0,2,3), donc plus forte que `.ar-cmp th` : d'où un liseré
   gris en haut du tableau, en plus de la bordure du cadre. On monte à (0,3,3) via le wrapper. */
.ar-cmp-scroll .ar-cmp thead tr:first-child th,
.ar-cmp-scroll .ar-cmp thead tr:first-child td { border-top: 0; }
/* et `table { margin-block-end: 15px }` : 15px de blanc sous la légende, dans le cadre. */
.ar-cmp { margin: 0; }
.ar-cmp thead th { vertical-align: bottom; border-bottom: 1px solid rgba(0,0,0,.09); }
.ar-cmp thead th.cmp-corner { text-align: left; padding: 26px 26px 22px; width: 34%; }
/* 1re colonne figée : les 3 formules défilent horizontalement sous elle, à toutes les largeurs */
.ar-cmp thead th.cmp-corner { position: sticky; left: 0; z-index: 4; background: #fff; box-shadow: 6px 0 10px -8px rgba(0,0,0,.18); }
.ar-cmp tbody td.crit { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 6px 0 10px -8px rgba(0,0,0,.18); }
.ar-cmp tbody tr.grp td { position: sticky; left: 0; }
/* le libellé de groupe suit le défilement (la cellule, en colspan, est plus large que la fenêtre) */
.ar-cmp tbody tr.grp td span { display: inline-block; position: sticky; left: 26px; }
.ar-cmp .cmp-corner-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #bbb; }
.ar-cmp thead th.cmp-col { padding: 26px 20px 22px; border-left: 1px solid rgba(0,0,0,.07); position: relative; }
.ar-cmp thead th.cmp-col.featured { background: #f0fafa; padding-top: 40px; }
.ar-cmp .cmp-flag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #20c4c3; color: #fff; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 0 0 7px 7px; }
.ar-cmp .cmp-name { font-size: 15px; font-weight: 900; color: #1a1a1a; line-height: 1.3; margin-bottom: 4px; }
.ar-cmp .cmp-tag { font-size: 11px; font-weight: 700; color: #999; margin-bottom: 14px; }
.ar-cmp .cmp-price { font-size: 34px; font-weight: 900; color: #1a1a1a; letter-spacing: -.03em; line-height: 1; }
.ar-cmp .cmp-price span { font-size: 18px; font-weight: 800; }
.ar-cmp .cmp-price-note { font-size: 11px; color: #aaa; font-weight: 600; margin-top: 6px; }
.ar-cmp .deposit { display: inline-block; margin-top: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #8a6200; background: #fff3cc; padding: 4px 9px; border-radius: 5px; white-space: nowrap; }
.ar-cmp .deposit.none { color: #7a7a7a; background: #f2f2f2; }
.ar-cmp .cmp-btn { display: inline-block; margin-top: 16px; font-size: 12.5px; font-weight: 800; padding: 9px 16px; border-radius: 7px; background: #fff; border: 1.5px solid rgba(0,0,0,.14); color: #1a1a1a; text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.ar-cmp .cmp-btn:hover { border-color: #1a1a1a; color: #1a1a1a; }
.ar-cmp .cmp-col.featured .cmp-btn { background: #ffbd20; border-color: #ffbd20; }
.ar-cmp .cmp-col.featured .cmp-btn:hover { background: #e0a800; border-color: #e0a800; }

.ar-cmp tbody tr.grp td { text-align: left; padding: 18px 26px 9px; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #20c4c3; background: #fafcfc; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.05); }
.ar-cmp tbody td.crit { text-align: left; padding: 13px 26px; font-size: 13.5px; font-weight: 600; color: #4a4748; }
.ar-cmp tbody td.crit small { display: block; font-size: 11.5px; color: #aaa; font-weight: 600; margin-top: 3px; }
.ar-cmp tbody td.crit small b { display: block; color: #189998; font-weight: 800; margin-top: 3px; }
.ar-cmp tbody td.cell { padding: 13px 20px; border-left: 1px solid rgba(0,0,0,.05); }
.ar-cmp tbody tr:not(.grp) td { border-top: 1px solid rgba(0,0,0,.05); }
.ar-cmp tbody td.cell.featured { background: #f7fdfd; }
.ar-cmp tbody tr:hover td.crit, .ar-cmp tbody tr:not(.grp):hover td.cell { background: #fbfbfb; }
.ar-cmp tbody tr:not(.grp):hover td.cell.featured { background: #edfafa; }

.ar-cmp .pill { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; }
.ar-cmp .pill.on { background: #20c4c3; }
.ar-cmp .pill.on svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ar-cmp .pill.opt { border: 2.5px solid #20c4c3; }
.ar-cmp .pill.opt::after { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #20c4c3; }
.ar-cmp .pill.off::after { content: ''; width: 11px; height: 2.5px; border-radius: 2px; background: #dcdcdc; }

.ar-cmp tfoot td { padding: 22px 26px; border-top: 1px solid rgba(0,0,0,.09); text-align: left; }
.ar-cmp .legend { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ar-cmp .legend-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #777; font-weight: 600; }
.ar-cmp-hint { display: none; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #aaa; margin-top: 12px; }
.ar-cmp-hint svg { width: 14px; height: 14px; stroke: #20c4c3; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── inspections ciblées (bandes) ── */
.ar-band { transition: border-color .18s, box-shadow .18s; }
.ar-band:hover { border-color: rgba(32,196,195,.4) !important; box-shadow: 0 8px 26px rgba(0,0,0,.06); }
.ar-band-icon .elementor-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 13px; background: #f0fafa; }
/* Peinture pilotée par « color » sur le  ; le fill:#20c4c3 d'Elementor est
   réaffirmé en fill:none pour les icônes tracées, et remplacé par currentColor
   pour les icônes pleines. Les blancs des enfants sont épargnés : ce sont des
   réserves volontaires (les pastilles de calage.svg). */
.ar-band-icon .elementor-icon svg { width: 24px; height: 24px; color: #20c4c3; }
.ar-band-icon .elementor-icon svg[fill="none"] { fill: none !important; }
.ar-band-icon .elementor-icon svg:not([fill="none"]) { fill: currentColor !important; }
.ar-band-icon .elementor-icon svg [fill]:not([fill="none"]):not([fill="#fff"]):not([fill="#ffffff"]):not([fill="white"]) { fill: currentColor; }
.ar-band-icon .elementor-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.ar-band-points p { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.ar-band-points span { font-size: 12.5px; color: #777; font-weight: 600; display: flex; align-items: center; gap: 6px; line-height: 1.45; }
.ar-band-points span::before { content: ''; width: 4px; height: 4px; border-radius: 999px; background: #20c4c3; flex-shrink: 0; }
.ar-band-flag p { display: inline-block; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #8a6200; background: #fff3cc; padding: 3px 8px; border-radius: 5px; margin: 0 0 8px; }
.ar-band.diag { border-left: 4px solid #ffbd20 !important; }
.elementor-widget-button.ar-band-order .elementor-button { font-size: 13px; font-weight: 800; padding: 11px 16px; border-radius: 8px; border: 1.5px solid rgba(0,0,0,.14); background: transparent; color: #1a1a1a; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.ar-band-order .elementor-button:hover { border-color: #20c4c3; background: #f0fafa; color: #189998; }
/* 14px en dur : le widget bouton n'a pas de contrôle de taille d'icône (1em vaudrait
   la taille du texte du bouton, 13px). La couleur est héritée du bouton (survol inclus). */
.ar-band-order .elementor-button-icon svg { width: 14px; height: 14px; }
.ar-band-order .elementor-button-icon svg[fill="none"] { fill: none !important; }
.ar-band-order .elementor-button-icon svg:not([fill="none"]) { fill: currentColor !important; }
.ar-band-order .elementor-button-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.ar-band-order .elementor-button-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.ar-band-order .elementor-button-text { transform: translateY(1.5px); }

/* ── pliages secours ── */
.ar-secours-col + .ar-secours-col { border-left: 1px solid rgba(0,0,0,.07); }
.ar-secours-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; background: #f0fafa; display: block; }
.ar-secours-type .elementor-heading-title { font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #bbb; }
.elementor-widget-button.ar-secours-btn .elementor-button { font-size: 12.5px; font-weight: 800; padding: 9px 16px; border-radius: 7px; border: 1.5px solid rgba(0,0,0,.14); background: transparent; color: #1a1a1a; transition: border-color .15s, background .15s, color .15s; }
.ar-secours-btn .elementor-button:hover { border-color: #20c4c3; background: #f0fafa; color: #189998; }
.ar-secours-ops-list .elementor-icon-list-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.ar-secours-ops-list .elementor-icon-list-item { align-items: flex-start !important; }
.ar-secours-ops-list .elementor-icon-list-icon { margin-top: 2px; }
.ar-secours-ops-list .elementor-icon-list-icon svg { width: 15px; height: 15px; color: #20c4c3; }
.ar-secours-ops-list .elementor-icon-list-icon svg[fill="none"] { fill: none !important; }
.ar-secours-ops-list .elementor-icon-list-icon svg:not([fill="none"]) { fill: currentColor !important; }
.ar-secours-ops-list .elementor-icon-list-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.ar-secours-ops-list .elementor-icon-list-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
@media (max-width: 1024px) { .ar-secours-ops-list .elementor-icon-list-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .ar-secours-ops-list .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); } }

/* ── liste de prix (suspentes) ── */
.ar-pl { columns: 2; column-gap: 56px; }
.ar-pl .pl-group { break-inside: avoid; margin: 22px 0 0; }
.ar-pl .pl-group:first-child { margin-top: 0; }
.ar-pl .pl-group-title { font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #20c4c3; padding-bottom: 10px; border-bottom: 1.5px solid rgba(32,196,195,.25); margin: 0 0 4px; }
.ar-pl .pl-row { padding: 12px 0; break-inside: avoid; }
.ar-pl .pl-line { display: flex; align-items: baseline; gap: 8px; }
.ar-pl .pl-name { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.ar-pl .pl-lead { flex: 1; border-bottom: 1px dotted rgba(0,0,0,.22); min-width: 20px; }
.ar-pl .pl-price { font-size: 17px; font-weight: 900; color: #1a1a1a; white-space: nowrap; letter-spacing: -.01em; }
.ar-pl .pl-price span { font-size: 13px; font-weight: 800; }
.ar-pl .pl-price.plus { color: #189998; }
.ar-pl .pl-desc { display: block; font-size: 12px; color: #999; font-weight: 600; margin-top: 3px; }
@media (max-width: 900px) { .ar-pl { columns: 1; } }

/* ── suppléments (fond sombre) ── */
.ar-supp-card { transition: border-color .18s, background .18s; }
.ar-supp-card:hover { border-color: rgba(32,196,195,.5) !important; background: rgba(255,255,255,.08) !important; }
.ar-supp-amount .elementor-heading-title span { font-size: 15px; font-weight: 800; }
.ar-supp-note-icon .elementor-icon svg { width: 17px; height: 17px; color: #20c4c3; }
.ar-supp-note-icon .elementor-icon svg[fill="none"] { fill: none !important; }
.ar-supp-note-icon .elementor-icon svg:not([fill="none"]) { fill: currentColor !important; }
.ar-supp-note-icon .elementor-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.ar-supp-note-icon .elementor-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* ── réparations ── */
.ar-rep-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; display: block; }

/* ── responsive ── */
@media (max-width: 1024px) {
  .ar-cmp-hint { display: flex; }
  .ar-cmp { min-width: 720px; }
  .ar-cmp thead th.cmp-corner { width: 30%; padding: 22px 20px 18px; }
  .ar-cmp thead th.cmp-col { padding: 22px 14px 18px; }
  .ar-cmp thead th.cmp-col.featured { padding-top: 34px; }
  .ar-cmp .cmp-price { font-size: 28px; }
  .ar-cmp tbody td.crit { padding: 12px 20px; font-size: 13px; }
  .ar-cmp tbody td.cell { padding: 12px 14px; }
}
@media (max-width: 767px) {
  .ar-anchors { position: static; }
  .ar-anchor-label { display: none; }
  .elementor-widget-button.ar-anchor-btn .elementor-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; font-size: 13.5px; border: 1.5px solid rgba(0,0,0,.10); border-radius: 999px; background: #fff; color: #4a4748; }
  .elementor-widget-button.ar-anchor-btn.is-current .elementor-button { background: #20c4c3; border-color: #20c4c3; color: #fff; }

  .ar-cmp-hint { display: flex; }
  .ar-cmp { min-width: 560px; }
  .ar-cmp-scroll { border-radius: 14px; }
  .ar-cmp thead th.cmp-corner { width: 158px; min-width: 158px; padding: 14px 12px 12px; }
  .ar-cmp thead th.cmp-col { min-width: 112px; padding: 14px 8px; }
  .ar-cmp thead th.cmp-col.featured { padding-top: 28px; }
  .ar-cmp .cmp-name { font-size: 13px; }
  .ar-cmp .cmp-tag, .ar-cmp .cmp-price-note { display: none; }
  .ar-cmp .cmp-price { font-size: 24px; }
  .ar-cmp .cmp-price span { font-size: 14px; }
  .ar-cmp .deposit { font-size: 9.5px; padding: 3px 7px; margin-top: 8px; }
  .ar-cmp .cmp-btn { font-size: 11.5px; padding: 8px 12px; margin-top: 12px; }
  .ar-cmp .cmp-flag { font-size: 8.5px; padding: 3px 9px; }
  .ar-cmp tbody td.crit { width: 158px; min-width: 158px; padding: 11px 12px; font-size: 12.5px; }
  .ar-cmp tbody tr:hover td.crit { background: #fff; }
  .ar-cmp tbody td.crit small, .ar-cmp tbody td.crit small b { font-size: 10.5px; }
  .ar-cmp tbody td.cell { padding: 11px 8px; }
  .ar-cmp tbody tr.grp td { padding: 14px 12px 8px; font-size: 9.5px; }
  .ar-cmp tbody tr.grp td span { left: 12px; }
  .ar-cmp tfoot td { padding: 16px 12px; }
  .ar-cmp .legend { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ar-cmp .legend-item { font-size: 11.5px; }
  .ar-cmp-root .ar-cmp-seat-inner .ar-seat-btn { font-size: 12px; padding: 8px 14px; }

  /* bandes : icône + prix sur la 1re ligne, puis le texte, puis le bouton */
  .ar-band &gt; .ar-band-c-icon  { order: 1; }
  .ar-band &gt; .ar-band-c-price { order: 2; }
  .ar-band &gt; .ar-band-c-text  { order: 3; }
  .ar-band &gt; .ar-band-c-btn   { order: 4; }
  .ar-secours-col + .ar-secours-col { border-left: none; border-top: 1px solid rgba(0,0,0,.07); }
}
/* === /ar-tarifs === */

/* === ar-accueil (page 1249 — généré par script, ne pas éditer à la main) === */

/* ── Cartes prestations ─────────────────────────────────────────────
   Icône à gauche du titre, description en dessous alignée sur l'icône.
   `display:contents` sur .elementor-icon-box-content fait remonter le titre
   et la description au niveau de la grille du wrapper. */
.elementor-widget-icon-box.ar-svc-card &gt; .elementor-widget-container { position: relative; height: 100%; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "desc desc";
  align-items: start;
  column-gap: 14px;
  row-gap: 12px;
  text-align: left;
}
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon { grid-area: icon; margin: 0; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-content { display: contents; }
/* min-height = hauteur de la pastille : les icônes restent alignées d'une carte
   à l'autre même quand un titre passe sur deux lignes. */
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-title {
  grid-area: title; margin: 0;
  display: flex; align-items: center; min-height: 46px;
}
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-description { grid-area: desc; margin: 0; }

/* pastille de fond de l'icône (prévue dans la maquette) */
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon .elementor-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: #e8f8f8;
  transition: background 200ms;
}
/* Peinture des icônes. On pilote « color » sur le  lui-même — et non sur
   .elementor-icon, que post-1249.css impose déjà à #20c4c3 — puis on force tout
   élément peint à suivre currentColor. Indispensable : les icônes ne peignent
   pas toutes pareil. Certaines (lucide, machine à coudre) ne portent aucune
   peinture sur leurs enfants et héritent de la racine ; d'autres (control-1,
   parachute-2, thread-spool-1) portent un fill="#20c4c3" en dur sur chaque
   forme, qui ignore tout héritage — d'où un survol sans effet si on ne cible
   que la racine. */
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg {
  width: 1em; height: 1em;
  color: #20c4c3;
}
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg,
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg * {
  transition: color 200ms, fill 200ms, stroke 200ms;
}
/* racine sans fill explicite : elle porte la couleur, les enfants en héritent */
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg:not([fill="none"]) { fill: currentColor; }
/* enfants qui portent leur propre peinture : on la repeint, sauf les "none" */
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

.elementor-widget-icon-box.ar-svc-card:hover .elementor-icon-box-icon .elementor-icon { background: #20c4c3; }
.elementor-widget-icon-box.ar-svc-card:hover .elementor-icon-box-icon svg { color: #ffffff; }

/* carte entièrement cliquable (le lien du titre est étendu à toute la carte) */
.elementor-widget-icon-box.ar-svc-card { cursor: pointer; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-title a { color: inherit; text-decoration: none; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-icon a { position: relative; z-index: 3; }
.elementor-widget-icon-box.ar-svc-card:hover .elementor-icon-box-title,
.elementor-widget-icon-box.ar-svc-card:hover .elementor-icon-box-title a { color: #189998; }
.elementor-widget-icon-box.ar-svc-card .elementor-icon-box-title a:focus-visible {
  outline: 2px solid #20c4c3; outline-offset: 4px;
}

/* ── Chiffres clés (section À propos) ───────────────────────────────
   tabular-nums : les chiffres gardent la même largeur pendant le comptage. */
.elementor-widget-icon-box.ar-stat .elementor-icon-box-title { font-variant-numeric: tabular-nums; }

/* ══ CTA : flèche qui se redresse + libellé qui défile ════════════════════
   Trois classes combinables, même durée et même courbe pour que les effets
   partent ensemble :
     .ar-btn-arrow45     la flèche pivote de 45° au survol (↗ devient →)
     └ .ar-btn-arrow45-h  variante pour une icône dessinée à l'horizontale :
                          elle est penchée à −45° au repos et se redresse
     .ar-btn-swap        le libellé monte, sa copie prend sa place
                         (le dédoublement du texte est fait par
                          gestion-atelier-cct/assets/js/ar-buttons.js)
     .ar-btn-pill        bouton plein « pilule », flèche dans un rond
   Les couleurs restent réglées dans le widget Elementor : le CSS de page a une
   spécificité supérieure à celle du kit et gagnerait de toute façon. */
:root {
  --ar-swap-duration: 600ms;
  --ar-swap-ease: cubic-bezier(.165, .84, .44, 1);
}

/* ── rotation de la flèche ── */
.ar-btn-arrow45 .elementor-button-icon {
  --ar-arrow-rest: 0deg;
  transform: rotate(var(--ar-arrow-rest));
  transform-origin: 50% 50%;
  transition: transform var(--ar-swap-duration) var(--ar-swap-ease);
  will-change: transform;
}
.ar-btn-arrow45.ar-btn-arrow45-h .elementor-button-icon { --ar-arrow-rest: -45deg; }
.ar-btn-arrow45 .elementor-button:hover .elementor-button-icon,
.ar-btn-arrow45 .elementor-button:focus-visible .elementor-button-icon {
  transform: rotate(calc(var(--ar-arrow-rest) + 45deg));
}
/* Le trait doit être lissé de la même façon quel que soit l'angle. Sans ça, à
   17 px, Chrome cale les segments horizontaux/verticaux sur la grille de pixels
   et lisse les diagonales : la flèche semble changer de forme en tournant. */
.ar-btn-arrow45 .elementor-button-icon svg { shape-rendering: geometricPrecision; }

/* ── défilement vertical du libellé ──
   .elementor-button-text devient la fenêtre (overflow caché) et les deux
   .ar-swap-line sont superposées dans la même cellule de grille : la fenêtre
   fait donc exactement la hauteur du libellé, y compris quand il passe sur
   deux lignes en mobile (une hauteur fixe d'une ligne le rognerait).
   Au survol, la ligne visible sort par le haut et sa copie remonte du bas. */
.ar-btn-swap .elementor-button-content-wrapper { align-items: center; }
.ar-btn-swap .elementor-button-text {
  display: grid;
  overflow: hidden;
  transform: none; /* annule le calage optique de .ar-btn-icon, inutile ici */
}
.ar-btn-swap .ar-swap-line {
  grid-area: 1 / 1;
  line-height: 1.45; /* place pour les jambages, sinon rognés par overflow:hidden */
  transition: transform var(--ar-swap-duration) var(--ar-swap-ease);
}
.ar-btn-swap .ar-swap-line + .ar-swap-line { transform: translateY(100%); }
.ar-btn-swap .elementor-button:hover .ar-swap-line,
.ar-btn-swap .elementor-button:focus-visible .ar-swap-line { transform: translateY(-100%); }
.ar-btn-swap .elementor-button:hover .ar-swap-line + .ar-swap-line,
.ar-btn-swap .elementor-button:focus-visible .ar-swap-line + .ar-swap-line { transform: translateY(0); }

/* ── icône qui défile au lieu de tourner ──
   Pour les boutons dont l'icône n'est pas une flèche (le casque de « Mon compte ») :
   elle monte avec le libellé et sa copie remonte du bas, exactement en phase.
   Le dédoublement de l'icône est fait par ar-buttons.js, comme celui du libellé.
   La boîte de l'icône est calée sur la hauteur d'une ligne de libellé : on peut
   donc grossir le dessin sans que le bouton grandisse, et la copie du bas se
   place à exactement une hauteur de boîte, sans laisser dépasser un liseré. */
.ar-btn-swap-icon .elementor-button-icon {
  flex: 0 0 auto;
  display: grid;
  overflow: hidden;
  width: 20px;
  height: 1.45em;
}
.ar-btn-swap-icon .elementor-button-icon .ar-swap-line {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  line-height: 0;
}
.ar-btn-swap-icon .elementor-button-icon svg { width: 20px; height: 20px; display: block; }

/* ── alignement optique de la flèche ──
   Centrée géométriquement (écart mesuré : 0,01 px), elle paraît malgré tout
   basse : l'encre d'un libellé sans jambage est concentrée au-dessus de la ligne
   de base — 1,5 px d'écart mesuré sur le CTA de l'en-tête. align-items:center
   répartit la marge de part et d'autre, l'icône remonte donc de la moitié.
   Hors boutons pleins : là, c'est le rond de 36 px qui cale la hauteur. */
.ar-btn-arrow45:not(.ar-btn-pill) .elementor-button-icon { margin-bottom: 2px; }

/* ── bouton plein : la flèche dans un rond ──
   Le rond cale le côté qui le porte : c'est le padding du widget (6 px de ce
   côté) qui donne la marge autour. Hauteur du bouton = 6 + 36 + 6 = 48 px. */
.ar-btn-pill .elementor-button {
  transition: background-color var(--ar-swap-duration) var(--ar-swap-ease),
              color var(--ar-swap-duration) var(--ar-swap-ease);
}
.ar-btn-pill .elementor-button-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(26, 26, 26, .13);
  /* transform répété : la règle .ar-btn-arrow45 plus haut est écrasée par
     ce raccourci `transition`, il faut y remettre la rotation. */
  transition: transform var(--ar-swap-duration) var(--ar-swap-ease),
              background-color var(--ar-swap-duration) var(--ar-swap-ease);
}
.ar-btn-pill .elementor-button-icon svg { width: 18px; height: 18px; }
.ar-btn-pill .elementor-button:hover .elementor-button-icon,
.ar-btn-pill .elementor-button:focus-visible .elementor-button-icon {
  background-color: var(--ar-disc-hover, rgba(255, 255, 255, .18));
}
/* Bouton posé sur un bandeau sombre ou coloré : il ne peut pas foncer au survol
   (il disparaîtrait dans le bandeau), il éclaircit vers le blanc. La pastille
   doit donc foncer, pas éclaircir. */
.ar-btn-pill.ar-btn-on-dark { --ar-disc-hover: rgba(26, 26, 26, .13); }

/* ── Boutons principaux : la flèche glisse vers la droite ── */
.ar-btn-arrow-slide .elementor-button-icon { transition: transform 200ms cubic-bezier(.4, 0, .2, 1); }
.ar-btn-arrow-slide .elementor-button:hover .elementor-button-icon,
.ar-btn-arrow-slide .elementor-button:focus-visible .elementor-button-icon { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ar-btn-arrow45 .elementor-button-icon,
  .ar-btn-pill .elementor-button-icon,
  .ar-btn-swap .ar-swap-line,
  .ar-btn-arrow-slide .elementor-button-icon { transition: none; }
}
/* === /ar-accueil === */


/* === ar-trust-row : bandeau « confiance » de l'accueil ===
   Le h3 du titre conserve la margin-top de 8px héritée du thème (seul
   .ar-svc-card la remettait à zéro), ce qui pousse le texte vers le bas et
   place le centre de l'icône 5,5 px trop haut. On annule la marge et on centre
   l'icône sur la première ligne du titre en calant la hauteur de sa boîte sur
   la line-height. */
.elementor-widget-icon-box.ar-trust-row .elementor-icon-box-title {
  margin-top: 0;
  line-height: 20px;
}
.elementor-widget-icon-box.ar-trust-row .elementor-icon-box-icon {
  display: flex;
  align-items: center;
  height: 20px;
}

/* === ar-login (page 28 — généré par script, ne pas éditer à la main) === */
/* Maquette Claude Design « Login - Demande d'intervention.html ».
   Le style des champs (floating labels, focus teal, bouton jaune) vient du bloc
   JetFormBuilder global plus haut : on ne pose ici que ce qui est propre à la page. */

.ar-login { justify-content: center; }
.ar-login .ar-login-card { width: 100%; max-width: 420px; margin: 0 auto; }
/* Le rythme vertical est exprimé en margin-top : Elementor remet à zéro le
   margin-bottom des widgets quand la gouttière du conteneur vaut 0. */

/* ── Titre + accroche ── */
.elementor-widget-heading.ar-login-title .elementor-heading-title {
  font-size: 32px; font-weight: 900; line-height: 1.15; letter-spacing: -0.025em;
  color: #1a1a1a; text-align: center;
}
.ar-login .ar-login-sub { margin-top: 12px; }
.ar-login .ar-login-form { margin-top: 40px; }
.ar-login .ar-login-sub p { font-size: 14px; line-height: 1.6; color: #666; text-align: center; margin: 0; }
.ar-login .ar-login-sub em { font-style: normal; font-weight: 700; color: #20c4c3; }

/* ── Formulaire (JFB 592) ── */
/* « Se souvenir de moi » : la case remonte avant son libellé (row-reverse), et
   l'interrupteur JetFormBuilder redevient une case à cocher comme sur la maquette. */
.ar-login-form .jet-form-builder-row.field-type-switcher {
  display: flex; flex-direction: row-reverse; flex-wrap: nowrap;
  justify-content: flex-end; align-items: center; gap: 8px;
}
.ar-login-form .jet-form-builder-row.field-type-switcher .jet-form-builder__label {
  position: static; margin: 0; padding: 0; line-height: 1; width: auto; flex: 0 1 auto;
}
.ar-login-form .jet-form-builder-row.field-type-switcher .jet-form-builder__label-text {
  font-size: 13px; font-weight: 500; color: #4a4748; cursor: pointer; line-height: 1.3;
}
.ar-login-form .jet-form-builder-row.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"] {
  appearance: none; -webkit-appearance: none; display: block; position: relative;
  inline-size: 18px; block-size: 18px; min-height: 0; flex: 0 0 auto;
  margin: 0; padding: 0; box-sizing: border-box; cursor: pointer;
  border: 1.5px solid rgba(0,0,0,0.2); border-radius: 4px; background: #fff;
  transition: background-color 150ms, border-color 150ms;
}
.ar-login-form .jet-form-builder-row.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]:checked {
  background: #20c4c3; border-color: #20c4c3;
}
.ar-login-form .jet-form-builder-row.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]::before {
  content: none;
}
.ar-login-form .jet-form-builder-row.field-type-switcher input.jet-form-builder__field[role="switch"][type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Œil « afficher le mot de passe » : le remplissage de l'input est imposé en
   !important par le bloc JFB global, il faut donc réserver la place de l'icône ici. */
.ar-login-form .jet-form-builder__field-wrap.has-eye-icon .jet-form-builder__field { padding-right: 44px !important; }
.ar-login-form .jfb-eye-icon { right: 12px; color: #999; transition: color 150ms; }
.ar-login-form .jfb-eye-icon:hover { color: #20c4c3; }
.ar-login-form .jfb-eye-icon svg { width: 22px; height: 22px; }

.ar-login-form .jet-form-builder__action-button.jet-form-builder__submit {
  background: linear-gradient(135deg, #ffbd20 0%, #e0a800 100%) !important;
  box-shadow: 0 4px 16px rgba(255,189,32,0.2) !important;
  margin-top: 0 !important;
}
.ar-login-form .jet-form-builder__action-button.jet-form-builder__submit:hover {
  box-shadow: 0 6px 24px rgba(255,189,32,0.3) !important;
}

/* Message de retour (identifiants refusés, connexion réussie) : la boîte rouge
   par défaut de JetFormBuilder est reprise dans le langage graphique du site. */
.ar-login-form .jet-form-builder-message {
  margin-top: 16px; padding: 12px 14px; border: 0; border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left;
}
.ar-login-form .jet-form-builder-message--error { background: #fdecec; color: #c0392b; }
.ar-login-form .jet-form-builder-message--success { background: #e9f8f8; color: #148483; }

/* ── Séparateur « Ou continuer avec » ── */
.ar-login .ar-login-div { margin-top: 40px; }
.elementor-widget-heading.ar-login-div .elementor-heading-title {
  display: flex; align-items: center; gap: 12px; line-height: 1; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #999;
}
.ar-login .ar-login-div .elementor-heading-title::before,
.ar-login .ar-login-div .elementor-heading-title::after {
  content: ""; flex: 1 1 0; height: 1px; background: rgba(0,0,0,0.1);
}

/* ── Boutons Nextend Social Login ── */
.ar-login .ar-login-social { margin-top: 32px; }
.ar-login-social div.nsl-container { margin: 0; padding: 0; }
.ar-login-social div.nsl-container .nsl-container-buttons {
  display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0; width: 100%;
}
.ar-login-social div.nsl-container .nsl-container-buttons a { margin: 0; width: 100%; }
.ar-login-social div.nsl-container .nsl-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 12px; border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.12); box-shadow: none;
  transition: border-color 150ms, background-color 150ms;
}
.ar-login-social div.nsl-container .nsl-button:hover { border-color: rgba(0,0,0,0.22); background-color: #f9f9f9 !important; }
.ar-login-social div.nsl-container .nsl-button-svg-container { padding: 0; }
.ar-login-social div.nsl-container svg { width: 18px; height: 18px; }
.ar-login-social div.nsl-container .nsl-button-default div.nsl-button-label-container {
  margin: 0; padding: 0; flex: 0 1 auto;
  font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0; line-height: 1.3; color: #1a1a1a;
}

/* ── Pied de carte « Pas encore de compte ? » ── */
.ar-login .ar-login-foot { margin-top: 28px; border-top: 1px solid rgba(0,0,0,0.07); padding-top: 20px; }
.ar-login .ar-login-foot p { font-size: 13px; color: #666; text-align: center; margin: 0; }
.ar-login .ar-login-foot a { color: #20c4c3; font-weight: 700; letter-spacing: normal; text-decoration: none; transition: color 150ms; }
.ar-login .ar-login-foot a:hover { color: #189998; text-decoration: underline; }

@media (max-width: 600px) {
  .elementor-widget-heading.ar-login-title .elementor-heading-title { font-size: 24px; }
  .ar-login .ar-login-form { margin-top: 32px; }
  .ar-login .ar-login-div { margin-top: 40px; }
}
/* === /ar-login === */


/* === ar-card-iconline (cartes promesses pages services — généré par script 31/07/2026) ===
   Icône alignée avec le titre (présentation des cartes ar-svc-card de l'accueil),
   description en dessous sur toute la largeur, aligné à gauche.
   !important sur les marges : les règles générées par Elementor depuis icon_space (18px)
   et title_bottom_space (9px) — sélecteurs .elementor- .elementor-element.elementor-element- … —
   sont chargées après le kit et gagneraient sinon, décalant l'icône/le titre dans la grille. */
.elementor-widget-icon-box.ar-card-iconline .elementor-icon-box-wrapper{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon title" "desc desc";align-items:center;column-gap:14px;row-gap:12px;text-align:left}
.elementor-widget-icon-box.ar-card-iconline .elementor-icon-box-icon{grid-area:icon;margin:0 !important}
.elementor-widget-icon-box.ar-card-iconline .elementor-icon-box-content{display:contents}
.elementor-widget-icon-box.ar-card-iconline .elementor-icon-box-title{grid-area:title;margin:0 !important}
.elementor-widget-icon-box.ar-card-iconline .elementor-icon-box-description{grid-area:desc;margin:0 !important}
/* === fin ar-card-iconline === */

/* === ar-ffvl-badge : badge FFVL du hero, taille FIXE identique sur toutes les pages (87px = rendu accueil 1366px). Sans cela la taille depend de la hauteur du paragraphe voisin dans la ligne flex. === */
.elementor-widget-image.ar-ffvl-badge{width:auto!important;max-width:none!important;flex:0 0 auto}
.elementor-widget-image.ar-ffvl-badge img{width:87px!important;max-width:none!important;height:auto!important}

/* === ar-legal (page 1320 Mentions légales — généré par script, ne pas éditer à la main) === */
/* Page longue de texte juridique : une carte blanche unique, sommaire ancré,
   corps en liste à puces turquoise. Palette reprise du site (#20c4c3 / #1a1a1a / #555). */

.ar-legal-hero .ar-hero-sub p { max-width: 660px; margin: 0; }

.ar-legal-card { border: 1px solid #ececec; border-radius: 14px; }

/* Ancres du sommaire : dégagement sous le header collant (~60px mobile / 84px PC + marge). */
.ar-legal-card [id] { scroll-margin-top: 120px; }

/* ── Sommaire ── */
.ar-legal-toc { background: #fafafa; border: 1px solid #eeeeee; border-radius: 12px; padding: 22px 24px; }
.ar-legal-toc-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.ar-legal-toc-list li { break-inside: avoid; position: relative; margin: 0 0 9px; padding-left: 16px; font-size: 14px; line-height: 1.45; }
.ar-legal-toc-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: #20c4c3; }
.ar-legal-toc-list a { color: #555555; font-weight: 600; text-decoration: none; }
.ar-legal-toc-list a:hover { color: #20c4c3; }

/* ── Titres de section (filet de séparation) ── */
.ar-legal-h .elementor-heading-title { padding-bottom: 12px; border-bottom: 1px solid #ececec; }

/* ── Corps ── */
.ar-legal-body { font-size: 15px; line-height: 1.8; color: #555555; }
.ar-legal-body p { margin: 0 0 14px; }
.ar-legal-body p:last-child, .ar-legal-body ul:last-child { margin-bottom: 0; }
.ar-legal-body strong { color: #1a1a1a; font-weight: 700; }
.ar-legal-body em { font-style: italic; }
.ar-legal-body a { color: #20c4c3; text-decoration: none; border-bottom: 1px solid rgba(32,196,195,.35); }
.ar-legal-body a:hover { border-bottom-color: #20c4c3; }
.ar-legal-body ul { list-style: none; margin: 0 0 14px; padding: 0; }
.ar-legal-body ul li { position: relative; margin: 0 0 9px; padding-left: 20px; }
.ar-legal-body ul li:last-child { margin-bottom: 0; }
.ar-legal-body ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #20c4c3; }

@media (max-width: 767px) {
  .ar-legal-toc-list { columns: 1; }
  .ar-legal-toc { padding: 18px 18px; }
  .ar-legal-body { font-size: 14.5px; }
}
/* === /ar-legal === */

/* === ar-login-forgot + ar-signup-foot (07/08/2026, généré par script) === */
.ar-login .ar-login-forgot { margin-top: 10px; }
.ar-login .ar-login-forgot p { font-size: 13px; text-align: right; margin: 0; }
.ar-login .ar-login-forgot a { color: #666; text-decoration: underline; transition: color 150ms; }
.ar-login .ar-login-forgot a:hover { color: #20c4c3; }
.ar-signup-foot p { font-size: 13px; color: #666; text-align: center; margin: 18px 0 0; }
.ar-signup-foot a { color: #20c4c3; font-weight: 700; text-decoration: none; }
.ar-signup-foot a:hover { color: #189998; text-decoration: underline; }

/* Listes numérotées (CGV) — même rythme que les listes à puces. */
.ar-legal-body ol { margin: 0 0 14px; padding-left: 20px; }
.ar-legal-body ol li { margin: 0 0 9px; }
.ar-legal-body ol li:last-child, .ar-legal-body ol:last-child { margin-bottom: 0; }/* End custom CSS */