/*
 * Sections migrees de la page Offres (58) vers la cible "structure dans le
 * theme" (ARCHITECTURE.md, chantier C3). Declarations reprises telles
 * quelles depuis les <style> inline de post_content, pas reinventees.
 * Les 3 sections offer01bilan/offer02cv/offer03entretiens partageaient deja
 * un CSS quasi-identique par instance (39% de duplication mesuree,
 * audit-post-content-structure.php) — factorise ici en classes generiques
 * .ss-offer-section/.ss-offer-card, modificateurs par offre pour les seules
 * vraies differences (icone, fond teinte offer02cv).
 */

/* Hero (meme structure que Qui suis-je/Conseils, note de lien en plus) */
/* Photo de fond (retour utilisateur 2026-08-11, meme methode que
   .ss-hero-accueil dans section-accueil.css : scrim navy translucide pour
   garantir le contraste du texte blanc quel que soit le cadrage). */
.ss-hero-offres{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:613px;box-sizing:border-box;position:relative;overflow:hidden;background-color:#091A2A;background-image:linear-gradient(rgba(9,26,42,0.65),rgba(9,26,42,0.65)),url("../images/hero-libellule.webp");background-size:cover;background-position:center;padding:80px 24px 112px!important}
/* Hauteur uniforme entre tous les Hero du site, cf. .ss-hero-accueil dans
   section-accueil.css pour le detail du retour utilisateur. */
/* background-position decale a droite en mobile (retour utilisateur
   2026-08-11, "attention que le sujet ne soit pas completement coupe") :
   la libellule/les nenuphars sont composes sur le bord droit de l'image
   source (1536x1024), pas au centre -- sur un Hero mobile etroit et haut
   (716px), un cover centre ne montre plus qu'une bande verticale du milieu
   de l'image, hors du sujet. Verifie visuellement (Playwright, 390px). */
@media (max-width:767px){.ss-hero-offres{padding:60px 16px 80px!important;min-height:716px;background-position:80% center}}
/* Vague de transition (memes reglages que .ss-hero-accueil::after, sans
   image de fond : ce Hero garde son aplat marine uni, seule la vague est
   repliquee, retour utilisateur 2026-08-11). */
.ss-hero-offres::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:150px;z-index:1;pointer-events:none;background-color:var(--surface-paper);background-image:url("../assets/textures/paper-texture.webp");background-repeat:repeat;background-size:627px 627px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000000' d='M0,20 C240,20 480,100 720,100 C960,100 1200,20 1440,20 L1440,150 L0,150 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000000' d='M0,20 C240,20 480,100 720,100 C960,100 1200,20 1440,20 L1440,150 L0,150 Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:bottom center;mask-position:bottom center}
@media (max-width:1023px) and (min-width:768px){.ss-hero-offres::after{height:115px}}
@media (max-width:767px){.ss-hero-offres::after{height:75px}}
.ss-hero-inner{position:relative;z-index:2;max-width:840px;margin:0 auto;text-align:center}
.ss-hero-inner h1{color:#fff;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin:0 0 16px}
.ss-hero-inner p{color:#fff;font-size:18px;line-height:1.5;margin:0 0 24px}
.ss-hero-offres__note{color:#778899!important;font-size:15px!important;line-height:1.6}
.ss-hero-offres__note a{color:#778899;text-decoration:underline}
.ss-hero-inner .wp-block-buttons{justify-content:center}

/* Journey */
.ss-journey{padding:40px 32px 0!important;max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:32px}
.ss-journey__step{display:flex;flex-direction:column;align-items:center;margin-top:0}
.ss-journey__step:not(:first-child){border-left:1px solid #E2E8F0;padding-left:32px}
.ss-journey__label{color:#091A2A;font-size:15px;font-weight:600;margin:12px 0 0;max-width:160px;text-align:center;line-height:1.3}
/* Mini-illustrations au-dessus des 2 etapes (retour utilisateur 2026-08-11) :
   hauteur commune plutot que largeur commune, les 2 images sources n'ont pas
   le meme ratio (portrait pour le CV, paysage pour les bulles). */
.ss-journey__step-img{margin:0;max-width:110px}
.ss-journey__step-img img{width:100%;height:70px;object-fit:contain;display:block}
.ss-journey__caption{text-align:center;color:#667788;font-size:13px;margin:16px 32px 0}
.entry-content .ss-trust-badges,div.ss-trust-badges,body .ss-trust-badges,.ss-accordion .wp-block-details .ss-trust-badges{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:12px!important;margin:24px auto!important;padding:0!important;max-width:800px;clear:both}
.entry-content .ss-trust-badges>*,body .ss-trust-badges>*,body .ss-trust-badges img,.wp-block-group.is-layout-flow.ss-trust-badges > * + *{height:36px!important;width:auto!important;display:block!important;margin:0!important;padding:0!important;vertical-align:middle!important;object-fit:contain!important;transition:transform .2s ease}
.ss-trust-badge-img:hover{transform:translateY(-2px)}
@media (max-width:768px){.entry-content .ss-trust-badges,div.ss-trust-badges,body .ss-trust-badges,.ss-accordion .wp-block-details .ss-trust-badges{display:grid!important;grid-template-columns:repeat(2, minmax(0, auto))!important;justify-content:center!important;align-items:center!important;gap:10px 12px!important;margin:20px auto!important}.entry-content .ss-trust-badges>*,body .ss-trust-badges>*,body .ss-trust-badges img{height:34px!important;max-width:100%!important}}
@media (max-width:360px){.entry-content .ss-trust-badges,div.ss-trust-badges,body .ss-trust-badges,.ss-accordion .wp-block-details .ss-trust-badges{gap:8px 8px!important}.entry-content .ss-trust-badges>*,body .ss-trust-badges>*,body .ss-trust-badges img{height:30px!important}}
.ss-offer-section .wp-block-buttons,.ss-journey + .ss-journey__caption + .wp-block-buttons,.wp-block-buttons{display:flex;justify-content:center!important}
@media (max-width:600px){.ss-journey{flex-direction:column;flex-wrap:nowrap;gap:16px}.ss-journey__step:not(:first-child){border-left:none;border-top:1px solid #E2E8F0;padding-left:0;padding-top:16px}.ss-journey__label{max-width:220px}}

/* Sections offer (generique + modificateurs) */
.ss-offer-section{padding:96px 0!important}
@media (max-width:767px){.ss-offer-section{padding:48px 0!important}}
/* Section juste sous le Hero : espace top reduit (retour utilisateur
   2026-08-11, "espace trop important entre le Hero et Parcours longs"), aligne
   sur le meme espacement que les autres pages (retour utilisateur 2026-08-15,
   "tous les contenus doivent commencer au meme endroit", ref. Conseils
   carriere/.ss-topic, 32px/24px). Combinateur "~" (frere general) et non "+"
   (frere adjacent) : .ss-offres-tabs-bar (masque en desktop, display:none)
   s'intercale dans le DOM entre le Hero et le premier .ss-offer-section, donc
   "+" ne matchait jamais et laissait fuiter le padding de base 96px/48px
   (bug trouve en verifiant au pixel pres, pas juste en lisant le CSS). */
.ss-hero-offres ~ .ss-offer-section{padding-top:32px!important}
@media (max-width:767px){.ss-hero-offres ~ .ss-offer-section{padding-top:24px!important}}
/* #FFFFFF -> var(--surface-paper) (retour utilisateur 2026-08-11) : un
   blanc pur ici tranchait avec le bas de la vague du Hero (var(--surface-
   paper), plus grise), la coupure se voyait a l'oeil. Tout le site utilise
   desormais une seule et meme couleur de base. */
.ss-offer-section--bilancomplet{background-color:var(--surface-paper)!important;background-image:url("../assets/textures/paper-texture.webp")!important;background-repeat:repeat!important;background-size:627px 627px!important}
.ss-offer-section--offer02cv{background-color:var(--surface-paper)!important;background-image:url("../assets/textures/paper-texture.webp")!important;background-repeat:repeat!important;background-size:627px 627px!important;border-top:1px solid #E2E8F0}
.ss-offer-section--offer03entretiens{background-color:#F8FAFC!important;background-image:url("../assets/textures/paper-texture.webp")!important;background-repeat:repeat!important;background-size:627px 627px!important;border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0}
.ss-capacity-banner{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;padding:12px 18px;margin:16px 0 24px;max-width:720px}
.ss-capacity-text{color:#166534;font-size:13px;line-height:1.5;margin:0}
.ss-offer-inner{max-width:1140px;margin:0 auto;width:100%;box-sizing:border-box;padding-left:24px;padding-right:24px}
@media (max-width:1023px) and (min-width:768px){.ss-offer-inner{padding-left:32px;padding-right:32px}}
@media (max-width:767px){.ss-offer-inner{padding-left:16px;padding-right:16px}}
/* scroll-margin-top (retour utilisateur 2026-08-11) : marge confortable
   sous le header sticky (81px) quand on arrive via une ancre du menu, pour
   que l'eyebrow + le titre soient visibles en entier des l'atterrissage,
   sans jamais couper le titre -- priorite sur un centrage vertical qui
   pourrait le faire remonter hors du viewport sur les sections hautes.
   Cf. skillshift_anchor_center_scroll_js() dans functions.php. */
.ss-offer-header{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px;scroll-margin-top:104px}
.ss-offer-header__label{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;margin-top:0}
.ss-offer-header__icon{width:52px;height:52px;border-radius:50%;background:#F8FAFC;display:flex;align-items:center;justify-content:center;margin:0}
.ss-offer-header__icon::before{content:"";width:22px;height:22px;background:no-repeat center/contain}
.ss-offer-header__icon--offer02cv::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E")}
.ss-offer-header__icon--offer03entretiens::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E")}
.ss-offer-header__icon--bilancomplet::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E")}
.ss-offer-header__body{margin-top:0}
.ss-offer-header__body h2{color:#091A2A;font-size:24px;font-weight:500}
/* #5C6D7F (pas #667788) : sur .ss-offer-section--tint (offer02cv, fond
   F8FAFC), #667788 ne fait que 4.4:1 (sous AA 4.5:1) — meme bug que la FAQ
   Conseils/Contact (session 33), corrige de la meme facon avant meme la
   bascule (evite de le decouvrir en R5). */
.ss-offer-header__subtitle{color:#5C6D7F!important;font-size:15px!important;font-weight:400;line-height:1.6;margin-top:16px!important}
.ss-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1023px) and (min-width:768px){.ss-offer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.ss-offer-grid{grid-template-columns:1fr}}

/* Cartes offer (A/B standard, C mise en avant) */
.ss-offer-card{background-color:#ffffff;border:1px solid #E2E8F0;border-radius:12px;padding:24px;min-width:0;margin-top:0}
.ss-offer-card--highlight{border:1.5px solid #E2E8F0}
/* Pictos ajoutes au-dessus des 3 cartes de phase (retour utilisateur
   2026-08-11), centres par rapport aux bords de la carte comme le reste du
   site (meme traitement que .ss-services-card__img sur l'accueil). */
.ss-offer-card__img{width:76px;height:76px;margin:0 auto 16px;display:block}
.ss-offer-card__img img{width:100%;height:100%;object-fit:contain;display:block}
.ss-offer-card__title{color:#091A2A;font-size:18px;font-weight:500;margin:0 0 8px}
.ss-offer-card__desc{color:#667788!important;font-size:14px!important;line-height:1.5;margin:0 0 16px!important;text-align:justify}
.ss-offer-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ss-offer-card__list li{display:flex;gap:8px;align-items:center;font-size:13px;color:#091A2A}
.ss-offer-card__list li::before{content:"";flex:none;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/contain}

/* Bloc bilan de competences (RS 6780) : grille tarif/duree/cadre + note */
.ss-offer-terms{margin-top:24px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:767px){.ss-offer-terms{grid-template-columns:1fr}}
.ss-offer-terms__item{margin-top:0}
/* #5C6D7F (pas #667788) : fond F8FAFC, meme bug de contraste que
   .ss-offer-header__subtitle ci-dessus (4.4:1, sous AA 4.5:1). */
.ss-offer-terms__label{display:block;color:#5C6D7F;font-size:12px;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 6px}
.ss-offer-terms__value{display:block;color:#091A2A;font-size:16px;font-weight:700;line-height:1.3;margin:0}
.ss-offer-terms__detail{display:block;color:#5C6D7F;font-size:13px;margin:4px 0 0;line-height:1.45;text-align:justify}
.ss-offer-terms__badge{margin-top:10px}
.ss-cpf-terms-badge{height:24px;width:auto;display:block;object-fit:contain}
.ss-offer-note{color:#667788;font-size:13px;font-style:italic;line-height:1.6;margin:16px 0 0;text-align:center}
.ss-offer-note a{color:#667788;text-decoration:underline}
@media (max-width:767px){.ss-offer-note{max-width:480px;text-align:justify}}

/* Illustrations ajoutees apres les grilles de cartes (retour utilisateur
   2026-08-11) : meme largeur de conteneur pour les deux (cible fleche,
   progression_1), meme si l'une est portrait et l'autre paysage -- l'aspect
   ratio natif de chaque image est conserve, "meme taille" = meme traitement
   de conteneur, proportionne aux cartes de 1140px qui precedent. */
.ss-offer-media{display:flex;flex-direction:column;align-items:center;margin-top:24px}
.ss-offer-media__img{margin:0;max-width:420px;width:100%}
.ss-offer-media__img img{width:100%;height:auto;display:block;border-radius:12px}
.ss-offer-media__caption{color:#667788;font-size:13px;font-style:italic;text-align:center;margin:4px auto 0!important}
@media (max-width:767px){.ss-offer-media__caption{max-width:480px;text-align:justify}.ss-desktop-break{display:none}}
/* Tailles/largeurs de legende par section (retour utilisateur 2026-08-11) :
   cible-fleche jugee trop grande (-50%), progression_1 legerement trop
   grande (-20%), et le texte doit rester proche de la largeur de l'image
   plutot que du max-width par defaut, pour ne pas etirer inutilement la
   section. */
.ss-offer-section--offer02cv .ss-offer-media__img{max-width:210px}
.ss-offer-section--offer03entretiens .ss-offer-media__img,.ss-offer-section--offer03entretiens .ss-offer-media__caption{max-width:336px}
/* Essai fond papier sur les cartes de cette section (a valider visuellement,
   meme demarche que .ss-services-card/.ss-parcours-card dans
   section-accueil.css). */
.ss-offer-section--offer03entretiens .ss-offer-card{background-color:var(--surface-paper);background-image:url("../assets/textures/paper-texture.webp");background-repeat:repeat;background-size:627px 627px}

/* Journey : en-tete recadre, au-dessus des 3 etapes */
.ss-offer-section--journey{background-color:#F8FAFC!important;background-image:url("../assets/textures/paper-texture.webp")!important;background-repeat:repeat!important;background-size:627px 627px!important;border-top:1px solid #E2E8F0;display:flow-root!important;overflow:hidden!important}
.ss-journey-head{max-width:900px;margin:0 auto;padding:0 32px;text-align:center}
.ss-journey-head h2{color:#091A2A;font-size:24px;font-weight:500;margin:8px 0 0}
.ss-journey-intro{color:#5C6D7F;font-size:15px;line-height:1.6;margin:8px 0 0}
.ss-offer-section--journey .ss-journey__caption{margin-top:24px!important;margin-bottom:24px!important;line-height:1.6}
/* Bouton "Reserver un creneau a l'heure" (sous les badges de reassurance,
   section Accompagnement a l'heure) masque sur mobile uniquement -- retour
   utilisateur 2026-08-14, redondant sur petit ecran avec les CTA deja
   presents plus bas dans les 3 onglets de services. */
@media (max-width:767px){.ss-offer-section--journey .wp-block-buttons{display:none!important}}
.ss-offer-section--journey .ss-trust-badges{margin-top:28px!important;margin-bottom:28px!important;background-color:transparent!important}
.ss-offer-section--journey .wp-block-buttons{margin-top:24px!important}

/* CTA final avec bloc tarif */
/* Bug preexistant corrige a l'occasion de la bascule (session 33), meme
   cause que Qui suis-je/Conseils : padding jamais reellement responsive
   sur le widget d'origine. Reduction desormais active, conforme
   RESPONSIVE_GUIDELINES.md §4.9 (96px → 64px → 48px vertical). */
.ss-cta-offres{background-color:#091A2A;padding:96px 24px!important;text-align:center}
@media (max-width:1023px) and (min-width:768px){.ss-cta-offres{padding:64px 24px!important}}
@media (max-width:767px){.ss-cta-offres{padding:48px 24px!important}}
.ss-cta-offres h2{color:#fff;font-size:24px;font-weight:500;margin:0 0 16px}
.ss-cta-offres__desc{color:#778899!important;margin:0 auto 32px!important;max-width:600px}
.ss-cta-offres__prices{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px;margin-bottom:32px;margin-top:0}
.ss-cta-offres__price{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:200px;padding:16px 28px;border-radius:12px;border:1px solid #2F4F4F;margin-bottom:32px;margin-top:0}
.ss-cta-offres__prices .ss-cta-offres__price{margin-bottom:0}
.ss-cta-offres__price-label{color:#778899;font-size:13px;text-transform:uppercase;letter-spacing:0.08em;margin:0;text-align:center}
.ss-cta-offres__price-value{color:#FFFFFF;font-weight:700;font-size:24px;margin:0;margin-top:0;white-space:nowrap;text-align:center}
@media (max-width:479px){.ss-cta-offres__price-value{font-size:19px}.ss-cta-offres__price{min-width:0}}
.ss-cta-offres .wp-block-buttons{justify-content:center;margin-top:0!important}
.ss-cta-offres .wp-block-button__link{line-height:1.857}

/* Barre d'onglets Mobile (Segmented Control) pour la page Offres */
.ss-offres-tabs-bar{display:none}
@media (max-width:767px){
  /* Largeur alignee sur les cartes/`.ss-offer-inner` : marge horizontale en
     calc(50% - 50vw + 16px) plutot qu'un simple margin:16px -- tabsBar est
     inseree comme frere d'un bloc `alignfull` (sec0) dans un parent
     (.entry-content) plus etroit que le viewport ; un margin fixe se
     calculait donc sur ce parent etroit et desalignait la barre par
     rapport aux cartes en dessous (retour utilisateur 2026-08-14). Cette
     formule reproduit exactement le meme calcul que le breakout natif
     `alignfull` du reste de la page (meme containing block), avec un
     wrapper DOM en moins -- important pour garder intacte la plage de
     sticky (cf. note ci-dessous : un wrapper qui n'entoure que la barre
     elle-meme reduit cette plage a ~0 et la fait disparaitre au 1er scroll,
     2e retour utilisateur 2026-08-14). */
  .ss-offres-tabs-bar{display:flex!important;background-color:var(--surface-paper, #FFFFFF)!important;background-image:url("../assets/textures/paper-texture.webp")!important;background-repeat:repeat!important;background-size:627px 627px!important;border:1px solid #E2E8F0;border-radius:12px;padding:4px;gap:4px;margin-top:16px!important;margin-bottom:24px!important;margin-left:calc(50% - 50vw + 16px)!important;margin-right:calc(50% - 50vw + 16px)!important;position:sticky;top:76px;z-index:99;box-shadow:0 4px 16px rgba(9,26,42,0.06);transition:top .3s cubic-bezier(0.16,1,0.3,1)}
  /* Suit le Smart Sticky Header (#masthead.ss-header-hidden, functions.php
     skillshift_smart_sticky_header_js) : quand le header se masque au
     scroll bas, la barre d'onglets remonte pour occuper l'espace libere
     plutot que de laisser un vide flottant au-dessus d'elle -- retour
     utilisateur 2026-08-14 ("il doit flotter sans gener le header"). */
  body.ss-header-hidden .ss-offres-tabs-bar{top:12px}
  .ss-offres-tab-btn{flex:1;min-width:0;border:none!important;background:transparent;padding:8px 4px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;color:#5C6D7F;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.3;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;outline:none}
  /* Neutralise tout style natif de pression/focus du <button> (chrome OS,
     halo de focus, assombrissement par defaut) hors de l'etat .is-active
     qu'on controle nous-memes -- retour utilisateur 2026-08-14, "pourquoi
     au surlignage les boutons sont fonces, jamais demande". Non-important
     pour ne jamais entrer en conflit avec le fond blanc !important de
     .is-active juste en dessous. */
  .ss-offres-tab-btn:not(.is-active):active,
  .ss-offres-tab-btn:not(.is-active):focus,
  .ss-offres-tab-btn:not(.is-active):focus-visible{background:transparent;background-color:transparent;outline:none;box-shadow:none}
  .ss-offres-tab-btn span{white-space:normal;word-break:normal}
  .ss-offres-tab-btn img{width:20px;height:20px;object-fit:contain;flex-shrink:0;opacity:.85;transition:transform .2s ease,opacity .2s ease}
  .ss-offres-tab-btn.is-active{background:#FFFFFF!important;color:#091A2A!important;font-weight:700!important;box-shadow:0 2px 8px rgba(9,26,42,0.1)!important}
  .ss-offres-tab-btn.is-active img{opacity:1!important;transform:scale(1.08)}
  .ss-offer-section--tabbed{display:none!important}
  .ss-offer-section--tabbed.is-active{display:block!important;animation:ssTabFade .25s ease-in-out}
}
@keyframes ssTabFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}