/* ==========================================================================
ISSNT Reasons Addon — Frontend (v3.2.0)
Reecriture complete et consolidee. Une seule source de verite par regle.
Variables injectees par PHP : --issnt-radius, --issnt-gap.

NOUVEAU EN v3.2.0
- Couleur d'icone uniformisee par defaut sur TOUTES les cartes (y compris la
  premiere) via la couleur globale posee en inline sur .issnt-reason-icon
  (voir Widget_Reasons::render_reason_card()). Aucune regle !important
  requise : la couleur globale est simplement la seule valeur inline emise
  quand le mode uniforme est actif.
========================================================================== */

*{box-sizing:border-box}

/* ---------------------------------------------------------------- Section */
.issnt-reasons-section{
position:relative;overflow:hidden;width:100%;isolation:isolate;
padding:clamp(54px,7vw,96px) 20px;
background:linear-gradient(135deg,#48106a 0%,#4820a6 45%,#1f3fb9 100%);
background-attachment:local;
}
.issnt-reasons-section,.issnt-reasons-wrap,.issnt-reasons-grid{contain:layout paint style}
@supports not (contain:layout){.issnt-reasons-section,.issnt-reasons-wrap,.issnt-reasons-grid{contain:none}}
/*
 * v3.3.0 — Fond de section uniformise.
 * Les anciens halos radiaux positionnes en pourcentage (::before) rendaient
 * le fond visuellement different selon la hauteur/largeur de la section
 * (bandes plus claires ou plus sombres selon les instances du widget).
 * Remplaces par un unique voile lineaire vertical, identique sur toute la
 * largeur et proportionnel en tout point de la section : le fond reste
 * rigoureusement uniforme, quels que soient le nombre de cartes, la
 * hauteur de la section ou la resolution d'ecran.
 */
.issnt-reasons-section::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 78%,rgba(0,0,0,.14) 100%);
}
.issnt-reasons-wrap{position:relative;z-index:1;max-width:1280px;margin:0 auto}
.issnt-width-compact .issnt-reasons-wrap{max-width:1180px}

/* ---------------------------------------------------------------- En-tete */
.issnt-reasons-header{text-align:center;max-width:860px;margin:0 auto 34px}
.issnt-reasons-eyebrow{
display:inline-flex;padding:8px 14px;border-radius:999px;
background:rgba(255,255,255,.11);color:#fff;font-size:12px;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;
}
.issnt-reasons-title{margin:0 0 12px;line-height:1.08;font-weight:900;color:#fff;font-family:inherit}
.issnt-heading-strong .issnt-reasons-title{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}
.issnt-heading-balanced .issnt-reasons-title{font-size:clamp(28px,3.7vw,42px);letter-spacing:-.035em}
.issnt-heading-refined .issnt-reasons-title{font-size:clamp(26px,3.3vw,38px);letter-spacing:-.025em}
.issnt-reasons-subtitle{margin:0 auto;max-width:760px;color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.75}
.issnt-reasons-header[style*="left"] .issnt-reasons-subtitle{margin-left:0}
.issnt-reasons-header[style*="right"] .issnt-reasons-subtitle{margin-right:0}

/* ---------------------------------------------------- Apparition (JS reveal) */
.issnt-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--delay,0s)}
.issnt-inview{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.issnt-reveal{opacity:1;transform:none;transition:none}
.issnt-reason-card,.issnt-cta-card{transition:none !important}
.issnt-reason-card:hover,.issnt-cta-card:hover{transform:none !important}
}

/* ----------------------------------------------------------------- Grille */
.issnt-reasons-grid{
display:grid;align-items:stretch;grid-auto-flow:row dense;
grid-auto-rows:minmax(0,1fr);
gap:var(--issnt-gap,18px);
}
.issnt-cols-1{grid-template-columns:1fr}
.issnt-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.issnt-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.issnt-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.issnt-cols-3,.issnt-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.issnt-cols-2,.issnt-cols-3,.issnt-cols-4{grid-template-columns:1fr}}

/* ----------------------------------- Gabarit partage carte + CTA (identique) */
.issnt-reason-card,
.issnt-cta-card{
position:relative;min-height:100%;width:100%;
border-radius:var(--issnt-radius,22px);
padding:22px 18px 18px;
will-change:transform;
}

/* ---------------------------------------------------------- Carte "raison" */
.issnt-reason-card{
display:block;
background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.065));
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.14);
color:#fff;
transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease,background .32s ease;
}
.issnt-reason-card:hover{
transform:translateY(-7px);
border-color:rgba(255,255,255,.2);
background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.08));
}
.issnt-reason-card.issnt-style-outline{background:transparent}
.issnt-reason-card.issnt-style-solid{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.08))}

