/* Atlas Connect · atlas-club — CSS inline externalisé. */


/* Retrait des halos décoratifs (bleu + orange) sur les fonds — demande client */
.section-decor .sd-halo-blue,
.section-decor .sd-halo-orange{ display:none !important; }

/* Retrait du quadrillage graphique dans la section Atlas Rewards — demande client */
#rewards .section-decor::before{ display:none !important; }

/* Retrait du quadrillage graphique dans la section Offres du moment — demande client */
.ac-offers-section::before{ display:none !important; }

/* ── Concours & cadeaux : bloc sur fond blanc (pleine largeur) dans la section bleue ; adapté clair/sombre ── */
.ac-offers-section #concours.l2-subblock{position:relative;z-index:1;margin:72px 0 -92px;padding:76px 0 92px;border-top:0;background:#fff!important;color:#0d1f5c}
.ac-offers-section #concours.l2-subblock::before{content:"";display:block;position:absolute;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);background:#fff;z-index:-1;border-top:1px solid rgba(37,99,235,.1)}
.ac-offers-section #concours .s-title,html:not(.atlas-dark) body:not(.atlas-dark) .ac-offers-section #concours .s-title{color:#0d1f5c;background:linear-gradient(142deg,#0a1638,#0d1f5c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}
.ac-offers-section #concours .s-sub{color:#586f9a}
.ac-offers-section #concours .s-eyebrow{color:#2563eb}
.ac-offers-section #concours .ac-accent,html:not(.atlas-dark) body:not(.atlas-dark) .ac-offers-section #concours .ac-accent{position:relative;display:inline-block;background:linear-gradient(92deg,#1d4ed8 0%,#2563eb 35%,#0ea5e9 70%,#2563eb 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:acAccentFlow 7s linear infinite;padding-bottom:.06em}
.ac-offers-section #concours .ac-accent::after{content:"";position:absolute;left:.02em;right:.02em;bottom:-.02em;height:.14em;border-radius:99px;background:linear-gradient(90deg,#f97316,#fb923c 60%,rgba(251,146,60,.2));box-shadow:0 2px 10px rgba(249,115,22,.35);transform-origin:left;animation:acAccentRule 7s ease-in-out infinite}
@keyframes acAccentRule{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.72)}}
body.atlas-dark .ac-offers-section #concours .ac-accent{background:linear-gradient(92deg,#93c5fd,#67e8f9 50%,#a5b4fc);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.atlas-dark .ac-offers-section #concours .ac-accent::after{background:linear-gradient(90deg,#fb923c,#fdba74 60%,rgba(253,186,116,.2))}
@media(prefers-reduced-motion:reduce){.ac-offers-section #concours .ac-accent,.ac-offers-section #concours .ac-accent::after{animation:none}}
.ac-offers-section #concours .ac-cc-feature{background:linear-gradient(165deg,#f4f7ff,#e9f0ff);border-color:rgba(37,99,235,.12);box-shadow:0 30px 70px -44px rgba(15,23,42,.35),inset 0 1px 0 #fff}
.ac-offers-section #concours .ac-cc-item{background:#f7f9ff;border:1px solid rgba(37,99,235,.1)}
.ac-offers-section #concours .ac-cc-item:hover{border-color:rgba(37,99,235,.3)}
body.atlas-dark .ac-offers-section #concours.l2-subblock,body.atlas-dark .ac-offers-section #concours.l2-subblock::before{background:#08122e!important;border-top-color:rgba(255,255,255,.08)}
body.atlas-dark .ac-offers-section #concours .s-title{color:#fff;background:linear-gradient(142deg,#fff,#dbe7ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.atlas-dark .ac-offers-section #concours .s-sub{color:rgba(234,240,255,.68)}
body.atlas-dark .ac-offers-section #concours .s-eyebrow{color:#93c5fd}
body.atlas-dark .ac-offers-section #concours .ac-cc-item{background:rgba(255,255,255,.04)!important;border-color:rgba(96,165,250,.16)!important}
@media(max-width:720px){.ac-offers-section #concours.l2-subblock{margin:56px 0 -92px;padding:56px 0 72px}}

/* ── Offres du moment · motion attractive & pro ── */
.ac-offers-section .ac-offer-cover{background-size:200% 200%;animation:acCoverDrift 14s ease-in-out infinite}
@keyframes acCoverDrift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ac-offers-section .ac-offer .ac-offer-sheen{animation:acAutoSheen 9s cubic-bezier(.4,0,.2,1) infinite}
.ac-offers-section .ac-offer:nth-child(2) .ac-offer-sheen{animation-delay:1.2s}
.ac-offers-section .ac-offer:nth-child(3) .ac-offer-sheen{animation-delay:2.4s}
.ac-offers-section .ac-offer:nth-child(4) .ac-offer-sheen{animation-delay:3.6s}
.ac-offers-section .ac-offer:nth-child(5) .ac-offer-sheen{animation-delay:4.8s}
.ac-offers-section .ac-offer:nth-child(6) .ac-offer-sheen{animation-delay:6s}
.ac-offers-section .ac-offer:nth-child(n+7) .ac-offer-sheen{animation-delay:7.2s}
@keyframes acAutoSheen{0%,78%{left:-70%}92%,100%{left:135%}}
.ac-offers-section .ac-offer:hover .ac-offer-sheen{animation:acSheen .95s cubic-bezier(.4,0,.2,1)}
.ac-offers-section .ac-offer-logo{animation:acLogoFloat 6s ease-in-out infinite}
.ac-offers-section .ac-offer:nth-child(even) .ac-offer-logo{animation-delay:-3s}
@keyframes acLogoFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}
.ac-offers-section .ac-offer:hover .ac-offer-logo{animation:none}
.ac-offer-deal{animation:acDealNudge 7s ease-in-out infinite}
.ac-offers-section .ac-offer:nth-child(2) .ac-offer-deal{animation-delay:-2.3s}
.ac-offers-section .ac-offer:nth-child(3) .ac-offer-deal{animation-delay:-4.6s}
@keyframes acDealNudge{0%,84%,100%{transform:translateY(0) scale(1)}90%{transform:translateY(-2px) scale(1.05)}95%{transform:translateY(0) scale(1)}}
.ac-offer-deal.is-hot{position:absolute;animation:acHotPulse 2.6s ease-in-out infinite}
@keyframes acHotPulse{0%,100%{box-shadow:0 10px 22px -8px rgba(255,107,26,.7),0 0 0 0 rgba(255,107,26,.55)}55%{box-shadow:0 12px 26px -8px rgba(255,107,26,.85),0 0 0 8px rgba(255,107,26,0)}}
.ac-offer-deal.is-hot svg{animation:acBolt 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes acBolt{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25) rotate(-8deg)}}
.ac-offer-btn.primary svg{transition:transform .3s}
.ac-offer-btn.primary{animation:acBtnGlow 6s ease-in-out infinite}
.ac-offers-section .ac-offer:nth-child(2) .ac-offer-btn.primary{animation-delay:-2s}
.ac-offers-section .ac-offer:nth-child(3) .ac-offer-btn.primary{animation-delay:-4s}
@keyframes acBtnGlow{0%,80%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}88%{box-shadow:0 0 0 6px rgba(37,99,235,.18),0 10px 24px -8px rgba(37,99,235,.55)}}
.ac-offer-btn.primary:hover{animation:none}
.ac-offers-section .ac-head .ac-accent{background:linear-gradient(90deg,#2563eb,#67e8f9,#2563eb);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:acAccentFlow 6s linear infinite}
@keyframes acAccentFlow{to{background-position:200% 0}}
.ac-offers-fx i{animation:acFxDrift var(--d,15s) ease-in-out var(--dl,0s) infinite,acFxTwinkle 4.5s ease-in-out var(--dl,0s) infinite}
.ac-offers-fx i.b{animation-name:acFxDrift2,acFxTwinkle}
@keyframes acFxTwinkle{0%,100%{opacity:var(--o,.16)}50%{opacity:calc(var(--o,.16) * 2.2)}}
@media(prefers-reduced-motion:reduce){.ac-offers-section .ac-offer-cover,.ac-offers-section .ac-offer .ac-offer-sheen,.ac-offers-section .ac-offer-logo,.ac-offer-deal,.ac-offer-deal.is-hot svg,.ac-offer-btn.primary,.ac-offers-section .ac-head .ac-accent,.ac-offers-fx i{animation:none!important}}


/* ───────── */

html{ overflow-x: clip; }

/* ───────── */


    .ac-statusline{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 0 22px; }
    .ac-statusbadge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:50px; background:rgba(249,115,22,.12); border:1px solid rgba(249,115,22,.4); color:#fdba74; font-size:.78rem; font-weight:700; letter-spacing:.04em; }
    .ac-statusdot{ width:7px; height:7px; border-radius:50%; background:#f97316; box-shadow:0 0 0 0 rgba(249,115,22,.5); animation:acStatusPulse 2.4s ease-out infinite; }
    @keyframes acStatusPulse{ 0%{ box-shadow:0 0 0 0 rgba(249,115,22,.55) } 70%{ box-shadow:0 0 0 9px rgba(249,115,22,0) } 100%{ box-shadow:0 0 0 0 rgba(249,115,22,0) } }
    .ac-statusnote{ font-size:.82rem; color:rgba(255,255,255,.6); }
    @media(prefers-reduced-motion:reduce){ .ac-statusdot{ animation:none } }
    @media(max-width:600px){ .ac-statusnote{ display:none } }
    

/* ───────── */


.ac-subnav{ position:sticky; top:86px; z-index:80; background:rgba(6,14,43,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid rgba(96,165,250,.16); }
.ac-subnav-inner{ max-width:1200px; margin:0 auto; padding:0 48px; display:flex; justify-content:center; gap:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ac-subnav-inner::-webkit-scrollbar{ display:none; }
.ac-subnav a{ flex:none; padding:14px 16px; font-size:.84rem; font-weight:600; color:rgba(255,255,255,.62); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.ac-subnav a:hover{ color:var(--orange,#f97316); border-color:var(--orange,#f97316); }
.ac-subnav a:focus-visible{ outline:2px solid var(--blue-l,#60a5fa); outline-offset:-2px; }
@media(max-width:600px){ .ac-subnav-inner{ padding:0 20px; justify-content:flex-start; } .ac-subnav a{ padding:12px 13px; font-size:.8rem; } }
@media(max-width:768px){ .ac-subnav{ top:64px; } }


/* ───────── */


.acm{ padding:96px 0; background:#fff; position:relative; }
body.atlas-dark .acm{ background:#060e2b; }
.acm-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.acm-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:50px; background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.2); color:var(--blue-b,#2563EB); font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
body.atlas-dark .acm-pill{ background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.3); color:var(--blue-l,#60a5fa); }
.acm h2{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.7rem,2.8vw,2.4rem); letter-spacing:-.5px; color:var(--navy,#060e2b); line-height:1.1; margin-bottom:14px; }
body.atlas-dark .acm h2{ color:#fff; }
.acm p.acm-sub{ font-size:1rem; color:var(--mid,#3a5280); line-height:1.7; max-width:480px; margin-bottom:24px; }
body.atlas-dark .acm p.acm-sub{ color:#c5d3ef; }
.acm-cta{ display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:50px; background:var(--orange,#f97316); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.92rem; text-decoration:none; box-shadow:0 10px 28px -10px rgba(249,115,22,.6); transition:transform .2s, box-shadow .25s, background .2s; }
.acm-cta:hover{ transform:translateY(-2px); background:var(--orange-d,#ea6c0a); box-shadow:0 16px 38px -10px rgba(249,115,22,.75); }
.acm-cta svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.acm-modes{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.acm-mode{ display:flex; align-items:flex-start; gap:13px; padding:18px; border-radius:14px; background:var(--off,#f5f7ff); border:1.5px solid var(--border,rgba(30,86,216,.1)); transition:transform .25s, border-color .25s, box-shadow .25s; }
body.atlas-dark .acm-mode{ background:rgba(255,255,255,.03); border-color:rgba(96,165,250,.15); }
.acm-mode:hover{ transform:translateY(-3px); border-color:rgba(37,99,235,.26); box-shadow:0 12px 30px -16px rgba(37,99,235,.28); }
.acm-mode-ico{ width:38px; height:38px; flex-shrink:0; border-radius:11px; background:var(--blue-xl,#dbeafe); display:flex; align-items:center; justify-content:center; }
body.atlas-dark .acm-mode-ico{ background:rgba(96,165,250,.14); }
.acm-mode-ico svg{ width:18px; height:18px; stroke:var(--blue-b,#2563EB); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.acm-mode strong{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.9rem; color:var(--navy,#060e2b); margin-bottom:3px; }
body.atlas-dark .acm-mode strong{ color:#fff; }
.acm-mode span{ font-size:.8rem; color:var(--muted,#586f9a); line-height:1.5; }
@media(max-width:900px){ .acm-inner{ grid-template-columns:minmax(0,1fr); gap:36px; } }
@media(max-width:600px){ .acm{ padding:72px 0; } .acm-modes{ grid-template-columns:minmax(0,1fr); } }
@media(prefers-reduced-motion:reduce){ .acm-mode{ transition:border-color .25s; } }


/* ───────── */


.cfaq{ padding:96px 0; background:#fff; position:relative; }
body.atlas-dark .cfaq{ background:#060e2b; }
.cfaq-inner{ max-width:820px; margin:0 auto; }
.cfaq-head{ text-align:center; max-width:600px; margin:0 auto; }
.cfaq-head .s-eyebrow{ justify-content:center; }
.cfaq-list{ margin-top:40px; display:flex; flex-direction:column; gap:12px; }
.cfaq-item{ background:var(--off,#f5f7ff); border:1.5px solid var(--border,rgba(30,86,216,.1)); border-radius:16px; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
body.atlas-dark .cfaq-item{ background:rgba(255,255,255,.03); border-color:rgba(96,165,250,.15); }
.cfaq-item[open]{ border-color:rgba(37,99,235,.3); box-shadow:0 12px 32px -18px rgba(37,99,235,.35); }
.cfaq-q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; color:var(--navy,#060e2b); }
body.atlas-dark .cfaq-q{ color:#fff; }
.cfaq-q::-webkit-details-marker{ display:none; }
.cfaq-q-ico{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--blue-xl,#dbeafe); display:flex; align-items:center; justify-content:center; transition:background .25s, transform .3s; }
body.atlas-dark .cfaq-q-ico{ background:rgba(96,165,250,.16); }
.cfaq-q-ico svg{ width:14px; height:14px; stroke:var(--blue-b,#2563EB); fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cfaq-item[open] .cfaq-q-ico{ background:var(--blue-b,#2563EB); transform:rotate(180deg); }
.cfaq-item[open] .cfaq-q-ico svg{ stroke:#fff; }
.cfaq-a{ padding:0 24px 22px; font-size:.92rem; color:var(--mid,#3a5280); line-height:1.72; max-width:700px; }
body.atlas-dark .cfaq-a{ color:#c5d3ef; }
.cfaq-cta{ text-align:center; margin-top:34px; font-size:.92rem; color:var(--muted,#586f9a); }
.cfaq-cta a{ color:var(--blue-b,#2563EB); font-weight:700; text-decoration:none; }
.cfaq-cta a:hover{ text-decoration:underline; }
@media(max-width:600px){ .cfaq{ padding:72px 0; } .cfaq-q{ padding:18px 18px; font-size:.94rem; } .cfaq-a{ padding:0 18px 20px; } }


/* ══ Visuels de fond des cartes « comment gagner des points » (Atlas Rewards) ══
   Calque image sous le contenu, ancré en bas de carte, fondu vers le verre bleu nuit. */
.ac-why-card{position:relative;overflow:hidden;isolation:isolate}
.ac-why-bg{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.ac-why-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;opacity:.42;transform:scale(1.02);filter:brightness(1) saturate(1);transition:opacity .45s ease,transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease}
.ac-why-bg::after{content:'';position:absolute;inset:0;transition:background .45s ease;background:linear-gradient(180deg,rgba(10,21,58,.92) 0 34%,rgba(10,21,58,.72) 62%,rgba(10,21,58,.34) 100%)}
.ac-why-card > *:not(.ac-why-bg){position:relative;z-index:1}
.ac-why-card:hover .ac-why-bg img{opacity:.9;transform:scale(1.08);filter:brightness(1.45) saturate(1.2)}
.ac-why-card:hover .ac-why-bg::after{background:linear-gradient(180deg,rgba(10,21,58,.8) 0 30%,rgba(10,21,58,.5) 62%,rgba(10,21,58,.12) 100%)}


/* ══ Fond graphique du bloc « À gagner ce mois » ══
   Image posée sous le contenu, voilée pour garder le texte lisible. */
.ac-cc-feature{position:relative;overflow:hidden;isolation:isolate}
.ac-cc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.ac-cc-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;opacity:.9;transition:opacity .5s ease,filter .5s ease}
.ac-cc-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(104deg,rgba(255,255,255,.66) 0 26%,rgba(255,255,255,.3) 62%,rgba(255,255,255,.58) 100%)}
.ac-cc-feature > *:not(.ac-cc-bg){position:relative;z-index:1}
.ac-cc-feature:hover .ac-cc-bg img{opacity:1}
body.atlas-dark .ac-cc-bg img{opacity:.26;filter:brightness(.52) saturate(1.15)}
body.atlas-dark .ac-cc-bg::after{background:linear-gradient(104deg,rgba(9,19,50,.86) 0 26%,rgba(9,19,50,.58) 62%,rgba(9,19,50,.8) 100%)}
body.atlas-dark .ac-cc-feature:hover .ac-cc-bg img{opacity:.5;filter:brightness(.8) saturate(1.2)}

/* ══ Les 4 façons de soutenir · visuel en tête de carte ══
   La carte passe en grille 2 rangées : bandeau photo pleine largeur, puis
   pictogramme + texte. Padding porté par les enfants pour que l'image touche
   les bords. */
.acm-modes{gap:16px}
.acm-mode{display:block;padding:0 20px 22px;overflow:hidden}
.acm-mode-media{display:block;position:relative;margin:0 -20px 16px;height:152px;overflow:hidden;isolation:isolate}
.acm-mode-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.04);transition:transform .7s cubic-bezier(.22,1,.36,1),filter .45s ease}
.acm-mode-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,86,216,.05) 0 18%,rgba(245,247,255,0) 52%,rgba(245,247,255,.72) 84%,var(--off,#f5f7ff) 100%)}
.acm-modes .acm-mode:nth-child(1) .acm-mode-media img{object-position:54% 66%}
.acm-modes .acm-mode:nth-child(2) .acm-mode-media img{object-position:50% 58%}
.acm-modes .acm-mode:nth-child(3) .acm-mode-media img{object-position:52% 60%}
.acm-modes .acm-mode:nth-child(4) .acm-mode-media img{object-position:56% 52%}
.acm-mode:hover .acm-mode-media img{transform:scale(1.08)}
.acm-mode-ico{display:grid;place-items:center;margin:0 0 13px;width:44px;height:44px;border-radius:13px}
.acm-mode-ico svg{width:20px;height:20px}
.acm-mode > div{margin:0}
.acm-mode strong{font-size:.95rem;margin-bottom:5px}
.acm-mode > div span{display:block}
body.atlas-dark .acm-mode-media img{filter:brightness(.72) saturate(1.06)}
body.atlas-dark .acm-mode:hover .acm-mode-media img{filter:brightness(1) saturate(1.14)}
body.atlas-dark .acm-mode-media::after{background:linear-gradient(180deg,rgba(8,16,44,.26) 0 18%,rgba(10,20,52,0) 50%,rgba(12,22,56,.8) 84%,#0d1738 100%)}
@media(max-width:600px){.acm-mode-media{height:150px}}
@media(prefers-reduced-motion:reduce){.acm-mode-media img,.acm-mode:hover .acm-mode-media img{transform:none;transition:none}}