/* ==================================================================
   if-premium-2026.css  —  COUCHE DESIGN CLAIRE PREMIUM (additive)
   Chargée EN DERNIER. Ne touche ni DOM ni JS ni SEO.
   Modèle anti-whack-a-mole :
     1) FLIP des variables (site variable-driven) ;
     2) FONDS : sections/cartes claires -> ivoire/blanc ; surfaces sombres
        voulues (hero, footer, bandes, îlots) -> charbon ;
     3) BLANKET : tout le texte des sections claires -> ENCRE
        (préfixe `html body` => spécificité (0,1,2), bat les littéraux
         `html.if27 strong{…!important}` des bundles par l'ORDRE) ;
     4) ÎLOTS SOMBRES (après le blanket, même préfixe => gagnent l'ordre,
        ou spécificité supérieure) -> texte CLAIR ;
     5) re-assert ciblés : accents or, badges, marque, marquee.
   Palette : ivoire #faf6ee · encre #1a1410 · muted #6b6152 · or foncé
   #c8850f (accent/clair) · clair #f6ecd9 · muted clair #b8ab95 · or vif
   #ffce5a (sur sombre) · charbon #0b0805.
   ================================================================== */

/* 1. VARIABLES : sombre -> ivoire premium ---------------------------- */
:root{
  --noir:#faf6ee; --noir-2:#ffffff; --noir-3:#f4ede0; --brique:#f1e8d8;
  --if-black:#faf6ee; --if-coal:#f6f0e6; --if-black2:#faf6ee; --if-bg:#faf6ee;
  --if-cream:#1a1410; --if-cream-soft:#221a12; --creme:#1a1410; --creme-2:#5b5040;
  --if-muted:#6b6152; --if-grey:#6b6152; --if-text:#1a1410;
  --if-line:rgba(60,40,10,.14); --if-surface:rgba(20,16,9,.035);
}