.issnt-depth-deep .issnt-reason-card{box-shadow:0 20px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.issnt-depth-soft .issnt-reason-card{box-shadow:0 14px 32px rgba(0,0,0,.10)}
.issnt-depth-clean .issnt-reason-card{box-shadow:none}

.issnt-reason-card-title{margin:0 0 8px;font-size:16px;font-weight:800;line-height:1.35;color:#fff;word-break:break-word}
.issnt-reason-card-text{font-size:14px;line-height:1.72;color:rgba(255,255,255,.84);hyphens:auto;overflow-wrap:anywhere}

/* ----------------------------------------- Icones premium SVG (auto-hebergees)
Le fond et la couleur sont poses en inline par le rendu PHP. Depuis la
v3.2.0, la couleur inline est identique sur toutes les cartes lorsque le
mode "Uniformiser la couleur des icones" est actif (comportement par
defaut), garantissant que la premiere carte affiche exactement la meme
couleur que les autres. */
.issnt-reason-icon{
flex:0 0 auto;width:44px;height:44px;border-radius:14px;
display:flex;align-items:center;justify-content:center;margin-bottom:14px;
border:1px solid rgba(255,255,255,.16);
box-shadow:0 10px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);
}
.issnt-reason-icon svg{width:20px;height:20px;display:block;shape-rendering:geometricPrecision}
.issnt-ic-accent{fill:currentColor;stroke:none}

/* Les 3 styles pilotes par le controle "Style icones" — reellement distincts */
.issnt-icon-premium svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,229,130,.35))}
.issnt-icon-outlined svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.issnt-icon-solid svg{fill:currentColor;stroke:none;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------- CTA (contenu + couleurs)
IMPORTANT : en mode "inline" (.issnt-cta-cell) le CTA n'a AUCUNE regle de
largeur/colonne — il occupe exactement une cellule de la grille, strictement
comme une carte. Seule la variante bandeau (.issnt-cta-span) s'etend. */
.issnt-cta-card{
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
text-decoration:none;overflow:hidden;
background:linear-gradient(165deg,rgba(255,225,140,.98) 0%,rgba(255,208,98,.95) 42%,rgba(240,164,39,.95) 100%);
color:#2d113f;
border:1px solid rgba(255,255,255,.56);
box-shadow:0 20px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5);
transition:transform .32s ease,box-shadow .32s ease;
}
.issnt-cta-card::before{content:'';position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.6),transparent 35%),radial-gradient(circle at 84% 18%,rgba(255,255,255,.22),transparent 26%)}
.issnt-cta-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 26px 52px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.issnt-cta-card:focus-visible{outline:3px solid #2d113f;outline-offset:3px}

.issnt-cta-gold{background:linear-gradient(160deg,#ffe7a1 0%,#ffd15e 48%,#e8a11f 100%)}
.issnt-cta-dark{background:linear-gradient(165deg,#1f1537 0%,#35184f 58%,#5a156d 100%);color:#fff}
.issnt-cta-dark .issnt-cta-card-kicker,.issnt-cta-dark .issnt-cta-card-note,.issnt-cta-dark .issnt-cta-card-main{color:#fff}
.issnt-cta-dark .issnt-cta-card-icon{background:rgba(255,255,255,.14);color:#fff}
.issnt-cta-luxury{backdrop-filter:blur(18px)}

.issnt-cta-card-icon{
flex:0 0 auto;width:44px;height:44px;border-radius:14px;
display:flex;align-items:center;justify-content:center;margin-bottom:14px;
background:rgba(45,17,63,.14);color:#2d113f;
box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.issnt-cta-card-icon svg{width:20px;height:20px;display:block;shape-rendering:geometricPrecision}
.issnt-cta-card-kicker{
display:inline-flex;padding:5px 10px;border-radius:999px;
background:rgba(45,17,63,.12);font-size:11px;font-weight:800;
letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:#2d113f;
}
.issnt-cta-card-main{margin:0 0 6px;font-size:18px;line-height:1.2;font-weight:900;letter-spacing:-.02em;color:#2d113f;max-width:22ch;word-break:break-word}
.issnt-cta-card-note{font-size:13.5px;line-height:1.6;color:rgba(45,17,63,.82);max-width:30ch;hyphens:auto;overflow-wrap:anywhere}

/* ------------------------------------------- CTA variante bandeau (footer) */
.issnt-cta-span{
grid-column:1/-1;
flex-direction:row;align-items:center;justify-content:space-between;gap:18px;
}
.issnt-cta-span .issnt-cta-card-icon{margin-bottom:0}
.issnt-cta-span .issnt-cta-card-main,.issnt-cta-span .issnt-cta-card-note{max-width:none}
.issnt-cta-align-left.issnt-cta-span{justify-self:start}
.issnt-cta-align-center.issnt-cta-span{justify-self:center}
.issnt-cta-align-right.issnt-cta-span{justify-self:end}
@media (max-width:760px){.issnt-cta-span{flex-direction:column;align-items:flex-start}}

/* ---------------------------------------------------------- Micro-interactions */
.issnt-micro .issnt-reason-card,.issnt-micro .issnt-cta-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease,border-color .28s ease}
.issnt-micro .issnt-reason-card:hover{transform:translateY(-6px) scale(1.01);filter:saturate(1.03)}
.issnt-micro .issnt-cta-card:hover{transform:translateY(-7px) scale(1.012);filter:saturate(1.05)}
.issnt-micro .issnt-reason-icon svg,.issnt-micro .issnt-cta-card-icon svg{transition:transform .22s ease}
.issnt-micro .issnt-reason-card:hover .issnt-reason-icon svg,.issnt-micro .issnt-cta-card:hover .issnt-cta-card-icon svg{transform:scale(1.06)}

/* ---------------------------------------------------------------- Divers */
.issnt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){.issnt-reasons-section{padding:42px 16px}}

/* ---------------------------------------------------------- Accessibilite */
.issnt-reason-card:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}