@font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url("/medias/polices/andika-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: 'Andika'; font-style: normal; font-weight: 700; font-display: swap; src: url("/medias/polices/andika-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0300-030F, U+1D00-1DBF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }  :root {  --bleu: #0a6ee0; --bleu-clair: #e6f0fb; --indigo: #123a63;  --nuit: #0c2340;  --or: #f2b705; --or-fonce: #9c6f08;  --rouge: #ce1126; --rouge-fonce: #a50d1e;  --terre: #c15a34;  --ocre: #e0973f; --raffia: #f5ead7;  --sable: #ecdfc6; --blanc-chaud: #fffdf8;   --encre: #2c2117;  --encre-doux: #6d5d49; --titre: #14304f;  --bord: #e6d8bd; --carte-vive: #fff;  --entete-fond: rgba(245, 234, 215, .9);  --r-s: 10px; --r-m: 18px; --r-l: 28px;  --ombre-s: 0 1px 2px rgba(44, 33, 23, .07), 0 4px 14px rgba(44, 33, 23, .08); --ombre-m: 0 6px 14px rgba(44, 33, 23, .10), 0 24px 48px rgba(44, 33, 23, .17); --largeur: 1120px; --entete-h: 70px; --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --police-titres: 'Andika', var(--police); --transi: .25s cubic-bezier(.4, 0, .2, 1); --rebond: cubic-bezier(.22, .9, .35, 1.08);  --frise: url("/medias/frise.svg"); }  @media (prefers-color-scheme: dark) { :root { --raffia: #0e1c30; --sable: #22344f; --blanc-chaud: #16283f; --carte-vive: #1d3251; --entete-fond: rgba(12, 26, 45, .88); --bleu-clair: #163150; --or-fonce: #f7c73e;  --encre: #e7ecf6; --encre-doux: #a9b6cc; --titre: #ecf1fb; --bord: #30455f; --ombre-s: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .35); --ombre-m: 0 6px 14px rgba(0, 0, 0, .42), 0 24px 48px rgba(0, 0, 0, .5); } }  *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 106.25%; overflow-x: clip; }  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--police); color: var(--encre); background: var(--raffia); line-height: 1.7;  overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; }  [hidden] { display: none !important; } a { color: var(--bleu); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.14; font-weight: 700; color: var(--titre); font-family: var(--police-titres); text-wrap: balance; letter-spacing: -.01em; } p { text-wrap: pretty; } ::selection { background: var(--or); color: var(--nuit); } .enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .sr-uniquement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--nuit); color: #fff; padding: .6rem 1rem; border-radius: var(--r-s); transition: top var(--transi); } .lien-evitement:focus { top: 8px; } :focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 4px; } .i { width: 1.4em; height: 1.4em; fill: currentColor; }  .entete { position: sticky; top: 0; z-index: 100; background: var(--entete-fond); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); transition: box-shadow var(--transi), background var(--transi); } .entete.est-compact { box-shadow: var(--ombre-s); background: rgba(245, 234, 215, .97); } .entete-contenu { max-width: var(--largeur); margin-inline: auto; padding: 0 clamp(1rem, 4vw, 2rem); min-height: var(--entete-h); display: flex; align-items: center; gap: 1rem; } .entete-liseret { display: block; height: 4px; background: linear-gradient(90deg, var(--bleu) 0 34%, var(--or) 34% 66%, var(--rouge) 66% 100%); } .marque { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--titre); } .marque:hover { text-decoration: none; } .marque-drapeau { border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.28); flex: none; } .marque-nom { font-size: 1.3rem; letter-spacing: -.01em; white-space: nowrap; font-family: var(--police-titres); font-weight: 700; } .marque-accent { color: var(--terre); } .nav { display: flex; align-items: center; gap: .85rem; } .nav-tete { display: none; }   .langues { margin-left: auto; } .nav-liste { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } @media (min-width: 1025px) {  .entete-contenu { position: relative; } .nav-liste { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-wrap: nowrap; } } .nav-liste a { display: inline-block; padding: .42rem .5rem; border-radius: var(--r-s); color: var(--encre); font-weight: 600; font-size: .9rem; position: relative; white-space: nowrap; } .nav-liste a:hover { background: var(--bleu-clair); text-decoration: none; } .nav-liste a[aria-current="page"] { color: var(--bleu); } .nav-liste a::after {  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem; height: 3px; background: var(--or); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--transi); } .nav-liste a:hover::after, .nav-liste a[aria-current="page"]::after { transform: scaleX(1); }  .nav-groupe { position: relative; } .nav-hub { display: inline-flex; align-items: center; gap: .3rem; position: relative; border: 0; background: transparent; cursor: pointer; font: inherit; padding: .42rem .5rem; border-radius: var(--r-s); color: var(--encre); font-weight: 600; font-size: .9rem; white-space: nowrap; } .nav-hub:hover { background: var(--bleu-clair); } .nav-hub .nav-chevron { width: .95em; height: .95em; flex: none; transition: transform var(--transi); } .nav-groupe.est-ouvert > .nav-hub .nav-chevron { transform: rotate(180deg); } .nav-hub::after {  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .12rem; height: 3px; background: var(--or); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform var(--transi); } .nav-hub:hover::after, .nav-hub.est-actif::after { transform: scaleX(1); } .nav-hub.est-actif { color: var(--bleu); } @media (min-width: 1025px) { .nav-sous { position: absolute; top: calc(100% + .45rem); left: 0; z-index: 110; min-width: 200px; margin: 0; padding: .45rem; list-style: none; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-m); display: none; } .nav-sous::before {  content: ""; position: absolute; left: 0; right: 0; top: -.55rem; height: .55rem; } .nav-groupe.est-ouvert .nav-sous, .nav-groupe:hover .nav-sous { display: block; animation: monterCourt .22s ease both; } .nav-sous a { display: block; padding: .5rem .7rem; } .nav-sous a::after { display: none; }  .nav-sous a[aria-current="page"] { background: var(--bleu-clair); } } .langues { display: inline-flex; gap: .2rem; padding: .22rem; background: var(--sable); border-radius: 999px; } .langue { border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem; color: var(--encre-doux); padding: .32rem .58rem; border-radius: 999px; transition: var(--transi); } .langue:hover { color: var(--titre); } .langue.est-actif { background: var(--blanc-chaud); color: var(--terre); box-shadow: var(--ombre-s); animation: pop .3s var(--rebond); } .burger { display: none; border: 1px solid var(--bord); background: var(--blanc-chaud); border-radius: var(--r-s); padding: .38rem; cursor: pointer; color: var(--titre); } .burger .i-fermer { display: none; } .burger[aria-expanded="true"] .i-menu { display: none; } .burger[aria-expanded="true"] .i-fermer { display: block; } .nav-voile { position: fixed; inset: 0; z-index: 90; background: rgba(12, 35, 64, .45); backdrop-filter: blur(2px); animation: fondu .3s ease both; }  .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700; font-family: var(--police-titres); border: 2px solid transparent; cursor: pointer; font-size: 1.02rem; transition: transform var(--transi), box-shadow var(--transi), background var(--transi); } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; } .btn::after {  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease; } .btn:hover::after { transform: translateX(320%) skewX(-18deg); } .btn-primaire { background: var(--rouge); color: #fff; box-shadow: 0 8px 20px rgba(206, 17, 38, .3); } .btn-primaire:hover { background: var(--rouge-fonce); color: #fff; } .btn-or { background: var(--or); color: var(--nuit); box-shadow: 0 8px 20px rgba(242, 183, 5, .32); } .btn-or:hover { background: #ffc721; color: var(--nuit); } .btn-fantome { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); } .btn-fantome:hover { background: rgba(255,255,255,.16); color: #fff; } .btn .i { width: 1.15em; height: 1.15em; }  .hero { position: relative; overflow: hidden; color: #fff; background-color: var(--nuit);  background-image: radial-gradient(820px 480px at 92% -15%, rgba(242,183,5,.20), transparent 62%), linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%), url("/medias/drapeau-rdc.svg"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: center, center, right -30px center; background-size: auto, cover, auto 128%; } .hero::before {  content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .1; animation: deriveMotif 60s linear infinite; } .hero-contenu { position: relative; padding-block: clamp(2.6rem, 8vw, 5.5rem) clamp(3rem, 8vw, 5rem); max-width: 730px; } .hero-surtitre { display: inline-block; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: var(--nuit); background: var(--or); padding: .34rem .9rem; border-radius: 999px; margin-bottom: 1.2rem; box-shadow: 0 4px 14px rgba(242,183,5,.3); animation: monter .6s .05s both; } .hero h1 { color: #fff; font-size: clamp(2.2rem, 6.2vw, 3.7rem); margin: 0 0 1rem; text-shadow: 0 2px 22px rgba(6, 20, 40, .45);  animation: monter .7s .16s both; } .hero-sous-titre { font-size: clamp(1.08rem, 2.4vw, 1.32rem); color: #e7eef7; margin: 0 0 2rem; animation: monter .7s .3s both; } .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; animation: monter .7s .44s both; } .hero::after {  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; animation: deriveFrise 26s linear infinite; }  @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: scroll()) { .hero-contenu { animation: heroRecul linear both; animation-timeline: scroll(); animation-range: 0 90vh; } } }  .section { padding: clamp(3rem, 8vw, 5rem) 0; position: relative; } .section-alt { background: var(--blanc-chaud); } .section-tete { max-width: 640px; margin-bottom: 2.5rem; } .section-tete.centre { margin-inline: auto; text-align: center; } .section-tete.centre::before {  content: ""; display: block; width: 52px; height: 14px; margin: 0 auto .9rem; background: var(--frise) repeat-x; background-size: auto 14px; } .section h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 .6rem; } .section-tete p { color: var(--encre-doux); font-size: 1.1rem; margin: 0; }  .vision { background: linear-gradient(180deg, #fbf3e3, var(--raffia)); } .vision-grille { display: grid; gap: 1.5rem; } .vision-texte p { font-size: 1.12rem; color: var(--encre); margin: 0 0 1rem; } .vision-texte p:first-of-type { font-size: 1.28rem; color: var(--titre); font-weight: 600; border-left: 5px solid var(--terre); padding-left: 1rem; }  .grille-cartes { display: grid; gap: 1.4rem; grid-template-columns: 1fr; } .carte { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); border-top: 5px solid var(--ocre); padding: 1.7rem; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); will-change: transform;  } .carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); } .grille-cartes .carte:nth-child(1) { border-top-color: var(--terre); } .grille-cartes .carte:nth-child(2) { border-top-color: var(--ocre); } .grille-cartes .carte:nth-child(3) { border-top-color: var(--bleu); } .carte-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-weight: 700; font-size: 1.3rem; font-family: var(--police-titres); color: #fff; background: var(--ocre); margin-bottom: 1rem; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 6px 14px rgba(44,33,23,.18); } .grille-cartes .carte:nth-child(1) .carte-num { background: var(--terre); } .grille-cartes .carte:nth-child(3) .carte-num { background: var(--bleu); } .carte h3 { font-size: 1.3rem; margin: 0 0 .5rem; } .carte p { margin: 0; color: var(--encre-doux); }  .grille-langues { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .tuile-langue { position: relative; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: 1.4rem 1.2rem; text-align: center; transition: transform var(--transi), box-shadow var(--transi); will-change: transform;  } .tuile-langue:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); } .tuile-langue.est-prioritaire { border-color: var(--or); background: linear-gradient(180deg, #fff8e8, var(--blanc-chaud)); box-shadow: 0 0 0 3px rgba(242,183,5,.28); } .tuile-langue h3 { font-size: 1.2rem; margin: .3rem 0 0; } .badge { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .24rem .7rem; border-radius: 999px; } .badge-or { background: var(--or); color: var(--nuit); } .badge-doux { background: var(--sable); color: var(--encre-doux); }  .cta-final { text-align: center; } .cta-carte { background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(150deg, #17456f, var(--nuit)); color: #fff; border-radius: var(--r-l); padding: clamp(2.2rem, 6vw, 3.6rem); position: relative; overflow: hidden; box-shadow: var(--ombre-m); } .cta-carte::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(23,69,111,.86), rgba(12,35,64,.92)); } .cta-carte > * { position: relative; } .cta-carte h2 { color: #fff; } .cta-carte p { color: #e7eef7; max-width: 490px; margin: .6rem auto 1.7rem; }   .pied { position: relative; background: var(--nuit); color: #c9d6e8; margin-top: 2rem; } .pied::before {  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; transform: scaleY(-1); } .pied-contenu { max-width: 680px; margin-inline: auto; padding: 2.7rem clamp(1rem, 4vw, 2rem) 1.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; } .pied .marque-nom { color: #fff; } .pied .marque-accent { color: var(--ocre); } .pied-slogan { color: #aebfd6; margin: 0; max-width: 44ch; } .pied-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: .4rem; } .pied-nav a, .pied-nav .pied-lien { color: #c9d6e8; font-weight: 600; font-size: .95rem; } .pied-nav a:hover, .pied-nav .pied-lien:hover { color: #fff; }  .pied-lien { background: none; border: 0; margin: 0; padding: 0; font-family: inherit; cursor: pointer; } .pied-bas { border-top: 1px solid rgba(255,255,255,.12); max-width: 680px; margin-inline: auto; padding: 1.1rem clamp(1rem, 4vw, 2rem); display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; align-items: center;  justify-content: space-between; } @media (max-width: 560px) { .pied-bas { justify-content: center; }  } .pied-copyright { margin: 0; font-size: .86rem; color: #9fb1cb; } .pied-bas-liens { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; } .pied-bas-liens a { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; color: #c9d6e8; } .pied-bas-liens a:hover { color: #fff; }  [data-apparait] { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; } [data-apparait].est-visible { opacity: 1; transform: none; } .js [data-apparait] { will-change: opacity, transform; }  @media (min-width: 560px) { .grille-langues { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 760px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .burger { display: inline-flex; }  .nav { position: fixed; top: 0; right: 0; z-index: 95; height: 100dvh; width: min(84vw, 340px); margin: 0; padding: 0 0 2rem; flex-direction: column; align-items: stretch; gap: 0; color: #eaf1fb; background-color: var(--nuit); background-image: radial-gradient(560px 300px at 118% -8%, rgba(242,183,5,.20), transparent 60%), linear-gradient(158deg, rgba(10,30,56,.98) 40%, rgba(13,38,68,.94) 100%); background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: auto, cover; border-left: 1px solid rgba(242,183,5,.28); box-shadow: -16px 0 42px rgba(6,20,40,.42); transform: translateX(105%); transition: transform var(--transi); overflow-y: auto; overscroll-behavior: contain; } .nav::before {  content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/46px repeat; opacity: .06; } .menu-ouvert .nav { transform: translateX(0); } html:has(body.menu-ouvert) { overflow: hidden; }  .nav-tete { position: relative; display: flex; align-items: center; gap: .55rem; padding: calc(var(--entete-h) - .5rem) 1.4rem 1.25rem; } .nav-tete .marque-nom { color: #fff; font-size: 1.2rem; } .nav-tete .marque-accent { color: var(--or); } .nav-tete::after { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 0; height: 12px; background: var(--frise) repeat-x; background-size: auto 12px; opacity: .85; } .nav-liste { position: relative; flex-direction: column; gap: .12rem; padding: 1rem .8rem; }  .nav-liste a { display: flex; align-items: center; justify-content: space-between; padding: .8rem .9rem; font-size: 1.06rem; font-weight: 600; color: #eaf1fb; border-radius: var(--r-s); transition: background .18s, color .18s; } .nav-liste a:hover { background: rgba(255,255,255,.08); text-decoration: none; } .nav-liste a::after {  content: "›"; position: static; transform: none; width: auto; height: auto; background: none; color: rgba(255,255,255,.38); font-size: 1.25rem; line-height: 1; font-weight: 400; } .nav-liste a[aria-current="page"] { background: rgba(242,183,5,.15); color: var(--or); font-weight: 800; } .nav-liste a[aria-current="page"]::after { color: var(--or); }  .nav-groupe { position: static; } .nav-hub { pointer-events: none; width: 100%; background: transparent; padding: 1.15rem .9rem .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--or); font-weight: 800; } .nav-hub .nav-chevron { display: none; } .nav-hub::after { display: none; }  .nav-hub.est-actif { color: var(--or); }  .nav-sous { list-style: none; margin: 0 0 0 1.3rem; padding: 0 0 0 .35rem; border-left: 2px solid rgba(242,183,5,.25); } .nav-sous a { font-size: 1.04rem; }  .entete-contenu { gap: .5rem; } .langues { gap: .1rem; padding: .18rem; } .langue { padding: .3rem .42rem; font-size: .74rem; } .marque-nom { font-size: 1.15rem; }  .menu-ouvert .nav-tete { animation: monterCourt .34s ease backwards; } .menu-ouvert .nav-liste > li { animation: monterCourt .34s ease backwards; } .menu-ouvert .nav-liste > li:nth-child(1) { animation-delay: .06s; } .menu-ouvert .nav-liste > li:nth-child(2) { animation-delay: .10s; } .menu-ouvert .nav-liste > li:nth-child(3) { animation-delay: .14s; } .menu-ouvert .nav-liste > li:nth-child(4) { animation-delay: .18s; } .menu-ouvert .nav-liste > li:nth-child(5) { animation-delay: .22s; } } @media (min-width: 1025px) { .nav-voile { display: none !important; } } @media (max-width: 640px) { .hero-actions .btn { flex: 1 1 auto; justify-content: center; }  .hero { background-position: center, center, right -16px bottom -12px; background-size: auto, cover, auto 52%; } }   .banniere-page { position: relative; overflow: hidden; color: #fff; background-color: var(--nuit);  background-image: radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%), linear-gradient(102deg, rgba(10,30,56,.97) 40%, rgba(16,52,92,.74) 70%, rgba(16,52,92,.55) 100%), url("/medias/drapeau-rdc.svg"); background-repeat: no-repeat, no-repeat, no-repeat;  background-position: center, center, right -30px top -50px; background-size: auto, cover, calc(66% + 30px) auto; } .banniere-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .09; animation: deriveMotif 60s linear infinite; } .banniere-page::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--frise) repeat-x; background-size: auto 14px; animation: deriveFrise 26s linear infinite; } @media (max-width: 640px) {  .banniere-page { background-image: radial-gradient(640px 320px at 88% -30%, rgba(242,183,5,.16), transparent 62%), linear-gradient(90deg, rgba(10,30,56,.97) 30%, rgba(16,52,92,.72) 64%, rgba(16,52,92,.52) 100%), url("/medias/drapeau-rdc.svg"); background-position: center, center, right center; background-size: auto, cover, cover; } } .banniere-contenu { position: relative; padding-block: clamp(2rem, 5vw, 3.2rem) clamp(2.2rem, 5vw, 3.4rem); max-width: 730px; } .banniere-page h1 { color: #fff; font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 .6rem; text-shadow: 0 2px 18px rgba(6, 20, 40, .45); animation: monter .6s .05s both; } .banniere-intro { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: #e7eef7; margin: 0; max-width: 620px; animation: monter .6s .18s both; }  .dico-tete { padding: clamp(1.6rem, 4vw, 2.4rem) 0 1.5rem; animation: monter .6s .28s both; } .dico-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .6rem; } .dico-champ { position: relative; flex: 1 1 260px; max-width: 520px; } .dico-tri-label { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--encre-doux); white-space: nowrap; } .dico-select { font: inherit; font-weight: 600; padding: .7rem 2.4rem .7rem 1rem; border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--encre); cursor: pointer; appearance: none;  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d5d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .dico-select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); } .dico-loupe { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 1.2em; height: 1.2em; color: var(--encre-doux); pointer-events: none; } #dico-recherche, #bible-recherche, #phr-recherche { width: 100%; font: inherit; padding: .8rem 1rem .8rem 2.7rem; border: 2px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--encre); transition: border-color var(--transi), box-shadow var(--transi); } #dico-recherche:focus, #bible-recherche:focus, #phr-recherche:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(10,110,224,.15); } .dico-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; align-items: baseline; margin: 1.2rem 0 .2rem; color: var(--encre-doux); font-size: .95rem; } .dico-depuis strong { color: var(--terre); } .dico-compteur { font-weight: 700; color: var(--titre); } .dico-note { margin: 0; font-size: .88rem; color: var(--encre-doux); font-style: italic; }  .dico-liste { display: grid; gap: .55rem; grid-template-columns: 1fr; align-items: start; } .mot { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); overflow: hidden; transition: border-color var(--transi), box-shadow var(--transi); animation: monterCourt .3s ease backwards;  } .mot:nth-child(1) { animation-delay: .02s; } .mot:nth-child(2) { animation-delay: .05s; } .mot:nth-child(3) { animation-delay: .08s; } .mot:nth-child(4) { animation-delay: .11s; } .mot:nth-child(5) { animation-delay: .14s; } .mot:nth-child(6) { animation-delay: .17s; } .mot:nth-child(7) { animation-delay: .20s; } .mot:nth-child(8) { animation-delay: .23s; } .mot:hover { border-color: var(--ocre); box-shadow: var(--ombre-m); } .mot.est-ouvert { border-color: var(--ocre); } .mot-tete { display: flex; align-items: center; gap: .6rem; } .mot-toggle { flex: 1 1 auto; display: flex; align-items: center; gap: .7rem; min-width: 0; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; padding: .8rem 1rem; color: var(--titre); } .mot-toggle:hover { background: rgba(224,151,63,.09); } .mot-chevron { width: 1.05em; height: 1.05em; color: var(--ocre); flex: none; transition: transform var(--transi); } .mot-toggle[aria-expanded="true"] .mot-chevron { transform: rotate(180deg); } .mot-ref { font-weight: 800; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mot-cat { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #b09a7d; flex: none; }  .mot-niveau { flex: none; width: .58rem; height: .58rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); } .mot-niveau--1 { background: #1f8a4c; } .mot-niveau--2 { background: var(--or); } .mot-niveau--3 { background: var(--terre); }  .dico-legende { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; margin: .1rem 0 0; font-size: .82rem; color: var(--encre-doux); } .dico-legende-item { display: inline-flex; align-items: center; gap: .4rem; } .dico-legende .mot-niveau { box-shadow: none; }  .dico-astuce { display: flex; align-items: center; gap: .8rem; max-width: 620px; margin: 1.2rem auto 0; padding: .7rem 1.1rem; background: rgba(224, 151, 63, .13); border: 1px solid rgba(224, 151, 63, .3); border-radius: var(--r-m); box-shadow: var(--ombre-s); color: var(--titre); font-size: .95rem; font-weight: 600; line-height: 1.35; } .dico-astuce-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; background: linear-gradient(150deg, var(--ocre), var(--terre)); box-shadow: var(--ombre-s); } .dico-astuce-ico .i { width: 1.1em; height: 1.1em; animation: nudgeBas 1.8s ease-in-out infinite; } .mot-phare { display: inline-flex; align-items: center; gap: .5rem; padding-right: .9rem; flex: none; } .mot-ln { font-weight: 800; color: var(--terre); font-size: 1.08rem; }  .mot-detail-boite { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.4, 0, .2, 1); } .mot.est-ouvert .mot-detail-boite { grid-template-rows: 1fr; } .mot-detail { list-style: none; margin: 0; min-height: 0; overflow: hidden; padding: 0 1rem 0 2.7rem; display: grid; gap: .3rem; background: rgba(236,223,198,.35); visibility: hidden; transition: padding .38s cubic-bezier(.4, 0, .2, 1), visibility .38s; } .mot.est-ouvert .mot-detail { padding: .5rem 1rem .9rem 2.7rem; visibility: visible; } .mot-trad { display: grid; grid-template-columns: 6rem 1fr auto; align-items: center; gap: .6rem; } .mot-langue { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--encre-doux); } .mot-val { font-weight: 600; color: var(--encre); } .dico-avenir { font-size: .9rem; font-style: italic; color: #a99b83; } .mot-trad--vide .dico-avenir { grid-column: 2 / 4; } .dico-son { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; flex: none; background: var(--bleu-clair); color: var(--bleu); transition: var(--transi); } .dico-son:hover { background: var(--or); color: var(--nuit); transform: scale(1.12); box-shadow: 0 4px 12px rgba(242,183,5,.4); } .dico-son:active { transform: scale(.92); transition-duration: .08s; } .dico-son .i { width: 1.15em; height: 1.15em; } .dico-plus-zone { text-align: center; margin-top: 1.6rem; } .dico-vide { text-align: center; color: var(--encre-doux); font-size: 1.05rem; padding: 2.5rem 1rem; background: var(--blanc-chaud); border: 1px dashed var(--bord); border-radius: var(--r-m); } @media (min-width: 760px) { .dico-liste { grid-template-columns: repeat(2, 1fr); } }  .meth-section h3 { font-size: 1.3rem; margin: 2.2rem 0 .9rem; } .meth-note { max-width: 640px; margin: 1rem 0 0; font-size: .92rem; font-style: italic; color: var(--encre-doux); } .meth-texte { max-width: 640px; margin: 0; color: var(--encre); }  .sons-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); } .son-carte { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .95rem .7rem .85rem; text-align: center; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .son-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--ocre); } .son-lettre { display: block; font-family: var(--police-titres); font-size: 1.9rem; line-height: 1.1; color: var(--terre); } .son-exemple { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .5rem 0 .15rem; font-weight: 700; color: var(--titre); } .son-gloss { display: block; font-size: .85rem; color: var(--encre-doux); } .son-astuce { display: block; margin-top: .4rem; font-size: .78rem; font-style: italic; color: var(--encre-doux); }  .tons-duel { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: .9rem; margin-top: 1.1rem; } .tons-vs { align-self: center; font-family: var(--police-titres); font-size: 1.5rem; color: var(--terre); padding: 0 .2rem; } .ton-carte { flex: 0 0 146px; width: 146px; display: flex; flex-direction: column; align-items: center; gap: .5rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--bleu); border-radius: var(--r-m); padding: .95rem .7rem .85rem; text-align: center; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi); } .ton-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); } .ton-carte--haut { border-top-color: var(--or); } .ton-badge { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--terre); background: var(--sable); border-radius: 999px; padding: .22rem .7rem; } .ton-mot { font-family: var(--police-titres); font-size: 1.9rem; line-height: 1.1; color: var(--titre); } .ton-syllabe { display: inline-block; } .ton-syllabe.est-haut { color: var(--terre); transform: translateY(-.14em); }  .ton-piste { display: flex; gap: 1.6rem; align-items: flex-end; height: 24px; padding: 0 .5rem; border-bottom: 2px dotted var(--bord); } .ton-point { width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); } .ton-point.est-haut { background: var(--or); transform: translateY(-12px); } @media (prefers-reduced-motion: no-preference) { .ton-point.est-haut { animation: pouls 2.4s ease-in-out infinite; } .ton-point.est-haut:nth-child(2) { animation-delay: .5s; } }  .classes-grille { display: grid; gap: 1rem; grid-template-columns: 1fr; } .classe-carte { background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--ocre); border-radius: var(--r-m); padding: 1.15rem 1.2rem 1rem; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi); } .classe-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); } .classes-grille .classe-carte:nth-child(odd) { border-top-color: var(--terre); } .classe-prefixe { font-family: var(--police-titres); font-size: 1.35rem; color: var(--bleu); } .classe-qui { margin: .15rem 0 .7rem; font-size: .88rem; color: var(--encre-doux); } .paire { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; padding: .4rem 0; border-top: 1px dashed var(--bord); } .paire-sg { font-weight: 700; color: var(--titre); } .paire-fleche { color: var(--ocre); font-weight: 700; } .paire-pl { font-weight: 800; color: var(--terre); } .paire-gloss { margin-left: auto; font-size: .85rem; color: var(--encre-doux); }  .conj-grille { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 620px; margin-top: 1rem; } .conj-ligne { display: grid; grid-template-columns: 3.4rem auto 1fr auto; align-items: center; gap: .7rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .45rem .75rem; box-shadow: var(--ombre-s); } .conj-pref { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); } .conj-forme { font-weight: 800; color: var(--terre); } .conj-gloss { font-size: .92rem; color: var(--encre-doux); }  .temps-grille { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 720px; margin-top: 1rem; } .temps-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .55rem .8rem; box-shadow: var(--ombre-s); } .temps-forme { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--terre); } .temps-schema { font-size: .78rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; background: var(--sable); color: var(--encre-doux); white-space: nowrap; } .temps-gloss { flex: 1 1 240px; font-size: .93rem; color: var(--encre-doux); }  .brique-mot { font-size: 1.5rem; color: var(--terre); } .brique-exemple { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--titre); margin: 0 0 .5rem; }  .pron-grille, .quest-grille, .poss-grille { display: grid; gap: .5rem; grid-template-columns: 1fr; max-width: 720px; margin-top: 1rem; } .pron-ligne, .quest-ligne, .poss-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .55rem .8rem; box-shadow: var(--ombre-s); } .pron-mot, .quest-mot, .poss-forme { font-family: var(--police-titres); font-weight: 800; color: var(--terre); } .pron-fleche { color: var(--encre-doux); } .pron-pref { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); } .pron-forme { font-weight: 700; color: var(--titre); } .pron-gloss, .quest-gloss, .poss-gloss { font-size: .92rem; color: var(--encre-doux); } .pron-gloss { margin-left: auto; } .poss-ex { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--titre); margin-left: auto; }  .quest-ex { flex: 1 1 100%; display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; font-weight: 700; color: var(--titre); } .quest-ex-gloss { font-weight: 400; font-style: italic; font-size: .9rem; color: var(--encre-doux); } @media (min-width: 700px) { .classes-grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1020px) { .classes-grille { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .conj-ligne { grid-template-columns: 2.9rem auto auto; } .conj-gloss { grid-column: 1 / -1; padding-left: 3.6rem; margin-top: -.2rem; } .conj-ligne .dico-son { justify-self: end; } }   .volets-nav { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .volet-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--bord); background: var(--blanc-chaud); font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--titre); box-shadow: var(--ombre-s); transition: transform var(--transi), background var(--transi), color var(--transi); } .volet-btn::after {  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: translateX(-180%) skewX(-18deg); transition: transform .7s ease; pointer-events: none; } .volet-btn:hover::after { transform: translateX(320%) skewX(-18deg); } .volet-btn:hover { transform: translateY(-2px); } .volet-btn.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); } .volet-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sable); color: var(--titre); font-size: .85rem; } .volet-btn.est-actif .volet-num { background: rgba(255, 255, 255, .25); color: #fff; } .volet { animation: monterCourt .35s var(--rebond) both; } .volet[hidden] { display: none; } .nb-consigne { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; color: var(--encre-doux); } .section .nb-titre-bloc { font-size: 1.35rem; margin: 3.2rem 0 .9rem; } .section .nb-titre-bloc:first-of-type { margin-top: 2.2rem; }  .nb-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .nb-carte { display: grid; gap: .15rem; justify-items: center; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); border-top: 4px solid var(--bleu); padding: .85rem .5rem .7rem; box-shadow: var(--ombre-s); } .nb-carte:nth-child(3n+2) { border-top-color: var(--or); } .nb-carte:nth-child(3n) { border-top-color: var(--rouge); } .nb-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 2.1rem; line-height: 1.1; color: var(--titre); } .nb-mot { font-weight: 800; color: var(--terre); }  .brq { display: inline-block; padding: .22rem .6rem; border-radius: 999px; font-weight: 800; font-size: .95rem; } .brq--mille { background: #fde8eb; color: var(--rouge-fonce); } .brq--cent { background: var(--bleu-clair); color: var(--bleu); } .brq--diz { background: #f8e2d7; color: var(--terre); } .brq--unite { background: #fcf0cd; color: var(--or-fonce); } .brq--et { background: var(--sable); color: var(--encre-doux); font-weight: 600; } .nb-exemples { display: grid; gap: .6rem; max-width: 760px; } .nb-exemple { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .6rem .8rem; box-shadow: var(--ombre-s); } .nb-exemple-chiffre { font-family: var(--police-titres); font-weight: 700; font-size: 1.35rem; color: var(--titre); min-width: 3.1rem; text-align: right; } .nb-exemple-egal { color: var(--encre-doux); } .nb-exemple-mots { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; } .nb-exemple-son { margin-left: auto; }  .paliers-grille { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .paliers-sous { display: contents; } .palier { display: flex; align-items: center; gap: .6rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .5rem .7rem; box-shadow: var(--ombre-s); } .palier-chiffre { font-family: var(--police-titres); font-weight: 700; color: var(--bleu); min-width: 3.6rem; } .palier-mot { font-weight: 800; color: var(--terre); } .palier-gloss { flex: 1; font-size: .9rem; color: var(--encre-doux); } .palier .dico-son { margin-left: auto; }  .compteur { max-width: 680px; margin: 0 auto; display: grid; gap: 1.1rem; justify-items: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or); border-radius: var(--r-l); padding: 1.5rem 1.2rem; box-shadow: var(--ombre-m); } .compteur-haut { display: grid; gap: .6rem; justify-items: center; width: 100%; } .compteur-label { font-weight: 700; font-size: .95rem; color: var(--encre-doux); } .compteur-champ { width: min(100%, 300px); text-align: center; font-family: var(--police-titres); font-weight: 700; font-size: 2.4rem; color: var(--titre); background: var(--raffia); border: 2px solid var(--bord); border-radius: var(--r-m); padding: .15rem .6rem; } .compteur-boutons { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; } .compteur-plus { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--sable); font-weight: 800; color: var(--encre); transition: background var(--transi), transform var(--transi); } .compteur-plus:hover { background: var(--or); } .compteur-plus:active { transform: translateY(2px); } .compteur-resultat { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; min-height: 2.5rem; align-content: center; } .compteur-resultat .brq { font-size: 1.08rem; padding: .32rem .78rem; } @media (max-width: 560px) { .nb-grille { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } .nb-chiffre { font-size: 1.7rem; } .volet-btn { padding: .45rem .85rem; font-size: .92rem; } .nb-exemple-chiffre { min-width: 2.3rem; font-size: 1.15rem; } .compteur-champ { font-size: 1.9rem; } }    .vis-mot-section { padding-bottom: 0; perspective: 1300px; } .vis-mot { max-width: 760px; margin: 0 auto; padding: 2rem 1.9rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); transform-style: preserve-3d;  }  .vis-mot[data-apparait] { opacity: 0; transform: rotateX(24deg) rotateY(-15deg) translateY(38px) scale(.93); transform-origin: 50% 85%; transition: opacity .9s ease, transform 1s cubic-bezier(.2, .75, .2, 1), box-shadow .9s ease; } .vis-mot[data-apparait].est-visible { opacity: 1; transform: none; }  .vis-mot-tete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; } .vis-mot-monogramme { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--nuit); font-family: var(--police-titres); font-weight: 800; font-size: 1.35rem; box-shadow: 0 6px 16px rgba(242, 183, 5, .45); transform: translateZ(34px); } .vis-mot-surtitre { margin: 0; color: var(--or-fonce); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; transform: translateZ(20px); } .vis-mot-corps p { margin: 0 0 1rem; color: var(--encre-doux); line-height: 1.75; } .vis-mot-corps p:last-child { margin-bottom: 0; } .vis-mot-signe { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--bord); font-family: var(--police-titres); font-weight: 700; color: var(--titre); font-size: 1.05rem; transform: translateZ(16px); }  @media (prefers-reduced-motion: reduce) { .vis-mot { transform-style: flat; } .vis-mot[data-apparait] { transform: none; transition: opacity .3s ease; } .vis-mot-monogramme, .vis-mot-surtitre, .vis-mot-signe { transform: none; } .vis-mot-monogramme { box-shadow: var(--ombre-s); } }  .vis-bandeau { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--nuit), var(--indigo) 60%, #114a86); padding-block: clamp(2.4rem, 6vw, 3.4rem) calc(clamp(2.4rem, 6vw, 3.4rem) + 10px); } .vis-bandeau::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/medias/motif-kuba.svg") 0 0/48px repeat; opacity: .1; animation: deriveMotif 60s linear infinite; } .vis-bandeau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--frise) repeat-x; background-size: auto 16px; animation: deriveFrise 26s linear infinite; } .vis-citation { position: relative; max-width: 800px; margin: 0 auto; text-align: center; font-family: var(--police-titres); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.35; color: #fff; } .vis-citation span {  background: linear-gradient(110deg, #fff 38%, var(--or) 50%, #fff 62%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillance 5.5s linear infinite; } .vis-citation::before, .vis-citation::after { color: var(--or); font-size: 1.35em; line-height: 0; vertical-align: -0.32em; display: inline-block; animation: pouls 3.2s ease-in-out infinite; } .vis-citation::before { content: '« '; margin-right: .12em; } .vis-citation::after { content: ' »'; margin-left: .12em; animation-delay: 1.6s; }  .mission-texte { position: relative; max-width: 720px; margin: 0 auto; text-align: center; font-size: 1.22rem; line-height: 1.6; color: var(--titre); font-weight: 600; padding-block: 1.4rem; } .mission-texte::before, .mission-texte::after { content: ""; position: absolute; left: 12%; right: 12%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu), var(--or), var(--rouge), var(--bleu)); background-size: 200% 100%; animation: couler 9s linear infinite; } .mission-texte::before { top: 0; } .mission-texte::after { bottom: 0; animation-direction: reverse; } .nb-titre-bloc.centre { text-align: center; }  .valeurs { display: grid; gap: 1rem; grid-template-columns: 1fr; } .valeur { position: relative; overflow: hidden; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); border-top: 5px solid var(--terre); padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--ombre-s); will-change: transform; transition: box-shadow var(--transi); } .valeur:hover { box-shadow: var(--ombre-m); } .valeurs .valeur:nth-child(2) { border-top-color: var(--or); } .valeurs .valeur:nth-child(3) { border-top-color: var(--bleu); } .valeurs .valeur:nth-child(4) { border-top-color: var(--rouge); } .valeur h3 { margin: 0 0 .45rem; color: var(--titre); transition: color var(--transi); } .valeur:hover h3 { color: var(--terre); } .valeur p { margin: 0; color: var(--encre-doux); } .valeur-lettre { position: absolute; right: .4rem; top: -1.4rem; pointer-events: none; font-family: var(--police-titres); font-weight: 700; font-size: 7rem; line-height: 1; color: var(--terre); opacity: .10; transition: transform .5s var(--rebond), opacity .3s ease; } .valeur:hover .valeur-lettre { transform: scale(1.18) rotate(-8deg); opacity: .17; } .valeurs .valeur:nth-child(2) .valeur-lettre { color: var(--or-fonce); } .valeurs .valeur:nth-child(3) .valeur-lettre { color: var(--bleu); } .valeurs .valeur:nth-child(4) .valeur-lettre { color: var(--rouge); } @media (min-width: 640px) { .valeurs { grid-template-columns: repeat(2, 1fr); } }  .promesses { list-style: none; margin: 0 auto; padding: 0; max-width: 680px; display: grid; gap: .7rem; } .promesses li { position: relative; padding: .8rem 1rem .8rem 2.9rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi); } .promesses li:hover { transform: translateX(6px); box-shadow: var(--ombre-m); } .promesses li::before { content: '★'; position: absolute; left: 1rem; top: .72rem; color: var(--or); font-size: 1.15rem; animation: scintille 2.8s ease-in-out infinite; } .promesses li:nth-child(2)::before { animation-delay: .7s; } .promesses li:nth-child(3)::before { animation-delay: 1.4s; } .promesses li:nth-child(4)::before { animation-delay: 2.1s; }   .frise { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; position: relative; } .frise::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 9px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--bleu), var(--or), var(--rouge)); } .frise-etape { position: relative; padding: 0 0 1.7rem 2.6rem; } .frise-etape:last-child { padding-bottom: .2rem; } .frise-point { position: absolute; left: 0; top: .25rem; width: 22px; height: 22px; border-radius: 50%; background: var(--blanc-chaud); border: 5px solid var(--terre); box-shadow: 0 0 0 3px rgba(44, 33, 23, .08); animation: pouls 3s ease-in-out infinite; } .frise-etape:nth-child(4n+2) .frise-point { border-color: var(--or); animation-delay: .75s; } .frise-etape:nth-child(4n+3) .frise-point { border-color: var(--bleu); animation-delay: 1.5s; } .frise-etape:nth-child(4n) .frise-point { border-color: var(--rouge); animation-delay: 2.25s; } .frise-date { display: inline-block; margin-bottom: .45rem; padding: .12rem .7rem; border-radius: 999px; background: var(--sable); color: var(--titre); font-family: var(--police-titres); font-weight: 700; font-size: .95rem; } .frise-carte { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .95rem 1.2rem; box-shadow: var(--ombre-s); will-change: transform; transition: box-shadow var(--transi); } .frise-carte:hover { box-shadow: var(--ombre-m); } .frise-titre { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--titre); } .frise-txt { margin: 0; color: var(--encre-doux); } .his-note { max-width: 760px; margin: 1.7rem auto 0; font-size: .92rem; color: var(--encre-doux); font-style: italic; } .his-note.centre { text-align: center; }  .volet-vignette { display: block; width: min(58%, 225px); height: auto; margin: 1.9rem auto 0; filter: drop-shadow(0 8px 18px rgba(44, 33, 23, .14)); } .livre-plume { stroke-dasharray: 70; animation: ecrire 4.5s ease-in-out infinite; } .vinyle { transform-box: fill-box; transform-origin: center; animation: tourner 7s linear infinite; } .note { animation: flotter 3.6s ease-in-out infinite; } .note-a { color: var(--terre); } .note-b { color: var(--bleu); animation-delay: 1.2s; } .note-c { color: var(--rouge); animation-delay: 2.4s; }  .carte-bloc { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; max-width: 860px; margin: 0 auto; } .carte-rdc { width: min(100%, 380px); height: auto; margin: 0 auto; filter: drop-shadow(0 10px 22px rgba(44, 33, 23, .16)); } .carte-pays { fill: var(--blanc-chaud); } .carte-trait { fill: none; stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; opacity: .75; } .carte-zone { opacity: .38; } .carte-fleuve { fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 6; animation: couleFleuve 9s linear infinite; } .carte-kin { fill: #fff; stroke: var(--encre); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: pouls 3s ease-in-out infinite; } .carte-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .carte-legende li { display: flex; align-items: center; gap: .6rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: 999px; padding: .45rem 1rem; box-shadow: var(--ombre-s); } .leg-puce { width: 14px; height: 14px; border-radius: 4px; background: var(--puce, var(--terre)); flex: none; } .leg-zone { color: var(--encre-doux); } .leg-zone::before { content: '· '; } @media (min-width: 720px) { .carte-bloc { grid-template-columns: 1.1fr 1fr; } }  .his-phare { max-width: 620px; margin: 0 auto 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; } .his-phare-nombre { font-family: var(--police-titres); font-weight: 700; font-size: 2.7rem; line-height: 1; color: var(--terre); } .his-phare-txt { color: var(--encre-doux); } #his-chiffres { list-style: none; margin: 0 auto; padding: 0; justify-content: center; grid-template-columns: repeat(2, minmax(118px, 150px)); } @media (min-width: 560px) { #his-chiffres { grid-template-columns: repeat(4, minmax(112px, 148px)); } }   .bible-outils { display: grid; justify-items: center; gap: 1rem; max-width: 940px; margin: 0 auto 1.6rem;  scroll-margin-top: calc(var(--entete-h) + 1rem); }  @media (min-width: 700px) { .bible-outils { position: sticky; top: calc(var(--entete-h) + 4px); z-index: 20; border-radius: var(--r-m); padding: .9rem 1rem; transition: box-shadow var(--transi), background var(--transi); } .bible-outils.est-collee { background: rgba(255, 253, 248, .96); backdrop-filter: blur(8px); box-shadow: 0 10px 18px -12px rgba(44, 33, 23, .3); } } .bible-outils .dico-champ { width: 100%; max-width: 420px; }  .bible-filtres { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.4rem; }  .bible-suggestions { position: absolute; top: calc(100% + .45rem); left: 0; right: 0; z-index: 30; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-m); padding: .4rem; display: grid; gap: .1rem; max-height: 300px; overflow-y: auto; } .bible-suggestions[hidden] { display: none; }  .bible-suggestions button { font: inherit; text-align: left; padding: .5rem .8rem; border: 0; background: none; border-radius: 12px; cursor: pointer; color: var(--encre); font-weight: 600; } .bible-suggestions button:hover, .bible-suggestions button:focus-visible { background: var(--raffia); } .bible-suggestions .sug-ln { color: var(--terre); font-weight: 500; font-size: .9em; margin-left: .3rem; } .bible-suggestions .sug-vide { margin: 0; padding: .5rem .8rem; color: var(--encre-doux); font-style: italic; }  .bible-versets { max-width: 940px; margin: 0 auto; padding: .2rem 1.3rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); } @keyframes bibleTourne { from { opacity: 0; transform: perspective(1600px) rotateY(-9deg) translateY(6px); } to { opacity: 1; transform: perspective(1600px) rotateY(0) translateY(0); } } .bible-versets.est-tournant { animation: bibleTourne .5s cubic-bezier(.2,.7,.3,1) both; transform-origin: left center; } .bible-entetes { display: none; } .bible-colonne { font-family: var(--police-titres); font-weight: 700; font-size: .95rem; color: var(--encre-doux); } .bible-colonne--ln { color: var(--terre); } .verset { display: grid; grid-template-columns: 1.9rem 1fr; gap: .35rem .9rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--bord); } .bible-versets .verset:last-child { border-bottom: 0; } .verset-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--raffia); border: 1px solid var(--bord); font-family: var(--police-titres); font-weight: 700; font-size: .8rem; color: var(--terre); } .verset-fr { margin: 0; grid-column: 2; color: var(--encre-doux); } .verset-ln { grid-column: 2; display: flex; gap: .55rem; align-items: flex-start; border-left: 3px solid var(--or); padding-left: .85rem; } .verset-ln p { margin: 0; color: var(--encre); font-weight: 500; flex: 1; } .verset-ln .dico-son { flex: none; }  @media (prefers-reduced-motion: no-preference) { @keyframes versetApparait { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .verset.est-apparu { animation: versetApparait .4s ease both; animation-delay: calc(var(--ordre, 0) * 45ms); } } @media (min-width: 760px) { .bible-entetes { display: grid; grid-template-columns: 2.2rem 1fr 1fr; gap: 1.1rem; padding: .6rem 0 .3rem; } .verset { grid-template-columns: 2.2rem 1fr 1fr; } .verset-fr, .verset-ln { grid-column: auto; } } .bible-mention { max-width: 940px; margin: 2.4rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--bord); font-size: .88rem; color: var(--encre-doux); } .bible-mention p { margin: 0 0 .35rem; }  .bible-attente { text-align: center; color: var(--encre-doux); margin: 2rem 0; } .verset-vide { color: var(--encre-doux); opacity: .5; } .bible-nav-chap { max-width: 940px; margin: 1.8rem auto 0; display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .btn-page { background: var(--blanc-chaud); color: var(--encre); border-color: var(--bord); box-shadow: var(--ombre-s); font-size: .95rem; padding: .7rem 1.2rem; } .btn-page:hover { background: var(--raffia); color: var(--encre); } .btn-page:disabled { opacity: .4; pointer-events: none; } .btn-page .i--retour { transform: scaleX(-1); }  .bible-phares .phares-tete { max-width: 760px; margin: 0 auto 1.6rem; text-align: center; } .phares-intro { margin: .6rem 0 0; color: var(--encre-doux); }  .phares-pont { max-width: 720px; margin: 0 auto 2rem; } .phares-scene { perspective: 1300px; } .phare-carte { position: relative; min-height: 12rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-m); padding: 1.5rem 1.6rem; transform-style: preserve-3d; border-top: 4px solid var(--or); }  @keyframes phareEntre { from { opacity: 0; transform: rotateY(-42deg) translateZ(-60px); } to { opacity: 1; transform: rotateY(0) translateZ(0); } } .phare-carte.est-entrante { animation: phareEntre .5s cubic-bezier(.2,.7,.3,1) both; transform-origin: left center; } .phare-ref { margin: 0 0 1rem; font-family: var(--police-titres); font-size: 1rem; color: var(--terre); } .phare-theme { color: var(--encre-doux); font-weight: 500; } .phare-corps { display: grid; gap: .9rem; } .phare-corps .verset-fr { grid-column: auto; margin: 0; } .phare-corps .verset-ln { grid-column: auto; } @media (min-width: 720px) { .phare-corps { grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; } } .phares-nav { display: flex; justify-content: center; align-items: center; gap: 1.2rem; margin-top: 1.1rem; } .phare-fleche { padding: .6rem .9rem; } .phare-compteur { font-family: var(--police-titres); font-weight: 700; color: var(--encre-doux); min-width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums; } .phares-fiabilite { max-width: 760px; margin: 0 auto 2rem; padding: 1.2rem 1.3rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-left: 4px solid var(--or); border-radius: var(--r-m); box-shadow: var(--ombre-s); } .phares-fiabilite p { margin: 0 0 .6rem; color: var(--encre-doux); font-size: .95rem; } .phares-fiabilite p:last-child { margin-bottom: 0; } .phares-fiab-titre { font-family: var(--police-titres); color: var(--terre); }  .bible-bascule-sec { padding-bottom: 0; } .bible-bascule { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }  @media (max-width: 460px) { .bible-bascule .volet-btn { font-size: .86rem; padding: .5rem .8rem; } }  .bible-chant-sec { padding-top: clamp(1.4rem, 3.5vw, 2rem); } .chant { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border-radius: var(--r-l); background: linear-gradient(160deg, #fff8e8, var(--blanc-chaud)); border: 1px solid var(--bord); box-shadow: var(--ombre-s); } .chant-scene { position: relative; flex: none; width: 172px; height: 114px; perspective: 620px; } .chant-pochette { position: absolute; left: 0; top: 4px; width: 106px; height: 106px; z-index: 2; display: grid; place-items: center; align-content: center; gap: .1rem; padding: .5rem; text-align: center; border-radius: 10px; font-family: var(--police-titres); font-weight: 700; font-size: .82rem; line-height: 1.25; color: var(--or); background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(155deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; box-shadow: 0 10px 22px rgba(12, 35, 64, .35); transform: rotateY(-12deg); transform-origin: left center; transition: transform .6s var(--rebond); } .chant-pochette small { display: block; font-size: .6rem; color: #c9d6e8; letter-spacing: .04em; } .chant-vinyle { position: absolute; top: 11px; left: 50px; width: 92px; height: 92px; z-index: 1; border-radius: 50%; background: radial-gradient(circle, #ffd75e 0 14px, var(--or) 14px 16px, transparent 16px), repeating-radial-gradient(circle, #10131a 0 2px, #232a36 2px 4px); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); animation: tourner 4s linear infinite; animation-play-state: paused; transition: transform .6s var(--rebond); } .chant.joue .chant-vinyle { animation-play-state: running; transform: translateX(30px); } .chant.joue .chant-pochette { transform: rotateY(-24deg); } .chant-corps { flex: 1 1 260px; display: grid; gap: .25rem; } .chant-invite { margin: 0; color: var(--encre); } .chant-titre { margin: 0; font-size: .92rem; color: var(--encre-doux); } .chant-titre strong { color: var(--titre); font-family: var(--police-titres); } .chant-btn { flex: none; } @media (max-width: 600px) { .chant { flex-direction: column; text-align: center; } .chant-corps { flex-basis: auto; } } @media (prefers-reduced-motion: reduce) { .chant-vinyle { animation: none; } }   .haut-page { position: fixed; right: clamp(.9rem, 3vw, 1.6rem); bottom: clamp(.9rem, 3vw, 1.6rem); z-index: 80;  width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--or); color: var(--nuit); box-shadow: var(--ombre-m); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity var(--transi), transform var(--transi), background var(--transi); } .haut-page.est-visible { opacity: 1; transform: none; pointer-events: auto; } .haut-page:hover { background: #ffc721; transform: translateY(-3px); } .haut-page:active { transform: translateY(0) scale(.94); transition-duration: .08s; } .haut-page .i { width: 1.35rem; height: 1.35rem; transform: rotate(180deg); }   .vitrine { display: grid; gap: 1.4rem; grid-template-columns: 1fr; max-width: 920px; margin: 0 auto; } @media (min-width: 680px) { .vitrine { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .vitrine { grid-template-columns: repeat(3, 1fr); } } .vitrine-tuile { position: relative; display: flex; flex-direction: column; gap: .5rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--terre); border-radius: var(--r-l); padding: 1.6rem 1.5rem 1.4rem; box-shadow: var(--ombre-s); color: inherit; will-change: transform; transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .vitrine-tuile:hover { text-decoration: none; } a.vitrine-tuile:hover { box-shadow: var(--ombre-m); border-color: var(--ocre); } .vitrine .vitrine-tuile:nth-child(2) { border-top-color: var(--bleu); } .vitrine .vitrine-tuile:nth-child(3) { border-top-color: var(--ocre); } .vitrine .vitrine-tuile:nth-child(4) { border-top-color: var(--rouge); } .vitrine-embleme { width: 60px; height: 60px; border-radius: var(--r-m); display: grid; place-items: center; color: #fff; margin-bottom: .4rem; background: linear-gradient(150deg, var(--terre), #9c3f20); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 6px 14px rgba(44, 33, 23, .18); } .vitrine-embleme svg, .vitrine-embleme .i { width: 1.9rem; height: 1.9rem; } .vitrine .vitrine-tuile:nth-child(2) .vitrine-embleme { background: linear-gradient(150deg, var(--bleu), #084a97); } .vitrine .vitrine-tuile:nth-child(3) .vitrine-embleme { background: linear-gradient(150deg, var(--ocre), var(--terre)); } .vitrine .vitrine-tuile:nth-child(4) .vitrine-embleme { background: linear-gradient(150deg, var(--rouge), var(--rouge-fonce)); } .vitrine-titre { font-size: 1.25rem; margin: 0; color: var(--titre); } .vitrine-txt { margin: 0; color: var(--encre-doux); flex: 1; } .vitrine-pied { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-family: var(--police-titres); font-weight: 700; color: var(--terre); } .vitrine-pied .i { width: 1.1em; height: 1.1em; transition: transform var(--transi); } a.vitrine-tuile:hover .vitrine-pied .i { transform: translateX(4px); } .vitrine-tuile.est-bientot { opacity: .74; } .vitrine-tuile.est-bientot .vitrine-embleme { filter: grayscale(.35); } .vitrine-bientot { position: absolute; top: 1rem; right: 1rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .24rem .7rem; border-radius: 999px; background: var(--sable); color: var(--encre-doux); }    .jeu-retour { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; padding: .32rem .95rem .32rem .32rem; border-radius: 999px; background: var(--blanc-chaud); border: 1px solid var(--bord); box-shadow: var(--ombre-s); font-family: var(--police-titres); font-weight: 700; font-size: .9rem; color: var(--titre); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); } .jeu-retour:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-m); border-color: var(--ocre); } .jeu-retour:active { transform: translateY(0) scale(.97); transition-duration: .08s; } .jeu-retour-pastille { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; flex: none; border-radius: 50%; background: var(--sable); color: var(--terre); transition: background var(--transi), color var(--transi); } .jeu-retour:hover .jeu-retour-pastille { background: var(--terre); color: #fff; } .jeu-retour-pastille .i { width: 1.05em; height: 1.05em; transform: scaleX(-1); transition: transform var(--transi); } .jeu-retour:hover .jeu-retour-pastille .i { transform: scaleX(-1) translateX(3px); } .jeu-retour-txt { padding-right: .1rem; } .jeu-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.4rem; margin-bottom: 1.3rem; } .jeu-niveaux { display: inline-flex; gap: .5rem; flex-wrap: wrap; } .jeu-relance { font-size: .95rem; padding: .6rem 1.2rem; } .jeu-etat { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin: 0 0 1.3rem; color: var(--encre-doux); font-weight: 600; } .jeu-etat b { color: var(--titre); font-family: var(--police-titres); font-size: 1.1em; }  .jeu-joueurs { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 1.3rem; } .jeu-joueurs[hidden] { display: none; } .jeu-joueur { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem; border-radius: 999px; font-weight: 700; font-size: .95rem; background: var(--blanc-chaud); border: 2px solid var(--bord); color: var(--encre-doux); transition: transform .2s var(--rebond), box-shadow .2s, background .2s, color .2s; } .jeu-joueur-score { font-family: var(--police-titres); font-size: 1.15rem; min-width: 1ch; text-align: center; } .jeu-joueur.est-actif { transform: translateY(-2px) scale(1.06); box-shadow: var(--ombre-m); color: #fff; } .jeu-joueur.est-j1 { border-color: var(--bleu); } .jeu-joueur.est-j2 { border-color: var(--rouge); } .jeu-joueur.est-j3 { border-color: var(--or); } .jeu-joueur.est-j4 { border-color: var(--ocre); } .jeu-joueur.est-j1.est-actif { background: var(--bleu); } .jeu-joueur.est-j2.est-actif { background: var(--rouge); } .jeu-joueur.est-j3.est-actif { background: var(--or); color: var(--nuit); } .jeu-joueur.est-j4.est-actif { background: var(--ocre); }  .recap-item.jeu-classe { color: #fff; } .recap-item.jeu-classe.est-j1 { background: var(--bleu); } .recap-item.jeu-classe.est-j2 { background: var(--rouge); } .recap-item.jeu-classe.est-j3 { background: var(--or); color: var(--nuit); } .recap-item.jeu-classe.est-j4 { background: var(--ocre); } .recap-item.jeu-classe b { font-size: 1.1rem; }   .jeu-joueur.est-out { opacity: .4; filter: grayscale(1); } #dv-reste.est-sur { color: var(--terre); transform: scale(1.15); transition: transform .2s; } .dv-scene { margin-top: 1rem; } .dv-consigne { text-align: center; font-weight: 700; color: var(--titre); margin: 0 0 .7rem; min-height: 1.4em; transition: color .2s; } .dv-consigne.est-resultat { color: var(--terre); font-size: 1.08rem; }  .dv-bulle { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 0 auto .8rem; max-width: 30rem; padding: .55rem .9rem; border-radius: 14px; border-bottom-left-radius: 5px; background: var(--blanc-chaud); border: 2px solid var(--or); box-shadow: var(--ombre-s); } .dv-bulle[hidden] { display: none; } .dv-bulle.est-neuve { animation: masTombe .38s var(--rebond) both; transform-origin: top center; } .dv-bulle-q { font-style: italic; color: var(--encre-doux); } .dv-bulle-rep { display: inline-flex; align-items: baseline; gap: .4rem; } .dv-bulle-rep b { font-size: 1.15rem; color: var(--terre); } .dv-bulle-gloss { font-size: .84rem; color: var(--encre-doux); }  .dv-menu { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin: 0 0 1.1rem; } .dv-q { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .5rem .85rem; border-radius: 12px; cursor: pointer; background: var(--bleu); color: #fff; border: 2px solid transparent; transition: transform .15s, box-shadow .15s, background .2s; } .dv-q:hover, .dv-q:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-m); } .dv-q-ln { font-weight: 700; } .dv-q-gloss { font-size: .78rem; opacity: .85; } .dv-q.est-pose { background: var(--gris-doux); color: var(--encre-doux); cursor: default; transform: none; box-shadow: none; }  .dv-plateau { display: grid; gap: .7rem; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; perspective: 900px; } .dv-plateau[data-cartes="12"], .dv-plateau[data-cartes="20"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 46rem; } @media (max-width: 560px) { .dv-plateau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .dv-plateau[data-cartes="12"], .dv-plateau[data-cartes="20"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dv-carte { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .35rem .55rem; border-radius: 12px; cursor: pointer; background: var(--blanc-chaud); border: 2px solid var(--liseret); transition: transform .35s, opacity .35s, border-color .15s, box-shadow .15s; transform-origin: bottom center; transform-style: preserve-3d; } .dv-carte:hover, .dv-carte:focus-visible { border-color: var(--terre); box-shadow: var(--ombre-m); } .dv-carte.est-cible { border-color: var(--terre); box-shadow: 0 0 0 3px var(--terre); } .dv-carte.est-rabattue { transform: rotateX(-88deg) translateY(6px); opacity: .28; pointer-events: none; transition-delay: calc(var(--i) * 22ms); } .dv-carte.est-trouvee { border-color: var(--or); box-shadow: 0 0 0 3px var(--or), var(--ombre-m); animation: dvTrouve .5s var(--rebond) both; } @keyframes dvTrouve { 0% { transform: rotateY(180deg) scale(.9); } 100% { transform: rotateY(0) scale(1.04); } } .dv-visage { width: 54px; height: 54px; display: block; } .dv-visage svg { width: 100%; height: 100%; } .dv-nom { font-weight: 800; font-size: .9rem; color: var(--titre); } .dv-chips { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; } .dv-chip { font-size: .68rem; font-weight: 700; padding: .08rem .4rem; border-radius: 999px; color: #fff; white-space: nowrap; } .dv-chip--lieu { background: var(--bleu); } .dv-chip--animal { background: var(--vert, #2f8f5b); } .dv-chip--mosala { background: var(--ocre); } .dv-chip--humeur { background: var(--terre); }  .dv-accuser { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; margin: 1rem auto 0; max-width: 32rem; text-align: center; padding: .7rem .9rem; border-radius: 14px; background: var(--blanc-chaud); border: 2px dashed var(--terre); } .dv-accuser[hidden] { display: none; } .dv-accuser-txt { font-weight: 800; color: var(--titre); } .dv-accuser-btns { display: flex; gap: .5rem; } .dv-suivant { display: inline-flex; margin: 1.1rem auto 0; } .dv-suivant[hidden] { display: none; }  .dv-histo { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; } .dv-histo-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: .45rem .7rem; border-radius: 10px; background: var(--blanc-chaud); border-left: 4px solid var(--liseret); } .dv-histo-ligne.est-juste { border-left-color: var(--or); } .dv-histo-ligne.est-faux { border-left-color: var(--rouge); } .dv-histo-nom { font-weight: 800; color: var(--titre); } .dv-histo-info { font-size: .82rem; color: var(--encre-doux); } .jeu-plateau { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); max-width: 620px; margin: 0 auto; } .jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(5, 1fr); max-width: 780px; } .jeu-carte { position: relative; border: 0; background: none; padding: 0; cursor: pointer; aspect-ratio: 4 / 5; perspective: 900px;  animation: monterCourt .35s ease backwards; transition: transform var(--transi); } .jeu-carte:not(.est-retournee):not(.est-trouvee):hover { transform: translateY(-3px); } .jeu-carte-int { position: absolute; inset: 0; transform-style: preserve-3d;  transition: transform .55s var(--rebond); } .jeu-carte.est-retournee .jeu-carte-int, .jeu-carte.est-trouvee .jeu-carte-int { transform: rotateY(180deg); } .jeu-face { position: absolute; inset: 0; display: grid; place-content: center; gap: .25rem; text-align: center; padding: .45rem; border-radius: var(--r-m); border: 1px solid var(--bord); box-shadow: var(--ombre-s); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .jeu-face--dos { background: url("/medias/motif-kuba.svg") 0 0/40px repeat, linear-gradient(150deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; color: var(--or); font-size: 1.7rem; border-color: transparent; text-shadow: 0 2px 10px rgba(6, 20, 40, .55); } .jeu-face--avant { background: var(--blanc-chaud); transform: rotateY(180deg); } .jeu-face--ref { border-top: 4px solid var(--bleu); } .jeu-face--ln { border-top: 4px solid var(--or); } .jeu-mot { font-weight: 800; color: var(--titre); line-height: 1.22; font-size: clamp(.82rem, 2.3vw, 1.05rem); overflow-wrap: anywhere; } .jeu-face--ln .jeu-mot { color: var(--terre); } .jeu-langue { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #b09a7d; }  .jeu-carte.est-trouvee .jeu-face--avant { border-color: var(--or); box-shadow: 0 0 0 3px rgba(242, 183, 5, .34), var(--ombre-s); animation: pop .45s var(--rebond); }  .jeu-carte.est-erreur { animation: secouer .4s ease; } .jeu-bravo { max-width: 520px; margin: 1.8rem auto 0; padding: 1.8rem 1.4rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--or); border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: pop .45s var(--rebond); } .jeu-bravo[hidden] { display: none; } .jeu-bravo-etoiles { display: block; color: var(--or); font-size: 1.5rem; letter-spacing: .3em; animation: scintille 2.8s ease-in-out infinite; } .jeu-bravo h2 { margin: .4rem 0 .5rem; } .jeu-bravo p { color: var(--encre-doux); margin: 0 0 1.3rem; }  .recap { margin: 0 0 1.4rem; text-align: left; } .recap-bilan { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.2rem; } .recap-item { display: inline-flex; align-items: baseline; gap: .35rem; padding: .32rem .78rem; border-radius: 999px; font-size: .82rem; font-weight: 600; } .recap-item b { font-size: 1.05rem; } .recap-item.est-juste { color: #1a7a43; background: rgba(31, 138, 76, .13); } .recap-item.est-faux { color: var(--rouge); background: rgba(206, 17, 38, .10); } .recap-item.est-temps { color: #b5701f; background: rgba(224, 151, 63, .18); } .recap-item.est-neutre { color: var(--encre-doux); background: var(--sable); } .recap-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .recap-ligne { display: flex; gap: .55rem; align-items: flex-start; width: 100%; padding: .5rem .65rem; border-radius: var(--r-s); border: 1px solid var(--bord); border-left: 3px solid var(--bord); text-align: left; } .recap-ligne.est-juste { border-left-color: #2a9d5c; } .recap-ligne.est-faux { border-left-color: var(--rouge); } .recap-ligne.est-temps { border-left-color: var(--ocre); } .recap-ligne.est-neutre { border-left-color: var(--or); }  button.recap-ligne { background: var(--blanc-chaud); cursor: pointer; transition: border-color .15s, box-shadow .15s; } button.recap-ligne:hover { border-color: var(--or); box-shadow: var(--ombre-s); } .recap-marque { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; line-height: 1; } .recap-marque .i { width: .92rem; height: .92rem; } .est-juste .recap-marque { background: #2a9d5c; } .est-faux .recap-marque { background: var(--rouge); } .est-temps .recap-marque { background: var(--ocre); } .est-neutre .recap-marque { background: var(--or); } .recap-corps { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .45rem; font-size: .92rem; } .recap-mot { font-weight: 700; color: var(--encre); } .recap-fleche { color: var(--encre-doux); } .recap-cible { color: var(--encre); } .recap-note { flex-basis: 100%; font-size: .82rem; font-style: italic; color: var(--encre-doux); } .jeu-note { max-width: 640px; margin: 2rem auto 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); } @media (max-width: 560px) { .jeu-plateau { gap: .5rem; } .jeu-plateau[data-niveau="3"] { grid-template-columns: repeat(4, 1fr); max-width: 620px; } .jeu-etat { gap: 1.3rem; } }    .quiz-chrono { height: 8px; max-width: 620px; margin: 0 auto 1.5rem; background: var(--bleu-clair); border-radius: 999px; overflow: hidden; } .quiz-chrono[hidden] { display: none; } .quiz-chrono-jauge { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--or), var(--terre)); border-radius: 999px; }  .quiz-depart { max-width: 560px; margin: 0 auto; padding: 2.2rem 1.5rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: monterCourt .4s var(--rebond) both; } .quiz-depart[hidden] { display: none; } .quiz-depart-embleme { display: inline-flex; width: 3.4rem; height: 3.4rem; margin-bottom: 1rem; align-items: center; justify-content: center; color: #fff; border-radius: 50%; background: linear-gradient(150deg, var(--bleu), #084a97); box-shadow: var(--ombre-s); } .quiz-depart-embleme svg { width: 1.8rem; height: 1.8rem; } .quiz-depart-txt { margin: 0 auto 1.5rem; max-width: 34ch; color: var(--encre-doux); font-size: 1.05rem; } .quiz-depart-txt[hidden] { display: none; } .quiz-trop-peu { color: var(--terre); font-style: italic; } .quiz-depart-btn { font-size: 1.05rem; }  .jeu-vide { max-width: 420px; margin: 1.6rem auto 0; text-align: center; color: var(--terre); font-style: italic; }  .quiz-scene { perspective: 1200px; } .quiz-scene[hidden] { display: none; } .quiz-carte { position: relative; max-width: 620px; margin: 0 auto 1.6rem; padding: 2rem 1.4rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--or); border-radius: var(--r-l); box-shadow: var(--ombre-m); transform-origin: center bottom; } .quiz-carte.est-entrante { animation: quizEntre .55s var(--rebond) both; } .quiz-demande { margin: 0 0 .7rem; color: var(--encre-doux); font-weight: 600; font-size: .98rem; } .quiz-mot { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--titre); line-height: 1.15; font-size: clamp(1.7rem, 6vw, 2.8rem); overflow-wrap: anywhere; }  .quiz-mot--cache { color: var(--encre-doux); letter-spacing: .3em; } .quiz-langue { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #b09a7d; } .quiz-ecouter { display: inline-flex; margin: .9rem auto 0; padding: .5rem; align-items: center; justify-content: center; background: var(--bleu-clair); color: var(--bleu); border: 0; border-radius: 50%; cursor: pointer; transition: transform var(--transi), background var(--transi); } .quiz-ecouter:hover { background: var(--bleu); color: #fff; transform: scale(1.08); } .quiz-ecouter[hidden] { display: none; } .quiz-ecouter .i { width: 1.3rem; height: 1.3rem; }  .quiz-verdict { min-height: 1.4em; margin: .8rem 0 0; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .quiz-verdict.est-juste { color: #1f8a4c; } .quiz-verdict.est-faux, .quiz-verdict.est-temps { color: var(--rouge); } .quiz-verdict:not(:empty) { animation: pop .4s var(--rebond); }  .quiz-choix { display: grid; gap: .7rem; grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } @media (min-width: 560px) { .quiz-choix { grid-template-columns: 1fr 1fr; } } .quiz-opt { padding: .95rem 1.1rem; text-align: center; cursor: pointer; background: var(--blanc-chaud); color: var(--titre); font-weight: 600; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi); animation: monterCourt .35s var(--rebond) backwards; } .quiz-opt:nth-child(2) { animation-delay: .05s; } .quiz-opt:nth-child(3) { animation-delay: .1s; } .quiz-opt:nth-child(4) { animation-delay: .15s; } .quiz-opt:not(:disabled):hover { transform: translateY(-2px); border-color: var(--ocre); box-shadow: var(--ombre-m); } .quiz-opt:disabled { cursor: default; }  .quiz-opt.est-juste { border-color: #1f8a4c; color: #12703b; box-shadow: 0 0 0 3px rgba(31, 138, 76, .22), var(--ombre-s); animation: pop .45s var(--rebond); } .quiz-opt.est-faux { border-color: var(--rouge); color: var(--rouge-fonce); box-shadow: 0 0 0 3px rgba(206, 17, 38, .18), var(--ombre-s); animation: secouer .4s ease; } .quiz-opt.est-estompe { opacity: .5; }  .recap-joueur { flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #fff; white-space: nowrap; } .recap-joueur.est-j1 { background: var(--bleu); } .recap-joueur.est-j2 { background: var(--rouge); } .recap-joueur.est-j3 { background: var(--or); color: var(--nuit); } .recap-joueur.est-j4 { background: var(--ocre); }   .exo-scene { perspective: 1400px; max-width: 560px; margin: 0 auto; } .exo-scene[hidden] { display: none; } .exo-carte { position: relative; min-height: 23.5rem; transform-style: preserve-3d; transition: transform .65s var(--rebond); } .exo-carte.est-corrigee { transform: rotateY(180deg); }  .exo-carte.est-entrante { animation: quizEntre .55s var(--rebond) backwards; } .exo-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.5rem 1.3rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-m); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .exo-face--recto { border-top: 5px solid var(--bleu); } .exo-face--verso { transform: rotateY(180deg); border-top: 5px solid var(--or); } .exo-mot { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--titre); line-height: 1.15; font-size: clamp(1.5rem, 5vw, 2.2rem); overflow-wrap: anywhere; }  .exo-form { display: flex; gap: .55rem; width: 100%; max-width: 24rem; margin-top: .6rem; } .exo-champ { flex: 1; min-width: 0; padding: .68rem .9rem; font: inherit; font-size: 1.05rem; color: var(--encre); background: var(--carte-vive); border: 2px solid var(--bord); border-radius: var(--r-m); transition: border-color var(--transi), box-shadow var(--transi); } .exo-champ:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 224, .14); } .exo-valider { font-size: .98rem; padding: .6rem 1.1rem; } .exo-passer { border: 0; background: none; padding: .3rem .5rem; cursor: pointer; color: var(--encre-doux); font-size: .88rem; text-decoration: underline; transition: color var(--transi); } .exo-passer:hover { color: var(--terre); }  .exo-verdict { margin: 0; min-height: 1.4em; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .exo-verdict.est-juste { color: #1f8a4c; } .exo-verdict.est-presque { color: #b5701f; } .exo-verdict.est-faux { color: var(--rouge); } .exo-verdict.est-passe { color: var(--encre-doux); } .exo-verdict:not(:empty) { animation: pop .4s var(--rebond); } .exo-rappel { margin: 0; color: var(--encre-doux); font-weight: 600; overflow-wrap: anywhere; } .exo-bonne { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--terre); line-height: 1.15; font-size: clamp(1.4rem, 4.6vw, 2rem); overflow-wrap: anywhere; } .exo-taponse { margin: 0; min-height: 1.2em; font-size: .9rem; font-style: italic; color: var(--encre-doux); }  .exo-autre { margin: 0; font-size: .85rem; color: #b5701f; } .exo-autre:empty { display: none; } .exo-face--verso .btn { margin-top: .5rem; }  .exo-astuce { font-size: .88rem; font-style: italic; margin-top: -0.8rem; } .exo-astuce[hidden] { display: none; }  .exo-outils-ligne { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.4rem; }  .exo-bravo { max-width: 640px; scroll-margin-top: 5.5rem; } .bilan-axes { display: grid; gap: 1.1rem; margin: 0 0 1.3rem; } @media (min-width: 560px) { .bilan-axes { grid-template-columns: 1fr 1fr; align-items: start; } } @media (min-width: 880px) { .bilan-axes { grid-template-columns: 1fr 1fr 1fr; } } .bilan-groupe h3 { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-doux); } .bilan-ligne { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr auto; align-items: center; gap: .55rem; padding: .2rem 0; font-size: .85rem; } .bilan-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--encre); } .bilan-barre { height: 8px; border-radius: 999px; background: var(--sable); overflow: hidden; } .bilan-jauge { display: block; height: 100%; border-radius: 999px; transition: width .8s ease; } .bilan-jauge.est-bien { background: #2a9d5c; } .bilan-jauge.est-moyen { background: var(--ocre); } .bilan-jauge.est-faible { background: var(--rouge); } .bilan-note { font-weight: 700; color: var(--encre-doux); font-variant-numeric: tabular-nums; }  .conseils { margin: 0 0 1.4rem; padding: .95rem 1.1rem; text-align: left; background: var(--sable); border-left: 4px solid var(--or); border-radius: var(--r-s); } .conseils h3 { margin: 0 0 .45rem; font-size: .95rem; color: var(--titre); } .conseils ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--encre-doux); font-size: .92rem; }  .recap-item.est-presque { color: #b5701f; background: rgba(224, 151, 63, .18); } .recap-ligne.est-presque { border-left-color: var(--ocre); } .est-presque .recap-marque { background: var(--ocre); } .recap-ligne.est-passe { border-left-color: var(--rouge); } .est-passe .recap-marque { background: var(--rouge); } @media (prefers-reduced-motion: reduce) { .exo-carte { transition: none; animation: none; } .bilan-jauge { transition: none; } } @media (max-width: 420px) { .exo-carte { min-height: 25rem; } .exo-face { padding: 1.2rem .9rem; } .exo-form { flex-direction: column; } }   .exv-carte { min-height: 27rem; } .exv-consigne { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 0; } .exv-puce { padding: .26rem .75rem; border-radius: 999px; background: var(--sable); border: 1px solid var(--bord); font-weight: 700; font-size: .92rem; color: var(--titre); } .exv-puce--temps { background: rgba(242, 183, 5, .22); border-color: rgba(242, 183, 5, .55); }  .exv-affichage { margin: .2rem 0; min-height: 1.3em; font-family: var(--police-titres); font-weight: 800; line-height: 1.15; font-size: clamp(1.5rem, 5vw, 2.1rem); overflow-wrap: anywhere; } .exv-seg--pronom { color: var(--terre); } .exv-seg--sujet { color: var(--bleu); } .exv-seg--temps { color: #b5701f; } .exv-seg--racine { color: var(--titre); } .exo-bonne .exv-seg--racine { color: var(--terre); }  .fenetre { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; } .fenetre-fond { position: absolute; inset: 0; background: rgba(12, 35, 64, .55); } .fenetre-boite { position: relative; width: min(30rem, 100%); background: var(--blanc-chaud); color: var(--encre); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-m); padding: 1.5rem 1.6rem 1.4rem; } .fenetre-titre { margin: 0 2rem .4rem 0; font-size: 1.3rem; } .fenetre-boite p { margin: .55rem 0 0; color: var(--encre-doux); font-size: .98rem; } .fenetre-fermer { position: absolute; top: .55rem; right: .6rem; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: transparent; color: var(--encre-doux); font-size: 1.5rem; line-height: 1; cursor: pointer; } .fenetre-fermer:hover { background: var(--carte-vive); color: var(--encre); } .fenetre-actions { display: flex; justify-content: flex-end; margin-top: 1.15rem; }   .mas-scene { display: grid; gap: .7rem; margin: .2rem 0 1rem; } .mas-bulle { max-width: 22rem; padding: .75rem 1.05rem; border-radius: var(--r-m); background: var(--raffia); box-shadow: var(--ombre-s); line-height: 1.5; } .mas-bulle--a { justify-self: start; border-bottom-left-radius: 5px; } .mas-bulle--b { justify-self: end; background: var(--blanc-chaud); border-top: 3px solid var(--or); border-bottom-right-radius: 5px; } .mas-bulle [lang="ln"] { font-weight: 600; color: var(--titre); } .mas-bulle--b [lang="ln"] { color: var(--terre); } .mas-bulle-gloss, .mas-bulle-pensee { display: block; margin-top: .15rem; font-size: .84rem; font-style: italic; font-weight: 400; color: var(--encre-doux); } .mas-indice { margin: .1rem 0 0; text-align: center; font-size: .9rem; font-style: italic; color: var(--encre-doux); } .mas-indice[hidden] { display: none; } .mas-trou { display: inline-block; min-width: 3.4rem; padding: 0 .5rem; text-align: center; border-bottom: 2px dashed var(--terre); color: var(--terre); letter-spacing: .12em; } .mas-remplie { display: inline-block; font-weight: 800; color: var(--terre); padding: 0 .15rem; } .mas-remplie--pose { animation: masTombe .4s var(--rebond) both; transform-origin: top center; } @keyframes masTombe { from { opacity: 0; transform: perspective(500px) rotateX(-90deg); } to { opacity: 1; transform: perspective(500px) rotateX(0); } } .mas-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .1rem 0 .2rem; } .mas-chip { font: inherit; font-weight: 700; color: var(--terre); cursor: pointer; background: var(--blanc-chaud); border: 2px solid var(--bord); border-radius: 999px; padding: .4rem .9rem; transition: transform var(--transi), border-color var(--transi), background var(--transi), color var(--transi); } .mas-chip:hover, .mas-chip:focus-visible { transform: translateY(-2px) rotateX(10deg); border-color: var(--terre); } .mas-chip.est-choisi { background: var(--terre); color: #fff; border-color: transparent; } .mas-rep { color: var(--terre); font-weight: 800; } .mas-rep-faux { color: var(--rouge); font-weight: 700; text-decoration: line-through; }  .exv-rouleaux { display: flex; gap: 1.4rem; justify-content: center; } .exv-rouleau { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .exv-rouleau-nom { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-doux); } .exv-fenetre { position: relative; width: 9.5rem; height: 84px; overflow: hidden; perspective: 480px; border: 1px solid var(--bord); border-radius: var(--r-m); background: var(--carte-vive); box-shadow: inset 0 0 14px rgba(6, 42, 82, .08); }  .exv-fenetre::before, .exv-fenetre::after { content: ""; position: absolute; left: 0; right: 0; height: 22px; z-index: 2; pointer-events: none; } .exv-fenetre::before { top: 0; background: linear-gradient(#fff, transparent); } .exv-fenetre::after { bottom: 0; background: linear-gradient(transparent, #fff); } .exv-tambour { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s var(--rebond); } .exv-face { position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; line-height: 1.1; } .exv-face b { font-family: var(--police-titres); font-size: 1.12rem; color: var(--titre); }  .exv-note-pronom { max-width: 560px; margin-inline: auto; font-size: .9rem; font-style: italic; color: var(--encre-doux); border-left: 3px solid var(--or); padding-left: .9rem; text-align: left; } .exv-btn { display: grid; place-items: center; width: 2rem; height: 1.6rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--terre); cursor: pointer; transition: background var(--transi), color var(--transi), transform var(--transi); } .exv-btn:hover { background: var(--terre); color: #fff; } .exv-btn:active { transform: scale(.92); transition-duration: .08s; } .exv-btn .i { width: 1rem; height: 1rem; } .exv-btn .i.est-haut { transform: rotate(180deg); } .exv-actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; flex-wrap: wrap; justify-content: center; }  .exv-bonne { font-size: clamp(1.5rem, 5vw, 2.1rem); } @media (prefers-reduced-motion: reduce) { .exv-tambour { transition: none; } } @media (max-width: 420px) { .exv-carte { min-height: 29rem; } .exv-rouleaux { gap: .8rem; } .exv-fenetre { width: 8rem; } }   .exn-carte { min-height: 24rem; } .exn-affichage { min-height: 4.6rem; display: grid; place-items: center; width: 100%; } .exn-phrase { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }  .exh-affichage { min-height: 4.6rem; display: grid; place-items: center; width: 100%; } .exh-invite { font-family: var(--police-titres); font-weight: 800; color: var(--titre); font-size: clamp(1.6rem, 5.5vw, 2.4rem); text-align: center; overflow-wrap: anywhere; } .exn-phrase--mini .brq { font-size: .76rem; padding: .14rem .45rem; } .exn-cache { font-size: 2rem; letter-spacing: .3em; font-weight: 800; color: var(--encre-doux); font-family: var(--police-titres); } .exn-palettes { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: center; perspective: 600px; } .exn-palette { display: grid; place-items: center; min-width: 2.2rem; height: 3rem; padding: 0 .3rem; font-family: var(--police-titres); font-size: 1.8rem; font-weight: 700; color: var(--or); border-radius: .5rem; box-shadow: var(--ombre-s);  background: linear-gradient(180deg, #17456f 0 48%, rgba(255, 255, 255, .18) 49% 51%, var(--nuit) 52% 100%); transform-origin: center top; animation: paletteTombe .5s var(--rebond) both; } .exn-palettes--mini .exn-palette { min-width: 1.35rem; height: 1.8rem; font-size: 1.05rem; border-radius: .3rem; } .exn-espace { width: .5rem; } .exn-rappel { display: flex; justify-content: center; } .exn-bonne { display: grid; place-items: center; width: 100%; } @keyframes paletteTombe {  0% { transform: rotateX(-85deg); opacity: 0; } 60% { transform: rotateX(14deg); opacity: 1; } 100% { transform: rotateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .exn-palette { animation: none; } } @media (max-width: 420px) { .exn-carte { min-height: 26rem; } .exn-palette { min-width: 1.8rem; height: 2.5rem; font-size: 1.45rem; } }   .jp-scene { perspective: 900px; max-width: 620px; margin: 0 auto; } .jp-scene[hidden] { display: none; } .jp-carte { display: flex; flex-direction: column; align-items: center; gap: .9rem; min-height: 24rem; padding: 1.6rem 1.3rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards; } .jp-carte .quiz-demande { margin: 0; } .jp-sens-ligne { display: flex; align-items: center; gap: .6rem; margin: 0; flex-wrap: wrap; justify-content: center; } .jp-sens { font-family: var(--police-titres); font-weight: 800; color: var(--titre); font-size: clamp(1.15rem, 3.6vw, 1.55rem); line-height: 1.2; } .jp-sens-ligne .quiz-ecouter { margin: 0; }  .jp-ligne { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; min-height: 3rem; padding: .55rem; width: 100%; border: 2px dashed var(--bord); border-radius: var(--r-m); background: rgba(255, 255, 255, .55); transition: border-color var(--transi), box-shadow var(--transi); } .jp-ligne.est-juste { border-color: var(--or); border-style: solid; box-shadow: 0 0 0 3px rgba(242, 183, 5, .25); } .jp-ligne.est-secouee { animation: secouer .4s ease; } .jp-creux { width: 4.6rem; height: 2.2rem; border-radius: var(--r-s); background: var(--sable); border: 1px dashed #d9c6a8; }  .jp-nuage { display: flex; flex-wrap: wrap; gap: .6rem .7rem; justify-content: center; align-content: center; min-height: 7.5rem; width: 100%; transform-style: preserve-3d; } .jp-tuile { padding: .5rem .9rem; cursor: pointer; font-family: var(--police-titres); font-weight: 700; font-size: 1.02rem; color: var(--titre); background: var(--carte-vive); border: 1px solid var(--bord); border-bottom: 3px solid var(--ocre); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi), opacity var(--transi); }  #jp-nuage .jp-tuile { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)); animation: monterCourt .35s var(--rebond) backwards, jpFlotte 3.2s ease-in-out infinite; } #jp-nuage .jp-tuile:hover:not(:disabled) { transform: rotateX(0) rotateY(0) translateZ(46px); border-color: var(--or); box-shadow: var(--ombre-m); } .jp-tuile:disabled { cursor: default; } .jp-tuile.est-estompee { opacity: .38; }  #jp-ligne .jp-tuile { animation: monterCourt .28s var(--rebond) backwards; } #jp-ligne .jp-tuile.est-juste { border-color: var(--or); border-bottom-color: var(--or); box-shadow: 0 0 0 2px rgba(242, 183, 5, .3), var(--ombre-s); animation: pop .45s var(--rebond) backwards; } #jp-ligne .jp-tuile.est-revelee { animation: jpRevele .5s var(--rebond) backwards; } .jp-verdict { margin: 0; min-height: 1.4em; font-weight: 700; font-family: var(--police-titres); letter-spacing: .01em; } .jp-verdict.est-juste { color: #1f8a4c; } .jp-verdict.est-encore { color: #b5701f; } .jp-verdict.est-rate { color: var(--rouge); } .jp-verdict:not(:empty) { animation: pop .4s var(--rebond); } @keyframes jpFlotte {  0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } } @keyframes jpRevele {  from { opacity: 0; transform: rotateY(-80deg); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .jp-carte, #jp-nuage .jp-tuile, #jp-ligne .jp-tuile { animation: none; } } @media (max-width: 420px) { .jp-carte { padding: 1.2rem .8rem; min-height: 25rem; } .jp-creux { width: 3.9rem; height: 2rem; } .jp-tuile { font-size: .92rem; padding: .45rem .7rem; } }   .bw-scene { max-width: 620px; margin: 0 auto; } .bw-scene[hidden] { display: none; } .bw-carte { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.3rem 1.1rem 1.6rem; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 5px solid var(--bleu); border-radius: var(--r-l); box-shadow: var(--ombre-m); animation: quizEntre .55s var(--rebond) backwards; }  .bw-fleuve { position: relative; width: 100%; height: 7.2rem; overflow: hidden; border-radius: var(--r-m); perspective: 700px; background: linear-gradient(#eaf4ff 0 55%, #9ec9ee 55% 100%); } .bw-eau { position: absolute; left: -10%; right: -10%; bottom: 0; height: 45%; background: radial-gradient(14px 9px at 14px 6px, #7db4e2 45%, transparent 47%) 0 0/56px 18px repeat-x, linear-gradient(#8ec0ea, #5f9fd6); animation: bwCourant 7s linear infinite; z-index: 2; opacity: .92; } .bw-pirogue { position: absolute; left: 50%; bottom: 34%; width: 8.2rem; z-index: 1; margin-left: -4.1rem; transform: translateY(calc(var(--enfonce, 0) * 5px)); transition: transform .45s ease; animation: bwTangue 3.6s ease-in-out infinite; } .bw-pirogue svg { width: 100%; height: auto; display: block; }  .bw-pirogue.est-touchee { animation: bwPlonge .55s ease, bwTangue 3.6s ease-in-out .55s infinite; }  .bw-pirogue.est-sauvee { animation: none;  transform: translateX(300%) translateY(-10px) scale(.6); transition: transform 1.4s ease-in; } .bw-pirogue.est-coulee { animation: none; z-index: 1; transform: translateY(64px) rotate(24deg); opacity: .45; transition: transform 1.2s ease-in, opacity 1.2s ease-in; }  .bw-mot { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; perspective: 600px; min-height: 2.6rem; } .bw-case { display: block; width: 2.15rem; height: 2.6rem; } .bw-case-int { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s var(--rebond); } .bw-case.est-vue .bw-case-int { transform: rotateX(180deg); } .bw-case .bw-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-s); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; } .bw-face--dos { background: var(--sable); color: #c9b28d; border: 1px dashed #d9c6a8; } .bw-face--lettre { background: var(--carte-vive); color: var(--titre); border: 1px solid var(--bord); border-bottom: 3px solid var(--or); transform: rotateX(180deg); } .bw-case.est-manquee .bw-face--lettre { color: var(--rouge); border-bottom-color: var(--rouge); }  .bw-clavier { display: flex; flex-direction: column; gap: .34rem; width: 100%; } .bw-rangee { display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap; } .bw-touche { min-width: 2.15rem; height: 2.3rem; padding: 0 .45rem; cursor: pointer; font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--titre); background: var(--carte-vive); border: 1px solid var(--bord); border-bottom: 3px solid #cbd8e6; border-radius: var(--r-s); transition: transform .12s ease, background var(--transi), border-color var(--transi), opacity var(--transi); } .bw-touche--voyelle { background: #fdf3d7; border-bottom-color: var(--or); } .bw-touche--paire { background: #f8e9de; border-bottom-color: var(--ocre); font-size: .92rem; } .bw-touche:not(:disabled):hover { transform: translateY(-2px); border-color: var(--or); } .bw-touche:not(:disabled):active { transform: translateY(1px); border-bottom-width: 1px; } .bw-touche:disabled { cursor: default; } .bw-touche.est-trouvee { background: #e5f4ea; border-color: #2a9d5c; border-bottom-color: #2a9d5c; color: #1a7a43; } .bw-touche.est-ratee { background: #fdecee; border-color: var(--rouge); border-bottom-color: var(--rouge); color: var(--rouge); opacity: .6; } @keyframes bwCourant {  to { background-position-x: -56px, 0; } } @keyframes bwTangue {  0%, 100% { rotate: -2.2deg; } 50% { rotate: 2.2deg; } } @keyframes bwPlonge {  30% { rotate: -7deg; margin-top: 7px; } 65% { rotate: 4deg; } } @media (prefers-reduced-motion: reduce) { .bw-carte, .bw-pirogue, .bw-eau { animation: none; } .bw-case-int, .bw-pirogue { transition: none; } } @media (max-width: 420px) { .bw-carte { padding: 1rem .6rem 1.3rem; } .bw-fleuve { height: 6rem; } .bw-case { width: 1.85rem; height: 2.3rem; } .bw-case .bw-face { font-size: 1.05rem; } .bw-touche { min-width: 1.9rem; height: 2.15rem; font-size: .92rem; padding: 0 .3rem; } }  .mc-scene[hidden] { display: none; } .mc-consigne-jeu { text-align: center; font-weight: 600; color: var(--encre-doux); margin: 0 0 1rem; min-height: 1.4em; } .mc-plateau { display: grid; gap: 1.4rem; align-items: start; } @media (min-width: 860px) { .mc-plateau { grid-template-columns: minmax(0, 1fr) 20rem; } } .mc-grille-zone { display: grid; gap: .9rem; justify-items: center; }  .mc-grille { display: grid; gap: 3px; justify-content: center; grid-template-columns: repeat(var(--cols, 10), var(--case, 2.2rem)); } .mc-grille.est-faux { animation: mcShake .4s; } .mc-vide { width: var(--case, 2.2rem); height: var(--case, 2.2rem); } .mc-case { position: relative; width: var(--case, 2.2rem); height: var(--case, 2.2rem); padding: 0; border: none; background: none; cursor: pointer; perspective: 500px; } .mc-num { position: absolute; top: 1px; left: 3px; z-index: 2; font-size: .56rem; font-weight: 700; color: var(--encre-doux); line-height: 1; pointer-events: none; } .mc-lettre { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s var(--rebond); } .mc-case.est-verrouille .mc-lettre { transform: rotateX(180deg); } .mc-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; border-radius: 6px; font-family: var(--police-titres); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; } .mc-face--dos { background: var(--carte-vive, #fff); border: 1.5px solid var(--bord); color: var(--titre); } .mc-face--avant { transform: rotateX(180deg); background: var(--or); border: 1.5px solid var(--or-fonce, #c79a2e); color: var(--nuit); } .mc-case.est-actif .mc-face--dos { border-color: var(--bleu); background: var(--bleu-clair, #eaf2fb); } .mc-case.est-curseur .mc-face--dos { border-color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }  .mc-clavier { display: flex; flex-direction: column; gap: .34rem; width: 100%; max-width: 30rem; } .mc-rangee { display: flex; gap: .34rem; justify-content: center; flex-wrap: wrap; } .mc-touche { min-width: 2.15rem; height: 2.4rem; padding: 0 .5rem; border: 1px solid var(--bord); border-bottom-width: 3px; border-radius: 9px; background: var(--carte-vive, #fff); font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; color: var(--encre); cursor: pointer; transition: transform var(--transi), border-color var(--transi); } .mc-touche--voyelle { background: #fdf3d7; border-bottom-color: var(--or); } .mc-touche--eff { background: #f8e9de; border-bottom-color: var(--ocre); } .mc-touche:hover { transform: translateY(-2px); border-color: var(--or); } .mc-touche:active { transform: translateY(1px); border-bottom-width: 1px; } .mc-passer { background: var(--sable); border: 1px solid var(--bord); color: var(--encre-doux); font-weight: 700; }  .mc-defs { text-align: left; } .mc-defs-titre { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--titre); } .mc-defs-titre:not(:first-child) { margin-top: 1.2rem; } .mc-def-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .mc-def { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; cursor: pointer; color: var(--encre); border: 1px solid var(--bord); border-radius: var(--r-m); background: var(--blanc-chaud); padding: .4rem .55rem; transition: border-color var(--transi), background var(--transi); } .mc-def:hover { border-color: var(--or); } .mc-def.est-actif { border-color: var(--bleu); background: var(--bleu-clair, #eaf2fb); } .mc-def.est-resolu { opacity: .55; } .mc-def.est-resolu .mc-def-sens { text-decoration: line-through; } .mc-def-num { font-family: var(--police-titres); font-weight: 800; color: var(--bleu); min-width: 1.4rem; } .mc-def-sens { flex: 1; font-size: .92rem; } .mc-def-son { display: inline-flex; color: var(--bleu); } .mc-def-son .i { width: 1.15rem; height: 1.15rem; } @keyframes mcShake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} } @media (prefers-reduced-motion: reduce) { .mc-lettre { transition: none; } .mc-grille.est-faux { animation: none; } } @media (max-width: 520px) { .mc-grille { --case: 1.85rem; } .mc-face { font-size: .98rem; } .mc-touche { min-width: 1.95rem; height: 2.2rem; font-size: .95rem; } }   .mk-verbe { display: flex; flex-direction: column; align-items: center; gap: .55rem; width: 100%; } .mk-champ-ligne { flex: 1; display: flex; min-width: 0; } .mk-champ-ligne .exo-champ { flex: 1; min-width: 0; } .mk-champ-ligne[hidden] { display: none; }  .mk-tag { flex: none; align-self: center; padding: .16rem .55rem; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap; color: #fff; } .mk-tag--voc { background: var(--bleu); } .mk-tag--verbe { background: var(--ocre); } .mk-tag--nombre { background: var(--or); color: var(--nuit); } .mk-tag--masolo { background: var(--terre); } .mk-masolo { width: 100%; }   .page-mini { max-width: 600px; margin: 0 auto; text-align: center; } .page-mini p { color: var(--encre-doux); font-size: 1.1rem; margin: 0 0 1.6rem; } .page-mini p:last-child { margin-bottom: 0; }   .part-section .volet { animation: part-volet3d .5s var(--rebond) both; transform-origin: top center; } @keyframes part-volet3d { from { opacity: 0; transform: perspective(1100px) rotateX(-16deg) translateY(16px); } to { opacity: 1; transform: perspective(1100px) rotateX(0) translateY(0); } }  .part-carte { max-width: 640px; margin: 0 auto; text-align: center; background: var(--blanc-chaud); border: 1px solid var(--bord); border-top: 4px solid var(--or); border-radius: var(--r-m); padding: 2rem 1.7rem; box-shadow: 0 14px 34px rgba(44, 33, 23, .12); display: grid; gap: .9rem; justify-items: center; } .part-carte h2 { font-size: 1.4rem; color: var(--titre); margin: 0; } .part-carte p { color: var(--encre-doux); margin: 0; max-width: 46ch; } .part-carte-icone { width: 2.4rem; height: 2.4rem; color: var(--terre); } .part-carte .btn { margin-top: .4rem; } .part-puces { list-style: none; margin: .2rem 0 .3rem; padding: 0; display: grid; gap: .55rem; text-align: left; } .part-puces li { position: relative; padding-left: 1.9rem; color: var(--encre); font-size: .98rem; } .part-puces li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--or); color: var(--nuit); font-weight: 700; font-size: .78rem; display: grid; place-items: center; }  .part-form { max-width: 560px; margin: 0 auto; display: grid; gap: 1.1rem; } .part-form-intro { text-align: center; color: var(--encre-doux); margin: 0; } .part-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .part-chips legend { width: 100%; text-align: center; font-weight: 700; color: var(--titre); margin-bottom: .5rem; padding: 0; } .part-chip { border: 2px solid var(--bord); background: var(--blanc-chaud); color: var(--encre); border-radius: 999px; padding: .4rem .95rem; font-weight: 700; font-size: .9rem; font-family: var(--police-titres); cursor: pointer; transition: transform var(--transi), background var(--transi), border-color var(--transi), color var(--transi); } .part-chip:hover { transform: translateY(-2px); } .part-chip.est-actif { background: var(--terre); border-color: transparent; color: #fff; animation: pop .3s var(--rebond); } .part-champs { display: grid; gap: 1rem; } @media (min-width: 560px) { .part-champs { grid-template-columns: 1fr 1fr; } } .part-label { display: grid; gap: .35rem; text-align: left; } .part-label > span { font-weight: 700; color: var(--titre); font-size: .92rem; } .part-message { resize: vertical; min-height: 8.5rem; line-height: 1.5; font-size: 1rem; } .part-consent { display: flex; align-items: flex-start; gap: .6rem; text-align: left; background: var(--sable); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .8rem 1rem; color: var(--encre); font-size: .92rem; cursor: pointer; } .part-consent input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--terre); } .part-envoyer { justify-self: center; } .part-form-note { text-align: center; color: var(--encre-doux); font-size: .86rem; font-style: italic; margin: 0; }  .part-don { border-top-color: var(--rouge); } .part-coeur { font-size: 2.2rem; color: var(--rouge); line-height: 1; animation: battement 2.6s ease-in-out infinite; } @keyframes battement { 0%, 34%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1.06); } } .part-don-actions { display: grid; gap: 1.2rem; justify-items: center; margin-top: .3rem; } @media (min-width: 520px) { .part-don-actions { grid-template-columns: auto auto; align-items: center; } } .part-qr { margin: 0; display: grid; justify-items: center; gap: .45rem; } .part-qr img { width: 140px; height: 140px; border-radius: var(--r-m); border: 1px solid var(--bord); background: #fff; padding: .3rem; box-shadow: var(--ombre-s); } .part-qr figcaption { font-size: .82rem; color: var(--encre-doux); max-width: 16ch; line-height: 1.35; } .part-don-merci { color: var(--terre); font-weight: 700; margin: 0; } @media (prefers-reduced-motion: reduce) { .part-section .volet { animation: none; } .part-coeur { animation: none; } }   .faq-confiance-section { padding-bottom: 0; } .faq-confiance { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; } .faq-badge { display: inline-flex; align-items: center; gap: .55rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: 999px; padding: .55rem 1.05rem; box-shadow: var(--ombre-s); font-weight: 700; font-size: .9rem; color: var(--titre); } .faq-badge .i { width: 1.15rem; height: 1.15rem; color: var(--terre); flex: none; } .faq-badge-pic { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--or); color: var(--nuit); font-weight: 800; font-size: .76rem; } .faq-enveloppe { max-width: 760px; }  .faq-section .faq-groupe-titre { color: var(--titre); margin: 4.5rem 0 1.1rem; padding-left: .8rem; border-left: 4px solid var(--or); } .faq-section .faq-groupe-titre:first-of-type { margin-top: 1rem; } .faq-liste { display: grid; gap: .7rem; } .faq-item { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); overflow: hidden; transition: border-color var(--transi), box-shadow var(--transi); } .faq-item:hover { border-color: var(--ocre); box-shadow: var(--ombre-m); } .faq-item.est-ouvert { border-color: var(--ocre); } .faq-q { width: 100%; display: flex; align-items: center; gap: 1rem; justify-content: space-between; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; font-weight: 700; font-size: 1.02rem; color: var(--titre); font-family: var(--police-titres); padding: 1rem 1.2rem; } .faq-q:hover { background: rgba(224, 151, 63, .08); } .faq-chevron { width: 1.2rem; height: 1.2rem; color: var(--ocre); flex: none; transition: transform var(--transi); } .faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } .faq-r-boite { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); } .faq-item.est-ouvert .faq-r-boite { grid-template-rows: 1fr; } .faq-r { min-height: 0; overflow: hidden; padding: 0 1.2rem; transform-origin: top center; transform: perspective(900px) rotateX(-7deg); opacity: .35; transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease, padding .4s cubic-bezier(.4, 0, .2, 1); } .faq-item.est-ouvert .faq-r { transform: perspective(900px) rotateX(0); opacity: 1; padding: .1rem 1.2rem 1.1rem; } .faq-r p { margin: 0; color: var(--encre-doux); line-height: 1.7; } @media (prefers-reduced-motion: reduce) { .faq-r { transition: opacity .2s ease, padding .2s ease; transform: none; } .faq-r-boite { transition: none; } }   .acc-fond { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center; overflow: hidden; } .acc-afrique { width: min(130vw, 860px); height: auto; fill: var(--terre); opacity: .07; filter: drop-shadow(0 20px 60px rgba(193, 90, 52, .25)); animation: accFlotte 16s ease-in-out infinite; } @keyframes accFlotte { 0%, 100% { transform: translateY(-1.4%) rotate(-1deg); } 50% { transform: translateY(1.4%) rotate(1deg); } }  .action-installer[hidden] { display: none; } .acc-partager.est-copie { background: #1f8a4c; color: #fff; }  .acc [data-apparait]:not(.est-visible) { transform: perspective(1000px) rotateX(10deg) translateY(34px); }  .acc-rubans { position: relative; padding: 1.6rem 0 .4rem; overflow: hidden; } .acc-ruban { width: 104%; margin-left: -2%; background: linear-gradient(100deg, var(--nuit), #17456f); color: #f7d572; box-shadow: var(--ombre-s); overflow: hidden; padding: .5rem 0; } .acc-ruban-1 { transform: rotate(-1.4deg); } .acc-ruban-2 { transform: rotate(1deg); margin-top: .55rem; color: var(--ocre); background: linear-gradient(100deg, #17456f, var(--nuit)); } .acc-ruban-file { display: flex; width: max-content; animation: accDefile 36s linear infinite; } .acc-ruban-2 .acc-ruban-file { animation-direction: reverse; animation-duration: 42s; } .acc-ruban-groupe { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; white-space: nowrap; } .acc-ruban-groupe i { font-style: normal; font-size: .55rem; opacity: .55; }  .acc-mots-jeu { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); max-width: 980px; margin-inline: auto; } @media (min-width: 620px) { .acc-mots-jeu { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .acc-mots-jeu { grid-template-columns: repeat(6, 1fr); } } .acc-mot3d { position: relative; height: 150px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; perspective: 800px; animation: accLevite 5.5s ease-in-out infinite; } .acc-mot3d:nth-child(2) { animation-delay: -1.1s; } .acc-mot3d:nth-child(3) { animation-delay: -2.3s; } .acc-mot3d:nth-child(4) { animation-delay: -3.4s; } .acc-mot3d:nth-child(5) { animation-delay: -4.2s; } .acc-mot3d:nth-child(6) { animation-delay: -1.8s; } .acc-mot3d-int { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s var(--rebond); } .acc-mot3d:not(.est-tournee):hover .acc-mot3d-int { transform: rotateY(24deg); } .acc-mot3d.est-tournee .acc-mot3d-int { transform: rotateY(180deg); } .acc-mot3d-face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; align-content: center; gap: .3rem; border-radius: var(--r-m); font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; } .acc-mot3d-avers { color: var(--or); background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(155deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; border: 1px solid rgba(242, 183, 5, .4); box-shadow: 0 10px 24px rgba(12, 35, 64, .3); } .acc-mot3d-son { width: 1.05rem; height: 1.05rem; opacity: .65; } .acc-mot3d-revers { transform: rotateY(180deg); color: var(--nuit); background: linear-gradient(155deg, #ffd75e, var(--or)); box-shadow: 0 10px 24px rgba(242, 183, 5, .35); }  .acc-portes { display: grid; gap: 1.1rem; margin-top: 2rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .acc-portes-2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .acc-portes-3 { grid-template-columns: repeat(3, 1fr); } }  @media (min-width: 640px) { .acc-portes-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .acc-portes-4 { grid-template-columns: repeat(4, 1fr); } }  .acc-apprendre { padding-bottom: 0; } .acc-porte { display: flex; flex-direction: column; overflow: hidden; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); box-shadow: var(--ombre-s); transition: box-shadow var(--transi); will-change: transform;  } .acc-porte:hover { box-shadow: var(--ombre-m); } .acc-scene { position: relative; min-height: 150px; overflow: hidden; display: grid; place-items: center; perspective: 700px; background: radial-gradient(420px 200px at 50% 120%, rgba(242, 183, 5, .18), transparent 70%), url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(160deg, #17456f, var(--nuit)); background-blend-mode: normal, soft-light, normal; } .acc-porte-corps { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.35rem 1.4rem; } .acc-porte-corps h3 { font-size: 1.28rem; margin: 0; } .acc-porte-corps p { margin: 0; color: var(--encre-doux); font-size: .96rem; } .acc-porte-liens { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; } .acc-porte-liens .i { width: .95em; height: .95em; }  .btn-fantome-sombre { background: transparent; color: var(--terre); border-color: var(--terre); padding: .5rem 1rem; font-size: .92rem; } .btn-fantome-sombre:hover { background: var(--terre); color: #fff; }  .acc-pile { position: relative; width: 128px; height: 76px; transform-style: preserve-3d; transform: rotateX(14deg); } .acc-pile-carte { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem; color: var(--nuit); background: linear-gradient(160deg, var(--blanc-chaud), var(--sable)); box-shadow: 0 8px 18px rgba(0, 0, 0, .3); } .acc-pile-c3 { transform: translateY(16px) translateZ(-28px) rotate(-4deg); opacity: .55; } .acc-pile-c2 { transform: translateY(8px) translateZ(-14px) rotate(3deg); opacity: .8; } .acc-pile-flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: accFlipLoop 6s ease-in-out infinite; } .acc-pile-avers, .acc-pile-revers { backface-visibility: hidden; } .acc-pile-revers { transform: rotateY(180deg); background: linear-gradient(160deg, #ffd75e, var(--or)); }  .acc-bulles { display: grid; gap: .55rem; width: 138px; transform: rotateX(10deg); transform-style: preserve-3d; } .acc-bulle { width: max-content; max-width: 100%; padding: .42rem .8rem; border-radius: 14px; font-family: var(--police-titres); font-weight: 700; font-size: 1.02rem; background: rgba(6, 18, 36, .55); color: #e7eef7; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); opacity: 0; animation: accBulle 6s ease-in-out infinite; } .acc-bulle-1 { border-bottom-left-radius: 4px; } .acc-bulle-2 { justify-self: end; border-bottom-right-radius: 4px; background: linear-gradient(160deg, #ffd75e, var(--or)); color: var(--nuit); animation-delay: 1.2s; } .acc-bulle-3 { border-bottom-left-radius: 4px; animation-delay: 2.4s; }  .acc-nzela { position: relative; width: 168px; height: 96px; transform: rotateX(10deg); transform-style: preserve-3d; } .acc-etape { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; background: rgba(6, 18, 36, .55); color: #9fb4cc; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); animation: accEtape 6s ease-in-out infinite; } .acc-etape-1 { left: 2%; bottom: 4%; } .acc-etape-2 { left: 28%; bottom: 34%; animation-delay: .9s; } .acc-etape-3 { left: 54%; bottom: 12%; animation-delay: 1.8s; } .acc-etape-4 { left: 78%; bottom: 44%; font-size: 1.25rem; animation-delay: 2.7s; }  .acc-de { position: relative; width: 58px; height: 58px; transform-style: preserve-3d;  transform: rotateX(-24deg) rotateY(32deg) rotateZ(-8deg); animation: accDeRoule 12s linear infinite; } .acc-de-face { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(160deg, #fffdf8, #ecdfc6); border: 1px solid rgba(12, 35, 64, .25); box-shadow: inset 0 0 10px rgba(12, 35, 64, .12); }  .acc-de-f1 { transform: translateZ(29px); background: radial-gradient(circle 5px at 50% 50%, var(--rouge) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); } .acc-de-f2 { transform: rotateY(90deg) translateZ(29px); background: radial-gradient(circle 4.5px at 30% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 70%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); } .acc-de-f3 { transform: rotateY(180deg) translateZ(29px); background: radial-gradient(circle 4.5px at 26% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 50% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 74% 74%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); } .acc-de-f4 { transform: rotateY(-90deg) translateZ(29px); background: radial-gradient(circle 4.5px at 30% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 30%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 70%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 70%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); } .acc-de-f5 { transform: rotateX(90deg) translateZ(29px); background: radial-gradient(circle 4.5px at 28% 28%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 72% 28%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 50% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 28% 72%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 72% 72%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); } .acc-de-f6 { transform: rotateX(-90deg) translateZ(29px); background: radial-gradient(circle 4.5px at 30% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 26%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 50%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 30% 74%, var(--nuit) 98%, transparent), radial-gradient(circle 4.5px at 70% 74%, var(--nuit) 98%, transparent), linear-gradient(160deg, #fffdf8, #ecdfc6); }  .acc-livre { position: relative; width: 120px; height: 78px; transform-style: preserve-3d; transform: rotateX(38deg); } .acc-livre-plat { position: absolute; inset: -6px -6px -8px; border-radius: 8px; background: linear-gradient(160deg, #1c5488, var(--indigo)); box-shadow: 0 14px 26px rgba(0, 0, 0, .38); } .acc-livre-feuille { position: absolute; inset: 0; background: linear-gradient(90deg, #e9dfc8 0 49.6%, #d9cbab 49.6% 50.4%, #f5eeda 50.4% 100%); border-radius: 4px; } .acc-livre-page { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; background: linear-gradient(100deg, #fffdf8, #efe6cf); border-radius: 0 4px 4px 0; transform-origin: left center; animation: accPageTourne 5.4s ease-in-out infinite; } .acc-livre-p2 { animation-delay: .35s; opacity: .92; } .acc-livre-p3 { animation-delay: .7s; opacity: .85; } .acc-livre-titre { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; font-family: var(--police-titres); font-weight: 700; font-size: .95rem; color: #f7d572; letter-spacing: .12em; text-transform: uppercase; } .acc-scene-bible { perspective: 500px; }  .acc-lettre { position: absolute; font-family: var(--police-titres); font-weight: 700; line-height: 1; text-shadow: 0 8px 22px rgba(0, 0, 0, .45); animation: accLettreFlotte 6s ease-in-out infinite; } .acc-lettre-1 { left: 22%; top: 26%; font-size: 3.2rem; color: var(--or); } .acc-lettre-2 { left: 56%; top: 14%; font-size: 2.3rem; color: var(--ocre); animation-delay: -2s; } .acc-lettre-3 { left: 68%; top: 48%; font-size: 2.8rem; color: #9cc4ef; animation-delay: -3.6s; } .acc-lettre-4 { left: 38%; top: 54%; font-size: 1.9rem; color: #e98b63; animation-delay: -4.8s; }  .acc-rouleau { height: 66px; overflow: hidden; padding-inline: 1.2rem; border-radius: 12px; background: rgba(6, 18, 36, .55); border: 1px solid rgba(242, 183, 5, .3); -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent); } .acc-rouleau-liste { display: grid; animation: accRouleau 6.5s ease-in-out infinite; } .acc-rouleau-liste span { height: 66px; display: flex; align-items: center; gap: .7rem; font-family: var(--police-titres); font-weight: 700; font-size: 1.25rem; color: #e7eef7; } .acc-rouleau-liste b { color: var(--or); font-size: 1.7rem; }  .acc-pastille { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: linear-gradient(160deg, #27a55d, #1f8a4c); box-shadow: 0 12px 26px rgba(31, 138, 76, .45); animation: pouls 3.6s ease-in-out infinite; } .acc-coche { width: 36px; height: 36px; } .acc-coche path { stroke-dasharray: 24; animation: accCoche 3.6s ease-in-out infinite; } .acc-etoile { position: absolute; color: var(--or); animation: scintille 2.4s ease-in-out infinite; } .acc-etoile-1 { left: 28%; top: 24%; font-size: 1.3rem; } .acc-etoile-2 { right: 26%; bottom: 22%; font-size: 1rem; animation-delay: -1.2s; }  .acc-platine { transform-style: preserve-3d; transform: rotateX(52deg); } .acc-vinyle { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle, #10131a 0 2px, #232a36 2px 4px); box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 255, 255, .06); animation: tourner 5s linear infinite; } .acc-vinyle::after {  content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent 0 40deg, rgba(255, 255, 255, .14) 60deg, transparent 90deg 220deg, rgba(255, 255, 255, .08) 240deg, transparent 270deg); } .acc-vinyle-label { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #ffd75e, var(--or) 70%); color: var(--nuit); font-family: var(--police-titres); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; box-shadow: inset 0 0 0 2px rgba(12, 35, 64, .3); } .acc-scene-hist { perspective: 460px; }  .acc-coeur { position: relative; width: 44px; height: 44px; background: linear-gradient(160deg, var(--rouge), var(--terre)); transform: rotate(45deg); border-radius: 0 8px 0 8px; animation: pouls 1.7s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(206, 17, 38, .5)); } .acc-coeur::before, .acc-coeur::after { content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%; background: inherit; } .acc-coeur::before { left: -22px; top: 0; } .acc-coeur::after { left: 0; top: -22px; } .acc-onde { position: absolute; width: 76px; height: 76px; border-radius: 50%; border: 2px solid rgba(242, 183, 5, .8); animation: accOnde 1.7s ease-out infinite; }   .acc-vivant { padding-block: clamp(1.6rem, 4vw, 2.4rem); } .acc-vivant-carte { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-l); padding: clamp(2rem, 6vw, 3.2rem); color: #fff; box-shadow: var(--ombre-m); background: url("/medias/motif-kuba.svg") 0 0/48px repeat, linear-gradient(150deg, #17456f, var(--nuit)); background-blend-mode: soft-light, normal; } .acc-vivant-carte::before {  content: ""; position: absolute; top: -46%; left: 50%; width: 460px; height: 420px; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(242, 183, 5, .22), transparent 70%); } .acc-stats { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem .8rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .acc-stats { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .acc-stats { grid-template-columns: repeat(6, 1fr); } } .acc-stats li { display: grid; gap: .15rem; } .acc-stat-nb { font-family: var(--police-titres); font-weight: 800; line-height: 1; font-size: clamp(1.9rem, 4vw, 2.5rem); color: var(--or); } .acc-stat-label { font-size: .82rem; color: #c9d6e8; } .acc-compteur { position: relative; margin-top: 1.8rem; padding-top: 1.7rem; border-top: 1px solid rgba(255, 255, 255, .14); } .acc-compteur-nb { margin: 0; display: grid; gap: .15rem; } .acc-nombre { font-family: var(--police-titres); font-weight: 800; line-height: 1; font-size: clamp(2.6rem, 9vw, 4.4rem); background: linear-gradient(120deg, #ffd75e, var(--or), #f79d2c); -webkit-background-clip: text; background-clip: text; color: transparent; } .acc-compteur-label { font-weight: 700; color: #fff; font-size: 1.02rem; } .acc-compteur-invite, .acc-compteur-indispo { color: #aebfd6; margin: .7rem 0 0; } .acc-compteur-indispo { display: none; } .acc-compteur.est-indispo .acc-compteur-nb, .acc-compteur.est-indispo .acc-compteur-invite { display: none; } .acc-compteur.est-indispo .acc-compteur-indispo { display: block; }  .acc-progression { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); } .acc-prog-etoile { width: 22px; height: 22px; flex: none; fill: var(--or); filter: drop-shadow(0 3px 8px rgba(242, 183, 5, .4)); } .acc-prog-texte { margin: 0; color: #e8eefb; font-weight: 700; } .acc-prog-lien { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--or); border: 1px solid rgba(242, 183, 5, .55); border-radius: 999px; padding: .3rem .95rem; text-decoration: none; transition: background var(--transi), transform var(--transi); } .acc-prog-lien:hover { background: rgba(242, 183, 5, .14); transform: translateY(-2px); } .acc-prog-lien .i { width: 1em; height: 1em; }  .acc-mdj { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); } .acc-mdj-titre { margin: 0; color: var(--or); font-family: var(--police-titres, inherit); font-weight: 800; } .acc-mdj-ecouter { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; cursor: pointer; padding: 0; color: #fff; font: inherit; font-weight: 800; font-size: 1.15rem; } .acc-mdj-ecouter .i { width: 1.05em; height: 1.05em; color: var(--or); } .acc-mdj-ecouter:hover span { text-decoration: underline; text-underline-offset: 4px; } .acc-mdj-sens { color: #e8eefb; } .acc-mdj-sens::before { content: '— '; opacity: .65; } .acc-mdj-partager { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; color: var(--or); background: none; cursor: pointer; border: 1px solid rgba(242, 183, 5, .55); border-radius: 999px; padding: .3rem .95rem; transition: background var(--transi), transform var(--transi); } .acc-mdj-partager:hover { background: rgba(242, 183, 5, .14); transform: translateY(-2px); } .acc-mdj-partager .i { width: 1em; height: 1em; }  .phr-liste { display: grid; gap: .65rem; max-width: 980px; margin-inline: auto; } @media (min-width: 760px) { .phr-liste { grid-template-columns: 1fr 1fr; } } .phr-ln { display: flex; align-items: center; gap: .5rem; } .phr { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .95rem; row-gap: .15rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .8rem 1.05rem; box-shadow: var(--ombre-s); } .phr .phr-son { grid-row: 1 / span 2; } .phr-ln { margin: 0; font-weight: 800; font-size: 1.1rem; color: var(--terre); } .phr-sens { margin: 0; grid-column: 2; color: var(--encre-doux); }  .profils-zone { text-align: center; } .profils-zone--page { max-width: 680px; margin: 0 auto 1.6rem; } .profils-titre { margin: 0 0 .55rem; font-weight: 800; color: var(--titre); font-family: var(--police-titres, inherit); } .profils-chips { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: .65rem; } .profils-chip { display: inline-flex; align-items: center; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); } .profils-chip.est-actif { border-color: var(--or); box-shadow: 0 0 0 2px rgba(242, 183, 5, .22); } .profils-choix { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--encre); padding: .28rem .25rem .28rem .85rem; } .profils-chip.est-actif .profils-choix { color: var(--or-fonce); } .profils-suppr { border: 0; background: none; cursor: pointer; color: var(--encre-doux); font: inherit; padding: .28rem .6rem .28rem .25rem; } .profils-suppr:hover { color: var(--rouge); } .profils-form { display: inline-flex; gap: .45rem; align-items: center; } .profils-form input { border: 1px solid var(--bord); border-radius: 999px; padding: .3rem .95rem; font: inherit; background: var(--carte-vive); color: var(--encre); width: 150px; } .profils-form input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 224, .15); } .profils-ajout { border: 1px solid rgba(242, 183, 5, .55); border-radius: 999px; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--or-fonce); padding: .3rem .95rem; transition: background var(--transi), transform var(--transi); } .profils-ajout:hover { background: rgba(242, 183, 5, .14); transform: translateY(-2px); } .profils-note { margin: .6rem 0 0; font-size: .85rem; color: var(--encre-doux); }  .acc-vivant-carte .profils-zone { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); } .acc-vivant-carte .profils-titre { color: var(--or); } .acc-vivant-carte .profils-chip { background: none; border-color: rgba(255, 255, 255, .3); } .acc-vivant-carte .profils-choix { color: #e8eefb; } .acc-vivant-carte .profils-chip.est-actif .profils-choix { color: var(--or); } .acc-vivant-carte .profils-suppr { color: rgba(232, 238, 251, .7); } .acc-vivant-carte .profils-form input { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); } .acc-vivant-carte .profils-form input::placeholder { color: rgba(232, 238, 251, .6); } .acc-vivant-carte .profils-ajout { color: var(--or); } .acc-vivant-carte .profils-note { color: rgba(232, 238, 251, .75); }  .pc-total { text-align: center; font-weight: 800; color: var(--titre); margin: 0 0 1.6rem; font-size: 1.15rem; } .pc-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: .8rem; } @media (min-width: 760px) { .pc-liste { grid-template-columns: 1fr 1fr; } } .pc-etape { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: .75rem 1rem; box-shadow: var(--ombre-s); } .pc-num { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-top: .15rem; border-radius: 999px; font-weight: 800; color: var(--titre); border: 2px solid var(--bord); background: var(--sable); } .pc-etape.est-en-cours { border-color: var(--or); box-shadow: var(--ombre-m); } .pc-etape.est-en-cours .pc-num { border-color: var(--or); background: var(--or); color: var(--nuit); } .pc-etape.est-faite .pc-num { border-color: var(--or-fonce); background: var(--blanc-chaud); color: var(--or-fonce); } .pc-theme { margin: 0 0 .1rem; font-size: 1.05rem; } .pc-objectif { margin: 0 0 .3rem; color: var(--encre-doux); } .pc-bravo { color: var(--or-fonce); } .pc-jauge { height: 7px; border-radius: 999px; background: var(--bord); overflow: hidden; margin-bottom: .5rem; } .pc-jauge span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--or), var(--terre)); transition: width var(--transi); } .pc-actions { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .pc-lien { display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; color: var(--or-fonce); border: 1px solid var(--bord); border-radius: 999px; padding: .3rem .95rem; transition: background var(--transi), border-color var(--transi), transform var(--transi); } .pc-lien:hover { border-color: var(--or); background: rgba(242, 183, 5, .12); transform: translateY(-2px); }  .pc-reset { display: inline-flex; align-items: center; margin-left: auto; font: inherit; font-weight: 600; color: var(--encre-doux); background: none; border: 0; padding: .3rem .35rem; cursor: pointer; border-radius: 999px; transition: color var(--transi); } .pc-reset:hover { color: var(--terre); text-decoration: underline; }  .pc-libres { max-width: 900px; margin: 2.4rem auto 0; } .pc-libres-titre { text-align: center; font-size: 1.3rem; margin: 0 0 .3rem; } .pc-libres-intro { text-align: center; color: var(--encre-doux); margin: 0 auto 1.3rem; max-width: 46ch; } .pc-libres-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } @media (min-width: 760px) { .pc-libres-grille { grid-template-columns: 1fr 1fr; } } .pc-carte .pc-num { font-weight: 700; color: var(--encre-doux); background: var(--sable); border-color: var(--bord); } .pc-carte.est-faite .pc-num { color: var(--or-fonce); }  .pc-reset-zone { text-align: center; margin-top: 2rem; } .pc-reset-tout { color: var(--terre); border-color: var(--terre); } .pc-reset-tout:hover { background: var(--terre); color: #fff; } .pc-note { max-width: 680px; margin: 1.6rem auto 0; }  .pc-bilan { text-align: center; color: var(--encre-doux); margin: -1rem 0 1.4rem; }  .pc-actions-haut { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 0 0 1.8rem; }  .pc-niveaux { margin: -.1rem 0 .35rem; font-size: .82rem; color: var(--encre-doux); }  .pc-lien--facile { border-color: var(--or); background: rgba(242, 183, 5, .1); }  @keyframes pc-flash { 0%, 100% { box-shadow: var(--ombre-s); } 30% { box-shadow: 0 0 0 3px var(--or); } } .pc-flash { animation: pc-flash 1.2s ease; } @media (prefers-reduced-motion: reduce) { .pc-flash { animation: none; } }  .pc-fin { max-width: 680px; margin: 2rem auto 0; } .pc-fin-carte { text-align: center; border: 2px solid var(--or); border-radius: var(--r-m); background: var(--blanc-chaud); padding: 1.8rem 1.4rem; box-shadow: var(--ombre-m); } .pc-fin-etoile { font-size: 2.4rem; color: var(--or); margin: 0 0 .3rem; line-height: 1; } .pc-fin-titre { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--titre); } .pc-fin-txt { margin: 0 auto; max-width: 48ch; color: var(--encre-doux); }  .acc-final { padding-top: 0; text-align: center; } .acc-cta-actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }  @keyframes accDefile { to { transform: translateX(-50%); } } @keyframes accLevite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes accEtape { 0%, 4% { background: rgba(6, 18, 36, .55); color: #9fb4cc; transform: translateZ(0) scale(1); } 12%, 70% { background: linear-gradient(160deg, #ffd75e, var(--or)); color: var(--nuit); transform: translateZ(10px) scale(1.08); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); } 82%, 100% { background: rgba(6, 18, 36, .55); color: #9fb4cc; transform: translateZ(0) scale(1); } } @keyframes accBulle { 0% { opacity: 0; transform: translateY(8px) translateZ(-10px); } 12%, 78% { opacity: 1; transform: translateY(0) translateZ(0); } 92%, 100% { opacity: 0; transform: translateY(-6px) translateZ(6px); } } @keyframes accFlipLoop { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } @keyframes accDeRoule { from { transform: rotateX(-18deg) rotateY(0) rotateZ(-8deg); } to { transform: rotateX(342deg) rotateY(360deg) rotateZ(-8deg); } } @keyframes accPageTourne { 0%, 12% { transform: rotateY(0); } 48%, 62% { transform: rotateY(-178deg); } 98%, 100%{ transform: rotateY(0); } } @keyframes accLettreFlotte { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-10px) rotate(5deg) scale(1.06); } } @keyframes accRouleau { 0%, 22% { transform: translateY(0); } 33%, 55% { transform: translateY(-25%); } 66%, 88% { transform: translateY(-50%); } 100% { transform: translateY(-75%); } } @keyframes accCoche { 0%, 8% { stroke-dashoffset: 24; } 38%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } } @keyframes accOnde { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .acc-afrique, .acc-ruban-file, .acc-mot3d, .acc-pile-flip, .acc-de, .acc-livre-page, .acc-lettre, .acc-rouleau-liste, .acc-pastille, .acc-coche path, .acc-etoile, .acc-vinyle, .acc-coeur, .acc-onde, .acc-bulle, .acc-etape { animation: none; } .acc-rouleau-liste { transform: none; } .acc-bulle { opacity: 1; }  .acc-onde { display: none; }  }  .page-doc { max-width: 720px; margin: 0 auto; } .page-doc-bloc + .page-doc-bloc { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--bord); } .page-doc h2 { font-size: 1.3rem; color: var(--titre); margin: 0 0 .7rem; } .page-doc-titre-i { display: flex; align-items: center; gap: .5rem; } .page-doc-titre-i .i { width: 1.15rem; height: 1.15rem; color: var(--ocre); } .page-doc p { color: var(--encre-doux); line-height: 1.75; margin: 0 0 .9rem; } .page-doc p:last-child { margin-bottom: 0; } .page-doc-mail { font-weight: 700; color: var(--terre); } .page-doc-cta { margin-top: 2.4rem; }   .ml-serment { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; background: linear-gradient(135deg, var(--nuit), var(--indigo) 75%); border-radius: var(--r-l); padding: 2rem 1.8rem; margin-bottom: 2.2rem; color: #e8eefb; box-shadow: var(--ombre-m); } .ml-serment::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: url('/medias/motif-kuba.svg'); opacity: .07; } .ml-scene { perspective: 700px; flex: 0 0 auto; } .ml-cadenas { display: block; width: 128px; height: 128px; } .ml-anse { fill: none; stroke: var(--or); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; } .ml-corps { fill: var(--or); } .ml-trou { fill: var(--nuit); } .ml-tige { fill: none; stroke: var(--nuit); stroke-width: 6; stroke-linecap: round; } .ml-eclat { fill: none; stroke: #ffd75e; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center; } .ml-serment-corps { flex: 1 1 320px; max-width: 560px; position: relative; } .ml-serment-titre { margin: 0 0 1rem; font-size: 1.5rem; color: #fff; } .ml-zeros { display: flex; gap: .8rem; flex-wrap: wrap; } .ml-zero { flex: 1 1 110px; text-align: center; padding: .9rem .6rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-m); } .ml-zero-chiffre { display: block; font-family: var(--police-titres); font-size: 2.3rem; line-height: 1; color: var(--or); } .ml-zero-mot { font-size: .85rem; color: #c9d6e8; } .ml-serment-txt { margin: 1rem 0 0; color: #c9d6e8; }  .ml-grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .ml-carte { position: relative; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); padding: 1.3rem 1.2rem 1.15rem; box-shadow: var(--ombre-s); transition: box-shadow var(--transi); } .ml-carte:hover { box-shadow: var(--ombre-m); } .ml-carte::before { content: ''; position: absolute; top: 0; left: 1.2rem; width: 34px; height: 5px; border-radius: 0 0 5px 5px; background: var(--bleu); } .ml-grille .ml-carte:nth-child(4n+2)::before { background: var(--or); } .ml-grille .ml-carte:nth-child(4n+3)::before { background: var(--terre); } .ml-grille .ml-carte:nth-child(4n)::before { background: var(--rouge); } .ml-carte h3 { margin: 0 0 .55rem; font-size: 1.08rem; color: var(--titre); } .ml-carte .page-doc-titre-i { display: flex; align-items: center; gap: .5rem; } .ml-carte p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--encre-doux); } .ml-carte p + p { margin-top: .6rem; } .ml-maj { margin: 2rem 0 0; text-align: center; font-size: .85rem; font-style: italic; color: var(--encre-doux); } .ml-cta { margin: 1.4rem 0 0; text-align: center; } @media (prefers-reduced-motion: no-preference) { .ml-cadenas { animation: mlVeille 7s ease-in-out infinite; } .ml-anse { animation: mlAnse 2.2s ease-out both; } .ml-eclat { animation: scintille 2.8s ease-in-out infinite; } .ml-eclat + .ml-eclat { animation-delay: .7s; } .ml-eclat + .ml-eclat + .ml-eclat { animation-delay: 1.4s; } }  .nf-section { text-align: center; padding-top: 4.5rem; padding-bottom: 4.5rem; } .nf-chiffres { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 0; font-family: var(--police-titres); font-size: clamp(5rem, 16vw, 8.5rem); line-height: 1; color: var(--terre); } .nf-etoile { width: .82em; height: .82em; fill: var(--or); filter: drop-shadow(0 6px 14px rgba(242, 183, 5, .35)); } .nf-devise { margin: 1.2rem 0 .3rem; font-family: var(--police-titres); font-size: 1.25rem; color: var(--or-fonce); } .nf-titre { margin: 0 0 .8rem; font-size: 1.7rem; color: var(--titre); } .nf-txt { max-width: 480px; margin: 0 auto 1.8rem; color: var(--encre-doux); line-height: 1.7; } .nf-actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: 0; } @media (prefers-reduced-motion: no-preference) { .nf-etoile { animation: nfTourne 7s linear infinite; } }  @keyframes monter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes brillance {  from { background-position: 180% 0; } to { background-position: -80% 0; } } @keyframes nfTourne {  from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes mlVeille {  0%, 100% { transform: rotateY(-14deg) translateY(0); } 50% { transform: rotateY(14deg) translateY(-6px); } } @keyframes mlAnse {  0% { stroke-dashoffset: 100; opacity: .25; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes pouls {  0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } @keyframes couler {  to { background-position: 200% 0; } } @keyframes couleFleuve {  to { stroke-dashoffset: -130; } } @keyframes tourner {  to { transform: rotate(360deg); } } @keyframes ecrire {  0% { stroke-dashoffset: 70; opacity: 0; } 12% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes flotter {  0% { transform: translateY(10px); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } } @keyframes scintille {  0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3) rotate(12deg); opacity: .72; } } @keyframes secouer {  0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } @keyframes monterCourt { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes fondu { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes heroRecul {  to { transform: translateY(90px); opacity: .25; } } @keyframes deriveMotif { to { background-position: 48px 48px; }  } @keyframes deriveFrise { to { background-position-x: 32px; }  } @keyframes quizEntre {  from { opacity: 0; transform: rotateX(-82deg); } to { opacity: 1; transform: rotateX(0); } } @keyframes nudgeBas {  0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }