.tn-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.4rem; margin-bottom: 1.7rem; padding: 1.2rem 1.5rem; background: var(--sable); border-left: 4px solid var(--or); border-radius: var(--r-m); box-shadow: var(--ombre-s); transition: box-shadow var(--transi), transform var(--transi); } .tn-callout:hover { box-shadow: var(--ombre-m); } .tn-callout-txt { flex: 1 1 14rem; margin: 0; font-weight: 700; color: var(--titre); } @media (max-width: 559px){ .tn-callout { flex-direction: column; text-align: center; } .tn-callout-txt { flex: none; } } .tn-fenetre .fenetre-boite { width: min(34rem, 100%); } .tn-fenetre .fenetre-actions { justify-content: space-between; align-items: center; gap: 1rem; } .fenetre-boite p.tn-resultat-titre { margin-top: .9rem; font-family: var(--police-titres); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--titre); text-wrap: balance; } @media (max-width: 560px){ .tn-fenetre .fenetre-actions { flex-direction: column; align-items: stretch; gap: .6rem; } .tn-fenetre [data-tn-lien-programme] { order: -1; } } .tn-progres { display: flex; gap: .4rem; margin: .2rem 0 1rem; } .tn-segment { flex: 1; height: 6px; border-radius: 999px; background: var(--sable); overflow: hidden; } .tn-segment-remplissage { display: block; height: 100%; width: 0%; border-radius: 999px; transition: width .5s var(--rebond); } .tn-segment[data-niveau="1"] .tn-segment-remplissage { background: var(--terre); } .tn-segment[data-niveau="2"] .tn-segment-remplissage { background: var(--ocre); } .tn-segment[data-niveau="3"] .tn-segment-remplissage { background: var(--bleu); } .tn-num { margin: 0 0 .8rem; text-align: center; font-size: .85rem; font-weight: 700; color: var(--encre-doux); } .tn-pill { display: inline-flex; margin: 0 0 .3rem; padding: .28rem .8rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .tn-pill[data-niveau="1"] { background: rgba(189, 88, 51, .16); color: var(--terre-texte); } .tn-pill[data-niveau="2"] { background: rgba(224, 151, 63, .2); color: var(--or-fonce); } .tn-pill[data-niveau="3"] { background: var(--bleu-clair); color: var(--bleu-texte); } .tn-scene { perspective: 1400px; max-width: 30rem; margin: 0 auto; } .tn-carte { position: relative; min-height: 24rem; transform-style: preserve-3d; transition: transform .65s var(--rebond); } @media (max-width: 559px){ .tn-carte { min-height: 32rem; } } .tn-carte.est-tournee { transform: rotateY(180deg); } .tn-carte.est-entrante { animation: quizEntre .55s var(--rebond) backwards; } .tn-face { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.4rem 1.2rem; 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; } .tn-face--recto { border-top: 5px solid var(--or); } .tn-face--verso { transform: rotateY(180deg); border-top: 5px solid var(--bleu); } .tn-verdict { margin: 0; min-height: 1.4em; font-weight: 700; font-family: var(--police-titres); } .tn-verdict.est-juste { color: var(--juste-texte); } .tn-verdict.est-faux { color: var(--rouge-texte); } .tn-verdict:not(:empty) { animation: pop .4s var(--rebond); } .tn-bonne { margin: 0; font-family: var(--police-titres); font-weight: 800; color: var(--terre-texte); line-height: 1.15; font-size: clamp(1.3rem, 4.4vw, 1.9rem); overflow-wrap: anywhere; } .tn-ta-reponse { margin: 0; font-size: .86rem; color: var(--encre-doux); } .tn-suivant { margin-top: .3rem; } .tn-bilan-groupe { max-width: 24rem; margin: 0 auto 1.1rem; text-align: left; } @media (prefers-reduced-motion: reduce){ .tn-carte { transition: none; animation: none; } .tn-segment-remplissage { transition: none; } } .profils-zone--page { max-width: 680px; margin: 0 auto 1.6rem; } .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-texte); 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-zone .btn-fantome { background: transparent; color: var(--terre-texte); border-color: var(--terre); } .pc-reset-zone .btn-fantome: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: 0 0 2rem; } .pc-prog { max-width: 900px; margin: 0 auto 1.4rem; padding: 1.1rem 1.3rem; background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); } .pc-prog-titre { text-align: center; font-size: 1.3rem; margin: 0 0 .4rem; } .pc-prog-pos, .pc-prog-donnes { text-align: center; margin: 0 0 .5rem; } .pc-prog-pos { color: var(--encre-doux); } .pc-prog-donnes { font-weight: 700; color: var(--titre); } .pc-horizons { list-style: none; margin: .9rem 0 .4rem; padding: 0; display: grid; gap: .6rem; } @media (min-width: 760px){ .pc-horizons { grid-template-columns: repeat(3, 1fr); } } .pc-horizon-nom { display: block; font-weight: 700; margin-bottom: .25rem; } .pc-horizon-note { display: block; font-size: .85rem; color: var(--encre-doux); } .pc-prog-action { text-align: center; margin: .8rem 0 0; } .pc-pas-titre { text-align: center; font-size: 1.3rem; margin: 0 0 .6rem; } .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); } .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); } .pg-note { color: var(--encre-doux); margin: 0 0 1rem; max-width: 60ch; } .pg-legende { justify-content: flex-start; margin: 0 0 2.2rem; } .pg-vide { color: var(--encre-doux); } .pg-cycle-rang { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--police-titres); font-size: 1.25rem; font-weight: 700; color: var(--blanc-chaud); background: var(--terre); } .pg-promesse { color: var(--encre-doux); max-width: 60ch; margin: 0; } .pg-semaine { background: var(--blanc-chaud); border: 1px solid var(--bord); border-radius: var(--r-l); border-top: 5px solid var(--terre); padding: 1.5rem 1.5rem 1.7rem; box-shadow: var(--ombre-s); transition: transform var(--transi), box-shadow var(--transi); will-change: transform; } .pg-semaine:hover { box-shadow: var(--ombre-m); } .pg-semaine-consolidation { border-top-color: var(--or); } .pg-semaine-tete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .5rem; } .pg-semaine-num { margin: 0; font-size: 1.12rem; } .pg-etiquette { font-size: .76rem; color: var(--encre-doux); border: 1px solid var(--bord); border-radius: 999px; padding: .1rem .65rem; } .pg-etiquette--or { border-color: var(--or); color: var(--or-fonce); } .pg-objectif { margin: 0 0 1.2rem; font-family: var(--police-titres); font-size: 1.12rem; line-height: 1.45; max-width: 46ch; } .pg-grammaire { background: var(--carte-halo); border-radius: var(--r-m); padding: .8rem 1rem 1rem; margin-bottom: 1.4rem; } .pg-sous-titre { margin: 0 0 .45rem; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-doux); font-weight: 700; } .pg-gr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; } .pg-gr-ligne { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; } .pg-gr-forme { font-weight: 700; } .pg-gr-prefixe { font-weight: 700; color: var(--terre-texte); font-size: .82rem; letter-spacing: .02em; } .pg-gr-classe { display: block; padding: .15rem 0 .35rem; } .pg-gr-classe > .pg-gr-prefixe { margin-right: .45rem; } .pg-gr-paires { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .9rem; display: grid; gap: .15rem; } .pg-gr-paire { display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; } .pg-gr-fleche { color: var(--encre-doux); } .pg-gr-ex { color: var(--encre-doux); font-style: italic; font-size: .9rem; } .pg-gr-motif { font-size: .8rem; color: var(--encre-doux); border: 1px dashed var(--bord); border-radius: var(--r-s); padding: 0 .35rem; } .pg-gr-gloss { color: var(--encre-doux); font-size: .9rem; } .pg-gr-astuce { flex-basis: 100%; color: var(--encre-doux); font-size: .84rem; font-style: italic; padding-left: .2rem; } .pg-jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .pg-jour { border-left: 2px solid var(--bord); padding: 0 0 .1rem 1rem; } .pg-jour--produire, .pg-jour--bilan { border-left-color: var(--or); } .pg-jour--choisi { border-left-width: 4px; border-left-color: var(--terre); background: var(--carte-halo); border-radius: 0 var(--r-s) var(--r-s) 0; padding-top: .55rem; padding-bottom: .55rem; } .pg-jour--choisi.pg-jour--produire, .pg-jour--choisi.pg-jour--bilan { border-left-color: var(--or); } .pg-jour-ici { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terre-texte); background: var(--carte-vive); border: 1px solid var(--terre); border-radius: 999px; padding: 0 .5rem; } .pg-jour--choisi.pg-jour--produire .pg-jour-ici, .pg-jour--choisi.pg-jour--bilan .pg-jour-ici { color: var(--or-fonce); border-color: var(--or); } .pg-pastille { display: inline-flex; align-items: center; border-radius: 999px; padding: .1rem .62rem; white-space: nowrap; font-family: var(--police-titres); font-size: .8rem; font-weight: 700; color: var(--encre); background: var(--carte-halo); border: 1px solid var(--bord); } .pg-jour--produire .pg-pastille, .pg-jour--bilan .pg-pastille { border-color: var(--or); color: var(--or-fonce); } .pg-jour-tete { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .pg-jour-btn { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-s); } .pg-jour-btn:hover .pg-pastille { background: var(--carte-vive); border-color: var(--terre); } .pg-jour--choisi .pg-jour-btn { cursor: default; } .pg-jalon { margin: .7rem 0 .2rem; border-left: 3px solid var(--or); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--carte-halo); padding: .7rem .9rem; } .pg-sous-titre--jalon { color: var(--or-fonce); } .pg-jalon-quoi { margin: .15rem 0 .45rem; font-size: .93rem; } .pg-jalon-mots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .pg-jalon-mot { font-size: .76rem; color: var(--encre-doux); background: var(--carte-vive); border: 1px solid var(--bord); border-radius: 999px; padding: .05rem .5rem; } .pg-jalon-note { margin: .5rem 0 0; font-size: .78rem; color: var(--encre-doux); font-style: italic; } .pg-jour-role { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--terre-texte); } .pg-jour--produire .pg-jour-role, .pg-jour--bilan .pg-jour-role { color: var(--or-fonce); } .pg-jour-compte { font-size: .72rem; color: var(--encre-doux); border: 1px solid var(--bord); border-radius: 999px; padding: 0 .5rem; } .pg-jour-compte--du { border-color: var(--or); color: var(--or-fonce); font-weight: 700; } .pg-activite-lien { margin-left: auto; font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: .25rem; } .pg-fleche { width: .85em; height: .85em; } .pg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .pg-chip { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--carte-vive); border: 1px solid var(--bord); border-radius: 999px; padding: .2rem .7rem; font-size: .9rem; max-width: 100%; } .pg-chip .mot-niveau { align-self: center; box-shadow: none; } .pg-chip-cible { font-weight: 700; } .pg-chip-gloss { color: var(--encre-doux); font-size: .84rem; } .pg-consigne { margin-top: .6rem; } .pg-consigne-txt { margin: 0; font-size: .92rem; color: var(--encre-doux); } .pg-consigne-act { margin: .25rem 0 0; font-size: .88rem; font-weight: 600; color: var(--terre-texte); } .pg-bloc-mots, .pg-bloc-rappel { margin-top: .6rem; } .pg-bloc-rappel .pg-chip { background: transparent; opacity: .72; } @media (max-width: 560px){ .pg-cycle-rang { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; } .pg-chip { border-radius: var(--r-m); } .pg-semaine { padding: 1.2rem 1rem 1.4rem; } .pg-activite-lien { margin-left: 0; flex-basis: 100%; } .pg-chip-gloss { font-size: .8rem; } } .pg-barre { display: flex; flex-direction: column; gap: .7rem; margin: 0 0 1.6rem; padding: .9rem 1rem; background: var(--carte-vive); border: 1px solid var(--bord); border-radius: var(--r-m); box-shadow: var(--ombre-s); } .pg-filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; } .pg-filtres .dico-tri-label { display: flex; min-width: 0; } .pg-filtres .dico-select { flex: 1 1 auto; min-width: 0; max-width: 100%; } .pg-situation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; border-top: 1px solid var(--bord); padding-top: .7rem; } .pg-ou { margin: 0; font-size: .9rem; color: var(--encre-doux); } .pg-pages { display: flex; gap: .5rem; } .pg-cycle-titre-seul { display: flex; align-items: center; gap: .7rem; margin: 0 0 .3rem; font-family: var(--police-titres); font-size: clamp(1.2rem, 3.4vw, 1.7rem); color: var(--titre); } .pg-cycles > .pg-promesse { margin: 0 0 1.4rem; max-width: 62ch; } @media (max-width: 640px){ .pg-barre { padding: .8rem; } .pg-filtres { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .pg-filtres .dico-tri-label { justify-content: space-between; } .pg-situation { justify-content: center; } .pg-pages { width: 100%; } .pg-pages .btn-page { flex: 1; justify-content: center; } } .cm-page { --cm-gap: clamp(1rem, 3vw, 1.75rem); } .cm-h2 { font-family: var(--police-titres); font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--titre); margin: 0 0 .5rem; } .cm-h3 { font-family: var(--police-titres); font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--titre); margin: 2.4rem 0 .4rem; } .cm-intro { color: var(--encre-doux); max-width: 62ch; margin: 0 0 1.6rem; } .cm-note { color: var(--encre-doux); font-size: .93rem; margin: 1rem 0 0; } .cm-note-large { max-width: 66ch; } .cm-hero { padding-block: clamp(2rem, 6vw, 4rem); } .cm-hero-grille { display: grid; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px){ .cm-hero-grille { grid-template-columns: 1.05fr .95fr; } } .cm-sur-titre { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: var(--terre-texte); margin: 0 0 .5rem; } .cm-hero-texte h1 { font-family: var(--police-titres); font-size: clamp(1.9rem, 6vw, 3.1rem); line-height: 1.08; color: var(--titre); margin: 0 0 .9rem; } .cm-chapo { color: var(--encre-doux); font-size: clamp(1rem, 2.3vw, 1.12rem); max-width: 54ch; margin: 0 0 .8rem; } .cm-chapo b { color: var(--encre); } .cm-chapo-fort { color: var(--encre); } .cm-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; } .cm-epreuves-tete { margin-top: clamp(2rem, 5vw, 3rem); } .cm-ep-h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin: 0 0 .5rem; color: var(--titre); } .cm-epreuves { display: grid; gap: 1.1rem; margin: 1.4rem 0 1rem; grid-template-columns: 1fr; } @media (min-width: 900px){ .cm-epreuves { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cm-ep-bloc { background: var(--carte-vive); border: 1px solid var(--bord); border-radius: var(--r-m); padding: 1.1rem 1.2rem; box-shadow: var(--ombre-s); } .cm-ep-titre { margin: 0 0 .8rem; font-family: var(--police-titres); font-size: 1.05rem; color: var(--terre-texte); } .cm-ep-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .cm-ep + .cm-ep { border-top: 1px solid var(--bord); padding-top: .9rem; } .cm-ep-quoi { margin: 0 0 .45rem; font-size: .95rem; } .cm-ep-mots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .cm-ep-mot { font-size: .78rem; color: var(--encre-doux); background: var(--carte-halo); border: 1px solid var(--bord); border-radius: 999px; padding: .05rem .5rem; } .cta-carte .cm-hero-actions { justify-content: center; } .cm-scene { position: relative; perspective: 1200px; min-height: 290px; display: grid; place-items: center; } .cm-carte { position: absolute; width: min(74%, 260px); border-radius: var(--r-m); background: var(--carte-vive); border: 1px solid var(--bord); box-shadow: var(--ombre-m); padding: 1rem 1.05rem; transform-style: preserve-3d; } .cm-carte-etiq { display: block; font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--terre-texte); margin-bottom: .7rem; } .cm-carte-ligne { display: block; height: 7px; border-radius: 99px; background: var(--frise); margin-bottom: .45rem; } .cm-carte-ligne-courte { width: 58%; } .cm-carte-prog { transform: rotateY(17deg) rotateX(8deg) translate3d(-16%, -12%, 40px); } .cm-carte-parc { transform: rotateY(17deg) rotateX(8deg) translate3d(20%, 22%, -30px); width: min(60%, 205px); } .cm-frise { display: flex; gap: .3rem; margin-top: .9rem; } .cm-frise i { flex: 1; height: 20px; border-radius: 6px; background: var(--frise); } .cm-frise i:nth-child(-n+2) { background: var(--vert-nzela); } .cm-jauges { display: flex; align-items: flex-end; gap: .45rem; height: 92px; } .cm-jauges b { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(to top, var(--terre), var(--or)); } @media (prefers-reduced-motion: no-preference){ .cm-carte-prog { animation: cmFlotteA 7s ease-in-out infinite; } .cm-carte-parc { animation: cmFlotteB 7s ease-in-out infinite .9s; } } .cm-duo { display: grid; gap: var(--cm-gap); grid-template-columns: 1fr; } @media (min-width: 720px){ .cm-duo { grid-template-columns: 1fr 1fr; } } .cm-flip { perspective: 1100px; background: none; border: 0; padding: 0; cursor: pointer; min-height: 208px; font: inherit; text-align: left; color: inherit; } .cm-flip-inner { position: relative; display: block; width: 100%; height: 100%; min-height: 208px; transform-style: preserve-3d; transition: transform .6s var(--transi); } .cm-flip:hover .cm-flip-inner, .cm-flip:focus-visible .cm-flip-inner { transform: rotateY(180deg); } .cm-flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .5rem; padding: 1.4rem; border-radius: var(--r-m); border: 1px solid var(--bord); background: var(--carte-vive); box-shadow: var(--ombre-s); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .cm-flip-arriere { transform: rotateY(180deg); background: var(--blanc-chaud); color: var(--encre); } .cm-flip-titre { font-family: var(--police-titres); font-size: 1.35rem; color: var(--titre); } .cm-flip-question { color: var(--terre-texte); font-weight: 600; } .cm-bloc-3d { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; grid-template-columns: 1fr; margin-top: 1.4rem; } @media (min-width: 860px){ .cm-bloc-3d { grid-template-columns: .85fr 1.15fr; } } .cm-pile { perspective: 1000px; height: 250px; position: relative; } .cm-pile-carte { position: absolute; left: 50%; width: min(90%, 260px); padding: .85rem 1rem; border-radius: var(--r-m); border: 1px solid var(--bord); background: var(--carte-vive); box-shadow: var(--ombre-s); font-weight: 600; color: var(--encre); transform: translateX(-50%) translateY(var(--y, 0)) translateZ(var(--z, 0)) rotateX(52deg); transition: transform .7s var(--transi), opacity .5s ease; opacity: .55; } .cm-pile-1 { --y: 30px; --z: 0; } .cm-pile-2 { --y: 58px; --z: 22px; } .cm-pile-3 { --y: 86px; --z: 44px; } .cm-pile-4 { --y: 114px; --z: 66px; border-color: var(--vert-nzela); } .cm-bloc-3d.vu .cm-pile-carte { transform: translateX(-50%) translateY(calc(var(--y) - 22px)) rotateX(0deg); opacity: 1; } .cm-bloc-3d.vu .cm-pile-4 { box-shadow: 0 0 0 2px var(--vert-nzela), var(--ombre-s); } .cm-pile-texte p { color: var(--encre-doux); max-width: 56ch; } .cm-pile-texte b { color: var(--encre); } .cm-chiffre-ligne { margin-top: .8rem; } .cm-chiffre-ligne b { font-family: var(--police-titres); font-size: 1.6rem; color: var(--terre-texte); } .cm-principes { display: grid; gap: var(--cm-gap); grid-template-columns: 1fr; margin-top: 1rem; } @media (min-width: 780px){ .cm-principes { grid-template-columns: repeat(3, 1fr); } } .cm-principes.vu .cm-principe { opacity: 1; transform: none; } .cm-principes.vu .cm-principe:nth-child(2) { transition-delay: .12s; } .cm-principes.vu .cm-principe:nth-child(3) { transition-delay: .24s; } .cm-principe-num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--carte-vive); color: var(--terre-texte); border: 2px solid var(--terre); font-weight: 700; margin-bottom: .6rem; } .cm-principe h4 { font-family: var(--police-titres); font-size: 1.1rem; color: var(--titre); margin: 0 0 .35rem; } .cm-principe p { margin: 0; color: var(--encre-doux); font-size: .96rem; } .cm-encart.vu { opacity: 1; transform: none; } .cm-encart-fort { border-left-color: var(--terre); } .cm-encart h3 { font-family: var(--police-titres); font-size: 1.2rem; color: var(--titre); margin: 0 0 .4rem; } .cm-encart p { margin: 0; color: var(--encre-doux); } .cm-encart b { color: var(--encre); } .cm-parc-grille { display: grid; gap: var(--cm-gap); grid-template-columns: 1fr; margin-top: 1.2rem; } @media (min-width: 780px){ .cm-parc-grille { grid-template-columns: repeat(3, 1fr); } } .cm-parc-grille.vu .cm-mini { opacity: 1; transform: none; } .cm-parc-grille.vu .cm-mini:nth-child(2) { transition-delay: .1s; } .cm-parc-grille.vu .cm-mini:nth-child(3) { transition-delay: .2s; } .cm-mini h3 { font-family: var(--police-titres); font-size: 1.08rem; color: var(--titre); margin: 0 0 .35rem; } .cm-mini p { margin: 0; color: var(--encre-doux); font-size: .95rem; } .cm-boites-scene { margin-top: 2rem; } .cm-boites { display: flex; flex-wrap: wrap; gap: .55rem; perspective: 800px; } .cm-boites-scene.vu .cm-boite { opacity: 1; transform: none; transition-delay: calc(var(--i) * .07s); } .cm-boite b { font-family: var(--police-titres); font-size: 1.45rem; color: var(--terre-texte); } .cm-boite i { font-style: normal; font-size: .76rem; color: var(--encre-doux); } .cm-preuves { display: grid; gap: var(--cm-gap); grid-template-columns: 1fr; margin-top: 1.2rem; } @media (min-width: 860px){ .cm-preuves { grid-template-columns: 1fr 1fr; } } .cm-preuves.vu .cm-preuve { opacity: 1; transform: none; } .cm-preuves.vu .cm-preuve:nth-child(2) { transition-delay: .09s; } .cm-preuves.vu .cm-preuve:nth-child(3) { transition-delay: .18s; } .cm-preuves.vu .cm-preuve:nth-child(4) { transition-delay: .27s; } .cm-preuve h3 { font-family: var(--police-titres); font-size: 1.1rem; color: var(--titre); margin: 0 0 .4rem; } .cm-preuve p { margin: 0; color: var(--encre-doux); font-size: .96rem; } .cm-marches { display: grid; gap: var(--cm-gap); grid-template-columns: 1fr; margin-top: 1.2rem; perspective: 1100px; } @media (min-width: 820px){ .cm-marches { grid-template-columns: repeat(3, 1fr); align-items: end; } } .cm-marches.vu .cm-marche { opacity: 1; transform: none; } .cm-marches.vu .cm-marche-2 { transition-delay: .14s; } .cm-marches.vu .cm-marche-3 { transition-delay: .28s; } @media (min-width: 820px){ .cm-marche-2 { margin-bottom: 1.4rem; } .cm-marche-3 { margin-bottom: 2.8rem; } } .cm-marche-quand { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--bleu-texte); } .cm-marche-n { display: block; font-family: var(--police-titres); font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.05; color: var(--terre-texte); } .cm-marche-mots { display: block; font-size: .9rem; color: var(--encre-doux); margin-bottom: .6rem; } .cm-marche p { margin: 0; color: var(--encre-doux); font-size: .94rem; } @media (prefers-reduced-motion: reduce){ .cm-pile-carte { opacity: 1; transition: none; } .cm-carte-prog, .cm-carte-parc { animation: none; } .cm-flip-inner, .cm-flip:hover .cm-flip-inner, .cm-flip:focus-visible .cm-flip-inner { transform: none; transition: none; } .cm-flip, .cm-flip-inner { min-height: 0; } .cm-flip-face { position: static; backface-visibility: visible; } .cm-flip-arriere { transform: none; margin-top: .6rem; box-shadow: none; } }