.cc-grid__handle selon box-sizing natif du navigateur. */
/* === Slider — track creux + thumb blanc léger contour anthracite ===
Firefox Android applique un min-height pour le tap (~30px) et fait hériter
le font-size de la page, ce qui « gonfle » visuellement le range natif et
son thumb par rapport au
.cc-grid__handle (cf. paire Courbe/Grille).
On verrouille hauteur, padding, bordure et font-size pour neutraliser ça. */
/* line 1025, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider {
--slider-accent: var(--editor-ink);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
width: 100%;
height: 16px;
min-height: 16px;
max-height: 16px;
padding: 0;
border: 0;
background: transparent;
cursor: ew-resize;
margin: 0;
font-size: 16px;
line-height: 16px;
display: block;
}
/* line 1044, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:focus {
outline: none;
}
/* line 1045, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.14), 0 2px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* line 1046, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(31, 31, 31, 0.14), 0 2px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
/* line 1048, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider::-webkit-slider-runnable-track {
height: 4px;
background: rgba(245, 245, 244, 0.7);
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* line 1054, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider::-moz-range-track {
height: 4px;
background: rgba(245, 245, 244, 0.7);
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
border: none;
}
/* line 1062, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, white 0%, #f9f8f7 100%);
border: 1.5px solid rgba(31, 31, 31, 0.18);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
cursor: ew-resize;
/* Centre un thumb de 16px sur un track de 4px → -(16 - 4) / 2 = -6px */
margin-top: -6px;
-webkit-transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
/* line 1073, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider::-moz-range-thumb {
/* Firefox garde le thumb natif sans ces deux resets, peu importe les
autres propriétés (taille, fond, bordure). */
-moz-appearance: none;
appearance: none;
box-sizing: border-box;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, white 0%, #f9f8f7 100%);
border: 1.5px solid rgba(31, 31, 31, 0.18);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
cursor: ew-resize;
-moz-transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
/* line 1085, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:hover::-webkit-slider-thumb {
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 2px white;
}
/* line 1089, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:hover::-moz-range-thumb {
transform: scale(1.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 2px white;
}
/* line 1093, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:active::-webkit-slider-thumb {
transform: scale(0.94);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* line 1097, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider:active::-moz-range-thumb {
transform: scale(0.94);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* line 1103, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider--hue {
/* Re-centre le thumb de 16px sur le track hue de 6px → -(16 - 6) / 2 = -5px */
}
/* line 1104, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider--hue::-webkit-slider-runnable-track {
height: 6px;
background: linear-gradient(to right, #eb4747, #ebeb47, #47eb47, #47ebeb, #4747eb, #eb47eb, #eb4747);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* line 1111, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider--hue::-moz-range-track {
height: 6px;
background: linear-gradient(to right, #eb4747, #ebeb47, #47eb47, #47ebeb, #4747eb, #eb47eb, #eb4747);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* line 1119, app/assets/stylesheets/components/_form_editor.scss */
.cc-slider--hue::-webkit-slider-thumb {
margin-top: -5px;
}
/* line 1122, app/assets/stylesheets/components/_form_editor.scss */
.cc-row--grid {
gap: 6px;
}
/* === Mini-grille pour ancres (creuse + handle bombé) === */
/* line 1127, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid {
position: relative;
width: 100%;
aspect-ratio: 1;
background: var(--editor-surface-soft);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.275), inset 0 -1px 2px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
/* overflow: visible — laisse le tooltip qui suit la souris déborder. */
overflow: visible;
}
/* Tooltip injecté par tooltip_controller — suit le pointeur au pointermove,
masqué au repos (idle) et à la sortie de la zone .cc-grid. */
/* line 1146, app/assets/stylesheets/components/_form_editor.scss */
.cc-tip {
position: absolute;
top: 0;
left: 0;
padding: 5px 8px;
background: var(--editor-ink);
color: #FFFFFF;
font-family: "Roboto Mono", monospace;
font-size: 9px;
letter-spacing: 0.04em;
line-height: 1.25;
white-space: nowrap;
border-radius: 5px;
box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.18);
opacity: 0;
pointer-events: none;
z-index: 70;
/* Pas de transition sur transform — on suit la souris en temps réel. */
transition: opacity 0.16s ease;
}
/* line 1168, app/assets/stylesheets/components/_form_editor.scss */
.cc-tip.is-visible {
opacity: 1;
}
/* line 1171, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__lines {
position: absolute;
inset: 0;
border-radius: inherit;
display: grid;
pointer-events: none;
}
/* line 1179, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__cell {
border-right: 1px solid rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.025);
}
/* line 1183, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__cell:nth-child(10n) {
border-right: 0;
}
/* line 1184, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__cell:nth-child(-n+10) {
border-top: 0;
}
/* Grille de répétition du motif : 5×5 (classe historique `--quad`). */
/* line 1189, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__lines--quad .cc-grid__cell {
/* La base suppose 10 colonnes (grille courbe). Rétablit les traits puis 5n / -n+5 pour cette grille-là. */
}
/* line 1191, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__lines--quad .cc-grid__cell:nth-child(10n), .cc-grid__lines--quad .cc-grid__cell:nth-child(-n+10) {
border-right: 1px solid rgba(0, 0, 0, 0.025);
border-top: 1px solid rgba(0, 0, 0, 0.025);
}
/* line 1197, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__lines--quad .cc-grid__cell:nth-child(5n) {
border-right: 0;
}
/* line 1198, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__lines--quad .cc-grid__cell:nth-child(-n+5) {
border-top: 0;
}
/* --- SVG sous les grilles (popover glass) : viewBox réguliers + preserveAspectRatio meet,
* même échelle horizontale/verticale que .cc-grid (aspect-ratio 1). --- */
/* stylelint-disable function-url-quotes — data-URI brute */
/* Grille courbe dans le volet glass — 10×10 (voir renderGridLines hors isQuad). */
/* Répétition du motif — 5×5 (voir renderGridLines isQuad dans cover_editor_controller / hero_controller). */
/* line 1211, app/assets/stylesheets/components/_form_editor.scss */
.cover-pop .cc-grid__lines .cc-grid__cell {
border: 0;
}
/* line 1215, app/assets/stylesheets/components/_form_editor.scss */
.cover-pop .cc-grid__lines::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 1;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: inherit;
}
/* line 1228, app/assets/stylesheets/components/_form_editor.scss */
.cover-pop .cc-grid__lines:not(.cc-grid__lines--quad)::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2010%2010' preserveAspectRatio='xMidYMid%20meet'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='0.04' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M1%200V10M2%200V10M3%200V10M4%200V10M5%200V10M6%200V10M7%200V10M8%200V10M9%200V10M0%201H10M0%202H10M0%203H10M0%204H10M0%205H10M0%206H10M0%207H10M0%208H10M0%209H10'/%3E%3C/g%3E%3C/svg%3E");
}
/* line 1232, app/assets/stylesheets/components/_form_editor.scss */
.cover-pop .cc-grid__lines--quad::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%205%205' preserveAspectRatio='xMidYMid%20meet'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='0.04' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M1%200V5M2%200V5M3%200V5M4%200V5M0%201H5M0%202H5M0%203H5M0%204H5'/%3E%3C/g%3E%3C/svg%3E");
}
/* line 1237, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(180deg, white 0%, #f9f8f7 100%);
border: 1.5px solid rgba(31, 31, 31, 0.18);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95);
cursor: grab;
touch-action: none;
z-index: 5;
/* Position via top/left (drag JS) — transform anime uniquement scale */
transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
@media (max-width: 1023px) {
/* line 1237, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle {
/* Zone tactile élargie (~44px) sans changer le rendu du thumb (voir ::before). */
}
/* line 1253, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: transparent;
}
}
/* line 1266, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle::after {
/* Halo hover — discret, suit l'easing du handle */
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(31, 31, 31, 0.18) 0%, rgba(31, 31, 31, 0) 70%);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* line 1278, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle:hover {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 2px white;
}
/* line 1282, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle:hover::after {
opacity: 1;
}
/* line 1284, app/assets/stylesheets/components/_form_editor.scss */
.cc-grid__handle:active {
cursor: grabbing;
transform: translate(-50%, -50%) scale(0.94);
transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.12s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 4px rgba(0, 0, 0, 0.1);
}
/* ===========================
Right panel — content editor
=========================== */
/* line 1298, app/assets/stylesheets/components/_form_editor.scss */
.form-right-panel {
background-color: var(--editor-bg);
color: var(--editor-ink);
min-height: 100dvh;
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
/* Même repère pixel que .form-cover-wrapper (<1024px). */
}
@media (max-width: 1023px) {
/* line 1298, app/assets/stylesheets/components/_form_editor.scss */
.form-right-panel {
min-height: var(--editor-visual-vh, 100svh);
}
}
@media (min-width: 1024px) {
/* line 1298, app/assets/stylesheets/components/_form_editor.scss */
.form-right-panel {
margin-left: 50%;
}
}
@media (min-width: 1440px) {
/* line 1298, app/assets/stylesheets/components/_form_editor.scss */
.form-right-panel {
margin-left: 40%;
}
}
/* Panneau « Ton brouillon » — éditeur post (repliable) */
/* line 1323, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor {
margin: 0 0 32px;
padding: 0;
border: 1px solid var(--editor-border);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--editor-surface) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 24px -18px rgba(31, 31, 31, 0.28);
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
/* line 1338, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor:hover {
border-color: color-mix(in srgb, var(--editor-border-strong) 18%, var(--editor-border));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 28px -16px rgba(31, 31, 31, 0.22);
}
/* line 1346, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor.is-collapsed .writing-tutorial-synthesis__body {
grid-template-rows: 0fr;
}
/* line 1350, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor.is-collapsed .writing-tutorial-synthesis__chev {
transform: rotate(0deg);
}
/* line 1354, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor.is-collapsed .writing-tutorial-synthesis__title {
display: none;
}
/* line 1358, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis--editor.is-collapsed .writing-tutorial-synthesis__compact:not([hidden]) {
display: block;
}
/* line 1364, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__header {
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease;
}
/* line 1368, app/assets/stylesheets/components/_form_editor.scss */
.writing-tutorial-synthesis--editor:not(.is-collapsed) .form-editor .writing-tutorial-synthesis__header {
border-bottom-color: var(--editor-border);
}
/* line 1373, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
margin: 0;
padding: 14px 16px;
border: 0;
background: transparent;
color: var(--editor-ink);
text-align: left;
cursor: pointer;
transition: background-color 0.15s ease;
}
/* line 1388, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__toggle:focus-visible {
outline: 2px solid var(--editor-ink);
outline-offset: -2px;
}
/* line 1394, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__toggle-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
/* line 1403, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__toggle-action {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* line 1409, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--editor-border);
background: var(--editor-surface-soft);
font-family: "Roboto Mono", monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--editor-ink-muted);
}
/* line 1424, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__title {
margin: 0;
font-family: "Apfel", sans-serif;
font-size: 1.125rem;
line-height: 1.25;
color: var(--editor-ink);
}
/* line 1432, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__compact {
display: none;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "Roboto Mono", monospace;
font-size: 11px;
line-height: 1.45;
color: var(--editor-ink-muted);
}
/* line 1444, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__chev {
width: 12px;
height: 12px;
color: var(--editor-ink-muted);
transform: rotate(180deg);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* line 1452, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__body {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* line 1458, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__body-inner {
overflow: hidden;
}
/* line 1462, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__intro {
margin: 0;
padding: 14px 16px 0;
font-family: "Roboto Mono", monospace;
font-size: 11px;
line-height: 1.55;
color: var(--editor-ink-muted);
}
/* line 1471, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 8px 16px 14px;
}
/* line 1478, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__item {
display: grid;
grid-template-columns: minmax(5rem, 6rem) minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
padding: 3px 0;
border-top: 0;
border-bottom: 1px solid var(--editor-border);
}
/* line 1489, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__label {
margin: 0;
flex: 0 0 auto;
font-family: "Roboto Mono", monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--editor-ink-faint);
}
/* line 1500, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__value {
margin: 0;
min-width: 0;
padding: 4px 8px;
border: 1px solid transparent;
font-family: "Apfel", sans-serif;
font-size: 1rem;
/* Hauteur en px entiers (20 + 8 + 2 = 30) : une line-height fractionnaire
désaligne la boîte de la grille de pixels et le navigateur rend alors
l'arrondi du contour plus épais que ses côtés droits. */
line-height: 20px;
color: var(--editor-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* line 1516, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__value:has(.writing-tutorial-synthesis__input) {
padding: 0;
border: 0;
}
/* line 1522, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__input {
display: block;
width: 100%;
margin: 0;
padding: 4px 8px;
border: 1px solid transparent;
background: transparent;
background-clip: padding-box;
color: var(--editor-ink);
font-family: "Apfel", sans-serif;
font-size: 1rem;
line-height: 20px;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* line 1538, app/assets/stylesheets/components/_form_editor.scss */
.form-editor .writing-tutorial-synthesis__input:focus {
outline: none;
border-color: var(--editor-border-strong);
background: #fff;
}
/* Reveal initial states — gated par .is-revealing pour qu'on n'efface jamais
le contenu si JS échoue (pas de class = tout visible).
Le controller editor_reveal_controller ajoute .is-revealing au connect()
synchrone, juste avant le RAF qui lance le timeline GSAP. */
/* line 1549, app/assets/stylesheets/components/_form_editor.scss */
.form-editor.is-revealing {
/* Pas de clip-path sur la toolbar : l’entrée est opacity + y pilotés par GSAP
(voir editor_reveal_controller — un translateY uniquement en CSS laissait un
décalage jusqu’à la fin de la timeline, d’où l’effet “4px puis 14px”). */
}
/* line 1550, app/assets/stylesheets/components/_form_editor.scss */
.form-editor.is-revealing .editor-stagger {
opacity: 0;
}
/* line 1551, app/assets/stylesheets/components/_form_editor.scss */
.form-editor.is-revealing .cover-pill--reveal {
opacity: 0;
clip-path: inset(0 100% 0 0);
}
/* line 1555, app/assets/stylesheets/components/_form_editor.scss */
.form-editor.is-revealing .cover-toolbar .cover-pill--reveal {
clip-path: none;
}
/* Title input — large, borderless except a focus underline */
/* line 1561, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-field {
display: block;
position: relative;
}
/* line 1566, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input {
display: block;
width: 100%;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 8px 0 12px;
font-family: "Apfel", sans-serif;
font-size: clamp(1.75rem, 5vw, 2.5rem);
line-height: 1.1;
color: var(--editor-ink);
border-bottom: 1px solid var(--editor-border);
outline: none;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.2s ease, color 0.15s ease;
/* Le ring bleu du navigateur ne doit jamais réapparaître (cf. capture). */
/* Le champ vide et actif laisse la main à l'indice (.editor-hint) : ni
placeholder natif, ni curseur natif, pour n'avoir qu'un seul signal. */
/* Dès qu'on écrit, le texte passe à l'encre pleine et le curseur revient. */
}
/* line 1587, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input:focus, .editor-title-input:focus-visible {
outline: none;
box-shadow: none;
border-bottom-color: var(--editor-border-strong);
}
/* line 1594, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input::-moz-placeholder {
color: var(--editor-ink-placeholder);
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
}
.editor-title-input::placeholder {
color: var(--editor-ink-placeholder);
transition: color 0.15s ease;
}
/* line 1601, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input:focus:-moz-placeholder-shown {
caret-color: transparent;
}
.editor-title-input:focus:placeholder-shown {
caret-color: transparent;
}
/* line 1604, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input:focus:placeholder-shown::-moz-placeholder {
color: transparent;
}
.editor-title-input:focus:-moz-placeholder-shown::placeholder {
color: transparent;
}
.editor-title-input:focus:placeholder-shown::placeholder {
color: transparent;
}
/* line 1608, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input:not(:-moz-placeholder-shown) {
color: #000;
caret-color: var(--editor-ink);
}
.editor-title-input:not(:placeholder-shown) {
color: #000;
caret-color: var(--editor-ink);
}
/* === Indice de saisie — curseur + libellé « shimmer » + ellipsis ===
Superposé au champ, décoratif (aria-hidden). Visible seulement quand le champ
est actif et vide. Le libellé ne bouge pas : une large bande de lumière le
traverse lentement, et trois points apparaissent l'un après l'autre. */
/* line 1618, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: baseline;
gap: 0.14em;
padding: 8px 0 12px;
font-family: "Apfel", sans-serif;
font-size: clamp(1.75rem, 5vw, 2.5rem);
line-height: 1.1;
pointer-events: none;
opacity: 0;
transition: opacity 0.28s ease;
}
/* line 1634, app/assets/stylesheets/components/_form_editor.scss */
.editor-title-input:focus:-moz-placeholder-shown ~ .editor-hint, .editor-textarea:focus:-moz-placeholder-shown ~ .editor-hint {
opacity: 1;
}
.editor-title-input:focus:placeholder-shown ~ .editor-hint,
.editor-textarea:focus:placeholder-shown ~ .editor-hint {
opacity: 1;
}
/* line 1639, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__caret {
width: 2px;
height: 0.92em;
border-radius: 1px;
background: var(--editor-ink);
transform: translateY(0.1em);
animation: editor-caret-blink 1.1s steps(1, end) infinite;
}
/* Libellé traversé par une bande claire, large et douce (transitions étalées),
qui balaie lentement. Base plus foncée que le placeholder au repos — le champ
actif se lit mieux. */
/* Le libellé : base gris foncé au focus, large bande claire qui balaie. Le
dégradé se répète (pas de no-repeat) pour couvrir le texte en permanence —
sinon aux extrêmes le texte se retrouve hors dégradé et devient invisible. */
/* line 1654, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__text {
--shine-base: #908E8A;
--shine-hi: #ECEAE6;
background-image: linear-gradient(100deg, var(--shine-base) 0%, var(--shine-base) 36%, var(--shine-hi) 50%, var(--shine-base) 64%, var(--shine-base) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Safari exige text-fill-color transparent pour laisser voir le dégradé
clippé — sans ça le texte reste opaque et « rien ne bouge ». */
-webkit-text-fill-color: transparent;
animation: editor-shine 4s linear infinite;
}
/* Ellipsis : couleur pleine (pas de shimmer) pour que l'apparition point par
point reste bien lisible. */
/* line 1677, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__dots {
display: inline-flex;
gap: 0.04em;
margin-left: -0.06em;
color: #908E8A;
}
/* line 1684, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__dots i {
font-style: normal;
opacity: 0;
animation: editor-dot-in 2.4s ease-in-out infinite;
}
/* line 1689, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__dots i:nth-child(2) {
animation-delay: 0.28s;
}
/* line 1690, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__dots i:nth-child(3) {
animation-delay: 0.56s;
}
@keyframes editor-caret-blink {
0%, 45% {
opacity: 1;
}
50%, 95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Balayage lent et continu de droite à gauche ; la large bande (320%) rend la
transition douce. */
/* Le dégradé (200%) glisse d'une tuile complète : la bande claire traverse le
texte une fois par cycle, en boucle continue et sans « trou ». */
@keyframes editor-shine {
from {
background-position: 100% 0;
}
to {
background-position: -100% 0;
}
}
@keyframes editor-dot-in {
0%, 6% {
opacity: 0;
transform: translateY(0.1em);
}
20%, 66% {
opacity: 1;
transform: translateY(0);
}
82%, 100% {
opacity: 0;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
/* line 1715, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__caret,
.editor-hint__dots i {
animation: none;
opacity: 1;
}
/* line 1720, app/assets/stylesheets/components/_form_editor.scss */
.editor-hint__text,
.editor-hint__dots {
animation: none;
color: #908E8A;
-webkit-text-fill-color: currentColor;
}
}
/* line 1728, app/assets/stylesheets/components/_form_editor.scss */
.editor-error {
font-size: 12px;
color: #B91C1C;
}
/* line 1733, app/assets/stylesheets/components/_form_editor.scss */
.editor-meta-row {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 16px 32px;
padding-bottom: 12px;
}
/* line 1741, app/assets/stylesheets/components/_form_editor.scss */
.editor-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 220px;
}
/* line 1748, app/assets/stylesheets/components/_form_editor.scss */
.editor-field__label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--editor-ink-muted);
}
/* line 1755, app/assets/stylesheets/components/_form_editor.scss */
.editor-input {
display: block;
width: 100%;
border: 0;
background: transparent;
border-bottom: 1px solid var(--editor-border);
padding: 6px 0;
font-size: 14px;
color: var(--editor-ink);
outline: none;
transition: border-color 0.15s ease;
}
/* line 1767, app/assets/stylesheets/components/_form_editor.scss */
.editor-input::-moz-placeholder {
color: var(--editor-ink-faint);
}
.editor-input::placeholder {
color: var(--editor-ink-faint);
}
/* line 1768, app/assets/stylesheets/components/_form_editor.scss */
.editor-input:focus {
border-bottom-color: var(--editor-border-strong);
}
/* line 1771, app/assets/stylesheets/components/_form_editor.scss */
.editor-input--compact {
font-family: "Roboto Mono", monospace;
font-size: 12px;
letter-spacing: 0.04em;
}
/* line 1777, app/assets/stylesheets/components/_form_editor.scss */
.editor-body-field {
display: block;
margin-top: 28px;
}
/* Booster de créativité — question aléatoire au-dessus du textarea */
/* line 1783, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 28px;
}
/* line 1791, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__prompt {
width: 100%;
margin: 0;
padding: 16px 18px;
border: 1px solid var(--editor-border);
border-radius: 12px;
background: var(--editor-surface);
box-shadow: 0 6px 20px -16px rgba(31, 31, 31, 0.35);
animation: creativity-booster-in 0.35s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
/* line 1802, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__prompt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* line 1809, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__prompt-label {
margin: 0;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--editor-ink-faint);
}
/* line 1817, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
margin: 0;
padding: 0;
border: 1px solid var(--editor-border);
border-radius: 50%;
background: var(--editor-surface-soft);
color: var(--editor-ink-muted);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* line 1836, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__close svg {
width: 12px;
height: 12px;
}
/* line 1841, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__close:hover {
background: var(--editor-surface);
color: var(--editor-ink);
border-color: var(--editor-border-strong);
}
/* line 1847, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__close:focus-visible {
outline: 2px solid var(--editor-ink);
outline-offset: 2px;
}
/* line 1853, app/assets/stylesheets/components/_form_editor.scss */
.editor-creativity-booster__question {
margin: 0;
font-family: "Apfel", sans-serif;
font-size: 1.125rem;
line-height: 1.45;
color: var(--editor-ink);
}
@keyframes creativity-booster-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* line 1873, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea {
display: block;
width: 100%;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--editor-border);
background: var(--editor-surface);
padding: 16px 18px;
font-family: "Apfel", sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--editor-ink);
resize: vertical;
min-height: 240px;
outline: none;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.2s ease, color 0.15s ease;
overscroll-behavior: contain;
}
/* line 1895, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea::-moz-placeholder {
color: var(--editor-ink-placeholder);
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
}
.editor-textarea::placeholder {
color: var(--editor-ink-placeholder);
transition: color 0.15s ease;
}
/* line 1900, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea:focus, .editor-textarea:focus-visible {
outline: none;
box-shadow: none;
border-color: var(--editor-border-strong);
}
/* line 1907, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea:focus:-moz-placeholder-shown {
caret-color: transparent;
}
.editor-textarea:focus:placeholder-shown {
caret-color: transparent;
}
/* line 1910, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea:focus:placeholder-shown::-moz-placeholder {
color: transparent;
}
.editor-textarea:focus:-moz-placeholder-shown::placeholder {
color: transparent;
}
.editor-textarea:focus:placeholder-shown::placeholder {
color: transparent;
}
/* line 1913, app/assets/stylesheets/components/_form_editor.scss */
.editor-textarea:not(:-moz-placeholder-shown) {
color: #000;
caret-color: var(--editor-ink);
}
.editor-textarea:not(:placeholder-shown) {
color: #000;
caret-color: var(--editor-ink);
}
/* Le corps du texte a sa propre métrique : l'indice se cale sur la première
ligne, à l'intérieur du cadre. */
/* line 1921, app/assets/stylesheets/components/_form_editor.scss */
.editor-body-field {
position: relative;
}
/* line 1924, app/assets/stylesheets/components/_form_editor.scss */
.editor-body-field .editor-hint {
padding: 16px 18px;
font-size: 16px;
line-height: 1.6;
}
/* ===========================
Chapters
=========================== */
/* line 1935, app/assets/stylesheets/components/_form_editor.scss */
.chapters {
margin-top: 56px;
}
/* line 1939, app/assets/stylesheets/components/_form_editor.scss */
.chapters__header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--editor-border);
}
/* line 1948, app/assets/stylesheets/components/_form_editor.scss */
.chapters__title-group {
display: flex;
align-items: baseline;
gap: 12px;
}
/* line 1954, app/assets/stylesheets/components/_form_editor.scss */
.chapters__title {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--editor-ink);
font-weight: 500;
margin: 0;
}
/* line 1963, app/assets/stylesheets/components/_form_editor.scss */
.chapters__count {
font-size: 11px;
letter-spacing: 0.04em;
color: var(--editor-ink-faint);
}
/* line 1969, app/assets/stylesheets/components/_form_editor.scss */
.chapters__hint {
font-size: 13px;
color: var(--editor-ink-muted);
margin: 0;
}
/* line 1975, app/assets/stylesheets/components/_form_editor.scss */
.chapters__list {
display: flex;
flex-direction: column;
gap: 16px;
}
/* line 1981, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card {
background: var(--editor-surface);
border: 1px solid var(--editor-border);
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s ease, opacity 0.2s ease, transform 0.2s ease;
}
/* line 1990, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card:focus-within {
border-color: var(--editor-border-strong);
}
/* line 1992, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card.is-removing {
opacity: 0;
transform: translateY(-4px);
}
/* line 1998, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
/* line 2005, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__index {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--editor-ink-muted);
}
/* line 2015, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: 1px solid var(--editor-border);
border-radius: 999px;
color: var(--editor-ink-muted);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
/* line 2028, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__delete:hover {
color: #B91C1C;
border-color: #B91C1C;
background-color: rgba(185, 28, 28, 0.05);
}
/* line 2034, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__delete:focus-visible {
outline: 2px solid var(--editor-ink);
outline-offset: 2px;
}
/* line 2040, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__title-input {
display: block;
width: 100%;
border: 0;
background: transparent;
border-bottom: 1px solid var(--editor-border);
padding: 6px 0;
font-family: "Apfel", sans-serif;
font-size: 18px;
font-weight: 500;
color: var(--editor-ink);
outline: none;
transition: border-color 0.15s ease;
}
/* line 2054, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__title-input::-moz-placeholder {
color: var(--editor-ink-faint);
}
.chapter-card__title-input::placeholder {
color: var(--editor-ink-faint);
}
/* line 2055, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__title-input:focus {
border-bottom-color: var(--editor-border-strong);
}
/* line 2058, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__body-input {
display: block;
width: 100%;
border: 0;
background: transparent;
padding: 6px 0 0;
font-family: "Apfel", sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--editor-ink);
resize: vertical;
min-height: 140px;
outline: none;
overscroll-behavior: contain;
}
/* line 2073, app/assets/stylesheets/components/_form_editor.scss */
.chapter-card__body-input::-moz-placeholder {
color: var(--editor-ink-faint);
}
.chapter-card__body-input::placeholder {
color: var(--editor-ink-faint);
}
/* line 2076, app/assets/stylesheets/components/_form_editor.scss */
.chapters__add {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-top: 20px;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 20px;
background: transparent;
border: 1px dashed var(--editor-border-strong);
color: var(--editor-ink);
font-family: "Roboto Mono", monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
/* line 2095, app/assets/stylesheets/components/_form_editor.scss */
.chapters__add:hover {
background-color: var(--editor-ink);
color: #fff;
}
/* line 2100, app/assets/stylesheets/components/_form_editor.scss */
.chapters__add:focus-visible {
outline: 2px solid var(--editor-ink);
outline-offset: 2px;
}
/* line 2106, app/assets/stylesheets/components/_form_editor.scss */
.chapters__add-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 16px;
line-height: 1;
}
/* ===========================
Errors
=========================== */
/* line 2120, app/assets/stylesheets/components/_form_editor.scss */
.editor-errors {
margin: 0 24px 16px;
padding: 14px 16px;
background-color: #FEF2F2;
border: 1px solid #FCA5A5;
color: #991B1B;
}
@media (min-width: 1024px) {
/* line 2120, app/assets/stylesheets/components/_form_editor.scss */
.editor-errors {
margin: 0 48px 16px;
}
}
/* line 2132, app/assets/stylesheets/components/_form_editor.scss */
.editor-errors__title {
font-family: "Roboto Mono", monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 8px;
}
/* line 2140, app/assets/stylesheets/components/_form_editor.scss */
.editor-errors__list {
font-size: 13px;
list-style: disc inside;
margin: 0;
padding: 0;
}
/* Les transitions de la barre de réglages sont portées par .cover-group /
.cover-pop (cf. plus haut) : plus besoin de les activer au coup par coup. */
/* ================================================================
Brouillon issu du didacticiel — étiquettes et notes dans le corps
Un calque miroir est rendu derrière le textarea : il reprend le texte
à l'identique et l'habille (réponses du didacticiel en étiquettes,
conseils entre crochets en notes). Le textarea reste un champ texte
normal — son texte est simplement rendu transparent pour laisser voir
le calque. Toute règle qui modifie la métrique du texte (graisse,
italique, taille, interlettrage) désaligne les deux couches.
================================================================ */
/* line 12, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field__frame {
position: relative;
}
/* line 16, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-layer {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-style: solid;
border-color: transparent;
background: transparent;
color: transparent;
}
/* line 29, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field .editor-textarea {
position: relative;
z-index: 1;
}
/* line 34, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field.is-decorated {
/* Surlignage translucide : la sélection doit laisser lire le calque,
sinon le texte sélectionné disparaît. */
}
/* line 35, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field.is-decorated .editor-draft-layer {
background: var(--editor-surface);
color: #000;
}
/* line 40, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field.is-decorated .editor-textarea:not(:-moz-placeholder-shown) {
background: transparent;
color: transparent;
-webkit-text-fill-color: transparent;
caret-color: var(--editor-ink);
}
.editor-body-field.is-decorated .editor-textarea,
.editor-body-field.is-decorated .editor-textarea:not(:placeholder-shown) {
background: transparent;
color: transparent;
-webkit-text-fill-color: transparent;
caret-color: var(--editor-ink);
}
/* line 50, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field.is-decorated .editor-textarea::-moz-selection {
background: rgba(31, 31, 31, 0.18);
color: transparent;
-webkit-text-fill-color: transparent;
}
.editor-body-field.is-decorated .editor-textarea::selection {
background: rgba(31, 31, 31, 0.18);
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Le brouillon prérempli reste en retrait ; seules les étiquettes ressortent. */
/* line 58, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-body-field--draft.is-decorated .editor-draft-layer {
color: #6b6b6b;
}
/* Le surlignage s'arrête au mot : pas de marge latérale, sinon le fond
déborderait sur la ponctuation voisine. Le remplissage vertical ne change
pas la métrique du texte, `clone` le répète sur chaque ligne du bloc. */
/* line 65, app/assets/stylesheets/components/_editor_draft_markup.scss */
.draft-chip {
padding: 0.14em 0;
background: rgba(31, 31, 31, 0.08);
color: var(--editor-ink);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* line 73, app/assets/stylesheets/components/_editor_draft_markup.scss */
.draft-note {
padding: 0.14em 0;
background: rgba(214, 160, 32, 0.14);
/* Ton chaud opaque : le conseil reste second par rapport au récit, mais
doit rester confortable à lire sur toute la longueur du bloc. */
color: #7a6530;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* line 83, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 12px 0 0;
font-size: 12px;
color: var(--editor-ink-faint);
}
/* line 91, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-legend[hidden] {
display: none;
}
/* line 96, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-legend__item {
display: inline-flex;
align-items: center;
gap: 7px;
}
/* line 101, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-legend__item[hidden] {
display: none;
}
/* line 105, app/assets/stylesheets/components/_editor_draft_markup.scss */
.editor-draft-legend__item .draft-chip,
.editor-draft-legend__item .draft-note {
padding: 2px 0;
font-size: 11px;
}
/* ================================
Éditeur de post — layout vertical (navbar fixe + colonne + barre d’action)
Dépend des custom properties --editor-* sur .form-editor (_form_editor.scss).
================================ */
/* line 6, app/assets/stylesheets/components/_editor_actionbar.scss */
.form-editor {
--navbar-height: 75px;
--actionbar-height: 56px;
}
/* line 11, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-body {
/* overflow sur la colonne contenu uniquement : un overflow-x sur un ancêtre
de .editor-actionbar casse position:sticky en bas du viewport. */
overflow-x: clip;
padding: 24px 24px 32px;
max-width: 760px;
width: 100%;
margin: 0 auto;
flex: 1 1 auto;
}
@media (min-width: 640px) {
/* line 11, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-body {
padding: 24px 24px 48px;
}
}
@media (min-width: 1024px) {
/* line 11, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-body {
padding: calc(var(--navbar-height) + 48px) 48px 56px;
}
}
/* line 30, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar {
position: sticky;
bottom: 0;
left: 0;
z-index: 30;
width: 100%;
height: var(--actionbar-height);
border-top: 1px solid var(--bar-border);
margin-top: auto;
background: var(--bar-surface);
backdrop-filter: blur(var(--bar-blur));
-webkit-backdrop-filter: blur(var(--bar-blur));
}
/* line 42, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__inner {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 0;
padding-bottom: 0;
margin: 0 auto;
}
@media (max-width: 639px) {
/* line 42, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__inner {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 42, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__inner {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 1024px) {
/* line 42, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__inner {
padding-left: 40px;
padding-right: 40px;
}
}
/* line 68, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--editor-ink-muted);
}
@media (max-width: 480px) {
/* line 78, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__meta .tabular-nums {
display: none;
}
/* line 79, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__meta [aria-hidden="true"] {
display: none;
}
}
/* line 83, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__type {
color: var(--editor-ink);
}
/* line 87, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar__actions {
display: flex;
align-items: center;
gap: 16px;
}
/* contour en box-shadow au lieu d’une vraie bordure :
évite la frange claire (surtout visible en bas) quand la pilule ghost
— fond transparent puis surface au hover — se superpose à la barre floutée */
/* line 96, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar .cover-pill--ghost:not(.is-on),
.editor-body .cover-pill--ghost:not(.is-on) {
color: var(--editor-ink-muted);
border-color: transparent;
box-shadow: 0 0 0 1px var(--bar-border);
}
/* line 102, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar .cover-pill--ghost:not(.is-on):hover,
.editor-body .cover-pill--ghost:not(.is-on):hover {
background: var(--editor-surface-soft);
color: var(--editor-ink);
box-shadow: 0 0 0 1px var(--bar-border);
}
/* line 107, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar .cover-pill--ghost:not(.is-on):hover .cover-pill__dot,
.editor-body .cover-pill--ghost:not(.is-on):hover .cover-pill__dot {
opacity: 1;
background: #000;
}
/* line 113, app/assets/stylesheets/components/_editor_actionbar.scss */
.editor-actionbar .cover-pill--ghost:not(.is-on):active,
.editor-body .cover-pill--ghost:not(.is-on):active {
box-shadow: 0 0 0 1px var(--bar-border);
}
/* line 117, app/assets/stylesheets/components/_editor_actionbar.scss */
.form-editor.is-revealing .editor-actionbar {
transform: translateY(100%);
}
/* line 8, app/assets/stylesheets/components/_cursor_marquee.scss */
.cursor-marquee {
z-index: 100;
pointer-events: none;
justify-content: center;
align-items: center;
display: flex;
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
/* line 20, app/assets/stylesheets/components/_cursor_marquee.scss */
.cursor-marquee__card {
color: #ffffff;
background-color: #12142C;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
overflow: hidden;
transition: clip-path 0.4s cubic-bezier(0.75, 0, 0.25, 1), transform 0.4s cubic-bezier(0.75, 0, 0.25, 1);
transform: translateY(0%) rotate(0.001deg);
clip-path: inset(calc(50% - 0.25em) round 50em);
will-change: clip-path;
opacity: 0;
}
/* line 39, app/assets/stylesheets/components/_cursor_marquee.scss */
[data-cursor-marquee-status="active"] .cursor-marquee__card {
clip-path: inset(0 round 50em);
transform: translateY(-25%) rotate(0.001deg);
opacity: 1;
}
/* line 45, app/assets/stylesheets/components/_cursor_marquee.scss */
[data-cursor-marquee-status="not-active"] .cursor-marquee__card {
opacity: 0;
pointer-events: none;
}
/* line 50, app/assets/stylesheets/components/_cursor_marquee.scss */
.cursor-marquee__text-span {
white-space: nowrap;
padding: .5em 1em;
font-family: "Apfel", sans-serif;
font-size: 1.05em;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
display: block;
position: relative;
transition: opacity 0.15s ease-in-out 0.25s;
opacity: 0;
}
/* line 65, app/assets/stylesheets/components/_cursor_marquee.scss */
[data-cursor-marquee-status="active"] .cursor-marquee__text-span {
transition: opacity 0.15s ease-in-out 0s;
opacity: 1;
}
@media (hover: none), (pointer: coarse) {
/* line 73, app/assets/stylesheets/components/_cursor_marquee.scss */
.cursor-marquee {
display: none !important;
}
}
/* line 7, app/assets/stylesheets/components/_flashes.scss */
.flash-container {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 50;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
@media (min-width: 640px) {
/* line 7, app/assets/stylesheets/components/_flashes.scss */
.flash-container {
bottom: 20px;
right: 20px;
}
}
@media (min-width: 1024px) {
/* line 7, app/assets/stylesheets/components/_flashes.scss */
.flash-container {
right: 40px;
}
}
/* line 28, app/assets/stylesheets/components/_flashes.scss */
.flash {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 10px;
width: -moz-fit-content;
width: fit-content;
max-width: calc(100vw - 32px);
padding: 10px 10px 10px 12px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(14, 0, 0, 0.06);
border-radius: 9999px;
box-shadow: 0 8px 32px rgba(14, 0, 0, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transform: translateY(16px) scale(0.97);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), transform 0.4s cubic-bezier(0.625, 0.05, 0, 1);
}
@media (min-width: 452px) {
/* line 28, app/assets/stylesheets/components/_flashes.scss */
.flash {
max-width: 420px;
}
}
/* line 52, app/assets/stylesheets/components/_flashes.scss */
.flash[data-visible] {
transform: translateY(0) scale(1);
opacity: 1;
}
/* line 57, app/assets/stylesheets/components/_flashes.scss */
.flash[data-dismissing] {
transform: translateY(10px) scale(0.98);
opacity: 0;
transition-duration: 0.28s;
}
/* line 64, app/assets/stylesheets/components/_flashes.scss */
body.dark .flash {
background: rgba(17, 24, 39, 0.92);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
/* line 70, app/assets/stylesheets/components/_flashes.scss */
.flash__indicator {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 9999px;
}
/* line 77, app/assets/stylesheets/components/_flashes.scss */
.flash--notice .flash__indicator {
background-color: #4f46e5;
}
/* line 81, app/assets/stylesheets/components/_flashes.scss */
.flash--alert .flash__indicator {
background-color: #dc2626;
}
/* line 85, app/assets/stylesheets/components/_flashes.scss */
.flash__message {
margin: 0;
font-size: 14px;
line-height: 140%;
letter-spacing: 0.01em;
color: #323232;
}
/* line 93, app/assets/stylesheets/components/_flashes.scss */
body.dark .flash__message {
color: #e5e7eb;
}
/* line 97, app/assets/stylesheets/components/_flashes.scss */
.flash__close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: none;
border-radius: 9999px;
background: transparent;
color: #989898;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
/* line 117, app/assets/stylesheets/components/_flashes.scss */
.flash__close:hover {
opacity: 1;
color: #323232;
background-color: rgba(14, 0, 0, 0.05);
}
/* line 123, app/assets/stylesheets/components/_flashes.scss */
.flash__close:focus-visible {
outline: 2px solid #4f46e5;
outline-offset: 2px;
opacity: 1;
}
/* line 130, app/assets/stylesheets/components/_flashes.scss */
body.dark .flash__close {
color: #9ca3af;
}
/* line 133, app/assets/stylesheets/components/_flashes.scss */
body.dark .flash__close:hover {
color: #f3f4f6;
background-color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 639px) {
/* line 2, app/assets/stylesheets/components/_footer.scss */
.site-footer {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 2, app/assets/stylesheets/components/_footer.scss */
.site-footer {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 1024px) {
/* line 2, app/assets/stylesheets/components/_footer.scss */
.site-footer {
padding-left: 40px;
padding-right: 40px;
}
}
/* line 1, app/assets/stylesheets/components/_slider.scss */
.tailwind-slider.noUi-target {
height: 0.5rem !important;
background: #e5e7eb !important;
/* bg-gray-200 */
border: none !important;
box-shadow: none !important;
border-radius: 0.5rem !important;
}
/* line 9, app/assets/stylesheets/components/_slider.scss */
.tailwind-slider .noUi-connect {
background: #4f46e5 !important;
/* indigo-600 */
}
/* line 13, app/assets/stylesheets/components/_slider.scss */
.tailwind-slider .noUi-handle {
background: white !important;
border-radius: 9999px !important;
border: 2px solid #4f46e5 !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
width: 1.25rem !important;
height: 1.25rem !important;
right: -0.625rem !important;
top: -0.375rem !important;
}
/* line 24, app/assets/stylesheets/components/_slider.scss */
.tailwind-slider .noUi-handle::before,
.tailwind-slider .noUi-handle::after {
display: none !important;
}
@media (max-width: 639px) {
/* line 15, app/assets/stylesheets/pages/_home.scss */
.home-last-futures__title {
padding-left: 10px;
padding-bottom: 5px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 15, app/assets/stylesheets/pages/_home.scss */
.home-last-futures__title {
padding-left: 20px;
padding-bottom: 10px;
}
}
@media (min-width: 1024px) {
/* line 15, app/assets/stylesheets/pages/_home.scss */
.home-last-futures__title {
padding-left: 40px;
padding-bottom: 10px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 40, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="3"] .index-grid .index-card:nth-child(3) {
display: none !important;
}
}
@media (min-width: 1024px) {
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="4"] .index-grid .index-card:nth-child(4) {
display: none !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 40, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="5"] .index-grid .index-card:nth-child(5) {
display: none !important;
}
}
@media (min-width: 1024px) {
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="5"] .index-grid .index-card:nth-child(4) {
display: none !important;
}
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="5"] .index-grid .index-card:nth-child(5) {
display: none !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 40, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="7"] .index-grid .index-card:nth-child(7) {
display: none !important;
}
}
@media (min-width: 1024px) {
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="7"] .index-grid .index-card:nth-child(7) {
display: none !important;
}
}
@media (min-width: 1024px) {
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="8"] .index-grid .index-card:nth-child(7) {
display: none !important;
}
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="8"] .index-grid .index-card:nth-child(8) {
display: none !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 40, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="9"] .index-grid .index-card:nth-child(9) {
display: none !important;
}
}
@media (min-width: 1024px) {
/* line 50, app/assets/stylesheets/pages/_home.scss */
.home-last-futures[data-post-count="10"] .index-grid .index-card:nth-child(10) {
display: none !important;
}
}
/* ================================
Posts Index — title + grid layout
================================ */
/* Title section */
/* line 6, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-section {
padding: 14px;
background: #fff;
}
@media (max-width: 639px) {
/* line 6, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-section {
padding-left: 10px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
/* line 6, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-section {
padding-left: 20px;
}
}
@media (min-width: 1024px) {
/* line 6, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-section {
padding-left: 40px;
}
}
/* line 23, app/assets/stylesheets/pages/_posts_index.scss */
.index-title {
font-family: "Apfel", sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
line-height: 1;
color: #000;
display: flex;
align-items: baseline;
gap: 0.15em;
}
@media (max-width: 639px) {
/* line 23, app/assets/stylesheets/pages/_posts_index.scss */
.index-title {
font-size: clamp(2rem, 6.5vw, 2.65rem);
}
}
/* line 37, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-count {
font-size: clamp(1rem, 2.5vw, 2rem);
letter-spacing: 0.05em;
}
@media (max-width: 639px) {
/* line 37, app/assets/stylesheets/pages/_posts_index.scss */
.index-title-count {
font-size: clamp(0.8125rem, 2.2vw, 1.125rem);
}
}
/* Edge-to-edge grid: 3 cols desktop, 1 col mobile */
/* line 47, app/assets/stylesheets/pages/_posts_index.scss */
.index-grid {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
@media (min-width: 640px) {
/* line 47, app/assets/stylesheets/pages/_posts_index.scss */
.index-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
/* line 47, app/assets/stylesheets/pages/_posts_index.scss */
.index-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Card — full bleed, portrait ratio.
The card itself NEVER scales or transforms — its outer box stays
pinned to the grid cell. All hover motion happens inside
`.index-card__cover`, which is `overflow: hidden`, so the SVG can
zoom (sans rotation) + morpher pendant que le texte reste fixe. */
/* line 66, app/assets/stylesheets/pages/_posts_index.scss */
.index-card {
display: block;
text-decoration: none;
overflow: hidden;
}
/* line 72, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__cover {
position: relative;
width: 100%;
aspect-ratio: 3/4;
background-color: #12142C;
overflow: hidden;
isolation: isolate;
}
/* line 88, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__cover::after {
content: "";
position: absolute;
inset: -20% -40%;
z-index: 5;
pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
transform: translateX(-120%);
opacity: 0;
mix-blend-mode: overlay;
transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out;
}
/* line 108, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__svg {
position: absolute;
inset: 0;
padding: 0;
transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
transform-origin: 50% 50%;
transform: scale(1);
}
/* line 120, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__svg svg {
width: 100%;
height: 100%;
display: block;
}
/* line 126, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__svg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* line 133, app/assets/stylesheets/pages/_posts_index.scss */
.index-card:hover .index-card__svg {
transform: scale(1.14);
}
@media (hover: hover) and (pointer: fine) {
/* line 140, app/assets/stylesheets/pages/_posts_index.scss */
.index-card:hover .index-card__svg {
will-change: transform;
}
/* line 144, app/assets/stylesheets/pages/_posts_index.scss */
.index-card:hover .index-card__cover::after {
transform: translateX(120%);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
/* line 151, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__svg,
.index-card__cover::after {
transition: none !important;
}
/* line 155, app/assets/stylesheets/pages/_posts_index.scss */
.index-card:hover .index-card__svg {
will-change: auto;
transform: none;
}
/* line 159, app/assets/stylesheets/pages/_posts_index.scss */
.index-card:hover .index-card__cover::after {
opacity: 0;
}
}
/* Title block overlay at bottom-left (écart mobile aligné avec .cover-title-block sur la show) */
/* line 165, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__info {
position: absolute;
bottom: 10px;
left: 8px;
right: 8px;
z-index: 10;
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 640px) {
/* line 165, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__info {
bottom: 14px;
left: 16px;
right: 16px;
gap: 12px;
}
}
@media (min-width: 1024px) {
/* line 165, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__info {
bottom: 26px;
left: 26px;
right: 26px;
}
}
/* line 189, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__username {
font-family: "Apfel", sans-serif;
font-weight: 500;
font-size: 11px;
line-height: 1.12;
letter-spacing: 0.67px;
text-transform: uppercase;
color: #000;
width: -moz-fit-content;
width: fit-content;
padding: 3px 5px;
}
@media (min-width: 1024px) {
/* line 189, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__username {
font-size: 11px;
padding: 3px 5px;
}
}
/* line 206, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__title {
font-family: "Apfel", sans-serif;
font-size: clamp(1.5rem, 3vw, 2.7rem);
line-height: 1.12;
color: #12142C;
padding: 8px;
}
@media (min-width: 1024px) {
/* line 206, app/assets/stylesheets/pages/_posts_index.scss */
.index-card__title {
padding: 10px;
}
}
/* ================================
Auth pages — login & registration
================================ */
/* line 5, app/assets/stylesheets/pages/_auth.scss */
.auth-page {
position: relative;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 95px 0 40px;
overflow-x: hidden;
background: #0f1430;
}
/* Animated SVG pattern background */
/* line 17, app/assets/stylesheets/pages/_auth.scss */
.auth-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: radial-gradient(circle at 20% 20%, rgba(126, 88, 255, 0.2) 0%, rgba(126, 88, 255, 0) 45%), radial-gradient(circle at 80% 10%, rgba(41, 226, 209, 0.15) 0%, rgba(41, 226, 209, 0) 40%), radial-gradient(circle at 50% 85%, rgba(255, 70, 169, 0.12) 0%, rgba(255, 70, 169, 0) 42%), linear-gradient(160deg, #101633 0%, #0b1228 60%, #090f22 100%);
}
/* line 29, app/assets/stylesheets/pages/_auth.scss */
.auth-bg__svg {
width: 100%;
height: 100%;
display: block;
position: absolute;
inset: 0;
}
/* 80% dark overlay */
/* line 38, app/assets/stylesheets/pages/_auth.scss */
.auth-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: rgba(18, 20, 44, 0.8);
}
/* Form container */
/* line 46, app/assets/stylesheets/pages/_auth.scss */
.auth-form-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 460px;
padding: 12px;
}
@media (min-width: 640px) {
/* line 46, app/assets/stylesheets/pages/_auth.scss */
.auth-form-container {
padding: 20px;
}
}
/* line 58, app/assets/stylesheets/pages/_auth.scss */
.auth-form {
padding: 18px 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@media (min-width: 640px) {
/* line 58, app/assets/stylesheets/pages/_auth.scss */
.auth-form {
padding: 36px 40px;
}
}
/* line 70, app/assets/stylesheets/pages/_auth.scss */
.auth-form--wide {
max-width: none;
}
/* line 74, app/assets/stylesheets/pages/_auth.scss */
.auth-form-container:has(.auth-form--wide) {
max-width: 600px;
}
/* line 78, app/assets/stylesheets/pages/_auth.scss */
.auth-form-container:has(.auth-form--split) {
max-width: 920px;
}
/* Split layout header (spans both columns) */
/* line 83, app/assets/stylesheets/pages/_auth.scss */
.auth-form__header {
text-align: center;
margin-bottom: 22px;
}
@media (min-width: 768px) {
/* line 83, app/assets/stylesheets/pages/_auth.scss */
.auth-form__header {
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
}
/* line 93, app/assets/stylesheets/pages/_auth.scss */
.auth-form__header .auth-form__subtitle {
margin-top: 6px;
}
/* Split layout (edit profile) — 2 columns on desktop, stacked on mobile */
/* line 99, app/assets/stylesheets/pages/_auth.scss */
.auth-form__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 768px) {
/* line 99, app/assets/stylesheets/pages/_auth.scss */
.auth-form__grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: start;
}
}
/* Inside a split layout, the form fields no longer need extra top spacing
because the header already provides visual separation. */
/* line 113, app/assets/stylesheets/pages/_auth.scss */
.auth-form--split .auth-form__fields {
margin-top: 0;
}
/* line 117, app/assets/stylesheets/pages/_auth.scss */
.auth-form__column {
display: flex;
flex-direction: column;
}
/* line 122, app/assets/stylesheets/pages/_auth.scss */
.auth-form__column--side {
gap: 14px;
justify-content: flex-start;
}
/* Cards (profile summary, password, danger) */
/* line 128, app/assets/stylesheets/pages/_auth.scss */
.auth-card {
position: relative;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
/* line 135, app/assets/stylesheets/pages/_auth.scss */
.auth-card:hover {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.045);
}
/* line 141, app/assets/stylesheets/pages/_auth.scss */
.auth-card__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.85);
}
/* line 149, app/assets/stylesheets/pages/_auth.scss */
.auth-card__title {
font-family: "Apfel", sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
color: inherit;
}
/* line 157, app/assets/stylesheets/pages/_auth.scss */
.auth-card__text {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 16px;
}
/* line 165, app/assets/stylesheets/pages/_auth.scss */
.auth-card--danger {
border-color: rgba(239, 68, 68, 0.22);
background: rgba(239, 68, 68, 0.04);
}
/* line 169, app/assets/stylesheets/pages/_auth.scss */
.auth-card--danger:hover {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.07);
}
/* line 174, app/assets/stylesheets/pages/_auth.scss */
.auth-card--danger .auth-card__header {
color: #ffb4b4;
}
/* Profile summary card */
/* line 180, app/assets/stylesheets/pages/_auth.scss */
.auth-card--profile {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "avatar identity" "stats stats";
gap: 14px;
padding: 18px;
background: linear-gradient(135deg, rgba(126, 88, 255, 0.1) 0%, rgba(41, 226, 209, 0.06) 100%);
border-color: rgba(255, 255, 255, 0.12);
}
/* line 192, app/assets/stylesheets/pages/_auth.scss */
.auth-avatar {
grid-area: avatar;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7e58ff 0%, #ff46a9 100%);
color: #fff;
font-family: "Apfel", sans-serif;
font-size: 21px;
font-weight: bold;
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(126, 88, 255, 0.35);
}
/* line 209, app/assets/stylesheets/pages/_auth.scss */
.auth-card__identity {
grid-area: identity;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
/* line 218, app/assets/stylesheets/pages/_auth.scss */
.auth-card__name {
font-family: "Apfel", sans-serif;
font-size: 18px;
font-weight: bold;
color: #fff;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* line 229, app/assets/stylesheets/pages/_auth.scss */
.auth-card__meta {
font-family: "Roboto Mono", monospace;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* line 239, app/assets/stylesheets/pages/_auth.scss */
.auth-card__stats {
grid-area: stats;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* line 248, app/assets/stylesheets/pages/_auth.scss */
.auth-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
/* line 256, app/assets/stylesheets/pages/_auth.scss */
.auth-stat__value {
font-family: "Apfel", sans-serif;
font-size: 18px;
font-weight: bold;
color: #fff;
line-height: 1;
}
/* line 264, app/assets/stylesheets/pages/_auth.scss */
.auth-stat__label {
font-family: "Roboto Mono", monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.45);
}
/* Confirmation block (current password) */
/* line 273, app/assets/stylesheets/pages/_auth.scss */
.auth-confirm {
margin-top: 24px;
padding: 16px;
border: 1px dashed rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.02);
}
/* line 280, app/assets/stylesheets/pages/_auth.scss */
.auth-confirm__header {
display: flex;
align-items: center;
gap: 8px;
font-family: "Roboto Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.7);
}
/* line 291, app/assets/stylesheets/pages/_auth.scss */
.auth-confirm__hint {
margin: 8px 0 0;
font-family: "Roboto Mono", monospace;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
line-height: 1.5;
}
/* Shared icon sizing */
/* line 300, app/assets/stylesheets/pages/_auth.scss */
.auth-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Progress indicator (multi-step registration) */
/* line 307, app/assets/stylesheets/pages/_auth.scss */
.auth-progress {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 32px;
position: relative;
}
/* line 315, app/assets/stylesheets/pages/_auth.scss */
.auth-progress[hidden] {
display: none;
}
/* line 319, app/assets/stylesheets/pages/_auth.scss */
.auth-progress::before {
content: "";
position: absolute;
top: 14px;
left: 8%;
right: 8%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
z-index: 0;
}
/* line 331, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__step {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* line 341, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__dot {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(18, 20, 44, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.5);
font-family: "Roboto Mono", monospace;
font-size: 12px;
font-weight: 500;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
/* line 357, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__label {
font-family: "Roboto Mono", monospace;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
transition: color 0.3s ease;
}
/* line 367, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__step--active .auth-progress__dot {
background: #fff;
border-color: #fff;
color: #12142C;
transform: scale(1.08);
}
/* line 374, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__step--active .auth-progress__label {
color: rgba(255, 255, 255, 0.9);
}
/* line 380, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__step--completed .auth-progress__dot {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.9);
color: #12142C;
}
/* line 386, app/assets/stylesheets/pages/_auth.scss */
.auth-progress__step--completed .auth-progress__label {
color: rgba(255, 255, 255, 0.6);
}
/* Typography */
/* line 392, app/assets/stylesheets/pages/_auth.scss */
.auth-form__title {
font-family: "Apfel", sans-serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
line-height: 1.1;
color: #fff;
text-align: center;
}
/* line 400, app/assets/stylesheets/pages/_auth.scss */
.auth-form__subtitle {
font-family: "Roboto Mono", monospace;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
text-align: center;
margin-top: 8px;
text-transform: uppercase;
}
/* Form fields */
/* line 410, app/assets/stylesheets/pages/_auth.scss */
.auth-form__fields {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* line 417, app/assets/stylesheets/pages/_auth.scss */
.auth-label {
display: block;
font-family: "Roboto Mono", monospace;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 6px;
margin-top: 16px;
}
/* line 429, app/assets/stylesheets/pages/_auth.scss */
.auth-input {
display: block;
width: 100%;
padding: 12px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 16px;
font-family: "Apfel", sans-serif;
transition: border-color 0.2s ease;
}
@media (min-width: 640px) {
/* line 429, app/assets/stylesheets/pages/_auth.scss */
.auth-input {
padding: 14px 16px;
}
}
/* line 444, app/assets/stylesheets/pages/_auth.scss */
.auth-input::-moz-placeholder {
color: rgba(255, 255, 255, 0.25);
}
.auth-input::placeholder {
color: rgba(255, 255, 255, 0.25);
}
/* line 448, app/assets/stylesheets/pages/_auth.scss */
.auth-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.08);
}
/* Mobile choice screen (sign in) */
/* line 457, app/assets/stylesheets/pages/_auth.scss */
.auth-form__choice .auth-form__actions {
margin-top: 32px;
}
@media (max-width: 639px) {
/* line 463, app/assets/stylesheets/pages/_auth.scss */
.auth-form__choice {
display: block;
}
/* line 467, app/assets/stylesheets/pages/_auth.scss */
[data-auth-session-target="loginForm"] {
display: none;
}
/* line 471, app/assets/stylesheets/pages/_auth.scss */
.auth-page[data-auth-session-show-form-value="true"] .auth-form__choice {
display: none;
}
/* line 475, app/assets/stylesheets/pages/_auth.scss */
.auth-page[data-auth-session-show-form-value="true"] [data-auth-session-target="loginForm"] {
display: block;
}
/* line 479, app/assets/stylesheets/pages/_auth.scss */
.auth-form__register-link {
display: none;
}
}
@media (min-width: 640px) {
/* line 485, app/assets/stylesheets/pages/_auth.scss */
.auth-form__choice {
display: none;
}
}
/* Buttons */
/* line 491, app/assets/stylesheets/pages/_auth.scss */
.auth-form__actions {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Précédent / Suivant ou équivalent sur une même ligne (inscription) */
/* line 499, app/assets/stylesheets/pages/_auth.scss */
.auth-form__actions-row {
display: flex;
gap: 8px;
margin-top: 24px;
align-items: stretch;
/* Côte à côte : la géométrie commune suffit, on n'ajuste que l'espace
horizontal quand les libellés doivent passer sur deux lignes. */
}
@media (min-width: 640px) {
/* line 499, app/assets/stylesheets/pages/_auth.scss */
.auth-form__actions-row {
gap: 12px;
}
}
/* line 509, app/assets/stylesheets/pages/_auth.scss */
.auth-form__actions-row > * {
flex: 1 1 0;
min-width: 0;
}
/* line 516, app/assets/stylesheets/pages/_auth.scss */
.auth-form__actions-row .auth-btn-primary,
.auth-form__actions-row .auth-btn-secondary {
box-sizing: border-box;
white-space: normal;
padding-left: 12px;
padding-right: 12px;
}
/* Boutons — une seule géométrie pour les trois variantes : même hauteur, même
typo, même transition. Seule la peau change (rempli / contour / danger).
44px : assez pour le doigt, plus compact que les 51px précédents. */
/* line 566, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 10px 18px;
font-family: "Apfel", sans-serif;
font-size: 13px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, scale 0.12s ease-out;
background: #fff;
color: #12142C;
font-weight: bold;
}
@media (min-width: 640px) {
/* line 566, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary {
font-size: 14px;
}
}
/* line 553, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary:active {
scale: 0.98;
}
/* line 555, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
/* line 560, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* line 572, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-primary:hover {
background: #f0f0f0;
}
/* line 575, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 10px 18px;
font-family: "Apfel", sans-serif;
font-size: 13px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, scale 0.12s ease-out;
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
}
@media (min-width: 640px) {
/* line 575, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary {
font-size: 14px;
}
}
/* line 553, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary:active {
scale: 0.98;
}
/* line 555, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
/* line 560, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* line 581, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-secondary:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.05);
}
/* line 587, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 10px 18px;
font-family: "Apfel", sans-serif;
font-size: 13px;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.06em;
border: 1px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, scale 0.12s ease-out;
background: transparent;
color: #ff7a7a;
border-color: rgba(239, 68, 68, 0.4);
}
@media (min-width: 640px) {
/* line 587, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger {
font-size: 14px;
}
}
/* line 553, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger:active {
scale: 0.98;
}
/* line 555, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
/* line 560, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* line 593, app/assets/stylesheets/pages/_auth.scss */
.auth-btn-danger:hover {
border-color: rgba(239, 68, 68, 0.8);
background: rgba(239, 68, 68, 0.1);
color: #ff9a9a;
}
/* Terms section (registration) */
/* line 602, app/assets/stylesheets/pages/_auth.scss */
.auth-terms {
margin-top: 20px;
text-align: left;
}
/* line 606, app/assets/stylesheets/pages/_auth.scss */
.auth-terms h4 {
font-family: "Apfel", sans-serif;
font-size: 13px;
font-weight: bold;
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
margin-top: 12px;
margin-bottom: 2px;
}
/* line 615, app/assets/stylesheets/pages/_auth.scss */
.auth-terms h4:first-child {
margin-top: 0;
}
/* line 620, app/assets/stylesheets/pages/_auth.scss */
.auth-terms p {
font-family: "Roboto Mono", monospace;
font-size: 12px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
/* line 628, app/assets/stylesheets/pages/_auth.scss */
.auth-terms a {
color: rgba(255, 255, 255, 0.85);
}
/* Footer (secondary navigation links) */
/* line 634, app/assets/stylesheets/pages/_auth.scss */
.auth-form__footer {
margin-top: 24px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
/* line 642, app/assets/stylesheets/pages/_auth.scss */
.auth-link {
display: inline-block;
font-family: "Roboto Mono", monospace;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
/* line 650, app/assets/stylesheets/pages/_auth.scss */
.auth-link:hover {
color: rgba(255, 255, 255, 0.9);
}
/* Simple Form overrides for auth context */
/* line 656, app/assets/stylesheets/pages/_auth.scss */
.auth-form .input {
margin-bottom: 0;
}
/* line 660, app/assets/stylesheets/pages/_auth.scss */
.auth-form .field_with_errors input {
border-color: rgba(239, 68, 68, 0.6);
}
/* Writing tutorial — skip button (fixed bottom-right) */
/* line 665, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(18, 20, 44, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.75);
font-family: "Roboto Mono", monospace;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
text-decoration: none;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
@media (min-width: 640px) {
/* line 665, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip {
bottom: 32px;
right: 40px;
padding: 14px 22px;
font-size: 13px;
}
}
/* line 694, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip:hover {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
/* line 700, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip:active {
transform: scale(0.97);
}
/* line 704, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip[hidden] {
display: none;
}
/* line 709, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
/* line 716, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-skip:hover .writing-tutorial-skip__icon {
transform: translateX(3px);
}
/* line 720, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-identity {
text-wrap: balance;
}
/* line 724, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-identity__value {
margin-left: 0.2em;
color: #fff;
}
/* line 729, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-identity__mark {
margin-left: 0.08em;
font-family: "Roboto Mono", monospace;
font-size: 0.45em;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
vertical-align: super;
line-height: 0;
}
/* line 739, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-identity__note {
margin-top: 16px;
font-family: "Roboto Mono", monospace;
font-size: 11px;
line-height: 1.5;
text-align: center;
color: rgba(255, 255, 255, 0.85);
}
/* line 748, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-themes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 28px;
}
@media (min-width: 480px) {
/* line 748, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-themes {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
}
/* line 760, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-theme {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 14px 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.75);
font-family: "Roboto Mono", monospace;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: center;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
/* line 778, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-theme:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
/* line 784, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-theme:active {
transform: scale(0.98);
}
/* line 788, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-theme--selected {
border-color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
/* line 795, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 24px;
}
/* line 803, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker__display {
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
padding: 16px 20px;
text-align: center;
cursor: default;
}
/* line 813, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker__label {
font-family: "Roboto Mono", monospace;
font-size: 18px;
letter-spacing: 0.04em;
line-height: 1.45;
color: rgba(255, 255, 255, 0.85);
}
/* line 821, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: transparent;
color: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* line 833, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker__arrow svg {
width: 16px;
height: 16px;
}
/* line 838, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-picker__arrow:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
/* line 845, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-panel {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* line 850, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-panel[hidden] {
display: none;
}
/* line 855, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-panel__label {
display: block;
margin-bottom: 10px;
font-family: "Roboto Mono", monospace;
font-size: 11px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
/* line 864, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-trend-panel__input {
min-height: 88px;
resize: vertical;
text-align: left;
font-size: 13px;
line-height: 1.5;
}
/* line 872, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-section-label {
margin: 0 0 8px;
font-family: "Roboto Mono", monospace;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
text-align: center;
color: rgba(255, 255, 255, 0.55);
}
/* line 883, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-styles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 24px;
max-height: 350px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding-right: 4px;
}
@media (min-width: 520px) {
/* line 883, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-styles {
grid-template-columns: repeat(2, 1fr);
}
}
/* line 899, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: 100%;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.03);
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}
/* line 912, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.06);
}
/* line 917, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style:active {
transform: scale(0.99);
}
/* line 921, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style--selected {
border-color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.12);
}
/* line 927, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style__title {
font-family: "Apfel", sans-serif;
font-size: 0.95rem;
line-height: 1.25;
color: #fff;
}
/* line 934, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style__badge {
display: inline-block;
padding: 3px 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
font-family: "Roboto Mono", monospace;
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.75);
}
/* line 946, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-style__desc {
font-family: "Roboto Mono", monospace;
font-size: 10px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.65);
}
/* line 953, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis {
margin-top: 24px;
padding: 20px 18px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.04);
text-align: left;
}
/* line 960, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis[hidden] {
display: none;
}
/* line 964, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis--editor {
margin-top: 0;
margin-bottom: 28px;
border-color: var(--editor-border);
background: var(--editor-surface);
color: var(--editor-ink);
}
/* line 973, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__title {
margin: 0 0 6px;
font-family: "Apfel", sans-serif;
font-size: 1.125rem;
line-height: 1.3;
color: #fff;
}
/* line 980, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis--editor .writing-tutorial-synthesis__title {
color: var(--editor-ink);
}
/* line 985, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__intro {
margin: 0 0 16px;
font-family: "Roboto Mono", monospace;
font-size: 11px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.75);
}
/* line 992, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis--editor .writing-tutorial-synthesis__intro {
color: var(--editor-ink-muted);
}
/* line 997, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__list {
display: grid;
gap: 12px;
margin: 0;
}
/* line 1003, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__item {
display: grid;
gap: 4px;
}
/* line 1008, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__label {
margin: 0;
font-family: "Roboto Mono", monospace;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.55);
}
/* line 1017, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis--editor .writing-tutorial-synthesis__label {
color: var(--editor-ink-faint);
}
/* line 1022, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis__value {
margin: 0;
font-family: "Apfel", sans-serif;
font-size: 1.05rem;
line-height: 1.35;
color: #fff;
}
/* line 1029, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-synthesis--editor .writing-tutorial-synthesis__value {
color: var(--editor-ink);
}
/* line 1034, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft {
margin-top: 24px;
text-align: left;
}
/* line 1038, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft[hidden] {
display: none;
}
/* line 1043, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__scroll {
padding: 0;
max-height: min(50vh, 420px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* line 1051, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__editor {
min-height: 280px;
padding: 12px 12px;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.55;
font-size: 14px;
cursor: text;
border: 0;
background: transparent;
}
@media (min-width: 640px) {
/* line 1051, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__editor {
padding: 14px 16px;
}
}
/* line 1066, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__editor strong {
font-weight: 700;
color: #fff;
}
/* line 1071, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__editor:empty::before {
content: attr(data-placeholder);
color: rgba(255, 255, 255, 0.25);
pointer-events: none;
}
/* line 1077, app/assets/stylesheets/pages/_auth.scss */
.writing-tutorial-draft__editor:focus {
outline: none;
}
/* Idea generator (writing tutorial) */
/* line 1084, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__intro {
font-family: "Roboto Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
text-align: center;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 20px;
}
/* line 1094, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__phrase {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.35em;
min-height: 2.5em;
margin: 20px 0 20px;
text-align: center;
}
/* line 1105, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__noun,
.idea-generator__adjective {
font-family: "Apfel", sans-serif;
text-transform: uppercase;
font-size: clamp(1.5rem, 4vw, 2rem);
line-height: 1.2;
color: #fff;
}
/* line 1114, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
/* line 1121, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: transparent;
color: rgba(255, 255, 255, 0.75);
font-family: "Roboto Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* line 1137, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__btn:hover {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
/* line 1144, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__btn--primary {
border-color: rgba(255, 255, 255, 0.35);
color: #fff;
}
/* line 1149, app/assets/stylesheets/pages/_auth.scss */
.idea-generator__btn-icon {
font-size: 14px;
line-height: 1;
}
/* ================================================================
Split-auth design system — « sp- » (piloté par les tokens --sp-*).
Layout partagé connexion + inscription : couverture aléatoire à gauche
(42.43% = 611/1440), contenu à droite dans une colonne de 449px.
Réutilise le moteur de couverture (.form-cover-svg--editor, .cover-toolbar)
et l'entrée animée (editor-reveal / .editor-stagger).
================================================================ */
/* line 9, app/assets/stylesheets/pages/_signin.scss */
.sp-auth {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100dvh;
background: var(--sp-surface);
color: var(--sp-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1024px) {
/* line 9, app/assets/stylesheets/pages/_signin.scss */
.sp-auth {
flex-direction: row;
}
}
/* --- Couverture (gauche) ----------------------------------------------- */
/* line 26, app/assets/stylesheets/pages/_signin.scss */
.sp-cover {
position: relative;
width: 100%;
height: 40vh;
min-height: 240px;
overflow: hidden;
background: var(--sp-cover-bg);
flex-shrink: 0;
/* Décorative : pas de titre sur la couverture d'auth. */
}
@media (min-width: 1024px) {
/* line 26, app/assets/stylesheets/pages/_signin.scss */
.sp-cover {
width: 42.43%;
height: auto;
align-self: stretch;
}
}
/* line 41, app/assets/stylesheets/pages/_signin.scss */
.sp-cover .form-cover-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* line 49, app/assets/stylesheets/pages/_signin.scss */
.sp-cover .cover-title-block {
display: none;
}
@media (max-width: 1023px) {
/* line 54, app/assets/stylesheets/pages/_signin.scss */
.sp-cover .cover-toolbar {
top: 16px;
right: 16px;
}
}
/* Logo — retour accueil, en haut à gauche sur la couverture (navbar masquée). */
/* line 62, app/assets/stylesheets/pages/_signin.scss */
.sp-logo {
position: absolute;
top: 20px;
left: 20px;
z-index: 20;
font-family: var(--sp-h1-family);
font-weight: 500;
font-size: 18px;
line-height: 1;
letter-spacing: 0.02em;
color: #fff;
text-decoration: none;
transition: opacity 0.2s ease;
}
/* line 76, app/assets/stylesheets/pages/_signin.scss */
.sp-logo:hover {
opacity: 0.7;
}
@media (min-width: 1024px) {
/* line 62, app/assets/stylesheets/pages/_signin.scss */
.sp-logo {
top: 28px;
left: 40px;
}
}
/* --- Panneau formulaire (droite) --------------------------------------- */
/* line 87, app/assets/stylesheets/pages/_signin.scss */
.sp-panel {
position: relative;
z-index: 1;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 40px 24px 56px;
}
@media (min-width: 1024px) {
/* line 87, app/assets/stylesheets/pages/_signin.scss */
.sp-panel {
/* Padding bas plus fort : bloc centré remonté vers le tiers supérieur. */
padding: 40px 40px 172px;
}
}
/* line 102, app/assets/stylesheets/pages/_signin.scss */
.sp-content {
width: 100%;
max-width: 449px;
}
/* --- Typographie (tokens) ---------------------------------------------- */
/* line 108, app/assets/stylesheets/pages/_signin.scss */
.sp-title {
font-family: var(--sp-h1-family);
font-weight: var(--sp-h1-weight);
font-size: var(--sp-h1-size);
line-height: var(--sp-h1-line);
letter-spacing: var(--sp-h1-tracking);
color: var(--sp-ink);
text-align: center;
text-wrap: balance;
}
/* line 119, app/assets/stylesheets/pages/_signin.scss */
.sp-subtitle {
margin-top: 10px;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-subtitle);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--sp-ink-muted);
text-align: center;
text-wrap: pretty;
/* Tweak demandé : 1.125rem sur mobile. */
}
@media (max-width: 639px) {
/* line 119, app/assets/stylesheets/pages/_signin.scss */
.sp-subtitle {
font-size: var(--sp-text-subtitle-mobile);
}
}
/* Bloc formulaire : 384px, centré dans la colonne de 449px. */
/* line 137, app/assets/stylesheets/pages/_signin.scss */
.sp-form {
max-width: 384px;
margin-inline: auto;
margin-top: clamp(40px, 9vw, 112px);
}
/* line 143, app/assets/stylesheets/pages/_signin.scss */
.sp-field {
display: flex;
flex-direction: column;
gap: 11px;
}
/* line 149, app/assets/stylesheets/pages/_signin.scss */
.sp-label {
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-label);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--sp-ink-muted);
/* Tweak demandé : 1rem sur mobile. */
}
@media (max-width: 639px) {
/* line 149, app/assets/stylesheets/pages/_signin.scss */
.sp-label {
font-size: var(--sp-text-label-mobile);
}
}
/* Aide sous une question (ex. « Ça permet de se projeter dans le futur »). */
/* line 164, app/assets/stylesheets/pages/_signin.scss */
.sp-helper {
margin-top: 0;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-helper);
line-height: 1.4;
color: var(--sp-ink-faint);
}
/* --- Input « super clean » --------------------------------------------- */
/* line 174, app/assets/stylesheets/pages/_signin.scss */
.sp-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-input);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-field-border);
border-radius: var(--sp-radius-field);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Tweak demandé : placeholder / saisie à 1rem sur mobile. */
}
/* line 192, app/assets/stylesheets/pages/_signin.scss */
.sp-input::-moz-placeholder {
color: var(--sp-ink-faint);
}
.sp-input::placeholder {
color: var(--sp-ink-faint);
}
/* line 196, app/assets/stylesheets/pages/_signin.scss */
.sp-input:hover {
border-color: var(--sp-field-border-hover);
}
/* line 200, app/assets/stylesheets/pages/_signin.scss */
.sp-input:focus, .sp-input:focus-visible {
outline: none;
border-color: var(--sp-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
@media (max-width: 639px) {
/* line 174, app/assets/stylesheets/pages/_signin.scss */
.sp-input {
font-size: var(--sp-text-input-mobile);
}
}
/* Lien secondaire (« J'ai déjà un compte ») — gris, trait Osmo au survol.
L'underline vient de [data-underline-link] : pas de text-decoration ici. */
/* line 215, app/assets/stylesheets/pages/_signin.scss */
.sp-alt {
display: inline-block;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-link);
line-height: 1.2;
color: var(--sp-link);
text-align: center;
white-space: nowrap;
transition: color 0.25s var(--sp-ease);
}
/* line 226, app/assets/stylesheets/pages/_signin.scss */
.sp-alt:hover {
color: var(--sp-link-hover);
}
/* ================================================================
Connexion — spécifique (remember-me + CTA pleine largeur)
================================================================ */
/* line 235, app/assets/stylesheets/pages/_signin.scss */
.sp-remember {
display: flex;
align-items: center;
gap: 10px;
margin-top: 30px;
}
/* line 242, app/assets/stylesheets/pages/_signin.scss */
.sp-checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
margin: 0;
border: 1px solid #000;
border-radius: 4px;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: grid;
place-content: center;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* line 257, app/assets/stylesheets/pages/_signin.scss */
.sp-checkbox::before {
content: "";
width: 8px;
height: 8px;
border-radius: 1px;
transform: scale(0);
transition: transform 0.12s ease;
box-shadow: inset 1em 1em #fff;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
/* line 268, app/assets/stylesheets/pages/_signin.scss */
.sp-checkbox:checked {
background: var(--sp-primary);
border-color: var(--sp-primary);
}
/* line 272, app/assets/stylesheets/pages/_signin.scss */
.sp-checkbox:checked::before {
transform: scale(1);
}
/* line 277, app/assets/stylesheets/pages/_signin.scss */
.sp-checkbox:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 2px;
}
/* line 283, app/assets/stylesheets/pages/_signin.scss */
.sp-remember-label {
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-small);
line-height: 1.3;
color: var(--sp-ink-muted);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* line 293, app/assets/stylesheets/pages/_signin.scss */
.sp-cta {
display: flex;
flex-direction: column;
align-items: stretch;
/* CTA pleine largeur */
gap: 6px;
margin-top: 6vw;
}
/* CTA connexion : bouton animé standard, PLEINE LARGEUR (tweak demandé). */
/* line 302, app/assets/stylesheets/pages/_signin.scss */
.sp-submit {
width: 100%;
font-size: 1.0625rem;
/* 17px */
transition: scale 0.12s ease-out;
}
/* line 307, app/assets/stylesheets/pages/_signin.scss */
.sp-submit:active {
scale: 0.96;
}
/* line 311, app/assets/stylesheets/pages/_signin.scss */
.sp-submit:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 3px;
}
/* Lien secondaire ancré à 10vh du bas, centré dans le panneau blanc — même
placement sur connexion et inscription. Le wrapper porte le centrage
(translateX) ; le lien reçoit le stagger d'entrée (opacity/translateY). */
/* line 320, app/assets/stylesheets/pages/_signin.scss */
.sp-alt-wrap {
position: absolute;
left: 50%;
bottom: 10vh;
transform: translateX(-50%);
z-index: 5;
text-align: center;
}
/* --- Entrée : pré-masquage anti-flash (GSAP prend le relais) ------------ */
/* line 331, app/assets/stylesheets/pages/_signin.scss */
.sp-auth.is-revealing .form-cover-svg,
.sp-auth.is-revealing .editor-stagger {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
/* line 339, app/assets/stylesheets/pages/_signin.scss */
.sp-auth.is-revealing .form-cover-svg,
.sp-auth.is-revealing .editor-stagger {
opacity: 1;
}
}
/* Futur en attente — même split que la connexion, couverture du texte à gauche.
Le lien « Modifier mon texte » reste dans le flux : le texte est plus long
que sur la connexion, et le placement absolu à 10vh le collait au bouton. */
/* line 349, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending {
/* Aperçu figé : les cibles du moteur restent dans le DOM, pas les réglages. */
}
/* line 350, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-cover .cover-title-block {
display: flex;
}
/* line 354, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .cover-username:empty,
.sp-auth--pending .cover-title-text:empty {
display: none;
}
/* line 360, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .cover-toolbar {
display: none;
}
/* line 364, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-panel {
flex-direction: column;
}
@media (min-width: 1024px) {
/* line 364, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-panel {
padding-bottom: 40px;
}
}
/* line 372, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-form {
margin-top: clamp(28px, 5vw, 72px);
}
/* line 376, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-cta {
margin-top: clamp(28px, 4vw, 56px);
}
/* line 380, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-note {
max-width: 28rem;
}
/* line 384, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .sp-alt-wrap {
position: static;
left: auto;
bottom: auto;
transform: none;
margin-top: 28px;
}
/* line 392, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .pending-terms {
text-align: left;
}
/* line 396, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--pending .pending-terms .sp-remember {
margin-top: 18px;
}
/* Plusieurs liens secondaires côte à côte (confirmation, déverrouillage…).
Sur mobile, le titre long pousse le bouton vers le lien ancré : on les remet dans le flux. */
/* line 403, app/assets/stylesheets/pages/_signin.scss */
.sp-alt-wrap--row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 22px;
width: -moz-max-content;
width: max-content;
max-width: calc(100% - 32px);
}
@media (max-width: 1023px) {
/* line 403, app/assets/stylesheets/pages/_signin.scss */
.sp-alt-wrap--row {
position: static;
left: auto;
bottom: auto;
transform: none;
width: auto;
max-width: none;
margin-top: 32px;
}
}
@media (max-width: 1023px) {
/* line 423, app/assets/stylesheets/pages/_signin.scss */
.sp-panel:has(.sp-alt-wrap--row) {
flex-direction: column;
}
}
/* Formulaire à plusieurs champs : l'écart vient du gap, pas du 6vw du CTA. */
/* line 429, app/assets/stylesheets/pages/_signin.scss */
.sp-form--fields {
display: flex;
flex-direction: column;
gap: 22px;
}
/* line 434, app/assets/stylesheets/pages/_signin.scss */
.sp-form--fields > .sp-cta {
margin-top: 10px;
}
/* Profil — même split, le nom sur la couverture, actions dans le flux. */
/* line 441, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-cover .cover-title-block {
display: flex;
}
/* line 445, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .cover-username:empty,
.sp-auth--account .cover-title-text:empty {
display: none;
}
/* line 450, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-panel {
flex-direction: column;
}
@media (min-width: 1024px) {
/* line 450, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-panel {
padding-bottom: 40px;
}
}
/* line 458, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-form {
margin-top: clamp(28px, 5vw, 64px);
}
/* line 462, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-note {
max-width: 28rem;
}
/* line 466, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-alt--danger {
color: var(--sp-danger);
}
/* line 469, app/assets/stylesheets/pages/_signin.scss */
.sp-auth--account .sp-alt--danger:hover {
color: #b91c1c;
}
/* line 475, app/assets/stylesheets/pages/_signin.scss */
.sp-danger-form {
margin: 12px 0 0;
text-align: center;
}
/* ================================================================
Inscription — assistant multi-étapes (« sp-auth--wizard »).
Réutilise le système .sp-* (tokens --sp-*). Une question visible à la fois
dans .sp-stage (fond horizontal) ; la barre .sp-nav reste FIXE (les CTA ne
bougent jamais). « J'ai déjà un compte » ancré à 10vh du bas.
================================================================ */
/* line 9, app/assets/stylesheets/pages/_signup.scss */
.sp-auth--wizard .sp-panel {
align-items: flex-start;
padding-top: clamp(56px, 12vh, 120px);
/* Réserve l'espace du lien « J'ai déjà un compte » ancré en bas (10vh). */
padding-bottom: 16vh;
}
@media (min-width: 1024px) {
/* line 9, app/assets/stylesheets/pages/_signup.scss */
.sp-auth--wizard .sp-panel {
padding-top: clamp(80px, 14vh, 131px);
}
}
/* --- Scène des questions ------------------------------------------------ */
/* line 22, app/assets/stylesheets/pages/_signup.scss */
.sp-stage {
position: relative;
/* Hauteur stable pour les étapes « question » → la nav ne saute pas.
(L'étape charte, plus longue, s'étend naturellement.) */
min-height: clamp(132px, 22vh, 172px);
/* Anti-FOUC : avant JS, seule la 1re étape est visible. */
}
/* line 29, app/assets/stylesheets/pages/_signup.scss */
.sp-stage .sp-step {
display: none;
}
/* line 32, app/assets/stylesheets/pages/_signup.scss */
.sp-stage .sp-step:first-child {
display: block;
}
/* Label + aide empilés (étapes âge / email). */
/* line 38, app/assets/stylesheets/pages/_signup.scss */
.sp-field__head {
display: flex;
flex-direction: column;
gap: 0;
}
/* Message d'erreur par étape — réserve la place (pas de saut). */
/* line 45, app/assets/stylesheets/pages/_signup.scss */
.sp-error {
margin: 6px 0 0;
font-family: var(--sp-h1-family);
font-size: var(--sp-text-helper);
line-height: 1.35;
color: var(--sp-danger);
min-height: 1.1em;
}
/* line 54, app/assets/stylesheets/pages/_signup.scss */
.sp-input--error {
border-color: var(--sp-danger);
}
/* line 57, app/assets/stylesheets/pages/_signup.scss */
.sp-input--error:focus, .sp-input--error:focus-visible {
border-color: var(--sp-danger);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
/* --- Barre de nav partagée (FIXE : les CTA ne bougent jamais) ----------- */
/* line 65, app/assets/stylesheets/pages/_signup.scss */
.sp-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: clamp(28px, 5vw, 56px);
}
/* « Retour » — lien texte léger (gris), animation de trait Osmo au survol.
Masqué en visibility à l'étape 1 → conserve sa place, le CTA reste calé
à droite. */
/* line 76, app/assets/stylesheets/pages/_signup.scss */
.sp-back {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: transparent;
padding: 2px 0;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-input);
line-height: 1.2;
color: var(--sp-link);
cursor: pointer;
transition: color 0.25s var(--sp-ease);
}
@media (max-width: 639px) {
/* line 76, app/assets/stylesheets/pages/_signup.scss */
.sp-back {
font-size: var(--sp-text-input-mobile);
}
}
/* line 93, app/assets/stylesheets/pages/_signup.scss */
.sp-back:hover {
color: var(--sp-link-hover);
}
/* line 97, app/assets/stylesheets/pages/_signup.scss */
.sp-back:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 4px;
border-radius: 4px;
}
/* line 104, app/assets/stylesheets/pages/_signup.scss */
.sp-back--hidden {
visibility: hidden;
pointer-events: none;
}
/* « Suite » / « Créer mon compte » — pill animé (droite, calé). */
/* line 110, app/assets/stylesheets/pages/_signup.scss */
.sp-next {
font-size: 1.0625rem;
transition: scale 0.12s ease-out;
}
/* line 114, app/assets/stylesheets/pages/_signup.scss */
.sp-next:active {
scale: 0.96;
}
/* line 118, app/assets/stylesheets/pages/_signup.scss */
.sp-next:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 3px;
}
/* --- Charte (étape 4) --------------------------------------------------- */
/* line 125, app/assets/stylesheets/pages/_signup.scss */
.sp-terms {
display: flex;
flex-direction: column;
gap: 16px;
}
/* line 131, app/assets/stylesheets/pages/_signup.scss */
.sp-terms__title {
margin: 0 0 2px;
font-family: var(--sp-h1-family);
font-weight: 500;
font-size: var(--sp-text-small);
line-height: 1.3;
color: var(--sp-ink);
}
/* line 140, app/assets/stylesheets/pages/_signup.scss */
.sp-terms__text {
margin: 0;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-small);
line-height: 1.5;
color: var(--sp-ink-muted);
text-wrap: pretty;
}
/* line 150, app/assets/stylesheets/pages/_signup.scss */
.sp-terms__link {
color: var(--sp-primary);
}
/* Le placement du lien secondaire (.sp-alt-wrap, 10vh du bas) est partagé
avec la connexion — défini dans _signin.scss. */
/* --- Merci (confirmation) ---------------------------------------------- */
/* line 158, app/assets/stylesheets/pages/_signup.scss */
.sp-note {
margin: 20px auto 0;
max-width: 34rem;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-helper);
line-height: 1.5;
color: var(--sp-ink-muted);
text-align: center;
text-wrap: pretty;
}
/* ================================================================
Entonnoir d'écriture — réutilise le layout split .sp-* (tokens --sp-*).
Chaque étape = une question dans .sp-stage (fondu horizontal). Composants
propres : puces « délicieuses » (thème), cartes de style, roue de tendance.
================================================================ */
/* --- Layout entonnoir : colonne large, titre/sous-titre respirent -------- */
/* line 8, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel {
/* Pas de plafond 449px : le contenu occupe le panneau, chaque bloc se centre
avec sa propre largeur. */
/* Titre un cran plus petit que l'auth (les titres de l'entonnoir sont longs). */
/* Sous-titre comme sur la connexion, mais plus large. */
/* Couverture : le nom et le titre apparaissent au fil des étapes. */
/* Scène de hauteur stable → la barre de nav ne bouge jamais entre les étapes
(le titre reste ancré en haut, l'espace vide comble le bas). */
/* Barre de nav : dès qu'on démarre, Retour à gauche / CTA à droite
(space-between, figés). Sur l'intro : CTA seul, centré. */
}
/* line 11, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-content {
max-width: none;
}
/* line 16, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-title {
font-size: clamp(2rem, 4.6vw, 3.25rem);
max-width: 700px;
margin-inline: auto;
}
/* line 23, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-subtitle {
max-width: 600px;
margin-inline: auto;
}
/* line 29, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-cover .cover-title-block {
display: flex;
}
/* line 33, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .cover-username:empty,
.sp-auth--funnel .cover-title-text:empty {
display: none;
}
@media (min-width: 1024px) {
/* line 41, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-stage {
min-height: 486px;
}
}
/* line 48, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
max-width: 640px;
margin-inline: auto;
}
/* line 57, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-nav--solo {
justify-content: center;
}
/* line 60, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-nav--solo .sp-back {
display: none;
}
/* line 65, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-auth--funnel .sp-back {
padding: 2px 0;
font-size: var(--sp-text-link);
line-height: 1.2;
}
/* --- Chrome de progression (haut du panneau) --------------------------- */
/* line 73, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-progress {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
pointer-events: none;
}
@media (min-width: 1024px) {
/* line 73, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-progress {
top: 28px;
left: 40px;
right: 40px;
}
}
/* line 92, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-progress__phrase {
min-width: 0;
font-family: "Roboto Mono", monospace;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sp-ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* line 104, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-progress__pill {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 4px 10px;
border: 1px solid var(--sp-field-border);
border-radius: 999px;
background: var(--sp-surface);
color: var(--sp-ink-muted);
font-family: "Roboto Mono", monospace;
font-size: 11px;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
/* line 120, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-progress__icon {
width: 13px;
height: 13px;
}
/* Eyebrow « La fabrique à idée ». */
/* line 126, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-eyebrow {
margin: 0 0 8px;
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: var(--sp-text-helper);
line-height: 1.3;
color: var(--sp-ink-muted);
text-align: center;
}
/* Intro : le paragraphe descend au niveau des champs des autres étapes. */
/* line 137, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-intro__lead {
margin-top: clamp(40px, 9vw, 96px);
}
/* Sous-titre « question » (au-dessus d'un widget). */
/* line 142, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-subtitle--q {
font-size: var(--sp-text-subtitle);
margin-top: clamp(20px, 3vw, 36px);
margin-bottom: 0;
}
@media (max-width: 639px) {
/* line 142, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-subtitle--q {
font-size: var(--sp-text-subtitle-mobile);
margin-top: 32px;
}
}
/* line 153, app/assets/stylesheets/pages/_writing_funnel.scss */
.sp-error--center {
text-align: center;
}
/* Champ simple (pseudo, âge, lieu) — colonne 384 centrée, marge sous le titre. */
/* line 158, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-field {
max-width: 384px;
margin: clamp(40px, 9vw, 96px) auto 0;
display: flex;
flex-direction: column;
gap: 11px;
text-align: left;
}
/* Conditions d'utilisation — texte un cran plus grand. */
/* line 168, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-terms {
max-width: 460px;
margin: clamp(32px, 6vw, 64px) auto 0;
}
/* line 172, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-terms .sp-terms__title {
font-size: 1.0625rem;
}
/* line 176, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-terms .sp-terms__text {
font-size: 1rem;
line-height: 1.55;
}
/* --- Puces de thème (checkboxes délicieuses) --------------------------- */
/* line 183, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 460px;
margin: clamp(20px, 3vw, 36px) auto 0;
}
/* line 192, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px 11px 13px;
background: var(--sp-surface);
border: 1px solid var(--sp-field-border);
border-radius: 12px;
cursor: pointer;
/* Transitions ciblées : le mouvement (lift/press) et le fond de sélection. */
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.14s ease, box-shadow 0.2s ease;
}
/* line 206, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip:hover {
border-color: var(--sp-field-border-hover);
transform: translateY(-2px);
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18);
}
/* line 212, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip:active {
transform: scale(0.96);
}
/* line 216, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 2px;
}
/* line 221, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip--selected {
border-color: var(--sp-primary);
background: rgba(79, 70, 229, 0.05);
}
/* line 227, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip__box {
width: 20px;
height: 20px;
flex-shrink: 0;
display: grid;
place-content: center;
border: 1.5px solid var(--sp-field-border);
border-radius: 6px;
color: #fff;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* line 238, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip--selected .funnel-chip__box {
background: var(--sp-primary);
border-color: var(--sp-primary);
}
/* line 244, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip__check {
width: 13px;
height: 13px;
transform: scale(0);
/* Pop « spring » à la sélection. */
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* line 251, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip--selected .funnel-chip__check {
transform: scale(1);
}
/* line 256, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip__label {
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1;
color: var(--sp-ink);
}
/* --- Cartes de style (checkboxes classiques mais soignées) ------------- */
/* line 265, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-styles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
max-width: 540px;
margin: clamp(18px, 2.5vw, 28px) auto 0;
}
@media (min-width: 560px) {
/* line 265, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-styles {
grid-template-columns: 1fr 1fr;
}
}
/* line 277, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: flex;
flex-direction: column;
gap: 4px;
padding: 13px 16px;
text-align: left;
background: var(--sp-surface);
border: 1px solid var(--sp-field-border);
border-radius: 12px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.14s ease;
}
/* line 291, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style:hover {
border-color: var(--sp-field-border-hover);
transform: translateY(-2px);
box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.14);
}
/* line 297, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style:active {
transform: scale(0.98);
}
/* line 301, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style:focus-visible {
outline: 2px solid var(--sp-primary);
outline-offset: 2px;
}
/* line 306, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style--selected {
border-color: var(--sp-primary);
box-shadow: inset 0 0 0 1px var(--sp-primary);
}
/* Pastille de validation qui « pop » à la sélection (spring). */
/* line 313, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style__check {
position: absolute;
top: 12px;
right: 12px;
width: 20px;
height: 20px;
display: grid;
place-content: center;
border-radius: 50%;
background: var(--sp-primary);
color: #fff;
transform: scale(0);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* line 327, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style__check svg {
width: 12px;
height: 12px;
}
/* line 332, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style--selected .funnel-style__check {
transform: scale(1);
}
/* line 337, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style__title {
font-family: var(--sp-h1-family);
font-weight: 500;
font-size: 1rem;
line-height: 1.2;
color: var(--sp-ink);
padding-right: 26px;
}
/* line 346, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-style__desc {
font-family: var(--sp-h1-family);
font-weight: 400;
font-size: 0.8125rem;
line-height: 1.35;
color: var(--sp-ink-muted);
}
/* --- Inversion : panneau textarea ------------------------------------- */
/* line 355, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-trend__panel {
max-width: 460px;
margin: 20px auto 0;
}
/* line 359, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-trend__panel[hidden] {
display: none;
}
/* line 364, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-trend__label {
display: block;
margin-bottom: 8px;
}
/* line 369, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-textarea {
min-height: 120px;
resize: vertical;
line-height: 1.5;
}
/* --- Générateur d'étincelles (machine à sous) -------------------------- */
/* line 377, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot {
max-width: 560px;
margin: clamp(24px, 4vw, 44px) auto 0;
}
/* line 382, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__reels {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
/* line 389, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__reel {
height: 52px;
/* = CELL dans jackpot_controller.js */
flex: 1;
max-width: 200px;
overflow: hidden;
border: 1px solid var(--sp-field-border);
border-radius: 12px;
background: var(--sp-surface);
}
/* line 399, app/assets/stylesheets/pages/_writing_funnel.scss */
button.jackpot__reel {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
padding: 0;
min-width: 0;
font: inherit;
color: inherit;
text-align: center;
cursor: pointer;
}
/* line 409, app/assets/stylesheets/pages/_writing_funnel.scss */
button.jackpot__reel:hover {
border-color: var(--sp-field-border-hover);
}
/* line 413, app/assets/stylesheets/pages/_writing_funnel.scss */
button.jackpot__reel:focus-visible {
outline: 2px solid var(--sp-ink);
outline-offset: 2px;
}
/* line 418, app/assets/stylesheets/pages/_writing_funnel.scss */
button.jackpot__reel.is-busy {
cursor: progress;
}
/* line 423, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__strip {
display: flex;
flex-direction: column;
will-change: transform;
}
/* line 429, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__cell {
height: 52px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
font-family: var(--sp-h1-family);
font-size: 1.0625rem;
line-height: 1;
color: var(--sp-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* line 444, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin {
width: 48px;
height: 48px;
flex-shrink: 0;
display: grid;
place-content: center;
border: 0;
border-radius: 50%;
background: #000;
color: #fff;
cursor: pointer;
transition: transform 0.15s ease;
}
/* line 457, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin svg {
width: 22px;
height: 22px;
}
/* line 462, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin:hover {
transform: scale(1.06);
}
/* line 466, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin:active {
transform: scale(0.94);
}
/* line 470, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin.is-spinning {
animation: jackpot-spin 1s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes jackpot-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
/* line 481, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__spin.is-spinning {
animation: none;
}
}
/* Tendance en machine à sous : le rouleau collé au bouton jackpot, centrés. */
/* line 487, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot--trend {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
max-width: 520px;
margin: clamp(20px, 3.5vw, 36px) auto 0;
}
/* line 496, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__reel--trend {
flex: 0 1 360px;
max-width: 360px;
}
/* line 501, app/assets/stylesheets/pages/_writing_funnel.scss */
.jackpot__cell--trend {
font-size: 1rem;
}
/* Lien « Passer le guide » : réutilise .sp-alt-wrap (10vh du bas, centré). */
/* line 506, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-skip-wrap {
z-index: 6;
}
/* ================================================================
Éditeur — révélation du brouillon (skeleton → texte)
================================================================ */
/* line 514, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-body-field--draft {
position: relative;
/* Le brouillon prérempli issu de l'entonnoir est en retrait (black-600) ;
les valeurs générées par l'entonnoir passeront en black-900 (.draft-value). */
}
/* line 519, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-body-field--draft .editor-textarea {
color: #6b6b6b;
}
/* line 524, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-skeleton {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 8px;
pointer-events: none;
}
/* line 534, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-skeleton__line {
height: 13px;
border-radius: 6px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.1) 37%, rgba(0, 0, 0, 0.05) 63%);
background-size: 400% 100%;
animation: editor-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes editor-skeleton-shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* line 552, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-skeleton__line {
animation: none;
}
}
/* Valeurs générées par l'entonnoir dans le brouillon (black-900). */
/* line 558, app/assets/stylesheets/pages/_writing_funnel.scss */
.draft-value {
color: #323232;
font-weight: 500;
}
/* Trait qui se dessine à l'entrée de l'éditeur (scaleX via editor-reveal). */
/* line 564, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-drawline {
display: block;
width: 100%;
height: 1px;
margin: 10px 0 4px;
background: var(--editor-border, #e7e5e4);
transform: scaleX(0);
transform-origin: left center;
}
/* line 574, app/assets/stylesheets/pages/_writing_funnel.scss */
.form-editor.is-revealing .editor-drawline {
transform: scaleX(0);
}
/* --- Mouvement réduit : pas de spring/lift, états immédiats --------------- */
@media (prefers-reduced-motion: reduce) {
/* line 580, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip,
.funnel-style {
transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* line 584, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip:hover,
.funnel-style:hover {
transform: none;
}
/* line 589, app/assets/stylesheets/pages/_writing_funnel.scss */
.funnel-chip__check,
.funnel-style__check,
.funnel-chip__box {
transition: none;
}
/* line 595, app/assets/stylesheets/pages/_writing_funnel.scss */
.editor-drawline {
transform: scaleX(1);
}
}
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
/* line 5, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
touch-action: none;
-moz-user-select: none;
user-select: none;
box-sizing: border-box;
}
/* line 18, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-target {
position: relative;
}
/* line 21, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-base,
.noUi-connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
/* line 30, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-connects {
overflow: hidden;
z-index: 0;
}
/* line 34, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-connect,
.noUi-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
right: 0;
height: 100%;
width: 100%;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat;
}
/* Offset direction
*/
/* line 51, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
left: 0;
right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
/* line 58, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-origin {
top: -100%;
width: 0;
}
/* line 62, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-horizontal .noUi-origin {
height: 0;
}
/* line 65, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-handle {
backface-visibility: hidden;
position: absolute;
}
/* line 70, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-touch-area {
height: 100%;
width: 100%;
}
/* line 74, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
transition: transform 0.3s;
}
/* line 79, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
/* line 84, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-horizontal {
height: 18px;
}
/* line 87, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
right: -17px;
top: -6px;
}
/* line 93, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical {
width: 18px;
}
/* line 96, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
right: -6px;
bottom: -17px;
}
/* line 102, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
left: -17px;
right: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
/* line 109, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
/* line 115, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-connects {
border-radius: 3px;
}
/* line 118, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-connect {
background: #3FB8AF;
}
/* Handles and cursors;
*/
/* line 123, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-draggable {
cursor: ew-resize;
}
/* line 126, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
/* line 129, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
/* line 136, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
*/
/* line 141, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
/* line 152, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-handle:after {
left: 17px;
}
/* line 155, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
/* line 162, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
/* line 167, app/javascript/../../vendor/stylesheets/nouislider.css */
[disabled] .noUi-connect {
background: #B8B8B8;
}
/* line 170, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-target[disabled],
.noUi-handle[disabled],
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
/* line 178, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-pips,
.noUi-pips * {
box-sizing: border-box;
}
/* line 183, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
/* line 190, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
/* line 195, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
/* line 202, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker {
position: absolute;
background: #CCC;
}
/* line 206, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-sub {
background: #AAA;
}
/* line 209, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
/* line 215, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
/* line 222, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-value-horizontal {
transform: translate(-50%, 50%);
}
/* line 226, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-rtl .noUi-value-horizontal {
transform: translate(50%, 50%);
}
/* line 230, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
/* line 235, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
/* line 238, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
/* line 244, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
/* line 250, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-value-vertical {
transform: translate(0, -50%);
padding-left: 25px;
}
/* line 255, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-rtl .noUi-value-vertical {
transform: translate(0, 50%);
}
/* line 259, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
/* line 264, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
/* line 267, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
/* line 270, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
/* line 281, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-horizontal .noUi-tooltip {
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
/* line 287, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-tooltip {
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
/* line 293, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-horizontal .noUi-origin > .noUi-tooltip {
transform: translate(50%, 0);
left: auto;
bottom: 10px;
}
/* line 299, app/javascript/../../vendor/stylesheets/nouislider.css */
.noUi-vertical .noUi-origin > .noUi-tooltip {
transform: translate(0, -18px);
top: auto;
right: 28px;
}