/* ---- lrs-pa : « la location, etape par etape », 5 jalons en CARTES --- Meme habillage que les cartes options / caracteristiques du site : fond rgba(246,241,236,.04), filet 1px, rayon 16, padding 24, et le meme survol (bordure orange + halo neon). Chaque carte porte son icone dans une pastille ronde. Les pastilles s'allument l'une apres l'autre et RESTENT allumees ; tout s'eteint ensemble au retour au debut — la progression reste lisible sans qu'un trait ait a traverser les cartes. Icones : toutes prises dans la meme famille « wired-gradient » de la mediatheque (le jeu Lordicon dont les .json sont les versions animees), posees en MASQUE avec background:currentColor — elles prennent donc la couleur de leur pastille, eteinte comme allumee. Cycle 11 s = 5 jalons de 2 s + 1 s de palier avant extinction. */ .lrs-pa.lrs-pa{--c:var(--lrs-accent,#E07A4A);--c2:var(--lrs-accent-lit,#E07A4A); --off:rgba(246,241,236,.55); font-family:var(--lrs-text,'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif); width:100%;box-sizing:border-box;color:var(--lrs-paper,#F6F1EC);position:relative} .lrs-pa.lrs-pa *{box-sizing:border-box} .lrs-pa__l.lrs-pa__l{display:grid;gap:16px;grid-template-columns:1fr} /* ---------- la carte ---------- */ .lrs-pa__s.lrs-pa__s{position:relative;display:flex;flex-direction:column; align-items:center;text-align:center;gap:14px; background:rgba(246,241,236,.04); border:1px solid rgba(246,241,236,.14); border-radius:16px;padding:24px; transition:border-color .3s ease,box-shadow .28s ease} .lrs-pa__s.lrs-pa__s:hover{border-color:rgba(224,122,74,.6); box-shadow:var(--lrs-neon,0 0 16px rgba(224,122,74,.35))} /* ---------- pastille + icone ---------- */ .lrs-pa__s.lrs-pa__s i{flex:0 0 auto; width:52px;height:52px;border-radius:50%; background:var(--lrs-ink,#0D0D0D);border:2px solid rgba(246,241,236,.2); color:var(--off);display:flex;align-items:center;justify-content:center; font-style:normal} /* icones agrandies + tracé epaissi : ce sont des dessins au TRAIT fin ; a 26px un filet blanc sur orange plein ne ressortait pas. Le double drop-shadow en currentColor gonfle la forme d'une demi-pixel de chaque cote, ce qui suffit a la rendre lisible sur la pastille allumee. */ .lrs-pa__s.lrs-pa__s i::before{content:"";display:block;width:32px;height:32px; background:currentColor; filter:drop-shadow(0 0 .6px currentColor) drop-shadow(0 0 .6px currentColor); -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat} /* selecteur volontairement lourd : le kit porte une regle globale `html .lrs-pa__s.lrs-pa__s b{font-weight:600}` (0,2,2) qui ecrasait le 700 d'un simple `.lrs-pa__tx b` (0,1,1). On passe a (0,3,2). */ .lrs-pa__s.lrs-pa__s .lrs-pa__tx b{display:block; font-family:var(--lrs-display,'Montserrat',-apple-system,Arial,sans-serif); font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.01em; text-transform:lowercase} .lrs-pa__tx span{display:block;margin-top:6px;font-size:13px;line-height:1.6; color:rgba(246,241,236,.6)} /* ---------- allumage cumulatif ---------- */ .lrs-pa__s.lrs-pa__s:nth-child(1) i{animation:lrs-on1 11s ease-in-out infinite} .lrs-pa__s.lrs-pa__s:nth-child(2) i{animation:lrs-on2 11s ease-in-out infinite} .lrs-pa__s.lrs-pa__s:nth-child(3) i{animation:lrs-on3 11s ease-in-out infinite} .lrs-pa__s.lrs-pa__s:nth-child(4) i{animation:lrs-on4 11s ease-in-out infinite} .lrs-pa__s.lrs-pa__s:nth-child(5) i{animation:lrs-on5 11s ease-in-out infinite} @keyframes lrs-on1{ 0%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none} 4%,95%{border-color:var(--c2);color:#fff;background:var(--c);box-shadow:0 0 0 6px rgba(224,122,74,.16)} 100%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none}} @keyframes lrs-on2{ 0%,13%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none} 18%,95%{border-color:var(--c2);color:#fff;background:var(--c);box-shadow:0 0 0 6px rgba(224,122,74,.16)} 100%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none}} @keyframes lrs-on3{ 0%,31%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none} 36%,95%{border-color:var(--c2);color:#fff;background:var(--c);box-shadow:0 0 0 6px rgba(224,122,74,.16)} 100%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none}} @keyframes lrs-on4{ 0%,49%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none} 55%,95%{border-color:var(--c2);color:#fff;background:var(--c);box-shadow:0 0 0 6px rgba(224,122,74,.16)} 100%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none}} @keyframes lrs-on5{ 0%,67%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none} 73%,95%{border-color:var(--c2);color:#fff;background:var(--c);box-shadow:0 0 0 6px rgba(224,122,74,.16)} 100%{border-color:rgba(246,241,236,.2);color:var(--off);background:var(--lrs-ink,#0D0D0D);box-shadow:none}} /* ---------- grille : 5 de front en desktop, puis on degrade ---------- */ @media(min-width:1100px){.lrs-pa__l.lrs-pa__l{grid-template-columns:repeat(5,1fr)}} @media(min-width:860px) and (max-width:1099px){.lrs-pa__l.lrs-pa__l{grid-template-columns:repeat(3,1fr)}} @media(min-width:701px) and (max-width:859px){.lrs-pa__l.lrs-pa__l{grid-template-columns:repeat(2,1fr)}} @media(prefers-reduced-motion:reduce){ .lrs-pa__s.lrs-pa__s i{animation:none;border-color:var(--c2);color:#fff;background:var(--c)}} /* ---------- pied du bloc : mention contractuelle + appel a l'action --- */ .lrs-pa__pied{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center; justify-content:center;gap:14px 24px;text-align:center} .lrs-pa__pied p{margin:0;font-size:13px;line-height:1.6; color:rgba(246,241,236,.6)} .lrs-pa__pied a.lrs-cgv{font-size:13px;color:#E07A4A;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .lrs-pa__pied a.lrs-cgv:hover{color:#E07A4A} @media(max-width:700px){.lrs-pa__pied{flex-direction:column;gap:16px}}