/* ==========================================================================
   Surfaces claires, transitions en vagues animées, bandeaux clairs.
   Le sombre est réservé au bandeau d'accueil et au pied de page.
   Chargé après layout.css.
   ========================================================================== */
:root {
  --ifd-surface-white: #FFFFFF;
  --ifd-surface-tint: #F1F1FB;
}

/* ------------------------------ Surfaces + vagues ------------------------------ */
.ifd-surface { position: relative; padding: clamp(56px, 7vw, 96px) 0; margin: 56px 0; color: var(--ifd-encre); }
.ifd-surface .ifd-steps__inner { padding-top: 0; padding-bottom: 0; }
.ifd-surface--white { background: var(--ifd-surface-white); --ifd-wave-color: var(--ifd-surface-white); }
.ifd-surface--tint { background: var(--ifd-surface-tint); --ifd-wave-color: var(--ifd-surface-tint); }
.ifd-surface + .ifd-surface { margin-top: 0; }
.ifd-wave { position: absolute; left: 0; width: 200%; height: 56px; pointer-events: none; fill: var(--ifd-wave-color); animation: ifd-drift 38s linear infinite; }
.ifd-wave--top { bottom: calc(100% - 1px); }
.ifd-wave--bottom { top: calc(100% - 1px); transform: scaleY(-1); animation-name: ifd-drift-flip; animation-duration: 46s; }
.ifd-wave__back { opacity: .55; }
@keyframes ifd-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ifd-drift-flip { from { transform: scaleY(-1) translateX(-50%); } to { transform: scaleY(-1) translateX(0); } }
.ifd-surface { overflow-x: clip; overflow-y: visible; }
.ifd-anim-off .ifd-wave { animation: none; }
@media (prefers-reduced-motion: reduce) { .ifd-wave { animation: none !important; } }
/* Deux surfaces qui se suivent : la vague du bas de la première se cache. */
.ifd-surface:has(+ .ifd-surface) > .ifd-wave--bottom { display: none; }

