, enfants d'un héritent normalement de color:inherit,
donc forcer les couleurs explicitement sur les éléments internes est crucial. */
/* Icône carrée 52×52 — contient un SVG inline 26px stroke currentColor.
Couleur olive-deep au repos → cream au hover. Gradient peau→cream
au repos → gradient olive au hover. */
.smc-lp a.smc-crosssell__card .smc-crosssell__icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, var(--peau) 0%, var(--cream-soft) 100%) !important;
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-bottom: 20px;
transition: all 0.35s ease;
color: var(--olive-deep) !important;
box-shadow: 0 2px 6px rgba(77, 94, 43, 0.08);
}
.smc-lp a.smc-crosssell__card .smc-crosssell__icon svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
transition: stroke 0.3s ease;
display: block;
}
.smc-lp a.smc-crosssell__card:hover .smc-crosssell__icon {
background: linear-gradient(135deg, var(--olive) 0%, var(--olive-deep) 100%) !important;
border-color: var(--olive);
transform: rotate(-3deg) scale(1.06);
color: var(--cream) !important;
box-shadow: 0 6px 14px rgba(77, 94, 43, 0.28);
}
/* Titre card — bleu Fraunces, JAMAIS rose (même via :visited hérité) */
.smc-lp a.smc-crosssell__card .smc-crosssell__card-title,
.smc-lp a.smc-crosssell__card:visited .smc-crosssell__card-title,
.smc-lp a.smc-crosssell__card:hover .smc-crosssell__card-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
color: var(--bleu) !important;
line-height: 1.25;
margin: 0 0 10px;
letter-spacing: -0.01em;
text-decoration: none !important;
}
/* Description card — gris soft Manrope */
.smc-lp a.smc-crosssell__card .smc-crosssell__card-desc,
.smc-lp a.smc-crosssell__card:visited .smc-crosssell__card-desc,
.smc-lp a.smc-crosssell__card:hover .smc-crosssell__card-desc {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: var(--soft) !important;
margin: 0 0 20px;
flex-grow: 1;
text-decoration: none !important;
}
/* Bouton plein olive — vrai bouton, JAMAIS un lien stylé */
.smc-lp a.smc-crosssell__card .smc-crosssell__button,
.smc-lp a.smc-crosssell__card:visited .smc-crosssell__button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--olive) !important;
color: var(--cream) !important;
padding: 12px 20px !important;
border-radius: 10px !important;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
transition: all 0.3s ease;
text-align: center;
width: 100%;
text-decoration: none !important;
border: 0;
margin-top: auto; /* pousse le bouton en bas, alignement horizontal parfait */
}
.smc-lp a.smc-crosssell__card .smc-crosssell__button::after {
content: '→';
font-size: 16px;
line-height: 1;
transition: transform 0.3s ease;
color: var(--cream) !important;
}
.smc-lp a.smc-crosssell__card:hover .smc-crosssell__button {
background: var(--bleu) !important;
gap: 14px;
color: var(--cream) !important;
}
.smc-lp a.smc-crosssell__card:hover .smc-crosssell__button::after {
transform: translateX(4px);
}
@media (max-width: 960px) {
.smc-crosssell__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.smc-crosssell__grid { grid-template-columns: 1fr; }
.smc-crosssell h2 { font-size: 32px; }
}
/* 6) LAYOUT ------------------------------------------------------------ */
/* Header & footer du site (Elementor Pro) : rendus nativement, aucune surcharge. */
/* Breadcrumb */
.smc-breadcrumb {
background: var(--cream-soft);
border-bottom: 1px solid var(--line);
padding: .75rem 0;
font-size: var(--fs-sm);
}
.smc-breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: .35rem .5rem;
color: var(--soft);
}
.smc-breadcrumb li + li::before {
content: '›';
color: var(--or);
margin-right: .5rem;
}
.smc-breadcrumb a { color: var(--olive); }
.smc-breadcrumb [aria-current] { color: var(--bleu); }
/* Hub grid */
.smc-hub__section-title {
text-align: center;
margin-bottom: 2rem;
font-family: var(--font-serif);
font-weight: 400;
}
.smc-hubgrid {
display: grid;
gap: var(--gap);
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.smc-hubgrid__card {
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: .6rem;
transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
color: var(--bleu);
}
a.smc-hubgrid__card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-card);
border-color: var(--or);
text-decoration: none;
color: var(--bleu);
}
.smc-hubgrid__card--soon {
opacity: .6;
cursor: default;
}
.smc-hubgrid__icon {
font-size: 2rem;
line-height: 1;
margin-bottom: .25rem;
}
.smc-hubgrid__title {
font-family: var(--font-title);
font-size: var(--fs-lg);
font-weight: 600;
margin: 0;
color: var(--bleu);
}
.smc-hubgrid__desc {
margin: 0;
color: var(--soft);
font-size: var(--fs-sm);
line-height: 1.55;
}
.smc-hubgrid__cta {
color: var(--olive);
font-weight: 600;
font-size: var(--fs-sm);
margin-top: auto;
padding-top: .5rem;
}
.smc-hubgrid__badge {
display: inline-block;
align-self: flex-start;
background: var(--peau);
color: var(--bleu-soft);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: .2rem .6rem;
border-radius: 100px;
margin-top: auto;
}
/* Tasbih */
.smc-tasbih {
max-width: 520px;
margin: -1.5rem auto 0;
padding: 2.25rem 2rem 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
text-align: center;
position: relative;
z-index: 2;
}
.smc-tasbih__current {
display: flex;
flex-direction: column;
gap: .25rem;
margin-bottom: 1.5rem;
}
.smc-tasbih__current-label {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.smc-tasbih__current-fr {
font-family: var(--font-serif);
font-size: var(--fs-xl);
color: var(--bleu);
}
.smc-tasbih__current-ar {
font-family: var(--font-arabic);
font-size: 1.75rem;
color: var(--or);
line-height: 1.2;
}
.smc-tasbih__counter {
display: inline-flex;
align-items: baseline;
gap: .5rem;
margin-bottom: .75rem;
}
.smc-tasbih__count {
font-family: var(--font-title);
font-size: 4.5rem;
font-weight: 500;
color: var(--bleu);
line-height: 1;
letter-spacing: -0.02em;
}
.smc-tasbih__target {
font-family: var(--font-body);
font-size: var(--fs-lg);
color: var(--soft);
}
.smc-tasbih__progress {
height: 6px;
background: var(--line);
border-radius: 100px;
overflow: hidden;
margin-bottom: 1.75rem;
}
.smc-tasbih__progress-bar {
display: block;
height: 100%;
width: 0%;
background: var(--olive);
transition: width .2s ease;
}
.smc-tasbih__tap {
width: 100%;
max-width: 320px;
aspect-ratio: 1 / 1;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--olive);
color: var(--cream);
border: 0;
border-radius: 50%;
font-family: var(--font-body);
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 8px 24px rgba(107, 127, 63, 0.3);
transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.smc-tasbih__tap:active {
transform: scale(0.97);
background: var(--olive-deep);
box-shadow: 0 4px 14px rgba(107, 127, 63, 0.4);
}
.smc-tasbih__tap.is-complete {
background: var(--or);
box-shadow: 0 0 0 12px rgba(184, 147, 92, 0.15);
}
.smc-tasbih__tap:focus-visible {
outline: 3px solid var(--bleu);
outline-offset: 4px;
}
.smc-tasbih__presets {
display: flex;
gap: .5rem;
justify-content: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.smc-tasbih__preset {
min-width: 56px;
padding: .6rem 1rem;
background: var(--cream);
border: 1.5px solid var(--line);
color: var(--bleu);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-md);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .15s ease;
}
.smc-tasbih__preset:hover {
border-color: var(--olive);
color: var(--olive);
}
.smc-tasbih__preset.is-active {
background: var(--bleu);
color: var(--cream);
border-color: var(--bleu);
}
.smc-tasbih__meta {
display: flex;
justify-content: center;
align-items: baseline;
gap: .5rem;
margin-bottom: 1.25rem;
font-size: var(--fs-sm);
color: var(--soft);
}
.smc-tasbih__total {
color: var(--bleu);
font-weight: 600;
font-size: var(--fs-lg);
}
.smc-tasbih__actions {
display: flex;
gap: .75rem;
justify-content: center;
margin-bottom: 1.75rem;
flex-wrap: wrap;
}
.smc-tasbih__reset-all {
background: transparent;
border: 0;
color: var(--soft);
font-size: var(--fs-xs);
text-decoration: underline;
cursor: pointer;
padding: .4rem .8rem;
}
.smc-tasbih__reset-all:hover { color: var(--olive-deep); }
.smc-tasbih__dhikrs {
border-top: 1px solid var(--line);
padding-top: 1.5rem;
}
.smc-tasbih__dhikrs-label {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
margin-bottom: .75rem;
}
.smc-tasbih__dhikrs-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .5rem;
}
.smc-tasbih__dhikr {
padding: .75rem .5rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
flex-direction: column;
gap: .15rem;
transition: all .15s ease;
text-align: center;
}
.smc-tasbih__dhikr:hover {
border-color: var(--olive);
}
.smc-tasbih__dhikr.is-active {
background: var(--peau);
border-color: var(--or);
}
.smc-tasbih__dhikr-fr {
font-family: var(--font-body);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--bleu);
}
.smc-tasbih__dhikr-ar {
font-family: var(--font-arabic);
font-size: 1.05rem;
color: var(--or);
line-height: 1.1;
}
/* Qibla */
.smc-qibla {
max-width: 560px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-qibla__controls {
display: flex;
flex-wrap: wrap;
gap: .75rem;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.smc-qibla__or {
font-size: var(--fs-sm);
color: var(--soft);
padding: 0 .25rem;
}
.smc-qibla__select-label {
display: flex;
flex-direction: column;
gap: .25rem;
}
.smc-qibla__select-label-text {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.smc-qibla__error {
background: rgba(160, 82, 45, 0.08);
border: 1px solid rgba(160, 82, 45, 0.25);
color: var(--terra-deep);
padding: .75rem 1rem;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
margin-bottom: 1.25rem;
text-align: center;
}
.smc-qibla__compass {
position: relative;
width: 280px;
height: 280px;
margin: 1rem auto 1.5rem;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, var(--cream) 0%, var(--cream-soft) 65%, var(--peau) 100%);
border: 2px solid var(--or);
box-shadow: inset 0 0 0 6px var(--cream-soft), 0 8px 24px rgba(28, 46, 74, 0.1);
}
.smc-qibla__compass-ring {
position: absolute;
inset: 0;
}
.smc-qibla__cardinal {
position: absolute;
font-family: var(--font-title);
font-weight: 600;
font-size: var(--fs-md);
color: var(--bleu);
}
.smc-qibla__cardinal--n { top: 10px; left: 50%; transform: translateX(-50%); }
.smc-qibla__cardinal--e { right: 14px; top: 50%; transform: translateY(-50%); }
.smc-qibla__cardinal--s { bottom: 10px;left: 50%; transform: translateX(-50%); }
.smc-qibla__cardinal--w { left: 14px; top: 50%; transform: translateY(-50%); }
.smc-qibla__arrow {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 28px;
transition: transform .3s cubic-bezier(0.2, 0.7, 0.3, 1);
transform-origin: 50% 50%;
pointer-events: none;
}
.smc-qibla__arrow-tip {
font-size: 2.5rem;
line-height: 1;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.smc-qibla__center {
position: absolute;
width: 14px;
height: 14px;
background: var(--bleu);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 4px var(--cream-soft);
}
.smc-qibla__live-hint {
font-size: var(--fs-xs);
color: var(--soft);
text-align: center;
margin: 0 auto 1.25rem;
max-width: 360px;
line-height: 1.5;
font-style: italic;
}
.smc-qibla__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 1rem;
margin: 0;
padding: 1rem;
background: var(--cream-soft);
border-radius: var(--radius-md);
border: 1px solid var(--line);
}
.smc-qibla__stats > div {
display: flex;
flex-direction: column;
gap: .15rem;
text-align: center;
}
.smc-qibla__stats dt {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
margin: 0;
}
.smc-qibla__stats dd {
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--bleu);
}
.smc-qibla__stats dd strong {
font-weight: 600;
color: var(--olive);
}
/* Calculators — shared layout (Mahr, Zakat, Héritage) */
.smc-calc {
max-width: 760px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-calc__title {
text-align: center;
font-family: var(--font-serif);
margin: 0 0 1.25rem;
font-size: var(--fs-xl);
}
.smc-calc__note {
text-align: center;
color: var(--soft);
font-size: var(--fs-sm);
margin: 0 0 1.5rem;
}
.smc-calc__section {
border-top: 1px solid var(--line);
padding-top: 1.25rem;
margin-top: 1.25rem;
}
.smc-calc__section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.smc-calc__section-title {
font-family: var(--font-title);
font-size: var(--fs-md);
color: var(--bleu);
margin: 0 0 .75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.smc-calc__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.smc-calc__field {
display: flex;
flex-direction: column;
gap: .35rem;
}
.smc-calc__field--span { grid-column: 1 / -1; }
.smc-calc__label {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--bleu);
}
.smc-calc__help {
font-size: var(--fs-xs);
color: var(--soft);
margin-top: .25rem;
line-height: 1.4;
}
.smc-calc__radios {
display: flex;
flex-direction: column;
gap: .5rem;
}
.smc-calc__radios label {
display: flex;
align-items: center;
gap: .5rem;
font-size: var(--fs-sm);
}
.smc-calc__run {
width: 100%;
margin-top: 1.5rem;
}
.smc-calc__result {
margin-top: 1.75rem;
padding: 1.5rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.smc-calc__result-label {
font-size: var(--fs-sm);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
text-align: center;
margin: 0 0 1rem;
}
.smc-calc__result-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
text-align: center;
margin-bottom: 1rem;
}
.smc-calc__result-values > div {
padding: .75rem;
background: var(--cream-soft);
border-radius: var(--radius-sm);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: .25rem;
}
.smc-calc__result-values .smc-calc__result-central {
background: var(--peau);
border-color: var(--or);
}
.smc-calc__result-tag {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.smc-calc__result-values strong {
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--bleu);
}
.smc-calc__result-lines {
display: flex;
flex-direction: column;
gap: .4rem;
margin-bottom: 1rem;
}
.smc-calc__result-lines > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .4rem 0;
border-bottom: 1px dashed var(--line);
color: var(--bleu-soft);
font-size: var(--fs-sm);
}
.smc-calc__result-lines strong { color: var(--bleu); font-family: var(--font-serif); font-size: var(--fs-md); }
/* Override via spécificité accrue (ancien !important retiré). */
.smc-calc__result-lines > div.smc-calc__result-net {
border-bottom: 0;
padding-top: .75rem;
border-top: 1px solid var(--line);
font-weight: 600;
color: var(--bleu);
}
.smc-calc__status {
text-align: center;
font-size: var(--fs-sm);
padding: .75rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: 1rem;
}
.smc-calc__status--due {
background: rgba(107, 127, 63, 0.12);
color: var(--olive-deep);
border: 1px solid rgba(107, 127, 63, 0.25);
}
.smc-calc__status--not-due {
background: rgba(28, 46, 74, 0.06);
color: var(--bleu-soft);
border: 1px solid var(--line);
}
.smc-calc__status--warning {
background: rgba(184, 147, 92, 0.12);
color: var(--olive-deep);
border: 1px solid var(--or);
}
.smc-calc__zakat-amount {
text-align: center;
padding: 1rem;
background: var(--cream-soft);
border: 2px solid var(--olive);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: .25rem;
margin-bottom: 1rem;
}
.smc-calc__zakat-label {
font-size: var(--fs-sm);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.smc-calc__zakat-amount strong {
font-family: var(--font-title);
font-size: 2rem;
color: var(--olive-deep);
}
.smc-calc__breakdown {
margin: 1rem 0;
padding: .75rem 1rem;
background: var(--cream-soft);
border-radius: var(--radius-sm);
border: 1px solid var(--line);
font-size: var(--fs-sm);
}
.smc-calc__breakdown summary {
cursor: pointer;
color: var(--olive);
font-weight: 600;
}
.smc-calc__breakdown dl {
margin: .75rem 0 0;
display: flex;
flex-direction: column;
gap: .3rem;
}
.smc-calc__breakdown dl > div {
display: flex;
justify-content: space-between;
padding: .2rem 0;
border-bottom: 1px dashed var(--line);
}
.smc-calc__breakdown dt { color: var(--bleu-soft); margin: 0; }
.smc-calc__breakdown dd { color: var(--bleu); margin: 0; font-weight: 500; }
.smc-calc__disclaimer {
font-size: var(--fs-xs);
color: var(--soft);
line-height: 1.5;
margin: 1rem 0 0;
}
.smc-calc__result-mode,
.smc-calc__result-advice {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: .75rem 0;
line-height: 1.55;
}
/* Heritage list */
.smc-heritage__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: .75rem;
}
.smc-heritage__list li {
background: var(--cream-soft);
border: 1px solid var(--line);
border-left: 3px solid var(--olive);
border-radius: var(--radius-sm);
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .3rem;
}
.smc-heritage__role {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
flex-wrap: wrap;
}
.smc-heritage__type {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.smc-heritage__amount {
font-family: var(--font-serif);
color: var(--bleu);
}
.smc-heritage__amount span {
color: var(--or);
padding: .1rem .4rem;
background: rgba(184, 147, 92, 0.12);
border-radius: 4px;
font-size: var(--fs-sm);
margin-right: .25rem;
}
.smc-heritage__perhead {
font-size: var(--fs-sm);
color: var(--bleu-soft);
}
.smc-heritage__rule {
font-size: var(--fs-xs);
color: var(--soft);
line-height: 1.5;
padding-top: .25rem;
border-top: 1px dashed var(--line);
}
/* Additifs */
.smc-additifs {
max-width: 900px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-additifs__controls {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.25rem;
}
.smc-additifs__search {
width: 100%;
}
.smc-additifs__filters {
border: 0;
padding: 0;
margin: 0;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.smc-additifs__filters label {
display: flex;
align-items: center;
gap: .4rem;
font-size: var(--fs-sm);
color: var(--bleu-soft);
cursor: pointer;
}
.smc-additifs__count {
text-align: center;
font-size: var(--fs-sm);
color: var(--soft);
margin: 0 0 1rem;
}
.smc-additifs__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: .85rem;
}
.smc-additifs__item {
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .35rem;
}
.smc-additifs__item--halal { border-left: 4px solid var(--olive); }
.smc-additifs__item--doubtful { border-left: 4px solid var(--or); }
.smc-additifs__item--haram { border-left: 4px solid var(--terra); background: rgba(160, 82, 45, 0.05); }
.smc-additifs__item header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
}
.smc-additifs__code {
font-family: var(--font-title);
font-weight: 700;
color: var(--bleu);
font-size: var(--fs-md);
}
.smc-additifs__status {
font-size: var(--fs-xs);
padding: .15rem .55rem;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.smc-additifs__item--halal .smc-additifs__status { background: rgba(107, 127, 63, 0.15); color: var(--olive-deep); }
.smc-additifs__item--doubtful .smc-additifs__status { background: rgba(184, 147, 92, 0.18); color: var(--or); }
.smc-additifs__item--haram .smc-additifs__status { background: rgba(160, 82, 45, 0.15); color: var(--terra-deep); }
.smc-additifs__name {
font-family: var(--font-serif);
font-size: var(--fs-md);
color: var(--bleu);
margin: 0;
font-weight: 400;
}
.smc-additifs__origin,
.smc-additifs__use {
font-size: var(--fs-xs);
color: var(--bleu-soft);
margin: 0;
line-height: 1.5;
}
.smc-additifs__empty {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
color: var(--soft);
font-style: italic;
}
.smc-visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Date Hijri aujourd'hui */
.smc-hijri-today {
max-width: 640px;
margin: -1.5rem auto 0;
padding: 2.5rem 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
text-align: center;
position: relative;
z-index: 2;
}
.smc-hijri-today__big { margin-bottom: 1.25rem; }
.smc-hijri-today__tag {
display: inline-block;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
padding: .25rem .75rem;
border-radius: 100px;
background: var(--peau);
color: var(--bleu);
margin-bottom: .75rem;
}
.smc-hijri-today__tag--sacred { background: var(--or); color: var(--cream); }
.smc-hijri-today__label {
font-size: var(--fs-sm);
color: var(--soft);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.smc-hijri-today__date {
display: flex;
flex-direction: column;
gap: .25rem;
margin: .5rem 0;
}
.smc-hijri-today__day-num {
font-family: var(--font-title);
font-size: 4.5rem;
font-weight: 500;
color: var(--bleu);
line-height: 1;
}
.smc-hijri-today__month-name {
font-family: var(--font-serif);
font-size: var(--fs-2xl);
color: var(--olive);
}
.smc-hijri-today__year {
font-family: var(--font-body);
font-size: var(--fs-lg);
color: var(--soft);
}
.smc-hijri-today__ar {
font-family: var(--font-arabic);
font-size: 2rem;
color: var(--or);
margin: .5rem 0;
direction: rtl;
}
.smc-hijri-today__greg {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: .5rem 0 1.5rem;
text-transform: capitalize;
}
.smc-hijri-today__context {
font-size: var(--fs-sm);
color: var(--bleu-soft);
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1rem 1.25rem;
margin: 1.5rem 0;
line-height: 1.55;
}
.smc-hijri-today__next-days {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: .6rem;
}
.smc-hijri-today__day {
display: grid;
grid-template-columns: 1.5fr 1.2fr 1fr auto;
gap: 1rem;
align-items: center;
padding: .85rem 1rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.smc-hijri-today__day-greg { color: var(--bleu-soft); text-transform: capitalize; }
.smc-hijri-today__day-hijri strong { color: var(--bleu); }
.smc-hijri-today__day-ar { font-family: var(--font-arabic); color: var(--or); direction: rtl; }
.smc-hijri-today__badge {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
padding: .15rem .55rem;
border-radius: 100px;
background: rgba(107, 127, 63, 0.12);
color: var(--olive-deep);
}
.smc-hijri-today__badge--white {
background: rgba(184, 147, 92, 0.18);
color: var(--or);
}
/* Countdown Ramadan */
.smc-countdown {
max-width: 700px;
margin: -1.5rem auto 0;
padding: 2.5rem 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
text-align: center;
position: relative;
z-index: 2;
}
.smc-countdown__label {
font-family: var(--font-serif);
font-size: var(--fs-xl);
color: var(--bleu);
margin: 0 0 1.5rem;
}
.smc-countdown__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .75rem;
margin-bottom: 1.5rem;
}
.smc-countdown__unit {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1.25rem .5rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.smc-countdown__num {
font-family: var(--font-title);
font-size: 3rem;
font-weight: 500;
color: var(--olive);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.smc-countdown__label-sm {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.smc-countdown__target {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: 0 0 1.25rem;
line-height: 1.55;
}
/* Calendrier événements */
.smc-calendar {
max-width: 900px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-calendar__next {
background: linear-gradient(135deg, var(--peau) 0%, var(--cream-soft) 100%);
border: 1px solid var(--or);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.smc-calendar__next:empty { display: none; }
.smc-calendar__next-label {
font-size: var(--fs-xs);
color: var(--olive-deep);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.smc-calendar__next strong {
font-family: var(--font-serif);
font-size: var(--fs-xl);
color: var(--bleu);
}
.smc-calendar__next-date {
font-size: var(--fs-sm);
color: var(--bleu-soft);
}
.smc-calendar__filters {
border: 0;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.smc-calendar__filters legend {
font-size: var(--fs-sm);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-right: 1rem;
}
.smc-calendar__filters label {
display: flex;
gap: .4rem;
align-items: center;
font-size: var(--fs-sm);
color: var(--bleu);
cursor: pointer;
}
.smc-calendar__year {
font-family: var(--font-title);
font-size: var(--fs-xl);
color: var(--bleu);
margin: 2rem 0 1rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--or);
}
.smc-calendar__year-block {
display: grid;
gap: .75rem;
}
.smc-calendar__event {
display: grid;
grid-template-columns: 80px 1fr;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
}
.smc-calendar__event--major { border-left: 4px solid var(--olive); }
.smc-calendar__event--minor { border-left: 4px solid var(--or); }
.smc-calendar__event.is-past { opacity: .5; }
.smc-calendar__event-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--cream-soft);
border-radius: var(--radius-sm);
padding: .5rem;
border: 1px solid var(--line);
}
.smc-calendar__event-day {
font-family: var(--font-title);
font-size: 1.75rem;
font-weight: 600;
color: var(--bleu);
line-height: 1;
}
.smc-calendar__event-month {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.smc-calendar__event-body h4 {
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--bleu);
margin: 0 0 .25rem;
}
.smc-calendar__event-hijri {
font-size: var(--fs-xs);
color: var(--or);
margin: 0 0 .35rem;
text-transform: capitalize;
}
.smc-calendar__event-desc {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: 0 0 .5rem;
line-height: 1.55;
}
.smc-calendar__event-ics {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--olive);
text-decoration: none;
}
.smc-calendar__event-ics:hover { color: var(--olive-deep); }
/* Prénoms — filtres enrichis + actions + highlight */
.smc-prenoms__filters-legend {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
padding: 0;
margin-bottom: .35rem;
}
.smc-prenoms__actions {
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.smc-prenoms__highlight-inner {
background: linear-gradient(135deg, var(--peau) 0%, var(--cream-soft) 100%);
border: 1px solid var(--or);
border-radius: var(--radius-md);
padding: 1.25rem;
margin: 1rem 0 1.5rem;
}
.smc-prenoms__highlight-label {
font-size: var(--fs-xs);
color: var(--olive-deep);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin: 0 0 .75rem;
}
/* Calendrier Ramadan */
.smc-cal-ram {
max-width: 820px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-cal-ram__controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.smc-cal-ram__city-label {
display: flex;
flex-direction: column;
gap: .25rem;
flex: 1;
min-width: 200px;
}
.smc-cal-ram__city-label span { font-size: var(--fs-xs); color: var(--soft); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.smc-cal-ram__city-hint {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: 0 0 1.25rem;
text-align: center;
}
.smc-cal-ram__table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
background: var(--cream-soft);
border-radius: var(--radius-md);
overflow: hidden;
}
.smc-cal-ram__table th,
.smc-cal-ram__table td {
padding: .55rem .6rem;
border-bottom: 1px solid var(--line);
text-align: center;
vertical-align: middle;
}
.smc-cal-ram__table th {
background: var(--bleu);
color: var(--cream);
font-family: var(--font-title);
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.smc-cal-ram__table th small { font-size: 0.7rem; font-weight: 400; opacity: .7; }
.smc-cal-ram__table tr.is-friday { background: rgba(184, 147, 92, 0.1); font-weight: 600; }
.smc-cal-ram__day-num { font-family: var(--font-title); font-weight: 600; color: var(--olive); font-size: var(--fs-md); }
.smc-cal-ram__sehri, .smc-cal-ram__iftar, .smc-cal-ram__tarawih {
font-variant-numeric: tabular-nums;
font-family: var(--font-title);
font-weight: 500;
color: var(--bleu);
}
@media print {
body * { visibility: hidden; }
.smc-cal-ram, .smc-cal-ram * { visibility: visible; }
.smc-cal-ram { position: absolute; left: 0; top: 0; box-shadow: none; border: 0; padding: 1rem; }
.smc-cal-ram__controls { display: none; }
}
/* Cours or & argent */
.smc-metals {
max-width: 820px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-metals__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.smc-metals__card {
padding: 1.25rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: .25rem;
text-align: center;
}
.smc-metals__card--gold { border-left: 4px solid var(--or); }
.smc-metals__card--silver { border-left: 4px solid var(--soft); }
.smc-metals__card-label {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.smc-metals__card strong {
font-family: var(--font-title);
font-size: 1.75rem;
color: var(--bleu);
font-variant-numeric: tabular-nums;
}
.smc-metals__card-unit { font-size: var(--fs-xs); color: var(--soft); }
.smc-metals__nisab {
padding: 1.25rem;
background: var(--peau);
border: 1px solid var(--or);
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
.smc-metals__nisab h3 {
margin: 0 0 .75rem;
font-family: var(--font-title);
color: var(--bleu);
font-size: var(--fs-md);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.smc-metals__nisab dl {
margin: 0;
display: grid;
gap: .4rem;
}
.smc-metals__nisab dl > div {
display: flex;
justify-content: space-between;
font-size: var(--fs-sm);
color: var(--bleu-soft);
}
.smc-metals__nisab dd { margin: 0; font-weight: 600; color: var(--bleu); }
.smc-metals__nisab-ref { border-top: 1px solid var(--or); padding-top: .4rem; margin-top: .4rem; }
.smc-metals__nisab-ref dd { color: var(--olive-deep); }
.smc-metals__nisab-note { font-size: var(--fs-xs); color: var(--soft); margin: .5rem 0 0; font-style: italic; }
.smc-metals__source {
display: inline-block;
font-size: var(--fs-xs);
padding: .2rem .75rem;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
background: var(--cream-soft);
color: var(--soft);
}
.smc-metals__source.is-live { background: rgba(107, 127, 63, 0.15); color: var(--olive-deep); }
.smc-metals__source.is-fallback { background: rgba(184, 147, 92, 0.18); color: var(--or); }
.smc-metals__updated { font-size: var(--fs-xs); color: var(--soft); margin: .35rem 0 0; }
/* Convertisseur SAR-EUR */
.smc-fx {
max-width: 640px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-fx__row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: .75rem;
align-items: end;
margin-bottom: 1rem;
}
.smc-fx__field {
display: flex;
flex-direction: column;
gap: .35rem;
}
.smc-fx__label {
font-size: var(--fs-xs);
color: var(--soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.smc-fx__swap {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--olive);
background: var(--cream-soft);
color: var(--olive);
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.smc-fx__swap:hover { background: var(--olive); color: var(--cream); }
.smc-fx__rate {
text-align: center;
font-family: var(--font-title);
font-size: var(--fs-md);
color: var(--bleu);
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: .75rem;
margin: 0 0 1rem;
}
.smc-fx__source {
display: inline-block;
font-size: var(--fs-xs);
padding: .2rem .75rem;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
background: var(--cream-soft);
color: var(--soft);
}
.smc-fx__source.is-live { background: rgba(107, 127, 63, 0.15); color: var(--olive-deep); }
.smc-fx__source.is-fallback { background: rgba(184, 147, 92, 0.18); color: var(--or); }
.smc-fx__updated { font-size: var(--fs-xs); color: var(--soft); margin: .35rem 0 0; }
/* Bloc @media (max-width: 640px) fusionné : rassemble tous les overrides mobile
widgets + calc grids dans un seul bloc. (Il y en avait 2 auparavant, fusionnés.) */
@media (max-width: 640px) {
.smc-calc__grid { grid-template-columns: 1fr; }
.smc-calc__result-values { grid-template-columns: 1fr; }
.smc-countdown__grid { grid-template-columns: repeat(2, 1fr); }
.smc-countdown__num { font-size: 2.25rem; }
.smc-hijri-today__day { grid-template-columns: 1fr; gap: .35rem; }
.smc-calendar__event { grid-template-columns: 60px 1fr; }
.smc-fx__row { grid-template-columns: 1fr; }
.smc-fx__swap { width: 100%; height: 44px; border-radius: var(--radius-sm); }
.smc-cal-ram__table { font-size: var(--fs-xs); }
.smc-cal-ram__table th, .smc-cal-ram__table td { padding: .4rem .3rem; }
}
/* Prénoms — ré-utilise le pattern additifs avec couleurs distinctives */
.smc-prenoms {
max-width: 900px;
margin: -1.5rem auto 0;
padding: 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-prenoms__controls {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.25rem;
}
.smc-prenoms__filters {
border: 0;
padding: 0;
margin: 0;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.smc-prenoms__filters label {
display: flex;
align-items: center;
gap: .4rem;
font-size: var(--fs-sm);
color: var(--bleu-soft);
cursor: pointer;
}
.smc-prenoms__count {
text-align: center;
font-size: var(--fs-sm);
color: var(--soft);
margin: 0 0 1rem;
}
.smc-prenoms__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: .85rem;
}
.smc-prenoms__item {
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: .25rem;
}
.smc-prenoms__item--garcon { border-left: 4px solid var(--bleu); }
.smc-prenoms__item--fille { border-left: 4px solid var(--or); }
.smc-prenoms__item header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-xs);
}
.smc-prenoms__icon { font-size: 1.1rem; }
.smc-prenoms__gender {
font-size: var(--fs-xs);
padding: .1rem .55rem;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
background: var(--peau);
color: var(--bleu);
}
.smc-prenoms__name {
font-family: var(--font-serif);
font-size: var(--fs-lg);
color: var(--bleu);
margin: .1rem 0 0;
font-weight: 400;
}
.smc-prenoms__ar {
font-family: var(--font-arabic);
font-size: 1.5rem;
color: var(--or);
margin: 0;
line-height: 1.2;
}
.smc-prenoms__meaning {
font-size: var(--fs-sm);
color: var(--bleu-soft);
margin: .25rem 0 0;
line-height: 1.5;
}
.smc-prenoms__origin {
font-size: var(--fs-xs);
color: var(--soft);
margin: .25rem 0 0;
}
.smc-prenoms__origin span {
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-right: .4rem;
}
.smc-prenoms__empty {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
color: var(--soft);
font-style: italic;
}
/* ============================================================
7) LAYOUT GLOBAL LP — UNE SEULE SOURCE DE VÉRITÉ
Hero peau · sections alternance auto · trait doré H2 · cross-sell
============================================================ */
.smc-lp-main > .smc-hero {
background: var(--peau);
padding: 5rem 0 3rem;
text-align: center;
}
.smc-lp-main > .smc-hero h1 {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.smc-lp-main > .smc-hero .smc-hero__subtitle {
max-width: 640px;
margin: .5rem auto 2rem;
font-family: var(--font-title);
font-style: italic;
font-weight: 400;
font-size: var(--fs-xl);
color: var(--olive-deep);
line-height: 1.45;
}
.smc-lp-main > .smc-hero .smc-hero__intro {
max-width: 680px;
margin: 0 auto 2rem;
text-align: left;
color: var(--bleu-soft);
font-family: var(--font-body);
font-size: var(--fs-md);
line-height: 1.75;
}
.smc-lp-main > .smc-hero .smc-hero__intro p { margin: 0 0 1em; }
.smc-lp-main > .smc-hero .smc-hero__intro p:last-child { margin-bottom: 0; }
.smc-lp-main > .smc-hero .smc-hero__today {
display: inline-block;
background: var(--cream-soft);
border: 1px solid var(--line);
padding: .85rem 1.75rem;
border-radius: var(--radius-lg);
font-size: var(--fs-sm);
color: var(--bleu);
box-shadow: var(--shadow-soft);
}
.smc-lp-main > .smc-hero .smc-hero__today-hijri { color: var(--olive); }
.smc-lp-main > .smc-hero .smc-hero__today .smc-arabic { margin-left: .35rem; }
.smc-tool {
max-width: 720px;
margin: -1.5rem auto 0;
padding: 2.25rem 2rem;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
position: relative;
z-index: 2;
}
.smc-tool__title {
font-family: var(--font-serif);
font-size: var(--fs-xl);
margin-bottom: 1.25rem;
text-align: center;
}
.smc-tool__direction {
display: flex;
background: var(--cream);
border-radius: var(--radius-sm);
padding: 4px;
margin-bottom: 1.5rem;
border: 1px solid var(--line);
}
.smc-tool__direction label {
flex: 1;
padding: .65rem .75rem;
text-align: center;
cursor: pointer;
font-weight: 600;
font-size: var(--fs-sm);
color: var(--bleu-soft);
border-radius: 4px;
transition: background .15s ease, color .15s ease;
}
.smc-tool__direction input[type="radio"] { display: none; }
.smc-tool__direction input[type="radio"]:checked + span {
background: var(--bleu);
color: var(--cream);
display: block;
padding: .65rem .75rem;
border-radius: 4px;
margin: -0.65rem -0.75rem;
}
.smc-tool__fields {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: .75rem;
margin-bottom: 1.25rem;
}
.smc-tool__convert {
width: 100%;
margin-bottom: 1.25rem;
}
.smc-tool__result {
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
min-height: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.smc-tool__result [data-smc-result] {
font-family: var(--font-serif);
font-size: var(--fs-xl);
color: var(--bleu);
margin: 0;
}
.smc-tool__result [data-smc-result-ar] {
margin-top: .35rem;
font-family: var(--font-arabic);
font-size: 1.5rem;
color: var(--or);
direction: rtl;
}
.smc-tool__result [data-smc-result].is-error {
font-family: var(--font-body);
font-size: var(--fs-md);
color: var(--terra-deep);
}
/* Section par défaut — toujours un fond explicite, jamais transparent.
Padding réduit à 4.5rem pour plus de cohésion (était 6rem). */
.smc-lp-main > .smc-section {
padding: 4.5rem 0;
background: var(--cream);
}
/* Alternance automatique via nth-child. Hero est nth-child(1), smc-container
(tool wrapper) est nth-child(2), donc le premier .smc-section de contenu
se trouve nth-child(3) → odd → cream-soft. Alternance propre sans toucher
aux templates. */
.smc-lp-main > .smc-section:nth-child(odd) {
background: var(--cream-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.smc-lp-main > .smc-section:nth-child(even) {
background: var(--cream);
}
/* Classes manuelles d'override (--alt force cream-soft, --peau force peau) */
.smc-lp-main > .smc-section.smc-section--alt {
background: var(--cream-soft);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.smc-lp-main > .smc-section.smc-section--peau {
background: var(--peau);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* Ornement arabe ٭ ٭ ٭ avant la dernière section de contenu (typiquement la FAQ).
Positionnement : nth-last-child(2) = l'avant-dernier enfant de