.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-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-texte); } .dico-compteur { font-weight: 700; color: var(--titre); } .dico-liste { display: grid; gap: .55rem; grid-template-columns: 1fr; align-items: start; } .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-ref { font-weight: 800; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dico-niveau-note { margin-top: .4rem; text-align: center; } .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); } .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-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); } } .voc-fil { margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; } .voc-fil a::before { content: "\2039\00a0"; } .voc-fil a:hover { text-decoration: underline; } .voc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: 1fr; } .voc-mot .mot-phare { padding-right: 0; text-align: right; flex: 0 1 auto; min-width: 0; } .voc-mot .mot-ln { overflow-wrap: anywhere; } .voc-titre-bloc { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 1rem; } .voc-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2.4rem; } .voc-themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; } .voc-theme { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .95rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--blanc-chaud); color: var(--encre); font-weight: 700; text-decoration: none; transition: var(--transi); } .voc-theme:hover { border-color: var(--or); } .voc-theme[aria-current="page"] { background: var(--or); border-color: var(--or); color: var(--nuit); } .voc-n { font-size: .85rem; font-weight: 600; color: var(--encre-doux); } .voc-theme[aria-current="page"] .voc-n { color: var(--nuit); } @media (min-width: 760px){ .voc-liste { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px){ .voc-liste { grid-template-columns: repeat(3, 1fr); } } .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-texte); } .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-texte); 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-texte); 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-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-texte); } .classe-qui { margin: .15rem 0 .7rem; font-size: .88rem; color: var(--encre-doux); } .paire-sg { font-weight: 700; color: var(--titre); } .paire-fleche { color: var(--ocre); font-weight: 700; } .paire-pl { font-weight: 800; color: var(--terre-texte); } .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-texte); } .conj-forme { font-weight: 800; color: var(--terre-texte); } .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-texte); } .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-texte); } .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-texte); } .pron-fleche { color: var(--encre-doux); } .pron-pref { font-family: var(--police-titres); font-weight: 700; color: var(--bleu-texte); } .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; } } .nb-consigne { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; color: var(--encre-doux); } .nb-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .paliers-grille { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } .paliers-sous { display: contents; } .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)); } .compteur-champ { font-size: 1.9rem; } } .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; } .note-a { color: var(--terre-texte); } .note-b { color: var(--bleu-texte); animation-delay: 1.2s; } .note-c { color: var(--rouge-texte); 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; } .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-texte); } .his-phare-txt { color: var(--encre-doux); } .bible-outils { display: grid; justify-items: center; gap: 1rem; max-width: 940px; margin: 0 auto 1.6rem; 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); scroll-margin-top: calc(var(--entete-h) + 1rem); } .bible-outils.est-collee { background: var(--entete-fond-compact); 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; } @media (max-width: 699.98px){ .bible-outils { top: var(--entete-h); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .45rem .5rem; } .bible-outils .dico-champ { flex: 1 1 100%; width: 100%; min-width: 0; } .bible-outils .bible-filtres { flex: 1 1 100%; flex-wrap: nowrap; gap: .3rem; min-width: 0; } .bible-outils #bible-recherche { padding-top: .5rem; padding-bottom: .5rem; } .bible-outils .dico-tri-label { flex: 1 1 0; min-width: 0; gap: 0; } .bible-outils .dico-tri-label[for="bible-testament"] { flex: 1.15 1 0; } .bible-outils .dico-tri-label[for="bible-livre"] { flex: 1.4 1 0; } .bible-outils .dico-tri-label[for="bible-chap"] { flex: .6 1 0; } .bible-outils .dico-select { width: 100%; max-width: none; min-width: 0; padding: .45rem 1.6rem .45rem .6rem; font-size: .85rem; background-position: right .45rem center; } .bible-nav-chap { flex-wrap: nowrap; gap: .5rem; } .bible-nav-chap .btn-page { flex: 1 1 0; min-width: 0; justify-content: center; font-size: .82rem; padding: .6rem .55rem; gap: .35rem; } .bible-nav-chap .btn-page span { white-space: normal; min-width: 0; text-align: center; line-height: 1.25; } .bible-nav-chap .btn-page .i { flex: none; } body.nav-chapitre-en-vue .haut-page { opacity: 0; transform: translateY(14px); pointer-events: none; } } .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 .sug-ln { color: var(--terre-texte); 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); } .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-texte); } .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-texte); } .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 .dico-son { flex: none; } @media (prefers-reduced-motion: no-preference){ .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-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-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; } .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); } .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-texte); } .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:last-child { margin-bottom: 0; } .phares-fiab-titre { font-family: var(--police-titres); color: var(--terre-texte); } .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-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-corps { flex-basis: auto; } } @media (prefers-reduced-motion: reduce){ .chant-vinyle { animation: none; } } .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-texte); } .phr-sens { margin: 0; grid-column: 2; color: var(--encre-doux); }