/* ------------------------------ Bandeau d'information (carte) ------------------------------ */
.ifd-ribbon-wrap { margin-top: clamp(40px, 5vw, 64px); }
.ifd-ribbon { margin-top: 0; border-radius: 22px; background: linear-gradient(120deg, #E4E5FA 0%, var(--ifd-pervenche) 100%); }
.ifd-ribbon__inner { position: relative; padding: 26px clamp(22px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.ifd-ribbon .ifd-deco--cover { opacity: .22; }
.ifd-ribbon__text { font-size: clamp(18px, 1.8vw, 23px); max-width: 44ch; }

/* ------------------------------ Cartes claires (accueil) ------------------------------ */
.ifd-cards--light .ifd-card { background: #fff; border: 1px solid var(--ifd-border); color: var(--ifd-encre); box-shadow: 0 1px 0 rgba(11, 11, 26, .02); }
.ifd-cards--light .ifd-card:hover { border-color: var(--ifd-pervenche); box-shadow: 0 26px 50px -34px rgba(11, 11, 26, .4); transform: translateY(-4px); }
.ifd-cards--light .ifd-card__link, .ifd-cards--light .ifd-card__link:hover { color: var(--ifd-encre); }
.ifd-cards--light .ifd-card__media { height: 180px; }
.ifd-cards--light .ifd-card__media::after { background: linear-gradient(180deg, rgba(11, 11, 26, 0) 55%, rgba(11, 11, 26, .35) 100%); }
.ifd-cards--light .ifd-card__tag { left: 16px; bottom: 14px; background: #fff; color: var(--ifd-accent2); border-radius: 999px; padding: 5px 11px; font-size: 11.5px; letter-spacing: .1em; }
.ifd-cards--light .ifd-card__tag--inline { background: #F3F2FB; color: var(--ifd-bleu); padding: 5px 11px; border-radius: 999px; }
.ifd-cards--light .ifd-card__head { border-bottom-color: #F0EEE6; }
.ifd-cards--light .ifd-card__text { color: var(--ifd-texte2); }
.ifd-cards--light .ifd-card__more { color: var(--ifd-bleu); }
.ifd-cards--light .ifd-card__foot { border-top-color: #F0EEE6; color: var(--ifd-texte2); }

/* ------------------------------ Étapes : frise claire animée ------------------------------ */
.ifd-steps.ifd-surface { border-radius: 0; }
.ifd-steps .ifd-steps__sub { color: var(--ifd-texte2); }
.ifd-steps__list { position: relative; counter-reset: ifd-step; padding-top: 58px; }
.ifd-steps__list::before {
  content: ""; position: absolute; top: 19px; left: 20px; right: calc(25% - 20px); height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--ifd-bleu) 0 8px, transparent 8px 16px);
  background-size: 32px 2px; opacity: .45; animation: ifd-march 1.4s linear infinite;
}
@keyframes ifd-march { to { background-position: 32px 0; } }
.ifd-step { position: relative; counter-increment: ifd-step; }
.ifd-step::before {
  content: counter(ifd-step, decimal-leading-zero); position: absolute; top: -58px; left: 0; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--ifd-bleu); color: var(--ifd-bleu);
  font-family: var(--ifd-font-display); font-weight: 700; font-size: 14px;
}
.ifd-step--last::before { background: var(--ifd-accent); border-color: var(--ifd-accent); color: #fff; animation: ifd-pop 2.8s ease-in-out infinite; }
.ifd-surface .ifd-step__box { background: #fff; border: 1px solid var(--ifd-border); color: var(--ifd-encre); box-shadow: 0 18px 40px -36px rgba(11, 11, 26, .5); }
.ifd-surface a.ifd-step__box:hover { border-color: var(--ifd-bleu); color: var(--ifd-encre); }
.ifd-surface .ifd-step__num { display: none; }
.ifd-surface .ifd-step__label { color: var(--ifd-bleu); }
.ifd-surface .ifd-step__text { color: var(--ifd-texte2); }
.ifd-surface .ifd-step:not(.ifd-step--last) .ifd-step__icon [stroke="#C3C6F2"] { stroke: var(--ifd-bleu); }
.ifd-surface .ifd-step:not(.ifd-step--last) .ifd-step__icon [stroke="#6E6E9E"] { stroke: #A9ABDB; }
.ifd-surface .ifd-step:not(.ifd-step--last) .ifd-step__icon [fill="#12122D"] { fill: #fff; }
.ifd-surface .ifd-step--last .ifd-step__box { background: linear-gradient(150deg, var(--ifd-accent2), #8E2606); border-color: transparent; color: #fff; }
.ifd-surface .ifd-step--last .ifd-step__label, .ifd-surface .ifd-step--last .ifd-step__text { color: #fff; }
.ifd-anim-off .ifd-steps__list::before, .ifd-anim-off .ifd-step--last::before { animation: none; }
@media (max-width: 1060px) {
  .ifd-steps__list { padding-top: 0; }
  .ifd-steps__list::before { display: none; }
  .ifd-step::before { position: static; margin-bottom: 12px; }
  .ifd-step { display: flex; flex-direction: column; }
  .ifd-surface .ifd-step__box { height: auto; flex: 1; }
  .ifd-steps__list { gap: 26px; }
}

/* ------------------------------ Bandeaux des pages : version claire ------------------------------ */
.ifd-phero--light {
  position: relative; overflow: hidden; color: var(--ifd-encre); border-radius: 0;
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(195, 198, 242, .75) 0%, rgba(195, 198, 242, 0) 70%),
    radial-gradient(600px 300px at 10% 110%, rgba(250, 70, 22, .08) 0%, rgba(250, 70, 22, 0) 70%),
    linear-gradient(180deg, #F2F2FB 0%, var(--ifd-creme) 100%);
}
.ifd-phero--light > .ifd-deco--cover { opacity: .2; }
.ifd-phero--light .ifd-deco rect { display: none; }
.ifd-phero--light .ifd-crumbs ol, .ifd-phero--light .ifd-crumbs a { color: var(--ifd-texte2); }
.ifd-phero--light .ifd-crumbs a:hover { color: var(--ifd-accent2); }
.ifd-phero--light .ifd-crumbs [aria-current] { color: var(--ifd-encre); }
.ifd-phero--light .ifd-phero__lead { color: var(--ifd-texte2); }
.ifd-phero--light .ifd-eyebrow--soft { color: var(--ifd-rouille); }
.ifd-phero--light .ifd-phero__tags li { background: #fff; border-color: var(--ifd-border); color: var(--ifd-encre); }
.ifd-phero--light .ifd-hsearch { border: 1px solid var(--ifd-border); box-shadow: 0 24px 50px -36px rgba(11, 11, 26, .45); }
.ifd-phero--light .ifd-hstats { color: var(--ifd-texte2); }
.ifd-phero--light .ifd-hstats strong { color: var(--ifd-encre); }
.ifd-phero--light .ifd-hstats li + li::before { background: #C9C9DD; }
.ifd-phero--light .ifd-dates__label { color: var(--ifd-rouille); }
.ifd-phero--light .ifd-date { background: #fff; border-color: var(--ifd-border); color: var(--ifd-encre); }
.ifd-phero--light .ifd-date:hover { border-color: var(--ifd-bleu); color: var(--ifd-encre); background: #fff; }
.ifd-phero--light .ifd-date__day { background: var(--ifd-encre); color: #fff; }
.ifd-phero--light .ifd-date__day span { color: var(--ifd-pervenche); }
.ifd-phero--light .ifd-date__info small { color: var(--ifd-texte2); }
.ifd-phero--light .ifd-dates__all { color: var(--ifd-bleu); }
.ifd-phero--light .ifd-dates__all:hover { color: var(--ifd-accent2); }
.ifd-phero--light .ifd-phero__inner { padding-bottom: clamp(44px, 5vw, 72px); }