/* 2. FOND DE PAGE ivoire --------------------------------------------- */
html,body,html body[class]{background:#faf6ee !important;color:#1a1410}
main,main[class]{background-color:transparent !important}
.if-coal,.if-noir,.ifr-noir,.if-black,[class*="-coal"]{background-color:transparent}

/* 3a. FONDS CLAIRS : sections -> ivoire, cartes de contenu -> blanc ---- */
html body .ifh-r1,html body .ifh-r2,html body .ifh-r3,html body .ifc,
html body .if-rythme-sec,html body .location__inner,html body .franchise__inner,
html body .if-cocon,html body .page-hero,html body .page-main,html body .page-body,
html body .ifg-nu,html body .newsletter,html body .facts-grid,
html body .if-editorial-guide,html body .if-search-cluster,html body .cta-block{
  background-color:#faf6ee !important;
}
html body .ifx-card,html body .ifx-av,html body .ifc-card,html body .ifc-body,
html body .if-guru-card,html body .fact-card,html body .ifu-infos{
  background-color:#ffffff !important; background-image:none !important;
}

/* 3b. FONDS SOMBRES VOULUS : hero (média), footer, bandes, îlots ------- */
.hero,.ifh-craving,.if-craving,.ifh-stage,.ifh-wrap,.ifh-copy,
.if-order-hero,.local-hero,.if-video-hero,.ifu-band-noir,.if-cinema,
.if-reel,.ifc-media,.ifp-visuel,.ifp-media,.if-cinema__cell,.igtile,.if-ig,
.if-poster,.if-login-gate{ background:#0b0805; }
html body .footer,html body footer,html body .if-footer,html body .ifu-footer,
html body .ifb-hub,html body .if-discovery-hub,html body .ifm-marquee,html body .iff-claims{
  background:#0b0805 !important;
}

/* ================= 4. BLANKET SECTIONS CLAIRES -> ENCRE ==============
   préfixe `html body` : spécificité (0,1,2) ; chargé en dernier => bat les
   `html.if27 strong{color:#F2C14E!important}` & co par l'ordre. */
html body .ifh-r1 *,html body .ifh-r2 *,html body .ifh-r3 *,html body .ifc *,
html body .if-rythme-sec *,html body .location__inner *,html body .franchise__inner *,
html body .if-cocon *,html body .platforms *,html body .page-hero *,html body .page-main *,
html body .page-body *,html body .ifg-nu *,html body .cta-block *,html body .facts-grid *,
html body .if-editorial-guide *,html body .if-search-cluster *,html body .ifj *,
html body .newsletter *,html body .newsletter__form *,html body .newsletter__consent *,
html body .ifx-card *,html body .ifc-card *,html body .if-guru-card *{
  color:#1a1410 !important; -webkit-text-fill-color:#1a1410 !important;
}

/* 5. SECTIONS CLAIRES — secondaire muted + accents OR FONCÉ (polish) ---
   spécificités >= (0,2,0) : battent le blanket. */
html body .ifu-sub,html body .stat__source,html body .if-editorial-guide__body p,
html body .if-search-cluster__intro,html body .footer__legal,html body .if-hub__eyebrow{
  color:#6b6152 !important; -webkit-text-fill-color:#6b6152 !important;
}
.ifh-r1 .section__eyebrow,.ifh-r2 .section__eyebrow,.ifh-r3 .section__eyebrow,
.if-rythme-sec .section__eyebrow,.ifc .section__eyebrow,.ifg-nu .section__eyebrow,
.page-hero .section__eyebrow,.page-main .section__eyebrow,.location__inner .section__eyebrow,
.franchise__inner .section__eyebrow,
.ifu-kicker-caveat,.if-eyebrow,.ifj-eyebrow,.ifz-eyebrow{
  color:#c8850f !important; -webkit-text-fill-color:#c8850f !important;
}
/* mot doré accentué (em) sur clair -> or foncé lisible. Préfixe `html body`
   => (0,1,4), bat `html.if27 h2 em{…clip:text}` (0,1,3). */
html body .ifh-r1 :is(h1,h2,h3) em,html body .ifh-r2 :is(h1,h2,h3) em,html body .ifh-r3 :is(h1,h2,h3) em,
html body .if-rythme-sec :is(h1,h2,h3) em,html body .ifc :is(h1,h2,h3) em,html body .ifg-nu :is(h1,h2,h3) em,
html body .page-hero :is(h1,h2,h3) em,html body .page-main :is(h1,h2,h3) em,
html body .location__inner :is(h1,h2,h3) em,html body .franchise__inner :is(h1,h2,h3) em,
html body .ifh-r1 .section__title em,html body .ifh-r2 .section__title em,html body .ifh-r3 .section__title em,
html body .if-rythme-sec .section__title em,html body .if-rythme-sec .if-rythme-h2 em,
html body .ifh-r1 .ifz-h em,html body .ifh-r2 .ifz-h em,html body .ifh-r3 .ifz-h em{
  background:none !important; background-image:none !important;
  color:#c8850f !important; -webkit-text-fill-color:#c8850f !important; text-shadow:none !important;
}
html body .stat__num,html body .stat__num *{
  color:#c8850f !important; -webkit-text-fill-color:#c8850f !important; text-shadow:none !important;
}
html body .ifc-price,html body .ifc-price *{ color:#1a1410 !important; -webkit-text-fill-color:#1a1410 !important; }
.ifc-price span,.ifc-price i{ color:#c8850f !important; -webkit-text-fill-color:#c8850f !important; }
html body .ifx-stars,.ifx-stars{ color:#c8850f !important; -webkit-text-fill-color:#c8850f !important; }
.newsletter__consent a{ color:#c8850f !important; -webkit-text-fill-color:#c8850f !important; }

/* ============ 6. ÎLOTS SOMBRES -> TEXTE CLAIR (APRÈS le blanket) ======
   même préfixe (0,1,2) placé plus bas => gagne les égalités ; les îlots à
   spécificité supérieure gagnent d'office. */
html body .hero *,html body .ifh-craving *,html body .ifh-stage *,html body .ifh-wrap *,
html body .ifh-copy *,html body .if-order-hero *,html body .local-hero *,
html body .if-video-hero *,html body .ifu-band-noir *,html body .if-cinema *,
html body .if-poster *,html body .if-login-gate *,
html body .footer *,html body footer *,html body .if-footer *,html body .ifu-footer *,
html body .ifb-hub *,html body .if-discovery-hub *,html body .ifj-card *,
html body .if-proof-card *,html body .if-guru-logo-badge *{
  color:#f6ecd9 !important; -webkit-text-fill-color:#f6ecd9 !important;
}
/* muted clair pour le secondaire sombre */
html body .if-discovery-hub p,html body .if-discovery-hub__head p,html body .ifb-hub p,
html body .footer__tagline,html body .footer__legal{
  color:#b8ab95 !important; -webkit-text-fill-color:#b8ab95 !important;
}
/* hero eyebrow + accents or vif des îlots */
html body .ifh-eyebrow,html body .if-video-hero .section__eyebrow,html body .hero .section__eyebrow,
html body .if-proof-card .ifp-num,html body .if-proof-card .ifp-sur,html body .if-proof-card strong,
html body .if-discovery-hub .section__eyebrow,html body .if-discovery-hub__eyebrow,
html body .ifb-hub h2,html body .ifj-card .ifj-eyebrow{
  color:#ffce5a !important; -webkit-text-fill-color:#ffce5a !important; background:none !important;
}
/* liens footer / sitemap : neutralise le dégradé-texte lu comme fond + hover or */
html body .footer a,html body footer a,html body .ifb-hub a,html body .if-discovery-hub a{
  background:none !important; background-image:none !important;
}
html body .footer a:hover,html body footer a:hover,html body .ifb-hub a:hover{
  color:#ffce5a !important; -webkit-text-fill-color:#ffce5a !important;
}
/* marquees dorés (produits + claims) : restent sombres, texte OR VIF */
html body .ifm-marquee *,html body .iff-claims *{ color:#ffce5a !important; -webkit-text-fill-color:#ffce5a !important; }
/* villes franchise (li sombres) : texte clair, badges conservés */
html body .franchise__cities li.open,html body .franchise__cities li.coming{ background:rgba(22,20,18,.9) !important; }
html body .franchise__cities li.open,html body .franchise__cities li.coming,
html body .franchise__cities li.open *,html body .franchise__cities li.coming *{
  color:#f6ecd9 !important; -webkit-text-fill-color:#f6ecd9 !important;
}
html body .franchise__cities li.open span{ color:#0b0a09 !important; -webkit-text-fill-color:#0b0a09 !important; }
html body .franchise__cities li.coming span{
  color:#ffce5a !important; -webkit-text-fill-color:#ffce5a !important; border-color:#ffce5a !important;
}

/* 7. CARTES PLATEFORMES : onsite/direct -> encre (blanket) ; marque rétablie */
.platform--glovo .platform__logo,.platform--glovo .platform__time{ color:#15b26b !important; -webkit-text-fill-color:#15b26b !important; }
.platform--done .platform__logo,.platform--done .platform__time{ color:#FF6B1A !important; -webkit-text-fill-color:#FF6B1A !important; }
.platform--kool .platform__logo,.platform--kool .platform__time{ color:#E63946 !important; -webkit-text-fill-color:#E63946 !important; }
.platform--yassir .platform__logo,.platform--yassir .platform__time{ color:#6B3FA0 !important; -webkit-text-fill-color:#6B3FA0 !important; }

/* 8. LOGO « Insta » (header sombre) -> blanc cassé ; « Food » or vif ---- */
html body .nav__logo-text{ color:#f6ecd9 !important; -webkit-text-fill-color:#f6ecd9 !important; }
html body .nav__logo-text strong{ color:#ffce5a !important; -webkit-text-fill-color:#ffce5a !important; }
.nav__logo-text::after{ color:#b8ab95 !important; }

/* 9. CTA primaire : dégradé or métal, texte ENCRE (jamais clair) ------- */
.if-btn--primary,.btn--primary,.if-btn.primary,.if27-cta,a.if-cta--primary,.if-main-cta,
.newsletter__form button[type=submit]{
  background:linear-gradient(160deg,#ffd34d 0%,#ffb100 55%,#e69500 100%) !important;
  color:#1a1008 !important; -webkit-text-fill-color:#1a1008 !important;
  box-shadow:0 10px 24px -10px rgba(230,149,0,.55);
}
html body .if-btn--primary,html body .btn--primary,html body .btn.btn--primary,
html body .if-btn.primary,html body .if-main-cta,html body a.nav__cta,
html body .newsletter__form button[type=submit]{
  color:#1a1008 !important; -webkit-text-fill-color:#1a1008 !important;
}
/* le texte encre du CTA doit battre aussi le blanket hero/îlot (0,1,2) : on
   double la classe -> (0,2,x) pour les CTA imbriqués dans une surface sombre */
html body .ifh-ctas .btn--primary,html body .hero .btn--primary,html body .ifh-craving .btn--primary{
  color:#1a1008 !important; -webkit-text-fill-color:#1a1008 !important;
}

/* 10. Consentement CNDP : vrai or Instafood --------------------------- */
#if-consent button[data-kind=analytics]{
  background:linear-gradient(135deg,#ffd75e,#ffb100,#e88f00) !important;color:#241500 !important;border:0;
}
#if-consent h2{ color:#c8850f }
.if-lang__menu,.newsletter__consent{ background:#fff !important;border:1px solid rgba(60,40,10,.14) }
html body .if-lang__menu *{ color:#1a1410 !important;-webkit-text-fill-color:#1a1410 !important }

/* 11. OMBRES DE TITRES « arcade » -> ombre douce premium --------------- */
.section__title,.if-rythme-h2,.ifz-h,.ifu-h2,.if-discovery-hub__title,.if-steps__title,
.if-club-title,.section__title--facts.section__title-main,h1.reveal{
  text-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}
.stat__num,.stat__num *{ text-shadow:none !important; }

/* 12. sr-only : hors écran -> transparent (neutralise faux positifs) ---- */
html body .sr-only,html body .ifm-marquee .sr-only{
  color:transparent !important; -webkit-text-fill-color:transparent !important;
}

/* ============ 13. FINITIONS PREMIUM (marquee, texture, stickers) ======== */
/* 13a. BANDE DES FORCES = or InstaGold restauré (signature de marque) */
html body .iff-claims{background:linear-gradient(165deg,#f5d67b 0%,#e9c352 40%,#d4af37 100%) !important;border-block:1px solid rgba(90,66,20,.5)}
html body .iff-claims *{color:#241500 !important;-webkit-text-fill-color:#241500 !important;font-weight:800;letter-spacing:.02em}
/* 13b. RAIL PRODUITS = bande ivoire claire propre (au lieu du sombre) */
html body .ifm-marquee{background:#f6efe2 !important;border-block:1px solid rgba(60,40,10,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
html body .ifm-marquee *{color:#1a1410 !important;-webkit-text-fill-color:#1a1410 !important}
html body .ifm-marquee [class*="price"],html body .ifm-marquee b,html body .ifm-marquee .ifm-mq__price{color:#c8850f !important;-webkit-text-fill-color:#c8850f !important}
/* 13c. FOND avec TEXTURE premium subtile (glow chaud + micro-grain), pas d'aplat */
html body,html body[class]{
  background-color:#faf6ee !important;
  background-image:
    radial-gradient(1100px 460px at 12% -6%, rgba(255,177,0,.07), transparent 60%),
    radial-gradient(900px 460px at 102% 26%, rgba(236,151,19,.05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23a86a10' fill-opacity='0.045'/%3E%3C/svg%3E") !important;
  background-attachment:fixed,fixed,scroll !important;
}
/* 13d. STICKERS mascottes : derrière le texte + discrets ; masqués sur mobile (chevauchement) */
.if-float-slot,.if-float,.if-float-sky,.if-sticker{opacity:.5 !important;z-index:0 !important;pointer-events:none !important}
.ifh-copy,.section__head,.ifc-head,.location__inner,.franchise__inner,.newsletter,.faq{position:relative;z-index:2}
@media (max-width:860px){.if-float-slot,.if-float-sky,.if-sticker{display:none !important}}

/* ==================================================================
   14. TYPOGRAPHIE PREMIUM (additive, N'ALTÈRE AUCUNE COULEUR -> le
   contraste 0-flag reste intact). Rendu net + échelle fluide clamp()
   sur le tier "label/eyebrow" + planchers lisibles + wrapping soigné.
   ================================================================== */
:root{
  /* échelle fluide cohérente (tokens) */
  --if-fs-eyebrow: clamp(12.6px, .74rem + .18vw, 13.5px);
  --if-fs-label:   clamp(12.6px, .74rem + .18vw, 13.5px);
  --if-fs-meta:    clamp(12.6px, .74rem + .22vw, 14px);
  --if-fs-badge:   clamp(12.6px, .74rem + .12vw, 13px);
  --if-fs-cta:     clamp(12.6px, .74rem + .12vw, 13.5px);
  --if-ease-soft:  cubic-bezier(.22,.61,.36,1);
}
/* 14a. rendu net (anti-alias + ligatures/kerning) */
html body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
/* 14b. hiérarchie : équilibrage des titres (visibles par défaut) */
html body :is(h1,h2,h3,.section__title,.if-rythme-h2,.ifz-h,.ifu-h2,.if-hub__title,
  .ifj-title,.if-steps__title,.if-club-title,.if-discovery-hub__title){ text-wrap:balance; }
/* display : tracking premium serré (négatif => n'élargit jamais, aucun overflow) */
html body :is(.section__title,h1.reveal,.ifh-h1,.if-hero__title,.ifu-h2){ letter-spacing:-.02em; }
/* 14c. corps Manrope : rendu "pretty" + mesure éditoriale lisible ~68ch */
html body :is(p,li){ text-wrap:pretty; }
html body :is(.if-editorial-guide__body p,.if-editorial-guide p,.ifj p,.ifj__body p,
  .page-body .prose p,.if-search-cluster__intro){ max-width:68ch; }
/* 14d. PLANCHERS DE TAILLE — efface les <12.5px de l'audit sans écraser les
   grands titres. !important pour battre les !important en cascade des bundles.
   IMPORTANT : la règle `.section__eyebrow` (Caveat 1.4rem, volontairement
   grande) n'existe QUE hors-if27 (ex. menu) ; on borne donc l'eyebrow SEULEMENT
   sous `.if27` (home) pour NE PAS rétrécir le eyebrow manuscrit des autres pages. */
html body.if27 .section__eyebrow,html.if27 body .section__eyebrow{ font-size:var(--if-fs-eyebrow)!important; }
html body :is(.if-hub__eyebrow,.ifj-eyebrow,.ifz-eyebrow,.if-eyebrow,.if-hub__kicker,
  .if-discovery-hub__eyebrow){ font-size:var(--if-fs-eyebrow)!important; }
html body :is(.stat__label,.fact-card__label,.if-hub__label){ font-size:var(--if-fs-label)!important; }
html body :is(.ifx-m,.ifj-tag,.avis-card__meta,.platform__time,.if-proof-card .ifp-sur,
  .newsletter__consent a,.newsletter__consent label){ font-size:var(--if-fs-meta)!important; }
html body :is(.if-guru-logo-badge__main,.if-guru-logo-badge__sub){ font-size:var(--if-fs-badge)!important; line-height:1.18!important; }
/* nav__cta / if-main-cta / nav__account : les bundles les surchargent avec des
   règles !important à SPÉCIFICITÉ (0,3,0) (mesuré) -> on triple la classe pour
   passer à (0,3,3) et gagner proprement (aucun !important inline dans le HTML). */
html body a.nav__cta.nav__cta.nav__cta,html body .nav__cta.nav__cta.nav__cta,
html body a.if-main-cta.if-main-cta.if-main-cta,html body .if-main-cta.if-main-cta.if-main-cta{
  font-size:var(--if-fs-cta)!important; }
html body a.nav__account.nav__account.nav__account,html body a.nav__account.nav__account span{
  font-size:var(--if-fs-cta)!important; }

/* ==================================================================
   15. ADAPTABILITÉ DEVICE : OVERFLOW HORIZONTAL = 0 aux 3 tailles.
   Cause réelle (desktop) : couche décorative .if-float-sky (pleine
   largeur, overflow:visible) + phantom-scroll dû à la propagation de
   `overflow-x:clip` du body vers le viewport. On borne À LA RACINE :
   `overflow-x:clip` n'établit PAS de conteneur de scroll => position
   sticky/fixed et le scroll vertical restent 100% intacts. */
html{ overflow-x:clip; }
/* filet de sécurité images (testé : le hero conserve son cadrage, la règle
   bundle `.ifh-media img` plus spécifique gagne) */
img{ max-width:100%; height:auto; }
/* couche stickers + pistes marquee : bornées explicitement */
html body :is(.if-float-sky,.if-float-slot){ overflow:clip; }
html body :is(.ifm-marquee,.iff-claims,.if27-band){ overflow:hidden; }

/* ==================================================================
   16. CIBLES TACTILES >= 48px (min-height ne change JAMAIS la largeur
   => aucun layout cassé). Checkbox/radio natifs volontairement exclus. */
html body :is(a.nav__cta,.nav__cta,a.if-main-cta,.if-main-cta,a.if-cta--primary,.if-cta--primary,
  a.btn,.btn,.btn--primary,.btn--ghost,button[type=submit],.newsletter__form button,
  button.if-lang__button,.if-lang__button,.if27-cta,.if-club-cta){ min-height:48px; box-sizing:border-box; }
/* boutons-pilules rendus en display:inline -> vraie boîte 48 centrée */
html body a.if-btn:not(.btn){ min-height:48px; display:inline-flex; align-items:center;
  justify-content:center; box-sizing:border-box; vertical-align:middle; }
/* champs de saisie texte -> 48 (checkbox/radio/hidden exclus) */
html body :is(input[type=email],input[type=text],input[type=tel],input[type=search],
  input[type=number],input[type=password],input[type=url],input:not([type]),select,textarea){
  min-height:48px; box-sizing:border-box; }
/* liens "texte" (prose, listes sitemap footer/cocon, coordonnées, consentement,
   cartes vidéo) -> zone tactile >=44. padding-block agrandit le rect en gardant
   le flux inline (le texte long wrappe toujours => aucun overflow). Exclut les
   vrais boutons via :where() (0 spécificité, on n'inflate pas la cascade). */
html body :is(p,li,dd,dt,label,figcaption,blockquote,.location__detail,.ifv-card__body,
  .newsletter__consent,.if-source-note,.if-videos-link,.footer,.footer__col,.if-cocon)
  a:where(:not(.if-btn):not(.btn):not(.nav__cta):not(.if-main-cta):not(.if-cta--primary):not(.if-lang__button)){
  padding-block:.95em; line-height:1.3; }
/* icônes sociales -> pastilles 48x48 (reset du padding-block ci-dessus) */
html body .footer__socials a{ padding-block:0!important; min-width:48px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center; }
/* skip-link (hors écran) -> efface le faux positif sans impact visuel */
html body a.if-skip{ min-height:48px; display:inline-flex; align-items:center; }

/* ==================================================================
   17. MOTION SÛRE — additive & incassable. TOUTE la motion est sous
   `prefers-reduced-motion: no-preference` (reduced-motion => 0 animation).
   Uniquement transform/opacity/box-shadow, 180-520ms, easing doux.
   Règle d'or respectée : le contenu est TOUJOURS visible (jamais opacity:0
   par défaut) — les révélations n'utilisent QUE translateY (opacity intacte). */
/* focus accessible doré (statique, hors motion : toujours actif) */
html body :is(a,button,[role=button],input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid #ffb100; outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: no-preference){
  /* transitions micro-interactions */
  html body :is(a.if-btn,.if-btn,a.btn,.btn,a.nav__cta,.nav__cta,a.if-main-cta,.if-main-cta,
    button.if-lang__button,.newsletter__form button){
    transition: transform .2s var(--if-ease-soft), box-shadow .24s var(--if-ease-soft),
      background-color .2s var(--if-ease-soft), color .2s var(--if-ease-soft), opacity .2s var(--if-ease-soft);
  }
  html body :is(a.if-btn,.if-btn,a.btn,.btn,a.nav__cta,.nav__cta,a.if-main-cta,.if-main-cta):hover{
    transform: translateY(-2px);
  }
  html body :is(a.if-btn,.if-btn,a.btn,.btn):active{ transform: translateY(0); }
  /* élévation douce des cartes au survol */
  html body :is(.ifx-card,.ifc-card,.fact-card,.if-guru-card,.ifp-card,.ifj-card,.ifv-card,
    .platform,.if-proof-card,.if-hub__card){
    transition: transform .28s var(--if-ease-soft), box-shadow .32s var(--if-ease-soft);
    will-change: transform;
  }
  html body :is(.ifx-card,.ifc-card,.fact-card,.if-guru-card,.ifp-card,.ifj-card,.ifv-card,
    .platform,.if-proof-card,.if-hub__card):hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(40,26,4,.42);
  }
  /* liens texte : soulignement/opacité douce */
  html body :is(p,li,.footer) a{ transition: opacity .18s var(--if-ease-soft), color .18s var(--if-ease-soft); }
  /* transition du focus ring */
  html body :is(a,button,input,select,textarea,summary):focus-visible{ transition: outline-offset .15s var(--if-ease-soft); }
  /* révélation au scroll (transform-only => JAMAIS de contenu caché).
     Ne cible PAS `.reveal` (système JS du site) pour éviter tout conflit. */
  @supports (animation-timeline: view()){
    @keyframes if-rise{ from{ transform: translateY(18px); } to{ transform: translateY(0); } }
    html body :is(.ifc-card,.fact-card,.if-guru-card,.ifj-card,.if-hub__card,.if-proof-card):not(.reveal){
      animation: if-rise .5s var(--if-ease-soft) both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

/* 15. FINITIONS RESPONSIVE/TYPO (planchers) */
html body .franchise__cities li span{font-size:.8rem !important;letter-spacing:.02em}
html body .newsletter__form input:not([type="checkbox"]):not([type="hidden"]){min-height:48px !important;font-size:16px !important;padding:12px 14px}
html body img{max-width:100% !important;height:auto}