/* ============================================================
VARIABLES — Charte « Parchemin et encre douce »
Voir docs/04-charte-graphique.md
============================================================ */
:root {
/* Fond — mode clair par défaut */
--bg-principal: #F5EFE6;
--bg-secondaire: #EBE3D5;
--bg-carte: #FDFBF7;
/* Texte */
--texte-principal: #2D2418;
--texte-secondaire: #6B5D48;
--texte-tertiaire: #8A7860;
/* Accents */
--ocre-signature: #A87530;
--ocre-clair: #B8843D;
--ocre-profond: #8A5F25;
--vert-sauge: #7A8B6F;
--vert-profond: #5A6B4F;
--bleu-nuit: #4A5970;
--rouge-terre: #A8523D;
/* Fonctionnel */
--separateur: #D8CFBC;
--ombre-douce: rgba(45, 36, 24, 0.08);
--survol: #EFE7D5;
--focus-outline: #A87530;
/* Ombres */
--ombre-niveau-1: 0 1px 2px rgba(45, 36, 24, 0.04);
--ombre-niveau-2: 0 2px 8px rgba(45, 36, 24, 0.08);
--ombre-niveau-3: 0 8px 24px rgba(45, 36, 24, 0.12);
/* Espacement (8px base) */
--space-micro: 4px;
--space-small: 8px;
--space-medium: 16px;
--space-large: 24px;
--space-xlarge: 32px;
--space-2xlarge: 64px;
/* Rayons */
--radius-bouton: 8px;
--radius-carte: 12px;
--radius-modal: 16px;
--radius-input: 6px;
/* Polices */
--font-serif: 'Cormorant Garamond', 'Lora', Georgia, serif;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Animations — la lenteur intentionnelle */
--duration-micro: 180ms;
--duration-ui: 350ms;
--duration-narratif: 600ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
--easing-entree: cubic-bezier(0, 0, 0.2, 1);
--easing-sortie: cubic-bezier(0.4, 0, 1, 1);
/* Dimensions structurelles */
--hauteur-header: 56px;
--hauteur-tabbar: 64px;
}
/* Mode sombre — détection auto */
@media (prefers-color-scheme: dark) {
:root {
--bg-principal: #1E1B16;
--bg-secondaire: #2A2620;
--bg-carte: #25211B;
--texte-principal: #E8DDC9;
--texte-secondaire: #B5A48A;
--texte-tertiaire: #8E806A;
--separateur: #3A3429;
--survol: #2F2B23;
--ombre-douce: rgba(0, 0, 0, 0.3);
--ombre-niveau-1: 0 1px 2px rgba(0, 0, 0, 0.2);
--ombre-niveau-2: 0 2px 8px rgba(0, 0, 0, 0.3);
--ombre-niveau-3: 0 8px 24px rgba(0, 0, 0, 0.4);
}
}
/* Override manuel — réglages utilisateur */
html[data-theme="clair"] {
--bg-principal: #F5EFE6;
--bg-secondaire: #EBE3D5;
--bg-carte: #FDFBF7;
--texte-principal: #2D2418;
--texte-secondaire: #6B5D48;
--texte-tertiaire: #8A7860;
--separateur: #D8CFBC;
--survol: #EFE7D5;
--ombre-douce: rgba(45, 36, 24, 0.08);
--ombre-niveau-1: 0 1px 2px rgba(45, 36, 24, 0.04);
--ombre-niveau-2: 0 2px 8px rgba(45, 36, 24, 0.08);
--ombre-niveau-3: 0 8px 24px rgba(45, 36, 24, 0.12);
}
html[data-theme="sombre"] {
--bg-principal: #1E1B16;
--bg-secondaire: #2A2620;
--bg-carte: #25211B;
--texte-principal: #E8DDC9;
--texte-secondaire: #B5A48A;
--texte-tertiaire: #8E806A;
--separateur: #3A3429;
--survol: #2F2B23;
--ombre-douce: rgba(0, 0, 0, 0.3);
--ombre-niveau-1: 0 1px 2px rgba(0, 0, 0, 0.2);
--ombre-niveau-2: 0 2px 8px rgba(0, 0, 0, 0.3);
--ombre-niveau-3: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* ============================================================
SAISON LITURGIQUE — teinte imperceptible appliquée via data-saison
sur . La couleur d'accent peut être réutilisée en surcouche
ailleurs (filigranes, halos discrets). Voir js/saisons.js
============================================================ */
:root {
--saison-teinte: rgba(122, 139, 111, 0.025);
--saison-accent: rgba(122, 139, 111, 0.10);
}
html[data-saison="avent"] {
--saison-teinte: rgba(108, 84, 130, 0.045);
--saison-accent: rgba(108, 84, 130, 0.14);
}
html[data-saison="noel"] {
--saison-teinte: rgba(201, 162, 78, 0.045);
--saison-accent: rgba(201, 162, 78, 0.16);
}
html[data-saison="careme"] {
--saison-teinte: rgba(91, 68, 118, 0.045);
--saison-accent: rgba(91, 68, 118, 0.14);
}
html[data-saison="paques"] {
--saison-teinte: rgba(224, 197, 128, 0.05);
--saison-accent: rgba(224, 197, 128, 0.18);
}
html[data-saison="ordinaire"] {
--saison-teinte: rgba(122, 139, 111, 0.03);
--saison-accent: rgba(122, 139, 111, 0.10);
}
/* ============================================================
VEILLEUSE — après 22h ou avant 6h, l'app baisse la voix.
Tons plus chauds, contraste légèrement réduit, halos doux.
============================================================ */
html[data-veilleuse="true"] {
--bg-principal: #ECE0C9;
--bg-secondaire: #DDCFB4;
--bg-carte: #F4E9D3;
--separateur: #C9BB9D;
--ocre-signature: #B88547;
--ocre-clair: #C99657;
--texte-tertiaire: #9D8B6F;
}
/* NB : pas de filter sur body — casse position:fixed (tab bar décrochée).
La désaturation passe par l'opacity du voile body::after et les variables
redéfinies plus haut. */
/* Bandeau de retour : matcher le fond chaud de la veilleuse */
html[data-veilleuse="true"] .vivre-retour {
background: rgba(236, 224, 201, 0.92);
border-bottom-color: rgba(45, 36, 24, 0.10);
}
html[data-veilleuse="true"] .vivre-retour:hover {
background: rgba(236, 224, 201, 0.98);
}
/* Tab bar : matcher aussi le fond chaud */
html[data-veilleuse="true"] .tab-bar {
background:
linear-gradient(to bottom, rgba(236, 224, 201, 0.82) 0%, rgba(221, 207, 180, 0.94) 100%);
border-top-color: rgba(168, 117, 48, 0.24);
}
/* Voile chaud supplémentaire */
html[data-veilleuse="true"] body::after {
background:
radial-gradient(ellipse at top, rgba(180, 110, 40, 0.07) 0%, transparent 60%),
var(--saison-teinte);
}
/* Petit ruban discret indiquant le mode */
html[data-veilleuse="true"] .piece-entete::after {
content: 'Veilleuse';
display: inline-block;
margin-left: 12px;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ocre-signature);
opacity: 0.7;
vertical-align: middle;
padding: 4px 8px;
border: 1px solid rgba(168, 117, 48, 0.25);
border-radius: 999px;
}
/* ============================================================
LECTURES LONGUES — index + lecteur immersif (POC)
============================================================ */
.vivre-hub-carte--large {
grid-column: 1 / -1;
}
.vivre-hub-badge-pov {
position: absolute;
top: 10px;
right: 36px;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.12);
padding: 3px 8px;
border-radius: 999px;
z-index: 2;
}
.lectures-pov-note {
margin: 0 0 16px;
padding: 10px 14px;
background: rgba(168, 117, 48, 0.08);
border-left: 3px solid var(--ocre-signature);
border-radius: 0 12px 12px 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
}
.lectures-grille {
display: flex;
flex-direction: column;
gap: 12px;
}
.lectures-carte {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
width: 100%;
padding: 20px 22px 18px;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 10%, transparent) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F1EAD9 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 18px;
cursor: pointer;
font-family: inherit;
color: var(--texte-principal);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms,
box-shadow 240ms;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lectures-carte:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 40%, rgba(168, 117, 48, 0.30));
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 14px 28px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.lectures-carte-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin-bottom: 6px;
}
.lectures-carte-titre {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--texte-principal);
margin: 0 0 4px;
line-height: 1.1;
}
.lectures-carte-soustitre {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-secondaire);
margin: 0 0 10px;
}
.lectures-carte-presentation {
font-family: var(--font-serif);
font-size: 14px;
color: var(--texte-secondaire);
line-height: 1.5;
margin: 0 0 12px;
}
.lectures-carte-etat {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--lecture-couleur, var(--ocre-signature));
padding: 4px 10px;
background: color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 8%, transparent);
border-radius: 999px;
}
/* ============================================================
LECTEUR ŒUVRE — plein écran immersif, format manuscrit
============================================================ */
.lecteur-oeuvre {
position: fixed;
inset: 0;
z-index: 1050;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 50%),
linear-gradient(180deg, #FDFBF6 0%, #F4ECDE 100%);
display: flex;
flex-direction: column;
animation: fondu-entrant 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lecteur-oeuvre-header {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: max(env(safe-area-inset-top), 14px) 16px 12px;
background: rgba(253, 251, 246, 0.88);
-webkit-backdrop-filter: blur(14px) saturate(150%);
backdrop-filter: blur(14px) saturate(150%);
border-bottom: 1px solid rgba(168, 117, 48, 0.14);
}
.lecteur-oeuvre-retour,
.lecteur-oeuvre-toc {
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
color: var(--ocre-signature);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 24px;
font-family: var(--font-sans);
transition: background 160ms;
}
.lecteur-oeuvre-retour:hover,
.lecteur-oeuvre-toc:hover { background: rgba(168, 117, 48, 0.08); }
.lecteur-oeuvre-toc svg { width: 22px; height: 22px; }
.lecteur-oeuvre-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
align-items: center;
text-align: center;
}
.lecteur-oeuvre-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
}
.lecteur-oeuvre-titre {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--texte-principal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.lecteur-oeuvre-corps {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 32px 24px max(env(safe-area-inset-bottom), 40px);
}
.lecteur-chap-position {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2px;
color: var(--texte-tertiaire);
text-align: center;
margin: 0 0 12px;
text-transform: uppercase;
}
/* Bande de pills en haut du contenu — scrolle avec le texte. Pas de
background opaque ni sticky : elle disparaît naturellement en scrollant. */
.lecteur-chap-pills-wrap {
margin: 0 -8px 18px;
}
.lecteur-chap-pills-wrap:empty { display: none; }
.lecteur-chap-pills {
display: flex;
gap: 6px;
padding: 4px 8px 4px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE */
}
.lecteur-chap-pills::-webkit-scrollbar { display: none; } /* Safari/Chrome */
.lecteur-chap-pill {
flex-shrink: 0;
min-width: 36px;
height: 32px;
padding: 0 10px;
border-radius: 999px;
background: rgba(253, 251, 246, 0.75);
border: 1px solid rgba(168, 117, 48, 0.22);
color: var(--texte-secondaire);
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
white-space: nowrap;
}
.lecteur-chap-pill:hover {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
transform: translateY(-1px);
}
.lecteur-chap-pill.actif {
background: var(--lecture-couleur, var(--ocre-signature));
border-color: var(--lecture-couleur, var(--ocre-signature));
color: #FDFBF7;
font-style: normal;
font-weight: 500;
}
@media (max-width: 360px) {
.lecteur-chap-pills-wrap { margin: 0 -16px 14px; }
.lecteur-chap-pills { padding: 4px 16px 8px; }
}
@media (min-width: 700px) {
.lecteur-chap-pills-wrap { margin: 0 -32px 22px; }
.lecteur-chap-pills { padding: 4px 32px 8px; }
}
.lecteur-chap-num {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ocre-signature);
text-align: center;
margin: 0 0 8px;
}
.lecteur-chap-titre {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 500;
color: var(--texte-principal);
text-align: center;
letter-spacing: -0.4px;
margin: 0 0 6px;
line-height: 1.15;
max-width: 24ch;
margin-inline: auto;
}
.lecteur-chap-soustitre {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--texte-secondaire);
text-align: center;
margin: 0 0 4px;
}
.lecteur-chap-texte {
max-width: 36rem;
margin: 18px auto 0;
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.75;
color: var(--texte-principal);
letter-spacing: 0.1px;
}
.lecteur-chap-texte p {
margin: 0 0 1.2em;
}
/* Chaque paragraphe est wrappé pour le bouton favori */
.lecteur-chap-para {
position: relative;
margin-bottom: 1.2em;
}
.lecteur-chap-para p { margin: 0; }
.lecteur-chap-para-fav {
position: absolute;
top: -2px;
right: -38px;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(253, 251, 247, 0.85);
border: 1px solid rgba(168, 117, 48, 0.18);
color: var(--texte-tertiaire);
cursor: pointer;
opacity: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms,
transform 200ms,
background 200ms,
border-color 200ms;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.lecteur-chap-para-fav svg { width: 14px; height: 14px; }
.lecteur-chap-para:hover .lecteur-chap-para-fav,
.lecteur-chap-para-fav:focus-visible { opacity: 1; }
.lecteur-chap-para-fav:hover {
transform: scale(1.1);
color: var(--rouge-terre);
border-color: var(--rouge-terre);
}
.lecteur-chap-para-fav.actif {
opacity: 1;
color: var(--rouge-terre);
border-color: var(--rouge-terre);
background: rgba(168, 82, 61, 0.10);
}
.lecteur-chap-para-fav.actif svg {
fill: var(--rouge-terre);
}
@media (max-width: 720px) {
/* Sur mobile, le bouton est à l'intérieur du paragraphe (place limitée) */
.lecteur-chap-para-fav {
position: static;
margin-top: 4px;
opacity: 0.55;
}
.lecteur-chap-para { display: flex; flex-direction: column; align-items: flex-start; }
.lecteur-chap-para p { width: 100%; }
}
.lecteur-chap-texte p:first-of-type::first-letter,
.lecteur-chap-texte .lecteur-chap-para:first-child p::first-letter {
font-family: var(--font-serif);
font-size: 3em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 10px 0 0;
margin-top: 4px;
}
.lecteur-chap-nav {
display: flex;
justify-content: space-between;
gap: 12px;
max-width: 36rem;
margin: 32px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(168, 117, 48, 0.18);
}
.lecteur-chap-nav-btn {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
background: none;
border: 1px solid rgba(168, 117, 48, 0.20);
border-radius: 14px;
padding: 12px 14px;
font-family: inherit;
color: var(--texte-secondaire);
cursor: pointer;
text-align: left;
transition: border-color 160ms, background 160ms, color 160ms;
}
.lecteur-chap-nav-btn--next { text-align: right; flex-direction: row-reverse; }
.lecteur-chap-nav-btn:hover {
border-color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.06);
color: var(--texte-principal);
}
.lecteur-nav-fleche {
font-size: 24px;
color: var(--ocre-signature);
flex-shrink: 0;
}
.lecteur-nav-corps {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.lecteur-chap-nav-btn--next .lecteur-nav-corps { align-items: flex-end; }
.lecteur-nav-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
}
.lecteur-nav-titre {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-principal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Drawer sommaire */
.lecteur-oeuvre-toc-panneau {
position: absolute;
top: 56px;
right: 12px;
width: min(360px, calc(100vw - 24px));
max-height: 75vh;
display: flex;
flex-direction: column;
background:
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 16px;
padding: 14px 12px;
box-shadow: 0 18px 40px rgba(45, 36, 24, 0.14);
z-index: 2;
overflow: hidden;
}
.lecteur-toc-header {
flex-shrink: 0;
padding-bottom: 8px;
}
.lecteur-toc-recherche {
width: 100%;
padding: 8px 12px;
background: rgba(255, 251, 245, 0.7);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 10px;
font-family: var(--font-serif);
font-size: 14px;
color: var(--texte-principal);
transition: border-color 160ms;
}
.lecteur-toc-recherche:focus {
outline: none;
border-color: var(--ocre-signature);
}
.lecteur-toc-liste {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.lecteur-toc-section {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 12px 4px 4px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(168, 117, 48, 0.15);
}
.lecteur-toc-section:first-child { margin-top: 0; }
.lecteur-toc-vide {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-tertiaire);
text-align: center;
padding: 20px;
}
.lecteur-oeuvre-toc-item {
display: flex;
gap: 10px;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 10px 8px;
font-family: inherit;
color: var(--texte-principal);
cursor: pointer;
border-radius: 8px;
transition: background 160ms;
}
.lecteur-oeuvre-toc-item:hover { background: rgba(168, 117, 48, 0.06); }
.lecteur-oeuvre-toc-item.actif {
background: color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 12%, transparent);
border-left: 2px solid var(--lecture-couleur, var(--ocre-signature));
padding-left: 6px;
}
.lecteur-toc-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--ocre-signature);
flex-shrink: 0;
width: 32px;
}
.lecteur-toc-titres {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.lecteur-toc-titre {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.3;
}
.lecteur-toc-soustitre {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--texte-secondaire);
line-height: 1.3;
}
@media (max-width: 360px) {
.lecteur-chap-titre { font-size: 24px; }
.lecteur-chap-texte { font-size: 16px; }
}
@media (min-width: 700px) {
.lecteur-oeuvre-corps { padding: 48px 32px max(env(safe-area-inset-bottom), 60px); }
.lecteur-chap-titre { font-size: 36px; }
.lecteur-chap-texte { font-size: 19px; }
}
/* ============================================================
SAINT COMPAGNON — bandeau discret sur Aujourd'hui
============================================================ */
/* Masqué quand on est dans une sous-page (sinon chevauche le bouton retour) */
.piece.en-sous-page .aujourdhui-compagnon { display: none; }
.aujourdhui-compagnon {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px 0 14px;
padding: 6px 12px;
background: rgba(255, 251, 245, 0.55);
border: 1px solid rgba(168, 117, 48, 0.16);
border-radius: 999px;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-secondaire);
letter-spacing: 0.1px;
}
.aujourdhui-compagnon strong {
font-weight: 500;
font-style: normal;
color: var(--texte-principal);
}
.aujourdhui-compagnon-puce {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 8px currentColor;
flex-shrink: 0;
}
/* ============================================================
RÉGLAGES — boutons d'action unifiés
============================================================ */
.reglages-actions-rangee {
display: flex;
gap: 10px;
margin: 4px 0 12px;
}
.reglages-actions-rangee .reglages-action { flex: 1; }
.reglages-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 16px;
background: rgba(253, 251, 246, 0.75);
border: 1px solid rgba(168, 117, 48, 0.30);
border-radius: 12px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--texte-principal);
cursor: pointer;
transition: background 200ms, border-color 200ms, color 200ms, transform 200ms;
width: 100%;
}
.reglages-action svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--ocre-signature);
transition: color 200ms;
}
.reglages-action:hover {
background: rgba(168, 117, 48, 0.08);
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
.reglages-action:active { transform: translateY(0) scale(0.99); }
.reglages-action--destructif {
border-color: rgba(168, 82, 61, 0.30);
color: var(--rouge-terre);
margin-bottom: 4px;
}
.reglages-action--destructif svg { color: var(--rouge-terre); }
.reglages-action--destructif:hover {
background: rgba(168, 82, 61, 0.08);
border-color: var(--rouge-terre);
}
/* Stats compactes : 3 cartes nombre + libellé sur une ligne */
.reglages-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin: 4px 0 12px;
}
.reglages-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 14px 10px;
background: rgba(253, 251, 246, 0.6);
border: 1px solid rgba(168, 117, 48, 0.16);
border-radius: 12px;
}
.reglages-stat-nombre {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: var(--ocre-signature);
line-height: 1;
}
.reglages-stat-libelle {
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
color: var(--texte-secondaire);
text-align: center;
line-height: 1.2;
letter-spacing: 0.1px;
}
@media (max-width: 360px) {
.reglages-stat-nombre { font-size: 22px; }
.reglages-stat-libelle { font-size: 10px; }
}
/* ============================================================
SAINT COMPAGNON — bloc dans Réglages
============================================================ */
.compagnon-bloc {
margin: 4px 0 16px;
}
.compagnon-carte-active {
display: flex;
gap: 14px;
padding: 16px 18px;
background:
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 14%, transparent) 0%, transparent 55%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 30%, rgba(168, 117, 48, 0.18));
border-radius: 18px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 18px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.compagnon-carte-active .compagnon-glyphe {
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 18%, transparent) 0%, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 6%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 28%, rgba(168, 117, 48, 0.20));
color: var(--compagnon-couleur, var(--ocre-signature));
display: inline-flex; align-items: center; justify-content: center;
}
.compagnon-carte-active .compagnon-glyphe svg { width: 24px; height: 24px; }
.compagnon-carte-active .compagnon-corps { flex: 1; min-width: 0; }
.compagnon-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 3px;
}
.compagnon-carte-active .compagnon-nom {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--texte-principal);
margin: 0 0 2px;
line-height: 1.1;
}
.compagnon-carte-active .compagnon-titre {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
margin: 0 0 8px;
}
.compagnon-signature {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-principal);
border-left: 2px solid color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 40%, transparent);
padding-left: 10px;
margin: 0;
line-height: 1.4;
}
/* .compagnon-actions remplacé par .reglages-actions-rangee (boutons unifiés) */
.compagnon-vide {
padding: 14px 16px;
background: rgba(255, 251, 245, 0.6);
border: 1px dashed rgba(168, 117, 48, 0.25);
border-radius: 14px;
}
.compagnon-vide-texte {
font-family: var(--font-serif);
font-size: 14px;
color: var(--texte-secondaire);
line-height: 1.5;
margin: 0;
}
/* ============================================================
PICKER COMPAGNON — grille de cartes dans la modal
============================================================ */
.picker-compagnon-panneau {
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
}
.compagnon-grille {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 4px;
}
@media (min-width: 520px) {
.compagnon-grille { grid-template-columns: 1fr 1fr; }
}
.compagnon-carte {
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
padding: 14px 16px;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 10%, transparent) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F1EAD9 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 16px;
cursor: pointer;
font-family: inherit;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.compagnon-carte:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 50%, rgba(168, 117, 48, 0.30));
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 10px 22px rgba(45, 36, 24, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.compagnon-carte.actif {
border-color: color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 70%, var(--ocre-signature));
box-shadow:
0 0 0 2px color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 25%, transparent),
0 4px 14px rgba(45, 36, 24, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.compagnon-carte .compagnon-glyphe {
width: 38px;
height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 16%, transparent) 0%, color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 5%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--compagnon-couleur, var(--ocre-signature)) 24%, rgba(168, 117, 48, 0.18));
color: var(--compagnon-couleur, var(--ocre-signature));
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 10px;
}
.compagnon-carte .compagnon-glyphe svg { width: 20px; height: 20px; }
.compagnon-carte .compagnon-nom {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--texte-principal);
margin: 0 0 2px;
line-height: 1.15;
}
.compagnon-carte .compagnon-titre {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
margin: 0 0 1px;
}
.compagnon-carte .compagnon-epoque {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 8px;
}
.compagnon-carte .compagnon-presentation {
font-family: var(--font-serif);
font-size: 13px;
color: var(--texte-secondaire);
line-height: 1.4;
margin: 0;
}
/* ============================================================
ANIMATION BOUGIE — Trois choses, le soir
Vacillement subtil sur l'icône (3 flammes) + halo qui respire.
============================================================ */
@keyframes bougie-flamme {
0% { opacity: 1; transform: translateY(0) scale(1); }
18% { opacity: 0.88; transform: translateY(-0.4px) scale(1.015); }
34% { opacity: 0.98; transform: translateY(0.2px) scale(0.99); }
52% { opacity: 0.82; transform: translateY(-0.3px) scale(1.025); }
70% { opacity: 0.96; transform: translateY(0.3px) scale(1); }
88% { opacity: 0.90; transform: translateY(-0.2px) scale(1.01); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bougie-halo {
0%, 100% {
box-shadow:
0 2px 6px rgba(168, 82, 61, 0.14),
0 0 0 rgba(168, 82, 61, 0),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
50% {
box-shadow:
0 3px 12px rgba(168, 82, 61, 0.28),
0 0 22px rgba(168, 82, 61, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
}
.bougie-allumee .vivre-hub-icone svg {
animation: bougie-flamme 2.6s ease-in-out infinite;
transform-origin: center bottom;
}
.bougie-allumee .vivre-hub-icone {
animation: bougie-halo 3.4s ease-in-out infinite;
}
.bougie-allumee .vivre-hub-filigrane {
animation: bougie-flamme 4.2s ease-in-out infinite;
animation-delay: -0.8s;
}
@media (prefers-reduced-motion: reduce) {
.bougie-allumee .vivre-hub-icone svg,
.bougie-allumee .vivre-hub-icone,
.bougie-allumee .vivre-hub-filigrane { animation: none; }
}
/* Voile de teinte saisonnière — multiply à très faible opacité, fixe,
ne capture aucun pointer pour rester transparent à l'interaction. */
body::after {
content: '';
position: fixed;
inset: 0;
background: var(--saison-teinte);
mix-blend-mode: multiply;
pointer-events: none;
z-index: 9999;
}
/* Texture papier fixée — bruit SVG inline en filigrane, à peine perceptible.
La fréquence + opacité reproduisent la sensation d'un parchemin fibreux. */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
background-repeat: repeat;
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
html[data-theme="sombre"] body::before { opacity: 0.3; mix-blend-mode: overlay; }
@media (prefers-color-scheme: dark) {
body::before { opacity: 0.3; mix-blend-mode: overlay; }
}
/* ============================================================
RESET LÉGER
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
/* Empêche tout débordement horizontal créé par animations push (sub-pages) */
overflow-x: hidden;
}
/* L'attribut HTML5 [hidden] doit toujours masquer, peu importe le display
hérité (sinon les blocs flex/grid l'ignorent). */
[hidden] { display: none !important; }
body {
background: var(--bg-principal);
color: var(--texte-principal);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--duration-narratif) var(--easing-standard),
color var(--duration-narratif) var(--easing-standard);
}
button {
font-family: inherit;
color: inherit;
}
/* ============================================================
TYPOGRAPHIE — 5 niveaux
============================================================ */
.titre-piece {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
line-height: 1.3;
color: var(--texte-principal);
opacity: 0.7;
margin: 0;
}
.hero {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 400;
line-height: 1.35;
color: var(--texte-principal);
margin: 0;
}
.titre-section {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 var(--space-medium) 0;
}
.corps {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--texte-principal);
}
.sacre {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: 1.7;
color: var(--texte-principal);
max-width: 50ch;
}
.meta {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.5px;
color: var(--texte-tertiaire);
}
/* ============================================================
LAYOUT — Structure de page
============================================================ */
.header {
position: sticky;
top: 0;
left: 0;
right: 0;
height: var(--hauteur-header);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
background: var(--bg-principal);
z-index: 50;
}
.header-marque {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
color: var(--texte-secondaire);
letter-spacing: 0.3px;
}
.header-utilitaires {
display: flex;
align-items: center;
gap: var(--space-small);
}
.main {
padding: var(--space-xlarge) 20px calc(var(--hauteur-tabbar) + var(--space-2xlarge));
min-height: calc(100vh - var(--hauteur-header) - var(--hauteur-tabbar));
}
/* Tablet */
@media (min-width: 641px) {
.header { padding: 0 32px; }
.main { padding-left: 32px; padding-right: 32px; }
}
/* Desktop */
@media (min-width: 961px) {
.main {
max-width: 720px;
margin: 0 auto;
}
.header {
max-width: 100%;
}
.header-inner {
max-width: 720px;
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
}
/* ============================================================
PIÈCES — sections principales
============================================================ */
.piece {
animation: fondu-entrant var(--duration-ui) var(--easing-entree);
}
@keyframes fondu-entrant {
from { opacity: 0; }
to { opacity: 1; }
}
.piece-entete {
display: flex;
align-items: baseline;
gap: var(--space-small);
margin-bottom: var(--space-xlarge);
}
.piece-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.14) 0%, rgba(168, 117, 48, 0.05) 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
color: var(--ocre-signature);
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
line-height: 0;
}
.piece-icone svg { width: 24px; height: 24px; }
.piece-vide {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.7;
color: var(--texte-tertiaire);
max-width: 50ch;
margin-top: var(--space-2xlarge);
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
TAB BAR — navigation 3 pièces
============================================================ */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--hauteur-tabbar);
display: flex;
align-items: stretch;
background:
linear-gradient(to bottom, rgba(245, 239, 230, 0.78) 0%, rgba(235, 227, 213, 0.92) 100%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
border-top: 1px solid rgba(168, 117, 48, 0.18);
box-shadow:
0 -2px 16px rgba(45, 36, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
z-index: 50;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-bouton {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 44px;
background: transparent;
border: none;
cursor: pointer;
color: var(--texte-tertiaire);
transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1);
padding: 8px 6px 6px;
font-family: inherit;
}
.tab-bouton:hover { color: var(--texte-secondaire); }
.tab-bouton[aria-selected="true"] { color: var(--ocre-signature); }
.tab-bouton:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: -2px;
border-radius: 12px;
}
/* Pastille ocre : marqueur d'onglet actif, alignée au sommet du bouton */
.tab-bouton-pastille {
position: absolute;
top: 4px;
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--ocre-signature);
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.tab-bouton[aria-selected="true"] .tab-bouton-pastille {
opacity: 1;
transform: scaleX(1);
}
.tab-bouton-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tab-bouton-icone svg { width: 22px; height: 22px; }
.tab-bouton[aria-selected="true"] .tab-bouton-icone { transform: translateY(-1px); }
.tab-bouton-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tab-bouton[aria-selected="true"] .tab-bouton-label {
font-weight: 600;
}
/* ============================================================
BOUTONS — Grammaire visuelle
============================================================ */
.btn-primaire {
background: var(--ocre-signature);
color: #FDFBF7;
padding: 12px 24px;
border: none;
border-radius: var(--radius-bouton);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background var(--duration-micro) var(--easing-standard),
transform var(--duration-micro) var(--easing-standard);
min-height: 44px;
}
.btn-primaire:hover { background: var(--ocre-clair); }
.btn-primaire:active { background: var(--ocre-profond); transform: scale(0.98); }
.btn-primaire:focus-visible { outline: 2px solid var(--ocre-signature); outline-offset: 2px; }
.btn-primaire:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondaire {
background: transparent;
color: var(--ocre-signature);
border: 1px solid var(--ocre-signature);
padding: 11px 23px;
border-radius: var(--radius-bouton);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
cursor: pointer;
min-height: 44px;
transition: background var(--duration-micro) var(--easing-standard);
}
.btn-secondaire:hover { background: rgba(168, 117, 48, 0.08); }
.btn-secondaire:focus-visible { outline: 2px solid var(--ocre-signature); outline-offset: 2px; }
.btn-tertiaire {
background: transparent;
color: var(--texte-secondaire);
border: none;
padding: 8px 12px;
font-weight: 500;
cursor: pointer;
min-height: 44px;
}
.btn-tertiaire:hover { text-decoration: underline; }
/* Icône utilitaire dans le header (⚙, etc.) */
.icone-utilitaire {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
color: var(--texte-secondaire);
border-radius: var(--radius-bouton);
transition: background var(--duration-micro) var(--easing-standard);
}
.icone-utilitaire:hover { background: var(--survol); color: var(--texte-principal); }
.icone-utilitaire:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.icone-utilitaire svg { width: 20px; height: 20px; }
/* FAB Souffle retiré — accès via la carte Souffle dans Aujourd'hui. */
/* ============================================================
AUJOURD'HUI — module présence au présent
Voir docs/03-modules.md
============================================================ */
.aujourdhui-date {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.6px;
color: var(--texte-tertiaire);
text-transform: lowercase;
margin: 0 0 var(--space-large);
}
.aujourdhui-date::first-letter { text-transform: uppercase; }
.section-aujourdhui {
margin-bottom: var(--space-xlarge);
}
.separateur {
height: 1px;
background: var(--separateur);
border: none;
margin: 0 0 var(--space-xlarge);
opacity: 0.7;
}
/* — Carte Focus du jour — */
.carte-focus {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-carte);
padding: var(--space-large);
box-shadow: var(--ombre-niveau-1);
display: flex;
flex-direction: column;
gap: var(--space-medium);
}
.carte-focus-etiquette {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ocre-signature);
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.carte-focus-titre {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 400;
line-height: 1.35;
color: var(--texte-principal);
margin: 0;
}
.carte-focus-action {
align-self: flex-start;
margin-top: var(--space-small);
}
/* — Bloc sacré (verset + question) — */
.bloc-sacre {
max-width: 50ch;
}
.verset {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: 1.7;
color: var(--texte-principal);
margin: 0 0 var(--space-small);
}
.verset-reference {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--texte-tertiaire);
margin: 0;
}
.question-stoicienne {
margin-top: var(--space-large);
padding-top: var(--space-medium);
border-top: 1px dashed var(--separateur);
}
.question-stoicienne-etiquette {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 var(--space-small);
}
.question-stoicienne-texte {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.6;
color: var(--texte-principal);
margin: 0;
}
/* — Verset cliquable (ouvre la vue plein écran) — */
.bloc-sacre-cliquable {
display: block;
width: 100%;
background: transparent;
border: none;
padding: 8px;
margin: -8px 0 -8px -8px;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
border-radius: var(--radius-bouton);
transition: background var(--duration-micro) var(--easing-standard);
}
.bloc-sacre-cliquable:hover { background: var(--survol); }
.bloc-sacre-cliquable:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* — Vue plein écran d'un texte (réutilise .moment-rituel) — */
.vue-texte {
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
padding: 80px 24px 80px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.05) 0%, transparent 40%),
var(--bg-secondaire);
}
.vue-texte-conteneur {
max-width: 50ch;
margin: 0 auto;
width: 100%;
}
.vue-texte-reference {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ocre-signature);
text-align: center;
margin: 0 0 var(--space-large);
}
.vue-texte-principal {
position: relative;
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
line-height: 1.65;
color: var(--texte-principal);
margin: 0 0 var(--space-xlarge);
padding: 24px 24px 26px;
background:
radial-gradient(circle at 0% 0%, rgba(168, 117, 48, 0.07) 0%, transparent 50%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 18px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vue-texte-principal::before,
.vue-texte-principal::after {
font-family: var(--font-serif);
font-size: 60px;
color: rgba(168, 117, 48, 0.18);
position: absolute;
line-height: 1;
pointer-events: none;
}
.vue-texte-principal::before { content: '\201C'; top: 4px; left: 12px; }
.vue-texte-principal::after { content: '\201D'; bottom: -8px; right: 16px; }
.vue-texte-section {
margin-top: var(--space-large);
padding: 16px 18px 18px;
background: rgba(255, 251, 245, 0.55);
border-left: 3px solid rgba(168, 117, 48, 0.32);
border-radius: 0 14px 14px 0;
}
.vue-texte-section-titre {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 8px;
}
.vue-texte-corps {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.65;
color: var(--texte-secondaire);
margin: 0;
}
.vue-texte-corps::first-letter {
font-family: var(--font-serif);
font-size: 2.8em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 8px 0 0;
margin-top: 4px;
}
.vue-texte-vide {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
margin: 0;
}
@media (max-width: 360px) {
.vue-texte-principal { font-size: 19px; padding: 20px 18px 22px; }
.vue-texte-corps { font-size: 15px; }
}
.moment-rituel-sortie {
z-index: 10;
}
.moment-rituel-sortie button {
background: rgba(253, 251, 247, 0.85);
-webkit-backdrop-filter: blur(10px) saturate(160%);
backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgba(168, 117, 48, 0.18);
color: var(--texte-secondaire);
font-size: 22px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(45, 36, 24, 0.10);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration-micro) var(--easing-standard);
}
.moment-rituel-sortie button:hover { background: var(--survol); }
.moment-rituel-sortie button:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* — Liste En cours — */
.liste-en-cours {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ligne-en-cours {
display: flex;
align-items: center;
gap: var(--space-medium);
min-height: 56px;
padding: 12px var(--space-medium);
background: transparent;
border: none;
border-radius: var(--radius-bouton);
width: 100%;
text-align: left;
cursor: pointer;
color: var(--texte-principal);
font-family: var(--font-sans);
font-size: 16px;
transition: background var(--duration-micro) var(--easing-standard);
}
.ligne-en-cours:hover { background: var(--survol); }
.ligne-en-cours:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: -2px;
}
.ligne-en-cours-icone {
font-size: 20px;
line-height: 1;
flex-shrink: 0;
}
.ligne-en-cours-titre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ligne-en-cours-meta {
font-size: 13px;
color: var(--texte-tertiaire);
flex-shrink: 0;
}
/* — Bloc intention de saison — */
.bloc-saison {
display: flex;
align-items: flex-start;
gap: var(--space-medium);
padding: var(--space-medium);
background: var(--bg-carte);
border-left: 3px solid var(--ocre-signature);
border-radius: var(--radius-input);
}
.bloc-saison-icone {
font-size: 20px;
line-height: 1.5;
}
.bloc-saison-texte {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.5;
color: var(--texte-principal);
margin: 0;
}
/* — Bandeau souvenir — */
.bandeau-souvenir {
padding: var(--space-medium);
background: var(--bg-secondaire);
border-radius: var(--radius-carte);
border: 1px solid var(--separateur);
}
.bandeau-souvenir-etiquette {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 6px;
}
.bandeau-souvenir-texte {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.5;
color: var(--texte-principal);
margin: 0;
}
/* — Bandeau Compagnon Claude — */
.bandeau-compagnon {
margin-top: var(--space-large);
padding: var(--space-medium);
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-carte);
display: flex;
flex-direction: column;
gap: var(--space-small);
}
.bandeau-compagnon-texte {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--texte-secondaire);
margin: 0;
}
.bandeau-compagnon-action {
align-self: flex-start;
}
/* ============================================================
VIVRE — l'atelier (Session 3a : Construire)
Voir docs/03-modules.md → Module Vivre
============================================================ */
.vivre-section {
margin-bottom: var(--space-xlarge);
}
/* — Bloc intention de saison (éditable inline) — */
.vivre-bloc-intention {
display: flex;
align-items: flex-start;
gap: var(--space-medium);
padding: var(--space-medium);
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-left: 3px solid var(--ocre-signature);
border-radius: var(--radius-input);
}
.vivre-bloc-intention-corps {
flex: 1;
min-width: 0;
}
.vivre-intention-texte {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.5;
color: var(--texte-principal);
margin: 0 0 var(--space-small);
}
.vivre-intention-pourquoi {
font-family: var(--font-sans);
font-size: 14px;
color: var(--texte-secondaire);
line-height: 1.5;
margin: 0;
}
.vivre-intention-placeholder {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
color: var(--texte-tertiaire);
margin: 0;
}
.vivre-edit-btn {
flex-shrink: 0;
}
/* — Champs édition inline (intention) — */
.champ-edition {
display: block;
width: 100%;
background: var(--bg-principal);
border: 1px solid var(--separateur);
border-radius: var(--radius-input);
padding: 10px 12px;
font-family: var(--font-sans);
font-size: 16px;
color: var(--texte-principal);
transition: border-color var(--duration-micro) var(--easing-standard);
margin-bottom: var(--space-small);
}
.champ-edition:focus {
outline: none;
border-color: var(--ocre-signature);
}
.champ-edition.serif {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
}
.champ-edition-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 6px;
}
.champ-actions {
display: flex;
gap: var(--space-small);
margin-top: var(--space-small);
}
/* — Liste chantiers — */
.vivre-section-entete {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-medium);
}
.vivre-section-titre {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0;
}
.vivre-btn-ajouter {
width: 36px;
height: 36px;
min-height: 36px;
padding: 0;
border-radius: 50%;
font-size: 20px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.vivre-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.vivre-liste-vide {
font-family: var(--font-sans);
font-size: 14px;
font-style: italic;
color: var(--texte-tertiaire);
padding: var(--space-small) 0;
margin: 0;
}
.vivre-ligne {
display: flex;
align-items: center;
gap: var(--space-medium);
min-height: 56px;
padding: 12px var(--space-medium);
background: transparent;
border: none;
border-radius: var(--radius-bouton);
width: 100%;
text-align: left;
cursor: pointer;
color: var(--texte-principal);
font-family: var(--font-sans);
font-size: 16px;
transition: background var(--duration-micro) var(--easing-standard);
}
.vivre-ligne:hover { background: var(--survol); }
.vivre-ligne:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: -2px;
}
.vivre-ligne.statique { cursor: default; }
.vivre-ligne.statique:hover { background: transparent; }
.vivre-ligne-icone {
font-size: 20px;
flex-shrink: 0;
}
.vivre-ligne-titre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vivre-ligne-meta {
font-size: 13px;
color: var(--texte-tertiaire);
flex-shrink: 0;
}
/* — Modal création (slide depuis le bas) — */
.modal-creation {
position: fixed;
inset: 0;
background: rgba(45, 36, 24, 0.4);
z-index: 900;
display: flex;
align-items: flex-end;
justify-content: center;
animation: fondu-entrant var(--duration-ui) var(--easing-entree);
}
@media (prefers-color-scheme: dark) {
.modal-creation { background: rgba(0, 0, 0, 0.55); }
}
.modal-creation-panneau {
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.05) 0%, transparent 50%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-bottom: none;
border-top-left-radius: 22px;
border-top-right-radius: 22px;
padding: 28px 22px 24px;
width: 100%;
max-width: 640px;
box-shadow:
0 -2px 12px rgba(45, 36, 24, 0.08),
0 -18px 40px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
animation: slide-haut var(--duration-ui) var(--easing-entree);
}
.modal-creation-titre {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--texte-principal);
margin: 0 0 var(--space-medium);
line-height: 1.15;
}
/* — Fiche chantier (plein écran) — */
.fiche-chantier {
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Padding-top élargi pour libérer la zone du bouton fermer (60px de marge),
padding-right pour que le contenu ne passe pas sous le ✕ */
padding: 72px 20px calc(80px + env(safe-area-inset-bottom, 0));
}
/* Dans les modals scrollables, le bouton de fermeture devient fixe au viewport
pour rester accessible sans recouvrir le contenu lors du scroll */
.fiche-chantier > .moment-rituel-sortie {
position: fixed;
top: max(env(safe-area-inset-top), 14px);
right: 14px;
z-index: 100;
}
/* Sur les blocs pleine-largeur dans la fiche, on réserve la zone du ✕
en haut-droite pour éviter le chevauchement visuel */
.fiche-chantier-conteneur > *:first-child,
.fiche-chantier-conteneur > .page-entete:first-of-type,
.fiche-chantier-conteneur > .chantier-pourquoi-bloc {
padding-right: 48px;
}
.fiche-chantier-conteneur {
max-width: 640px;
margin: 0 auto;
width: 100%;
}
.fiche-chantier-categorie {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-small);
}
.fiche-chantier-titre {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
line-height: 1.3;
color: var(--texte-principal);
margin: 0 0 var(--space-large);
}
.fiche-chantier-etat {
display: inline-block;
padding: 4px 10px;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--texte-secondaire);
margin-bottom: var(--space-large);
}
.fiche-chantier-section-titre {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: var(--space-large) 0 var(--space-medium);
}
.journal-vide {
font-family: var(--font-sans);
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-medium);
}
.journal-liste {
list-style: none;
padding: 0;
margin: 0 0 var(--space-large);
display: flex;
flex-direction: column;
gap: var(--space-medium);
}
.journal-entree {
padding: var(--space-medium);
background: var(--bg-carte);
border-radius: var(--radius-bouton);
border: 1px solid var(--separateur);
position: relative;
transition: border-color var(--duration-micro) var(--easing-standard);
}
.journal-entree:hover { border-color: var(--separateur-fort, var(--separateur)); }
.journal-entree.action-faite {
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(168, 117, 48, 0.06) 100%);
border-left: 3px solid var(--ocre-signature);
}
.journal-entree.enfant {
margin-left: 24px;
border-left: 2px solid var(--separateur);
background: transparent;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0;
padding-left: 16px;
}
.journal-entree-entete {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.journal-entree-date {
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-tertiaire);
margin: 0;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.journal-entree-badge {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ocre-signature);
font-style: italic;
background: rgba(168, 117, 48, 0.08);
padding: 2px 8px;
border-radius: 999px;
flex: 1;
min-width: 0;
}
.journal-entree-controles {
margin-left: auto;
display: flex;
gap: 2px;
opacity: 0;
transition: opacity var(--duration-micro) var(--easing-standard);
}
.journal-entree:hover .journal-entree-controles,
.journal-entree:focus-within .journal-entree-controles { opacity: 1; }
.journal-controle {
width: 24px;
height: 24px;
border-radius: var(--rayon-small);
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 11px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.journal-controle:hover:not(:disabled) {
background: rgba(168, 117, 48, 0.12);
color: var(--ocre-signature);
}
.journal-controle:disabled { opacity: 0.25; cursor: not-allowed; }
.journal-controle-fermer:hover:not(:disabled) {
background: rgba(180, 60, 60, 0.12);
color: #B43C3C;
}
.journal-entree-texte {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--texte-principal);
margin: 0;
white-space: pre-wrap;
}
.journal-sous-liste {
list-style: none;
padding: 0;
margin: 10px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.journal-edit-zone, .journal-reponse-zone {
margin-top: 10px;
}
.journal-reponse-zone {
padding: 10px;
border-left: 2px solid var(--ocre-signature);
background: rgba(168, 117, 48, 0.04);
border-radius: 0 var(--rayon-small) var(--rayon-small) 0;
}
.fiche-chantier-actions {
display: flex;
flex-direction: column;
gap: var(--space-small);
margin-top: var(--space-xlarge);
}
/* — Chips (sélection unique par groupe — utilisé dans Réglages) — */
.chips-groupe {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
margin-bottom: var(--space-medium);
}
.chip {
background: transparent;
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 8px 16px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--texte-secondaire);
cursor: pointer;
min-height: 36px;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.chip:hover { background: var(--survol); }
.chip:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
.chip.actif {
background: rgba(168, 117, 48, 0.08);
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
.chip-grand {
font-size: 22px;
padding: 10px 18px;
line-height: 1.2;
}
/* — Pratique Respirer (plein écran) — */
.respiration-pleinecran {
align-items: center;
justify-content: center;
gap: var(--space-large);
text-align: center;
}
.respiration-titre {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 400;
margin: 0;
color: var(--texte-secondaire);
}
.respiration-sousTitre {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.cercle-zone {
display: flex;
align-items: center;
justify-content: center;
width: 240px;
height: 240px;
position: relative;
}
.cercle-respiration {
width: 120px;
height: 120px;
border-radius: 50%;
background: var(--ocre-signature);
opacity: 0.85;
transform: scale(0.8);
will-change: transform;
}
.respiration-instruction {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.4;
color: var(--texte-principal);
margin: 0;
min-height: 1.4em;
}
.respiration-compteur {
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.5px;
color: var(--texte-tertiaire);
margin: 0;
}
.respiration-fin {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
color: var(--texte-principal);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.cercle-respiration {
transition: none !important;
transform: scale(1);
}
}
/* — Parcours guidé (exercices stoïciens, lectio divina) — */
.parcours-pleinecran {
align-items: stretch;
justify-content: flex-start;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 64px 20px calc(120px + env(safe-area-inset-bottom, 0));
}
.parcours-conteneur {
max-width: 50ch;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
gap: var(--space-large);
min-height: 100%;
}
.parcours-progres {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.parcours-titre {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.4;
font-weight: 400;
color: var(--texte-principal);
margin: 0;
}
.parcours-meditation {
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.7;
font-style: italic;
color: var(--texte-principal);
margin: 0;
}
.parcours-champ {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
width: 100%;
background: var(--bg-principal);
border: 1px solid var(--separateur);
border-radius: var(--radius-input);
padding: 12px;
color: var(--texte-principal);
resize: vertical;
min-height: 100px;
transition: border-color var(--duration-micro) var(--easing-standard);
}
.parcours-champ:focus {
outline: none;
border-color: var(--ocre-signature);
}
.parcours-recap {
display: flex;
flex-direction: column;
gap: var(--space-medium);
}
.parcours-recap-bloc {
padding: var(--space-medium);
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-bouton);
}
.parcours-recap-question {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 6px;
}
.parcours-recap-reponse {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.5;
color: var(--texte-principal);
margin: 0;
white-space: pre-wrap;
}
.parcours-recap-vide {
font-family: var(--font-sans);
font-style: italic;
color: var(--texte-tertiaire);
font-size: 14px;
margin: 0;
}
.parcours-citation {
margin-top: var(--space-large);
padding: var(--space-large);
border-left: 3px solid var(--ocre-signature);
background: var(--bg-carte);
border-radius: var(--radius-input);
}
.parcours-citation-texte {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
line-height: 1.7;
color: var(--texte-principal);
margin: 0 0 var(--space-small);
}
.parcours-citation-reference {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--texte-tertiaire);
margin: 0;
}
.parcours-actions {
position: sticky;
bottom: 24px;
display: flex;
gap: var(--space-small);
justify-content: space-between;
margin-top: auto;
padding-top: var(--space-large);
}
.parcours-actions .btn-tertiaire { min-width: 90px; }
.parcours-actions .btn-primaire { min-width: 110px; }
/* Picker des exercices : groupes thématiques */
.picker-groupe {
margin-bottom: var(--space-large);
}
.picker-groupe-titre {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0 0 var(--space-small);
}
/* ============================================================
Architecture 7 mouvements — Réfléchir & Lectio divina
SEUIL · POSTURE · PRATIQUE · INTÉGRATION · TRACE · RETOUR
Voir docs/03-modules.md (refonte expérience contemplative)
============================================================ */
/* — Orbe central pulsant (ART, Polyvagal) — */
.orbe-zone {
display: flex;
align-items: center;
justify-content: center;
margin: var(--space-large) 0;
}
.orbe {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--ocre-signature);
opacity: 0.4;
animation: orbe-pulse 10s ease-in-out infinite;
}
.orbe.posture {
width: 120px;
height: 120px;
animation-duration: 10s; /* 4s inspire + 6s expire */
}
.orbe.integration {
animation-duration: 14s; /* plus lent encore */
}
@keyframes orbe-pulse {
0%, 100% { transform: scale(0.85); opacity: 0.35; }
50% { transform: scale(1.15); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.orbe { animation: none; opacity: 0.5; transform: scale(1); }
}
/* — Écran SEUIL — */
.phase-seuil {
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-large);
padding: 80px 24px;
}
.phase-seuil-eyebrow {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.phase-seuil-titre {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
line-height: 1.3;
color: var(--texte-principal);
margin: 0;
max-width: 24ch;
}
.phase-seuil-phrase {
font-family: var(--font-serif);
font-size: 19px;
font-style: italic;
line-height: 1.6;
color: var(--texte-secondaire);
margin: 0;
max-width: 32ch;
}
.phase-seuil-meta {
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-tertiaire);
letter-spacing: 0.4px;
margin: 0;
}
/* — Écran POSTURE / INTÉGRATION / RETOUR (variantes du même squelette sobre) — */
.phase-corps {
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-large);
padding: 80px 24px;
}
.phase-corps-titre {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.4;
color: var(--texte-principal);
margin: 0;
max-width: 30ch;
}
.phase-corps-instruction {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.6;
font-style: italic;
color: var(--texte-secondaire);
margin: 0;
max-width: 30ch;
}
/* — Écran PRATIQUE refondu — */
.phase-pratique {
align-items: center;
justify-content: flex-start;
padding: 64px 24px 100px;
gap: var(--space-large);
text-align: center;
}
.phase-pratique-progres {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.phase-pratique-instruction {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.4;
font-weight: 400;
color: var(--texte-principal);
margin: 0;
max-width: 28ch;
}
.phase-pratique-rappel {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.6;
font-style: italic;
color: var(--texte-tertiaire);
margin: 0;
max-width: 30ch;
}
/* — Chips de réponse rapide (vertu, mot, etc.) — */
.chips-reponse {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
justify-content: center;
margin: var(--space-large) 0;
}
.chip-reponse {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 10px 18px;
font-family: var(--font-serif);
font-size: 17px;
font-style: italic;
color: var(--texte-secondaire);
cursor: pointer;
min-height: 44px;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.chip-reponse:hover { background: var(--survol); }
.chip-reponse:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
.chip-reponse.actif {
background: rgba(168, 117, 48, 0.1);
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
/* — Bouton "Noter" discret pour révéler textarea — */
.btn-noter {
background: transparent;
border: none;
color: var(--texte-tertiaire);
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.3px;
cursor: pointer;
padding: 8px 12px;
min-height: 44px;
transition: color var(--duration-micro) var(--easing-standard);
}
.btn-noter:hover { color: var(--texte-secondaire); text-decoration: underline; }
.btn-noter:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
.zone-notation {
width: 100%;
max-width: 50ch;
margin: var(--space-medium) 0;
}
/* — Bouton "Continuer" qui apparaît progressivement (slow tech) — */
.btn-continuer-zone {
margin-top: auto;
padding-top: var(--space-large);
min-height: 80px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-small);
}
.btn-continuer-zone .btn-primaire,
.btn-continuer-zone .btn-tertiaire {
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 800ms var(--easing-standard),
transform 800ms var(--easing-standard);
}
.btn-continuer-zone.visible .btn-primaire,
.btn-continuer-zone.visible .btn-tertiaire {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* — Trace finale : "Un mot pour ce moment ?" — */
.phase-trace {
align-items: center;
text-align: center;
padding: 80px 24px;
gap: var(--space-large);
}
.phase-trace-titre {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.4;
color: var(--texte-principal);
margin: 0;
max-width: 28ch;
}
.phase-trace-input {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
text-align: center;
background: transparent;
border: none;
border-bottom: 1px solid var(--separateur);
color: var(--texte-principal);
padding: 12px 16px;
width: 100%;
max-width: 18ch;
outline: none;
transition: border-color var(--duration-micro) var(--easing-standard);
}
.phase-trace-input:focus { border-bottom-color: var(--ocre-signature); }
/* — Écran de citation finale (avant intégration) — */
.phase-citation {
align-items: center;
text-align: center;
padding: 80px 24px;
gap: var(--space-large);
}
.phase-citation-texte {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
line-height: 1.6;
color: var(--texte-principal);
margin: 0;
max-width: 32ch;
}
.phase-citation-ref {
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.4px;
color: var(--texte-tertiaire);
margin: 0;
}
/* — Écran minuteur (Contemplatio dans Lectio divina) — */
.parcours-minuteur {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-large);
margin: var(--space-xlarge) 0;
}
.parcours-minuteur-cercle {
width: 160px;
height: 160px;
border-radius: 50%;
border: 2px solid var(--ocre-signature);
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-carte);
}
.parcours-minuteur-compteur {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 300;
letter-spacing: 1px;
color: var(--texte-principal);
margin: 0;
font-variant-numeric: tabular-nums;
}
.parcours-minuteur-instruction {
font-family: var(--font-serif);
font-size: 18px;
font-style: italic;
color: var(--texte-secondaire);
margin: 0;
text-align: center;
}
/* — Prière silencieuse / Méditation verset (plein écran immersif) — */
.priere-pleinecran {
align-items: center;
justify-content: center;
gap: var(--space-large);
text-align: center;
padding: 64px 24px;
}
.priere-titre {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.priere-formule {
font-family: var(--font-serif);
font-size: 24px;
font-style: italic;
font-weight: 400;
line-height: 1.6;
color: var(--texte-principal);
margin: 0;
max-width: 30ch;
}
.priere-compteur {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 300;
letter-spacing: 1px;
color: var(--texte-secondaire);
margin: 0;
font-variant-numeric: tabular-nums;
}
.priere-icone-centrale {
font-size: 64px;
color: var(--ocre-signature);
line-height: 1;
}
.priere-fin {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
color: var(--texte-principal);
margin: 0;
}
/* Verset en pleine page (Méditer un verset) */
.verset-meditation {
font-family: var(--font-serif);
font-size: 28px;
font-style: italic;
line-height: 1.5;
color: var(--texte-principal);
margin: 0;
max-width: 28ch;
text-align: center;
}
.verset-meditation-ref {
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.6px;
color: var(--texte-tertiaire);
margin: 0;
}
/* ============================================================
FICHE CHANTIER — refonte modulaire (Pack 1 + 2 + 3)
Architecture en cards indépendantes, activables à la demande.
============================================================ */
/* — Épigraphe « Pourquoi » en haut de fiche — */
.chantier-pourquoi {
font-family: var(--font-serif);
font-size: 17px;
font-style: italic;
line-height: 1.6;
color: var(--texte-secondaire);
text-align: center;
padding: var(--space-small) var(--space-medium);
margin: 0 0 var(--space-large);
border-top: 1px solid var(--separateur);
border-bottom: 1px solid var(--separateur);
max-width: 40ch;
margin-left: auto;
margin-right: auto;
cursor: text;
}
.chantier-pourquoi.vide {
font-style: normal;
font-size: 13px;
color: var(--texte-tertiaire);
border-color: transparent;
letter-spacing: 0.3px;
}
.chantier-pourquoi:focus-within {
outline: 2px solid var(--focus-outline);
outline-offset: 4px;
border-radius: var(--radius-input);
}
.chantier-pourquoi-input {
background: transparent;
border: none;
font: inherit;
color: inherit;
text-align: center;
width: 100%;
outline: none;
font-style: italic;
}
/* ============================================================
ATELIER — cartes liste (page Vivre > Ateliers)
============================================================ */
#vivre-chantiers-liste {
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
#vivre-chantiers-liste > li { list-style: none; }
.atelier-carte {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
text-align: left;
font-family: inherit;
color: var(--texte-principal);
cursor: pointer;
background:
radial-gradient(circle at 0% 0%, rgba(168, 117, 48, 0.07) 0%, transparent 55%),
linear-gradient(135deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-radius: 16px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 12px rgba(45, 36, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms,
box-shadow 240ms;
}
.atelier-carte:hover {
transform: translateY(-2px);
border-color: rgba(168, 117, 48, 0.45);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 10px 24px rgba(45, 36, 24, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.atelier-carte:active { transform: translateY(0) scale(0.99); }
.atelier-carte-icone {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.14) 0%, rgba(168, 117, 48, 0.05) 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
color: var(--ocre-signature);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.atelier-carte-icone.avec-emoji {
font-size: 22px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.08) 0%, rgba(168, 117, 48, 0.02) 100%);
}
.atelier-carte-icone svg { width: 20px; height: 20px; }
.atelier-carte-corps {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.atelier-carte-titre {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
letter-spacing: -0.2px;
line-height: 1.2;
color: var(--texte-principal);
overflow: hidden;
text-overflow: ellipsis;
}
.atelier-carte-titre.vide {
font-style: italic;
color: var(--texte-tertiaire);
}
.atelier-carte-meta {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
line-height: 1.4;
}
.atelier-carte-barre {
display: block;
width: 100%;
height: 3px;
background: rgba(168, 117, 48, 0.12);
border-radius: 999px;
overflow: hidden;
margin-top: 6px;
}
.atelier-carte-barre-fill {
display: block;
height: 100%;
background: linear-gradient(to right, var(--ocre-signature), var(--ocre-clair));
border-radius: 999px;
transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.atelier-carte-badge {
flex-shrink: 0;
min-width: 26px;
height: 26px;
padding: 0 9px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.18) 0%, rgba(168, 117, 48, 0.10) 100%);
border: 1px solid rgba(168, 117, 48, 0.30);
color: var(--ocre-profond);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: -0.3px;
}
/* Variante "achevé" : plus calme, opacité réduite */
.atelier-carte--acheve {
opacity: 0.85;
background:
linear-gradient(135deg, rgba(253, 251, 246, 0.85) 0%, rgba(244, 236, 222, 0.85) 100%);
}
.atelier-carte--acheve .atelier-carte-icone {
background: linear-gradient(135deg, rgba(122, 139, 111, 0.14) 0%, rgba(122, 139, 111, 0.04) 100%);
border-color: rgba(122, 139, 111, 0.24);
color: var(--vert-profond);
}
.atelier-carte--acheve .atelier-carte-titre {
font-style: italic;
color: var(--texte-secondaire);
}
/* Liste ateliers achevés */
.chantiers-acheves-liste {
margin-top: 10px;
display: flex !important;
flex-direction: column;
gap: 10px;
}
/* ============================================================
CHANTIER — refonte parchemin (entête + progression + journal)
============================================================ */
.chantier-entete {
margin: 0 0 18px;
text-align: center;
}
.chantier-entete-ligne {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 8px;
}
.chantier-entete-ligne .page-entete-eyebrow {
margin-bottom: 0;
}
/* Bouton catégorie/emoji — pastille parchemin élégante */
.chantier-emoji-bouton {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgba(168, 117, 48, 0.08);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 999px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ocre-signature);
transition: background 200ms, border-color 200ms, transform 200ms;
}
.chantier-emoji-bouton:hover {
background: rgba(168, 117, 48, 0.14);
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
.chantier-emoji-bouton.placeholder { opacity: 0.7; }
.chantier-emoji-glyphe {
font-size: 16px;
line-height: 1;
}
.chantier-emoji-label {
letter-spacing: 1.5px;
}
/* Titre éditable avec placeholder */
.chantier-titre[contenteditable="true"] {
cursor: text;
outline: none;
border-radius: 8px;
padding: 2px 6px;
margin: 0 -6px 8px;
transition: background 200ms;
}
.chantier-titre[contenteditable="true"]:hover {
background: rgba(168, 117, 48, 0.04);
}
.chantier-titre[contenteditable="true"]:focus {
background: rgba(168, 117, 48, 0.08);
outline: 1px solid rgba(168, 117, 48, 0.25);
}
.chantier-titre:empty::before {
content: attr(data-placeholder);
color: var(--texte-tertiaire);
font-style: italic;
opacity: 0.6;
}
.chantier-meta {
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
margin-top: 4px;
}
/* Pourquoi : bloc plus structuré avec eyebrow */
.chantier-pourquoi-bloc {
margin: 0 0 22px;
padding: 14px 16px;
background: rgba(255, 251, 245, 0.55);
border-left: 3px solid rgba(168, 117, 48, 0.30);
border-radius: 0 12px 12px 0;
}
.chantier-pourquoi-bloc.vide {
border-left-color: rgba(168, 117, 48, 0.15);
background: transparent;
}
.chantier-pourquoi-eyebrow {
text-align: left !important;
margin: 0 0 6px;
}
.chantier-pourquoi-bloc .chantier-pourquoi-input {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--texte-principal);
line-height: 1.5;
text-align: left;
resize: none;
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 0;
display: block;
}
.chantier-pourquoi-bloc .chantier-pourquoi-input::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
opacity: 0.7;
}
/* ============================================================
CHANTIER — Anneau de progression
============================================================ */
.chantier-progression {
display: flex;
align-items: center;
gap: 18px;
margin: 0 0 24px;
padding: 16px 18px;
background:
radial-gradient(circle at 0% 0%, rgba(168, 117, 48, 0.07) 0%, transparent 60%),
linear-gradient(135deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 18px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chantier-progression-visuel {
position: relative;
flex-shrink: 0;
width: 88px;
height: 88px;
}
.chantier-progression-centre {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.chantier-progression-pct {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 500;
color: var(--ocre-signature);
letter-spacing: -0.5px;
line-height: 1;
}
.chantier-progression-unite {
font-size: 14px;
margin-left: 2px;
opacity: 0.7;
}
.chantier-progression-corps { flex: 1; min-width: 0; }
.chantier-progression-phrase {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--texte-principal);
line-height: 1.3;
margin: 0 0 4px;
}
.chantier-progression-detail {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
/* ============================================================
CHANTIER — Journal de bord
============================================================ */
.chantier-journal {
margin: 22px 0 24px;
}
.chantier-journal .page-section-eyebrow {
text-align: left;
margin: 0 0 10px;
}
.chantier-journal-vide {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
line-height: 1.5;
margin: 0 0 12px;
padding: 14px 16px;
background: rgba(255, 251, 245, 0.45);
border: 1px dashed rgba(168, 117, 48, 0.22);
border-radius: 12px;
}
.chantier-journal-liste {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 12px;
}
.chantier-journal-entree {
position: relative;
padding: 14px 16px;
background:
linear-gradient(135deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 14px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chantier-journal-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ocre-signature);
margin-bottom: 8px;
}
.chantier-journal-supprimer {
width: 24px; height: 24px;
border: none;
background: transparent;
color: var(--texte-tertiaire);
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 200ms, color 200ms, background 200ms;
}
.chantier-journal-supprimer svg { width: 14px; height: 14px; }
.chantier-journal-entree:hover .chantier-journal-supprimer { opacity: 1; }
.chantier-journal-supprimer:hover {
background: rgba(168, 82, 61, 0.10);
color: var(--rouge-terre);
}
.chantier-journal-texte {
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-principal);
line-height: 1.55;
margin: 0 0 8px;
white-space: pre-wrap;
}
.chantier-journal-image {
display: block;
width: 100%;
max-height: 320px;
object-fit: cover;
border-radius: 10px;
margin-top: 6px;
}
.chantier-journal-actions {
display: flex;
gap: 8px;
}
.chantier-journal-bouton {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
background: rgba(253, 251, 246, 0.7);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 12px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-principal);
cursor: pointer;
transition: background 200ms, border-color 200ms, transform 200ms;
}
.chantier-journal-bouton svg {
width: 16px; height: 16px;
color: var(--ocre-signature);
}
.chantier-journal-bouton:hover {
background: rgba(168, 117, 48, 0.08);
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
.chantier-note-textarea {
width: 100%;
resize: vertical;
min-height: 88px;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.5;
padding: 12px 14px;
background: rgba(255, 251, 245, 0.7);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 12px;
color: var(--texte-principal);
outline: none;
transition: border-color 200ms, background 200ms;
}
.chantier-note-textarea:focus {
border-color: var(--ocre-signature);
background: #FDFBF7;
}
.chantier-note-apercu img {
display: block;
width: 100%;
max-height: 240px;
object-fit: cover;
border-radius: 10px;
margin: 10px 0;
}
@media (max-width: 360px) {
.chantier-progression { padding: 14px; gap: 14px; }
.chantier-progression-visuel { width: 72px; height: 72px; }
.chantier-progression-pct { font-size: 20px; }
.chantier-progression-phrase { font-size: 15px; }
}
/* ============================================================
CHANTIER — Footer d'actions (Clore primaire + Supprimer destructif)
============================================================ */
.chantier-actions-footer {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid rgba(168, 117, 48, 0.14);
}
.chantier-action-clore {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
/* Vrai parchemin : gradient subtil + bordure ocre + texte ocre profond */
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.14) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
color: var(--ocre-profond);
border: 1px solid rgba(168, 117, 48, 0.45);
border-radius: 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.05),
0 4px 14px rgba(168, 117, 48, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms,
background 200ms;
}
.chantier-action-clore svg {
width: 18px;
height: 18px;
}
.chantier-action-clore:hover {
transform: translateY(-2px);
border-color: var(--ocre-signature);
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.22) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #EFE4CC 100%);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 12px 26px rgba(168, 117, 48, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.chantier-action-clore:active { transform: translateY(0) scale(0.98); }
/* Supprimer : parchemin destructif — fond légèrement teinté rouge-terre */
.chantier-action-supprimer {
align-self: center;
width: auto;
flex: 0 0 auto;
padding: 10px 18px;
font-size: 13px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 82, 61, 0.08) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F5E8E1 100%);
border-color: rgba(168, 82, 61, 0.30);
color: var(--rouge-terre);
border-radius: 12px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chantier-action-supprimer:hover {
background:
radial-gradient(circle at 50% 0%, rgba(168, 82, 61, 0.14) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F0DAD0 100%);
border-color: var(--rouge-terre);
}
/* ============================================================
LIGHTBOX IMAGE — agrandit une image en plein écran
============================================================ */
.lightbox-image-overlay {
position: fixed;
inset: 0;
background: rgba(30, 24, 15, 0.92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9000;
padding: max(env(safe-area-inset-top), 24px) 24px max(env(safe-area-inset-bottom), 24px);
animation: lightbox-fadein 220ms cubic-bezier(0.22, 1, 0.36, 1);
cursor: zoom-out;
}
@keyframes lightbox-fadein { from { opacity: 0; } to { opacity: 1; } }
.lightbox-image-overlay.fermeture {
opacity: 0;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
animation: lightbox-zoom 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes lightbox-zoom {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lightbox-image-fermer {
position: absolute;
top: max(env(safe-area-inset-top), 16px);
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(253, 251, 247, 0.92);
border: 1px solid rgba(168, 117, 48, 0.20);
color: var(--texte-principal);
font-size: 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
transition: transform 200ms, background 200ms;
}
.lightbox-image-fermer:hover {
transform: scale(1.08);
background: #FDFBF7;
}
/* — État du chantier : chips visuels — */
.chantier-etat-zone {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: var(--space-large);
}
.chip-etat {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 6px 12px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-tertiaire);
cursor: pointer;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.chip-etat:hover { background: var(--survol); }
.chip-etat:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
.chip-etat.actif {
background: rgba(168, 117, 48, 0.12);
border-color: var(--ocre-signature);
color: var(--ocre-signature);
font-weight: 500;
}
/* — Carte module : conteneur universel — */
.module-card {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-carte);
padding: var(--space-medium);
margin-bottom: var(--space-medium);
position: relative;
transition: border-color var(--duration-micro) var(--easing-standard);
}
.module-card:focus-within {
border-color: var(--ocre-signature);
}
.module-card-entete {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-small);
}
.module-card-titre {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.module-card-action {
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 16px;
padding: 4px;
border-radius: 4px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--duration-micro) var(--easing-standard),
background var(--duration-micro) var(--easing-standard);
}
.module-card-action:hover {
color: var(--rouge-terre);
background: var(--survol);
}
.module-card-action:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* — Module Prochaine action — */
.module-action {
position: relative;
background: var(--bg-carte);
border: 1px solid var(--ocre-signature);
border-radius: var(--radius-carte);
padding: var(--space-large);
margin-bottom: var(--space-large);
box-shadow: 0 0 0 0 rgba(168, 117, 48, 0.0);
animation: halo-pulse 6s ease-in-out infinite;
}
@keyframes halo-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(168, 117, 48, 0.0); }
50% { box-shadow: 0 0 24px 4px rgba(168, 117, 48, 0.15); }
}
@media (prefers-reduced-motion: reduce) {
.module-action { animation: none; }
}
.module-action-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 var(--space-small);
display: flex;
align-items: center;
gap: 6px;
}
.module-action-texte {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
line-height: 1.4;
color: var(--texte-principal);
margin: 0 0 var(--space-medium);
cursor: text;
background: transparent;
border: none;
width: 100%;
resize: none;
outline: none;
min-height: 1.4em;
}
.module-action-texte::placeholder {
font-style: italic;
color: var(--texte-tertiaire);
}
.module-action-texte:focus {
outline: 2px solid var(--ocre-signature);
outline-offset: 4px;
border-radius: var(--radius-input);
}
.module-action-fait {
background: var(--ocre-signature);
color: #FDFBF7;
border: none;
border-radius: 999px;
padding: 10px 20px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
cursor: pointer;
min-height: 40px;
transition: background var(--duration-micro) var(--easing-standard),
transform var(--duration-micro) var(--easing-standard);
}
.module-action-fait:hover { background: var(--ocre-clair); }
.module-action-fait:active { transform: scale(0.96); }
.module-action-fait:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
.module-action-fait[disabled] {
background: var(--separateur);
cursor: not-allowed;
opacity: 0.6;
}
/* — Module Étapes — */
.module-etapes-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.etape-ligne {
display: flex;
align-items: flex-start;
gap: var(--space-medium);
padding: 10px var(--space-small);
border-radius: var(--radius-bouton);
cursor: pointer;
transition: background var(--duration-micro) var(--easing-standard);
min-height: 44px;
}
.etape-ligne:hover { background: var(--survol); }
.etape-cercle {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--texte-tertiaire);
background: transparent;
flex-shrink: 0;
margin-top: 2px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color var(--duration-micro) var(--easing-standard),
background var(--duration-narratif) var(--easing-standard),
transform var(--duration-micro) var(--easing-standard);
}
.etape-cercle:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 3px;
}
.etape-cercle:active { transform: scale(0.92); }
.etape-cercle.fait {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
animation: etape-remplissage 600ms var(--easing-standard);
}
.etape-cercle.fait::after {
content: '';
width: 8px;
height: 4px;
border-left: 1.5px solid #FDFBF7;
border-bottom: 1.5px solid #FDFBF7;
transform: rotate(-45deg) translate(1px, -1px);
}
@keyframes etape-remplissage {
0% { transform: scale(1); background: transparent; }
40% { transform: scale(1.15); }
100% { transform: scale(1); background: var(--ocre-signature); }
}
@media (prefers-reduced-motion: reduce) {
.etape-cercle.fait { animation: none; }
}
.etape-texte {
flex: 1;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--texte-principal);
background: transparent;
border: none;
outline: none;
padding: 0;
resize: none;
cursor: text;
min-height: 1.5em;
}
.etape-texte:focus {
background: var(--bg-principal);
border-radius: 4px;
padding: 2px 4px;
margin: -2px -4px;
}
.etape-ligne.fait .etape-texte {
color: var(--texte-tertiaire);
text-decoration: line-through;
text-decoration-color: var(--texte-tertiaire);
}
.etape-supprimer {
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 18px;
padding: 0 4px;
opacity: 0;
transition: opacity var(--duration-micro) var(--easing-standard);
min-width: 28px;
min-height: 28px;
}
.etape-ligne:hover .etape-supprimer,
.etape-ligne:focus-within .etape-supprimer {
opacity: 0.6;
}
.etape-supprimer:hover { opacity: 1 !important; color: var(--rouge-terre); }
.etape-ajouter {
display: flex;
align-items: center;
gap: var(--space-small);
background: transparent;
border: 1px dashed var(--separateur);
border-radius: var(--radius-bouton);
padding: 10px var(--space-medium);
width: 100%;
text-align: left;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-tertiaire);
cursor: pointer;
margin-top: var(--space-small);
min-height: 40px;
transition: border-color var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.etape-ajouter:hover {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
.etape-ajouter:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* — Bouton « + Ajouter un module » — */
.modules-ajouter-zone {
margin-top: var(--space-large);
padding-top: var(--space-large);
border-top: 1px dashed var(--separateur);
}
.modules-ajouter-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-small);
}
.modules-disponibles {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
}
.module-ajouter-chip {
background: transparent;
border: 1px dashed var(--separateur);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
cursor: pointer;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color var(--duration-micro) var(--easing-standard),
background var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.module-ajouter-chip:hover {
border-color: var(--ocre-signature);
background: var(--survol);
color: var(--ocre-signature);
}
.module-ajouter-chip:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* — Bandeau "Reprendre où j'en étais" — */
.bandeau-reprise {
background: rgba(168, 117, 48, 0.06);
border-left: 3px solid var(--ocre-signature);
border-radius: var(--radius-input);
padding: var(--space-small) var(--space-medium);
margin-bottom: var(--space-large);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--texte-secondaire);
}
.bandeau-reprise-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 4px;
}
.bandeau-reprise-contenu {
font-style: italic;
}
/* — Avertissement WIP limit doux — */
.alerte-wip {
background: rgba(74, 89, 112, 0.08);
border-left: 3px solid var(--bleu-nuit);
border-radius: var(--radius-input);
padding: var(--space-medium);
margin: var(--space-medium) 0;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
color: var(--texte-secondaire);
}
.alerte-wip-titre {
font-weight: 600;
margin: 0 0 4px;
color: var(--texte-principal);
}
/* — Picker émoji catégorie — */
.chantier-emoji-zone {
display: flex;
align-items: center;
gap: var(--space-small);
margin-bottom: var(--space-medium);
}
.chantier-emoji {
font-size: 28px;
cursor: pointer;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-bouton);
padding: 4px 8px;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard);
}
.chantier-emoji:hover {
background: var(--survol);
border-color: var(--separateur);
}
.chantier-emoji.placeholder { opacity: 0.4; font-size: 22px; }
.emoji-picker-modal {
position: absolute;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-carte);
padding: var(--space-small);
box-shadow: var(--ombre-niveau-3);
display: flex;
flex-wrap: wrap;
gap: 4px;
max-width: 280px;
z-index: 50;
}
.emoji-picker-modal button {
font-size: 24px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 4px;
min-width: 36px;
min-height: 36px;
transition: background var(--duration-micro) var(--easing-standard);
}
.emoji-picker-modal button:hover { background: var(--survol); }
/* — Module Compagnonnage / Budget / Saison (simples) — */
.module-simple-input {
width: 100%;
background: transparent;
border: none;
font-family: var(--font-serif);
font-size: 16px;
font-style: italic;
line-height: 1.6;
color: var(--texte-principal);
outline: none;
resize: none;
min-height: 1.6em;
}
.module-simple-input::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
}
/* — Clôture enrichie : émotions chips — */
.cloture-emotions {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
justify-content: center;
margin: var(--space-medium) 0;
}
.emotion-chip {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 8px 16px;
font-family: var(--font-serif);
font-size: 16px;
font-style: italic;
color: var(--texte-secondaire);
cursor: pointer;
min-height: 40px;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.emotion-chip:hover { background: var(--survol); }
.emotion-chip.actif {
background: rgba(168, 117, 48, 0.1);
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
/* — Rituel de clôture (1 écran, scrollable si le contenu déborde) — */
.cloture-pleinecran {
align-items: flex-start;
justify-content: flex-start;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 64px 20px calc(80px + env(safe-area-inset-bottom, 0));
}
.cloture-conteneur {
max-width: 480px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.cloture-felicitations {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 var(--space-small);
}
.cloture-titre {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 400;
line-height: 1.3;
margin: 0 0 var(--space-xlarge);
}
.cloture-duree {
font-family: var(--font-sans);
font-size: 14px;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-xlarge);
}
.etoiles-zone {
display: flex;
justify-content: center;
gap: var(--space-small);
margin-bottom: var(--space-xlarge);
}
.etoile {
background: transparent;
border: none;
cursor: pointer;
padding: 8px;
color: var(--texte-tertiaire);
transition: color var(--duration-micro) var(--easing-standard),
transform var(--duration-micro) var(--easing-standard);
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.etoile svg {
width: 32px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
transition: fill var(--duration-micro) var(--easing-standard);
}
.etoile.active { color: var(--ocre-signature); }
.etoile.active svg { fill: var(--ocre-signature); }
.etoile:hover { color: var(--ocre-clair); }
.etoile:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
border-radius: var(--radius-bouton);
}
.cloture-zone-lecon {
text-align: left;
margin-bottom: var(--space-xlarge);
}
.cloture-zone-actions {
display: flex;
flex-direction: column;
gap: var(--space-small);
}
/* ============================================================
LIRE — la bibliothèque de mémoire (Session 5)
============================================================ */
.lire-section {
margin-bottom: var(--space-xlarge);
}
.lire-sous-section {
margin-bottom: var(--space-medium);
}
/* Lignes spécifiques Lire (apercu verset + ref) */
.lire-ligne {
align-items: flex-start;
min-height: 64px;
padding: 14px var(--space-medium);
}
.lire-ligne-corps {
display: flex;
flex-direction: column;
gap: 4px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.lire-ligne-apercu {
font-family: var(--font-serif);
font-size: 15px;
font-style: italic;
line-height: 1.5;
color: var(--texte-principal);
}
.lire-ligne-ref {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.3px;
color: var(--texte-tertiaire);
}
.lire-ligne-fav {
color: var(--ocre-signature);
font-size: 16px;
}
/* Chips de moments dans Lire */
.lire-chips-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-secondaire);
margin: var(--space-large) 0 var(--space-small);
}
.lire-chips-moments {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
}
/* Onboarding éthique (premier usage + tous les 3 mois) */
.onboarding-ethique {
align-items: center;
justify-content: center;
padding: 80px 24px;
text-align: center;
}
/* Bouton favori (cœur) dans la vue plein écran d'un texte */
.vue-texte-fav {
position: absolute;
top: 24px;
left: 24px;
background: transparent;
border: none;
color: var(--texte-tertiaire);
font-size: 22px;
cursor: pointer;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--duration-micro) var(--easing-standard),
background var(--duration-micro) var(--easing-standard);
}
.vue-texte-fav:hover { background: var(--survol); }
.vue-texte-fav.actif { color: var(--ocre-signature); }
.vue-texte-fav:focus-visible {
outline: 2px solid var(--focus-outline);
outline-offset: 2px;
}
/* ============================================================
MODE RITUEL — plein écran immersif (prêt pour sessions futures)
============================================================ */
.moment-rituel {
position: fixed;
inset: 0;
background: var(--bg-secondaire);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
animation: fondu-entrant var(--duration-narratif) var(--easing-entree);
}
.moment-rituel-contenu {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.7;
text-align: center;
max-width: 50ch;
color: var(--texte-principal);
}
.moment-rituel-sortie {
position: absolute;
top: 24px;
right: 24px;
}
.moment-rituel-suivant {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}
/* ============================================================
TOAST D'ANNULATION (prêt pour sessions futures)
============================================================ */
.toast-annulation {
position: fixed;
bottom: calc(var(--hauteur-tabbar) + var(--space-large));
left: 50%;
transform: translateX(-50%);
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: var(--radius-bouton);
padding: 12px 16px;
box-shadow: var(--ombre-niveau-2);
display: flex;
align-items: center;
gap: 12px;
z-index: 200;
animation: slide-haut var(--duration-ui) var(--easing-entree);
}
@keyframes slide-haut {
from { transform: translate(-50%, 100%); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes slide-bas {
from { transform: translate(-50%, 0); opacity: 1; }
to { transform: translate(-50%, 100%); opacity: 0; }
}
.toast-annulation.sortie {
animation: slide-bas var(--duration-ui) var(--easing-sortie) forwards;
}
.toast-annulation-action {
background: transparent;
color: var(--ocre-signature);
border: none;
font-weight: 600;
cursor: pointer;
}
/* ============================================================
ACCESSIBILITÉ — Réduction de mouvement
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 50ms !important;
scroll-behavior: auto !important;
}
/* FAB Souffle retiré */
}
/* Lecteurs d'écran uniquement */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* — Pack 2/3 : labels de section clôture, fil parent, sous-chantiers — */
.cloture-section-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-small);
text-align: center;
}
.cloture-emotions-ligne {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
justify-content: center;
}
.cloture-zone-lecon { margin-top: var(--space-medium); text-align: left; }
.chantier-fil-parent {
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-tertiaire);
padding: 4px 0;
margin-bottom: var(--space-small);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.chantier-fil-parent:hover { color: var(--ocre-signature); }
.sous-chantiers-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.sous-chantier-ligne {
display: flex;
align-items: center;
gap: var(--space-small);
width: 100%;
text-align: left;
background: var(--bg-elevation);
border: 1px solid var(--separateur);
border-radius: var(--rayon-medium);
padding: 10px 12px;
font-family: var(--font-sans);
font-size: 15px;
color: var(--texte-principal);
cursor: pointer;
transition: background var(--duration-micro) var(--easing-standard),
border-color var(--duration-micro) var(--easing-standard);
}
.sous-chantier-ligne:hover {
background: var(--survol);
border-color: var(--ocre-signature);
}
.sous-chantier-titre { flex: 1; }
/* ============================================================
FICHE CHANTIER — Slash blocs avec spine + nodes (interconnexion)
============================================================ */
.fiche-modules {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-left: 32px; /* place pour la spine */
}
/* Colonne vertébrale verticale qui relie tous les modules */
.fiche-modules::before {
content: '';
position: absolute;
left: 8px;
top: 16px;
bottom: 16px;
width: 2px;
background: linear-gradient(to bottom,
transparent 0%,
var(--separateur) 8%,
var(--separateur) 92%,
transparent 100%);
border-radius: 2px;
z-index: 0;
}
.fiche-modules > * { position: relative; z-index: 1; }
/* Connecteurs : chaque module accroché à la spine par un trait + un dot */
.module-card::before,
.module-action::before {
content: '';
position: absolute;
left: -23px;
top: 22px;
width: 23px;
height: 2px;
background: var(--separateur);
border-radius: 2px;
}
.module-card::after,
.module-action::after {
content: '';
position: absolute;
left: -29px;
top: 17px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bg-elevation);
border: 2px solid var(--separateur);
z-index: 2;
}
/* Dot teinté par branche */
.module-card[data-branche="action"]::after,
.module-action[data-branche="action"]::after { border-color: var(--ocre-signature); background: rgba(168, 117, 48, 0.15); }
.module-card[data-branche="mémoire"]::after { border-color: #6E5C3E; background: rgba(110, 92, 62, 0.15); }
.module-card[data-branche="contexte"]::after { border-color: #8B9B7E; background: rgba(139, 155, 126, 0.15); }
/* ⊕ interstitiel aussi accroché à la spine (node creux, dashed) */
.plus-interstitiel-ligne::after {
content: '';
position: absolute;
left: -29px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: transparent;
border: 2px dashed var(--separateur);
z-index: 2;
}
.plus-interstitiel-ligne:hover::after { border-color: var(--ocre-signature); border-style: solid; }
.plus-interstitiel-ligne.expanded::after { border-color: var(--ocre-signature); background: var(--ocre-signature); }
/* ⊕ Interstitiel : hairline + pilule "+ ajouter ici" — slash blocs */
.plus-interstitiel-ligne {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
}
.plus-interstitiel-ligne::before {
content: '';
position: absolute;
left: 16px;
right: 16px;
top: 50%;
height: 1px;
background: var(--separateur);
transition: background var(--duration-micro) var(--easing-standard);
}
.plus-interstitiel-ligne:hover::before { background: var(--ocre-signature); }
.plus-interstitiel {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 999px;
border: 1px solid var(--separateur);
background: var(--bg-elevation);
color: var(--texte-tertiaire);
font-family: var(--font-sans);
font-size: 12px;
line-height: 1;
cursor: pointer;
transition: all var(--duration-micro) var(--easing-standard);
}
.plus-interstitiel-icone { font-size: 14px; }
.plus-interstitiel-label {
letter-spacing: 0.3px;
white-space: nowrap;
}
.plus-interstitiel:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(168, 117, 48, 0.25);
}
/* Picker inline : la ligne ⊕ se déplie en sélecteur en place (pas de popup) */
.plus-interstitiel-ligne.expanded::before { display: none; }
.plus-interstitiel-ligne.expanded { padding: 0; }
.plus-interstitiel-ligne.expanded > .plus-interstitiel { display: none; }
.picker-inline {
width: 100%;
background: var(--bg-elevation);
border: 1.5px solid var(--ocre-signature);
border-radius: var(--rayon-medium);
box-shadow: 0 8px 24px rgba(168, 117, 48, 0.15);
animation: picker-apparition 200ms var(--easing-standard);
}
@keyframes picker-apparition {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.picker-entete {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--separateur);
}
.picker-entete-titre {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ocre-signature);
}
.picker-fermer {
width: 24px;
height: 24px;
border: none;
background: transparent;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 18px;
line-height: 1;
border-radius: var(--rayon-small);
}
.picker-fermer:hover { background: var(--survol); color: var(--texte-principal); }
.picker-corps {
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.picker-groupe {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 6px 4px;
border-left: 3px solid transparent;
padding-left: 10px;
}
.picker-groupe[data-branche="action"] { border-left-color: var(--ocre-signature); }
.picker-groupe[data-branche="mémoire"] { border-left-color: #6E5C3E; }
.picker-groupe[data-branche="contexte"] { border-left-color: #8B9B7E; }
.picker-groupe-tag {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin-right: 4px;
flex-shrink: 0;
}
.picker-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 999px;
background: var(--bg-carte);
border: 1px solid var(--separateur);
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-principal);
cursor: pointer;
transition: all var(--duration-micro) var(--easing-standard);
}
.picker-chip:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
transform: translateY(-1px);
}
.picker-chip-icone { font-size: 14px; line-height: 1; }
.picker-chip.suggere {
background: rgba(168, 117, 48, 0.08);
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
.picker-chip-badge {
font-size: 9px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--ocre-signature);
font-weight: 600;
margin-left: 4px;
}
.picker-chip:hover .picker-chip-badge { color: white; }
/* Contrôles universels par module (↑ ↓ ×) */
.module-controles {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 2px;
z-index: 1;
}
.module-controle {
width: 26px;
height: 26px;
border-radius: var(--rayon-small);
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration-micro) var(--easing-standard),
color var(--duration-micro) var(--easing-standard);
}
.module-controle:hover:not(:disabled) {
background: rgba(168, 117, 48, 0.12);
color: var(--ocre-signature);
}
.module-controle:disabled {
opacity: 0.25;
cursor: not-allowed;
}
.module-controle-fermer:hover:not(:disabled) {
background: rgba(180, 60, 60, 0.12);
color: #B43C3C;
}
/* L'entête doit laisser de la place aux contrôles à droite */
.module-card-entete { padding-right: 96px; }
.module-action-label { padding-right: 96px; }
/* ============================================================
ÉTAPES DOCUMENTABLES
============================================================ */
.etape-tete {
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.etape-corps {
margin-top: 6px;
margin-left: 32px;
padding: 10px 12px;
border-left: 2px solid var(--ocre-signature);
background: rgba(168, 117, 48, 0.04);
border-radius: 0 var(--rayon-small) var(--rayon-small) 0;
}
.etape-date-faite {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ocre-signature);
margin: 0 0 6px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 600;
}
.etape-note {
width: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.5;
color: var(--texte-principal);
font-style: italic;
}
.etape-note::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
}
.etape-documenter {
width: 26px;
height: 26px;
border-radius: var(--rayon-small);
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.55;
transition: opacity var(--duration-micro) var(--easing-standard),
background var(--duration-micro) var(--easing-standard);
}
.etape-documenter:hover, .etape-documenter.actif {
opacity: 1;
background: rgba(168, 117, 48, 0.1);
}
.etape-documenter.actif { color: var(--ocre-signature); }
/* ============================================================
MODULARITÉ — codage de branche, drag-handle, palette ambiante
============================================================ */
/* Bordure de gauche teintée selon la branche du module */
.module-card,
.module-action {
border-left: 4px solid transparent;
transition: border-left-color var(--duration-micro) var(--easing-standard),
transform var(--duration-micro) var(--easing-standard);
}
.module-card[data-branche="action"],
.module-action[data-branche="action"] { border-left-color: var(--ocre-signature); }
.module-card[data-branche="mémoire"] { border-left-color: #6E5C3E; }
.module-card[data-branche="contexte"] { border-left-color: #8B9B7E; }
/* Drag-handle décoratif (cue de mobilité) */
.module-handle {
position: absolute;
top: 14px;
left: 12px;
color: var(--texte-tertiaire);
opacity: 0.35;
font-size: 14px;
letter-spacing: -2px;
line-height: 1;
pointer-events: none;
user-select: none;
font-weight: 700;
}
.module-card-entete,
.module-action-label {
padding-left: 32px; /* place pour le handle */
}
/* Marge en bas du conteneur fiche pour ne pas être caché par la palette flottante */
.fiche-chantier-conteneur { padding-bottom: 120px; }
/* ============================================================
PALETTE FLOTTANTE — ambiante, toujours visible, en bas
============================================================ */
.palette-flottante {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 16px 12px;
background: linear-gradient(180deg, rgba(245, 239, 230, 0) 0%, var(--parchemin) 30%, var(--parchemin) 100%);
border-top: 1px solid var(--separateur);
display: flex;
gap: 14px;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
z-index: 10;
backdrop-filter: blur(8px);
}
.palette-flottante::-webkit-scrollbar { height: 4px; }
.palette-flottante::-webkit-scrollbar-thumb { background: var(--separateur); border-radius: 4px; }
.palette-groupe {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 0 10px;
border-left: 2px solid var(--separateur);
}
.palette-groupe:first-child { border-left: none; padding-left: 0; }
.palette-groupe[data-branche="action"] { border-left-color: rgba(168, 117, 48, 0.4); }
.palette-groupe[data-branche="mémoire"] { border-left-color: rgba(110, 92, 62, 0.4); }
.palette-groupe[data-branche="contexte"] { border-left-color: rgba(139, 155, 126, 0.4); }
.palette-groupe-titre {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin-right: 2px;
flex-shrink: 0;
}
.palette-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
border-radius: 999px;
background: var(--bg-elevation);
border: 1px solid var(--separateur);
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-secondaire);
cursor: pointer;
white-space: nowrap;
transition: all var(--duration-micro) var(--easing-standard);
flex-shrink: 0;
}
.palette-chip-icone { font-size: 14px; line-height: 1; }
.palette-chip-label { letter-spacing: 0.2px; }
.palette-chip:hover:not(.actif) {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
transform: translateY(-1px);
}
.palette-chip.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
font-weight: 500;
}
.palette-chip.suggere {
border-color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.08);
color: var(--ocre-signature);
box-shadow: 0 0 0 3px rgba(168, 117, 48, 0.1);
}
.palette-chip.suggere:hover {
background: var(--ocre-signature);
color: white;
}
/* Mobile : palette plus compacte */
@media (max-width: 600px) {
.palette-flottante { padding: 8px 12px 10px; gap: 10px; }
.palette-chip { padding: 5px 9px; font-size: 11px; }
.palette-chip-label { display: none; }
.palette-chip-icone { font-size: 16px; }
.fiche-chantier-conteneur { padding-bottom: 90px; }
}
/* ============================================================
TUILES — système simple, drag-and-drop, Things 3 / Apple Reminders feel
============================================================ */
.tuiles-section { margin: var(--space-large) 0 var(--space-medium); }
.tuiles-label {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 var(--space-small);
padding: 0 4px;
}
.tuiles-compteur {
background: rgba(168, 117, 48, 0.12);
color: var(--ocre-signature);
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
}
.tuiles-vide {
color: var(--texte-tertiaire);
font-style: italic;
font-weight: 400;
letter-spacing: 0.4px;
text-transform: none;
}
.tuiles-progres {
margin-left: auto;
font-size: 11px;
letter-spacing: 0.6px;
color: var(--ocre-signature);
font-weight: 500;
text-transform: none;
}
.tuiles-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px; /* place pour le connecteur visuel */
position: relative;
}
/* — La tuile elle-même — */
.tuile {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 14px;
padding: 14px 44px 14px 16px;
cursor: pointer;
transition: transform 180ms var(--easing-standard),
box-shadow 180ms var(--easing-standard),
border-color 180ms var(--easing-standard),
opacity 180ms var(--easing-standard);
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
outline: none;
}
.tuile:hover {
border-color: rgba(168, 117, 48, 0.4);
box-shadow: 0 4px 14px rgba(45, 36, 24, 0.08);
transform: translateY(-1px);
}
.tuile:focus-visible {
border-color: var(--ocre-signature);
box-shadow: 0 0 0 3px rgba(168, 117, 48, 0.18);
}
.tuile[draggable="true"]:active { cursor: grabbing; }
.tuile.en-glissement {
opacity: 0.4;
transform: rotate(1deg) scale(0.98);
}
/* — Numéro dynamique — */
.tuile-numero {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bg-elevation);
border: 1.5px solid var(--ocre-signature);
color: var(--ocre-signature);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
cursor: pointer;
padding: 0;
transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms,
transform 200ms;
}
.tuile-numero:hover {
background: var(--ocre-signature);
color: #FDFBF7;
transform: scale(1.08);
}
.tuile-numero:active { transform: scale(0.95); }
/* — Connecteur visuel entre les tuiles : ligne verticale en pointillés — */
.tuile:not(.tuile-faite):not(:first-of-type)::before {
content: '';
position: absolute;
left: 29px; /* aligné sur le centre du numéro */
top: -14px;
width: 0;
height: 14px;
border-left: 2px dotted rgba(168, 117, 48, 0.35);
}
/* Drag indicator — ligne d'insertion */
.tuile.drop-au-dessus {
box-shadow: 0 -3px 0 var(--ocre-signature), 0 4px 14px rgba(45, 36, 24, 0.08);
}
.tuile.drop-en-dessous {
box-shadow: 0 3px 0 var(--ocre-signature), 0 4px 14px rgba(45, 36, 24, 0.08);
}
/* Drag handle visuel */
.tuile-handle {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--texte-tertiaire);
opacity: 0;
font-size: 12px;
letter-spacing: -2px;
line-height: 1;
user-select: none;
pointer-events: none;
transition: opacity 180ms var(--easing-standard);
font-weight: 700;
}
.tuile:hover .tuile-handle { opacity: 0.4; }
/* Indicateur ✓ décoratif pour les tuiles faites (non-interactif) */
.tuile-fait-indicator {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ocre-signature);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.85;
cursor: pointer;
border: 1.5px solid var(--ocre-signature);
padding: 0;
transition: opacity 200ms, background 200ms, transform 200ms;
}
.tuile-fait-indicator:hover {
opacity: 0.55;
transform: scale(1.08);
}
.tuile-fait-indicator:active { transform: scale(0.95); }
.tuile-fait-indicator svg {
width: 14px;
height: 14px;
animation: coche-apparition 240ms var(--easing-standard);
}
@keyframes coche-apparition {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Contenu de la tuile (titre uniquement en vue compacte) */
.tuile-contenu {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.tuile-titre {
flex: 1;
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.4;
color: var(--texte-principal);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tuile-titre.vide { color: var(--texte-tertiaire); font-style: italic; font-weight: 400; }
/* Indicateur visuel "cette tuile a des notes" */
.tuile-indicateur-notes {
flex-shrink: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ocre-signature);
opacity: 0.65;
}
.tuile-indicateur-notes svg { width: 14px; height: 14px; }
.tuile-date-faite {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ocre-signature);
margin-top: 4px;
letter-spacing: 0.4px;
font-weight: 600;
text-transform: uppercase;
}
/* Bouton supprimer — apparaît au hover */
.tuile-supprimer {
position: absolute;
top: 10px;
right: 10px;
width: 24px;
height: 24px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--texte-tertiaire);
cursor: pointer;
font-size: 16px;
line-height: 1;
opacity: 0;
transition: opacity 180ms var(--easing-standard),
background 180ms var(--easing-standard);
}
.tuile:hover .tuile-supprimer,
.tuile:focus-within .tuile-supprimer { opacity: 1; }
.tuile-supprimer:hover {
background: rgba(180, 60, 60, 0.12);
color: #B43C3C;
}
/* Tuile faite — strikethrough, opacité réduite, vue de calme */
.tuile-faite {
background: transparent;
border-color: transparent;
border-style: dashed;
cursor: default;
box-shadow: none;
padding-left: 16px;
}
.tuile-faite:hover {
transform: none;
border-color: var(--separateur);
box-shadow: none;
}
.tuile-faite .tuile-titre {
text-decoration: line-through;
text-decoration-color: var(--texte-tertiaire);
color: var(--texte-tertiaire);
font-weight: 400;
}
.tuile-faite .tuile-notes { color: var(--texte-tertiaire); opacity: 0.7; }
/* Bouton "Nouvelle tuile" */
.tuile-ajouter {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
margin-top: 8px;
border: 1px dashed var(--separateur-fort, var(--separateur));
border-radius: 14px;
background: transparent;
cursor: pointer;
font-family: var(--font-sans);
font-size: 14px;
color: var(--texte-tertiaire);
transition: all 180ms var(--easing-standard);
}
.tuile-ajouter:hover {
border-color: var(--ocre-signature);
border-style: solid;
background: rgba(168, 117, 48, 0.04);
color: var(--ocre-signature);
}
.tuile-ajouter-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid currentColor;
font-size: 14px;
font-weight: 600;
}
/* Section Fait (collapsible) — valorisation discrète */
.tuiles-faites-section {
margin-top: var(--space-large);
}
.tuiles-faites-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 10px 4px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ocre-signature);
list-style: none;
user-select: none;
border-radius: 8px;
transition: background 180ms var(--easing-standard);
}
.tuiles-faites-label::-webkit-details-marker { display: none; }
.tuiles-faites-label::marker { display: none; }
.tuiles-faites-label:hover { background: rgba(168, 117, 48, 0.06); }
.tuiles-faites-label::before {
content: '▸';
font-size: 10px;
transition: transform 200ms var(--easing-standard);
}
.tuiles-faites-section[open] .tuiles-faites-label::before {
transform: rotate(90deg);
}
.tuiles-faites-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--ocre-signature);
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.tuiles-liste-faites {
margin-top: 8px;
gap: 6px;
}
/* Pas de connecteur dans la section "Fait" */
.tuiles-liste-faites .tuile::before { display: none; }
/* ============================================================
POPUP DÉTAIL D'UNE TUILE — modal sheet, design Apple-grade
============================================================ */
.tuile-popup-overlay {
position: fixed;
inset: 0;
background: rgba(45, 36, 24, 0.42);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
padding: 20px;
animation: popup-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-fadein {
from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
to { opacity: 1; }
}
.tuile-popup-overlay.fermeture {
opacity: 0;
transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tuile-popup {
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 45%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-radius: 22px;
padding: 0;
max-width: 540px;
width: 100%;
max-height: 88vh;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(45, 36, 24, 0.04),
0 8px 24px rgba(45, 36, 24, 0.10),
0 24px 60px rgba(45, 36, 24, 0.20);
animation: popup-slidein 320ms cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes popup-slidein {
from { transform: translateY(24px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Petite poignée décorative (signal "modal sheet" iOS) */
.tuile-popup-poignee {
width: 36px;
height: 5px;
background: rgba(45, 36, 24, 0.15);
border-radius: 999px;
margin: 10px auto 0;
flex-shrink: 0;
}
/* Header : label gauche + "Terminé" droite (pattern iOS) */
.tuile-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 24px 8px;
flex-shrink: 0;
}
.tuile-popup-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--ocre-signature);
}
.tuile-popup-numero-badge {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ocre-signature);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.tuile-popup-label-check {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ocre-signature);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.tuile-popup-termine {
background: transparent;
border: none;
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
letter-spacing: -0.2px;
}
.tuile-popup-termine:hover { background: rgba(168, 117, 48, 0.08); }
.tuile-popup-termine:active { opacity: 0.6; }
/* Titre édition : serif Cormorant, parchemin grammar */
.tuile-popup-titre {
width: 100%;
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.2px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(168, 117, 48, 0.18);
padding: 6px 24px 12px;
margin-bottom: 8px;
color: var(--texte-principal);
outline: none;
transition: border-color 200ms;
}
.tuile-popup-titre:focus {
border-bottom-color: var(--ocre-signature);
}
.tuile-popup-titre::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
font-weight: 400;
}
/* Champs catégorisés — blocs parchemin bordés-gauche, type bouton-card */
.tuile-popup-champs {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 24px 12px;
}
.tuile-popup-champ {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px;
background: rgba(255, 251, 245, 0.55);
border: 1px solid rgba(168, 117, 48, 0.14);
border-left: 3px solid rgba(168, 117, 48, 0.32);
border-radius: 0 12px 12px 0;
transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tuile-popup-champ:focus-within {
background: rgba(255, 251, 245, 0.85);
border-color: rgba(168, 117, 48, 0.30);
border-left-color: var(--ocre-signature);
}
.tuile-popup-champ-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ocre-signature);
user-select: none;
margin: 0;
}
.tuile-popup-champ-input {
width: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.55;
color: var(--texte-principal);
padding: 0;
overflow: hidden;
min-height: 24px;
}
.tuile-popup-champ-input::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
opacity: 0.7;
}
.tuile-popup-date {
font-family: var(--font-sans);
font-size: 12px;
color: var(--ocre-signature);
letter-spacing: 0.4px;
margin: 0;
padding: 4px 24px;
font-weight: 600;
}
/* Actions : Marquer fait + Supprimer */
.tuile-popup-actions {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 24px 20px;
}
/* Marquer fait — parchemin primaire (fond ocre subtil, pas solide) */
.tuile-popup-fait {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 18px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.16) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.45);
border-radius: 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--ocre-profond);
cursor: pointer;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms,
border-color 200ms,
background 200ms;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.05),
0 4px 14px rgba(168, 117, 48, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.tuile-popup-fait:hover {
transform: translateY(-1px);
border-color: var(--ocre-signature);
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.24) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #EFE4CC 100%);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 10px 22px rgba(168, 117, 48, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.tuile-popup-fait:active { transform: translateY(0) scale(0.985); }
.tuile-popup-fait.annule {
background: rgba(253, 251, 247, 0.6);
color: var(--texte-secondaire);
border-color: rgba(168, 117, 48, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
text-transform: none;
letter-spacing: 0.2px;
font-weight: 500;
}
.tuile-popup-fait.annule:hover {
background: rgba(255, 251, 245, 0.85);
border-color: rgba(168, 117, 48, 0.40);
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Supprimer cette étape — parchemin destructif */
.tuile-popup-supprimer {
align-self: center;
margin-top: 8px;
padding: 9px 18px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 82, 61, 0.08) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F5E8E1 100%);
border: 1px solid rgba(168, 82, 61, 0.28);
border-radius: 12px;
color: var(--rouge-terre);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: background 200ms, border-color 200ms, transform 200ms;
}
.tuile-popup-supprimer:hover {
transform: translateY(-1px);
background:
radial-gradient(circle at 50% 0%, rgba(168, 82, 61, 0.14) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F0DAD0 100%);
border-color: var(--rouge-terre);
}
/* Modifier (mode lecture → édition) — parchemin sobre */
.tuile-popup-modifier {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(168, 117, 48, 0.08);
border: 1px solid rgba(168, 117, 48, 0.28);
border-radius: 999px;
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 200ms, border-color 200ms, transform 200ms;
}
.tuile-popup-modifier svg { width: 14px; height: 14px; }
.tuile-popup-modifier:hover {
background: rgba(168, 117, 48, 0.16);
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
/* Terminé (mode édition → lecture) — parchemin sobre */
.tuile-popup-termine {
background: rgba(168, 117, 48, 0.10);
border: 1px solid rgba(168, 117, 48, 0.28);
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 6px 14px;
border-radius: 999px;
letter-spacing: 0.3px;
transition: background 200ms, border-color 200ms, transform 200ms;
}
.tuile-popup-termine:hover {
background: rgba(168, 117, 48, 0.18);
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
.tuile-popup-termine:active { transform: scale(0.97); }
/* ============================================================
POPUP TUILE — Mode LECTURE
============================================================ */
.tuile-popup-titre-lecture {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.2px;
color: var(--texte-principal);
padding: 6px 24px 16px; /* aligné avec .tuile-popup-titre (édition) */
margin: 0;
}
.tuile-popup-titre-lecture.vide {
font-style: italic;
color: var(--texte-tertiaire);
}
.tuile-popup-meta-lecture {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--ocre-signature);
padding: 0 24px 12px;
margin: 0;
}
.tuile-popup-image-lecture {
display: block;
margin: 4px 24px 18px;
padding: 0;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(168, 117, 48, 0.16);
background: none;
cursor: zoom-in;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms;
width: calc(100% - 48px);
}
.tuile-popup-image-lecture:hover {
transform: scale(1.005);
border-color: rgba(168, 117, 48, 0.32);
}
.tuile-popup-image-lecture img {
display: block;
width: 100%;
max-height: 320px;
object-fit: cover;
pointer-events: none;
}
.tuile-popup-notes-lecture {
padding: 4px 24px 8px;
display: flex;
flex-direction: column;
gap: 14px;
}
.tuile-popup-note-bloc {
padding: 14px 16px 16px;
background: rgba(255, 251, 245, 0.6);
border-left: 3px solid rgba(168, 117, 48, 0.30);
border-radius: 0 12px 12px 0;
}
.tuile-popup-note-eyebrow {
text-align: left !important;
margin: 0 0 6px;
}
.tuile-popup-note-texte {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.55;
color: var(--texte-principal);
margin: 0;
white-space: pre-wrap;
}
.tuile-popup-note-bloc:first-of-type .tuile-popup-note-texte::first-letter {
font-family: var(--font-serif);
font-size: 2.4em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 8px 0 0;
margin-top: 2px;
}
.tuile-popup-vide-lecture {
padding: 16px 24px;
margin: 0 24px 8px;
background: rgba(255, 251, 245, 0.45);
border: 1px dashed rgba(168, 117, 48, 0.22);
border-radius: 12px;
text-align: center;
}
.tuile-popup-vide-lecture p {
font-family: var(--font-serif);
font-size: 14px;
color: var(--texte-secondaire);
margin: 0 0 4px;
}
.tuile-popup-vide-soustitre {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px !important;
color: var(--texte-tertiaire) !important;
line-height: 1.5;
}
.tuile-popup-vide-soustitre em {
font-style: normal;
color: var(--ocre-signature);
font-weight: 500;
}
/* ============================================================
DRAG HANDLE — signal de réordre visible sur tuile
============================================================ */
.tuile-drag-handle {
flex-shrink: 0;
width: 18px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--texte-tertiaire);
opacity: 0.35;
cursor: grab;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms;
pointer-events: none; /* le drag est géré par l'article parent */
}
.tuile:hover .tuile-drag-handle {
opacity: 0.7;
color: var(--ocre-signature);
}
.tuile-drag-handle svg { width: 14px; height: 14px; }
/* ============================================================
LISTE PUCES — rendu markdown léger dans les notes
============================================================ */
.liste-puces {
list-style: none;
padding: 0;
margin: 0.5em 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.liste-puces li {
position: relative;
padding-left: 18px;
font-family: var(--font-serif);
font-size: inherit;
color: inherit;
line-height: 1.5;
}
.liste-puces li::before {
content: '';
position: absolute;
left: 4px;
top: 0.65em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ocre-signature);
}
/* ============================================================
SOUS-ÉTAPES — checklist nichée dans une étape
============================================================ */
.sous-etapes-section {
margin: 4px 24px 16px;
padding: 14px 16px;
background: rgba(168, 117, 48, 0.04);
border: 1px solid rgba(168, 117, 48, 0.16);
border-radius: 14px;
}
.sous-etapes-eyebrow {
text-align: left !important;
margin: 0 0 10px;
}
/* Édition */
.sous-etapes-liste {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.sous-etape-ligne {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
}
.sous-etape-ligne.faite .sous-etape-input {
color: var(--texte-tertiaire);
text-decoration: line-through;
text-decoration-color: rgba(168, 117, 48, 0.50);
}
.sous-etape-check {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(253, 251, 246, 0.7);
border: 1.5px solid rgba(168, 117, 48, 0.40);
color: var(--ocre-signature);
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 200ms, border-color 200ms, transform 200ms;
}
.sous-etape-check:hover {
background: rgba(168, 117, 48, 0.12);
border-color: var(--ocre-signature);
transform: scale(1.05);
}
.sous-etape-check.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: #FDFBF7;
}
.sous-etape-check svg { width: 12px; height: 12px; }
.sous-etape-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-principal);
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: border-color 200ms;
}
.sous-etape-input:focus { border-bottom-color: rgba(168, 117, 48, 0.30); }
.sous-etape-input::placeholder {
color: var(--texte-tertiaire);
font-style: italic;
opacity: 0.6;
}
.sous-etape-supprimer {
flex-shrink: 0;
width: 22px; height: 22px;
border: none;
background: transparent;
color: var(--texte-tertiaire);
cursor: pointer;
border-radius: 50%;
opacity: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 200ms, background 200ms, color 200ms;
}
.sous-etape-supprimer svg { width: 12px; height: 12px; }
.sous-etape-ligne:hover .sous-etape-supprimer { opacity: 1; }
.sous-etape-supprimer:hover {
background: rgba(168, 82, 61, 0.10);
color: var(--rouge-terre);
}
.sous-etape-ajouter {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 6px;
background: transparent;
border: none;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--ocre-signature);
cursor: pointer;
border-radius: 6px;
transition: background 160ms, color 200ms;
}
.sous-etape-ajouter:hover {
background: rgba(168, 117, 48, 0.06);
color: var(--ocre-profond);
}
.sous-etape-ajouter-plus {
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(168, 117, 48, 0.14);
color: var(--ocre-signature);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
/* Lecture */
.sous-etapes-liste-lecture {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.sous-etape-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-principal);
line-height: 1.45;
}
.sous-etape-item.faite {
color: var(--texte-tertiaire);
text-decoration: line-through;
text-decoration-color: rgba(168, 117, 48, 0.45);
}
.sous-etape-puce {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3px;
color: var(--ocre-signature);
}
.sous-etape-item.faite .sous-etape-puce { color: var(--vert-profond); }
.sous-etape-libelle { flex: 1; }
/* ============================================================
CHANTIER — Toggle vue (Liste / Récit) — wrap centré + label
============================================================ */
.chantier-vue-toggle-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 4px auto 22px;
}
.chantier-vue-toggle-label {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.chantier-vue-toggle {
display: inline-flex;
gap: 4px;
padding: 5px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.08) 0%, transparent 60%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 999px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chantier-vue-toggle-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
background: transparent;
border: none;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.4px;
color: var(--texte-secondaire);
cursor: pointer;
transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms,
transform 200ms,
box-shadow 240ms;
}
.chantier-vue-toggle-btn svg { width: 16px; height: 16px; }
.chantier-vue-toggle-btn:hover {
color: var(--ocre-signature);
}
.chantier-vue-toggle-btn.actif {
background: linear-gradient(135deg, var(--ocre-signature) 0%, var(--ocre-profond) 100%);
color: #FDFBF7;
font-weight: 600;
box-shadow:
0 2px 6px rgba(168, 117, 48, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.chantier-vue-toggle-btn.actif svg { color: #FDFBF7; }
/* ============================================================
CHANTIER — Vue RÉCIT (toutes les étapes en continu)
============================================================ */
.chantier-recit {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 24px;
}
.chantier-recit-chapitre {
padding: 20px 0;
max-width: 36rem;
margin-inline: auto;
width: 100%;
}
.chantier-recit-chapitre.faite {
opacity: 0.78;
}
.chantier-recit-eyebrow {
text-align: left !important;
margin: 0 0 8px;
}
.chantier-recit-titre {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.3px;
line-height: 1.2;
color: var(--texte-principal);
margin: 0 0 14px;
}
.chantier-recit-titre.vide {
font-style: italic;
color: var(--texte-tertiaire);
}
.chantier-recit-chapitre.faite .chantier-recit-titre {
color: var(--texte-secondaire);
}
.chantier-recit-image {
display: block;
width: 100%;
padding: 0;
margin: 0 0 14px;
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 14px;
overflow: hidden;
background: none;
cursor: zoom-in;
transition: transform 200ms, border-color 200ms;
}
.chantier-recit-image:hover {
transform: scale(1.005);
border-color: rgba(168, 117, 48, 0.32);
}
.chantier-recit-image img {
display: block;
width: 100%;
max-height: 400px;
object-fit: cover;
pointer-events: none;
}
.chantier-recit-notes {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 10px;
}
.chantier-recit-note-bloc {
padding: 14px 16px;
background: rgba(255, 251, 245, 0.55);
border-left: 3px solid rgba(168, 117, 48, 0.30);
border-radius: 0 12px 12px 0;
}
.chantier-recit-note-eyebrow {
text-align: left !important;
margin: 0 0 6px;
}
.chantier-recit-note-texte {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.6;
color: var(--texte-principal);
}
.chantier-recit-note-texte p { margin: 0 0 0.8em; }
.chantier-recit-note-texte p:last-child { margin-bottom: 0; }
/* Drop cap sur le premier paragraphe du premier bloc de notes */
.chantier-recit-note-bloc:first-of-type .chantier-recit-note-texte p:first-child::first-letter {
font-family: var(--font-serif);
font-size: 2.4em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 8px 0 0;
margin-top: 2px;
}
.chantier-recit-modifier {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding: 6px 14px;
background: rgba(168, 117, 48, 0.08);
border: 1px solid rgba(168, 117, 48, 0.24);
border-radius: 999px;
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 200ms, border-color 200ms;
}
.chantier-recit-modifier:hover {
background: rgba(168, 117, 48, 0.16);
border-color: var(--ocre-signature);
}
.chantier-recit-modifier svg { width: 13px; height: 13px; }
.chantier-recit-orne {
margin: 4px auto 4px;
max-width: 200px;
}
@media (max-width: 360px) {
.chantier-recit-titre { font-size: 22px; }
.chantier-recit-note-texte { font-size: 15px; }
}
/* ============================================================
RÉCIT — Frontispice + chapitres avec chiffres romains
============================================================ */
.chantier-recit-frontispice {
text-align: center;
margin: 12px auto 24px;
max-width: 36rem;
}
.chantier-recit-frontispice-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 10px;
}
.chantier-recit-epigraphe {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: var(--texte-secondaire);
line-height: 1.5;
margin: 0 auto;
max-width: 32ch;
letter-spacing: 0.2px;
}
.chantier-recit-orne--ouverture {
max-width: 240px;
margin: 18px auto 28px;
}
/* Ouverture de chapitre : numéro romain XL + étiquette latérale */
.chantier-recit-ouverture {
display: flex;
align-items: baseline;
gap: 16px;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(168, 117, 48, 0.14);
}
.chantier-recit-chapitre-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 42px;
font-weight: 500;
letter-spacing: 0;
color: var(--ocre-signature);
line-height: 0.9;
flex-shrink: 0;
}
.chantier-recit-chapitre.faite .chantier-recit-chapitre-num {
color: var(--texte-tertiaire);
}
.chantier-recit-chapitre-etiquette {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
flex: 1;
text-align: right;
}
.chantier-recit-chapitre .chantier-recit-titre {
margin-top: 4px;
margin-bottom: 18px;
}
/* Sous-chapitres (sous-étapes) en cascade */
.chantier-recit-sous {
margin: 22px 0 6px;
padding-left: 22px;
border-left: 1px solid rgba(168, 117, 48, 0.18);
display: flex;
flex-direction: column;
gap: 22px;
}
.chantier-recit-sous-chapitre {
position: relative;
}
.chantier-recit-sous-chapitre.faite {
opacity: 0.78;
}
.chantier-recit-sous-chapitre.faite .chantier-recit-sous-titre {
color: var(--texte-secondaire);
}
.chantier-recit-sous-numero {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.5px;
color: var(--ocre-signature);
margin: 0 0 4px;
}
.chantier-recit-sous-titre {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
letter-spacing: -0.2px;
line-height: 1.25;
color: var(--texte-principal);
margin: 0 0 12px;
}
.chantier-recit-sous-image {
display: block;
width: 100%;
margin: 0 0 12px;
padding: 0;
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 10px;
overflow: hidden;
background: none;
cursor: zoom-in;
transition: transform 200ms, border-color 200ms;
}
.chantier-recit-sous-image:hover {
transform: scale(1.005);
border-color: rgba(168, 117, 48, 0.32);
}
.chantier-recit-sous-image img {
display: block;
width: 100%;
max-height: 280px;
object-fit: cover;
pointer-events: none;
}
.chantier-recit-sous-note {
padding: 12px 14px;
background: rgba(255, 251, 245, 0.45);
border-left: 2px solid rgba(168, 117, 48, 0.22);
border-radius: 0 10px 10px 0;
margin-bottom: 10px;
}
.chantier-recit-sous-note:last-child { margin-bottom: 0; }
.chantier-recit-sous-note-texte {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.55;
color: var(--texte-principal);
margin-top: 4px;
}
.chantier-recit-sous-note-texte p { margin: 0 0 0.6em; }
.chantier-recit-sous-note-texte p:last-child { margin-bottom: 0; }
/* Signature finale "Voilà." */
.chantier-recit-fin {
text-align: center;
margin: 36px auto 12px;
max-width: 32rem;
padding-top: 22px;
}
.chantier-recit-fin-glyphe {
width: 36px;
height: 36px;
color: var(--ocre-signature);
margin: 0 auto 10px;
display: block;
opacity: 0.6;
}
.chantier-recit-fin-mot {
font-family: var(--font-serif);
font-style: italic;
font-size: 24px;
color: var(--ocre-profond);
letter-spacing: -0.3px;
margin: 0;
}
@media (max-width: 360px) {
.chantier-recit-chapitre-num { font-size: 34px; }
.chantier-recit-sous-titre { font-size: 17px; }
.chantier-recit-epigraphe { font-size: 16px; }
}
@media (min-width: 700px) {
.chantier-recit-chapitre-num { font-size: 54px; }
.chantier-recit-sous-titre { font-size: 22px; }
.chantier-recit-epigraphe { font-size: 20px; }
}
/* ============================================================
RÉCIT SWIPE — carrousel horizontal page-par-page
============================================================ */
.chantier-recit-swipe {
position: relative;
display: flex;
flex-direction: column;
min-height: calc(100vh - 280px);
}
.chantier-recit-pages {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
/* Hauteur fixe pour fitter la modal */
flex: 1;
max-height: calc(100vh - 220px);
min-height: 400px;
}
.chantier-recit-pages::-webkit-scrollbar { display: none; }
.chantier-recit-page {
flex: 0 0 100%;
width: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px 20px 40px;
box-sizing: border-box;
/* Animation subtile à l'arrivée */
opacity: 0.55;
transform: scale(0.97);
transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chantier-recit-page.actuelle {
opacity: 1;
transform: scale(1);
}
.chantier-recit-page > *:first-child { margin-top: 12px; }
/* Frontispice page : centré verticalement, plus de souffle */
.chantier-recit-frontispice-page {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.chantier-recit-frontispice-inner {
max-width: 32rem;
margin: 0 auto;
padding: 20px;
}
.chantier-recit-frontispice-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 16px;
}
.chantier-recit-frontispice-titre {
font-family: var(--font-serif);
font-size: 36px;
font-weight: 500;
letter-spacing: -0.4px;
line-height: 1.15;
color: var(--texte-principal);
margin: 0 0 18px;
}
.chantier-recit-frontispice-hint {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-tertiaire);
margin: 24px 0 0;
letter-spacing: 0.3px;
}
/* Signature page : centré, sobre, doré */
.chantier-recit-signature-page {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.chantier-recit-signature-inner {
max-width: 28rem;
padding: 20px;
}
.chantier-recit-signature-meta {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 12px 0 0;
}
/* Navigation bas : sticky, dots + counter + arrows */
.chantier-recit-nav {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
background: rgba(253, 251, 246, 0.92);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
border-top: 1px solid rgba(168, 117, 48, 0.16);
box-shadow: 0 -2px 12px rgba(45, 36, 24, 0.05);
z-index: 4;
margin-top: 12px;
}
.chantier-recit-nav-arrow {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.14) 0%, rgba(168, 117, 48, 0.05) 100%);
border: 1px solid rgba(168, 117, 48, 0.30);
color: var(--ocre-signature);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 200ms, border-color 200ms, transform 200ms, opacity 200ms;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chantier-recit-nav-arrow svg { width: 18px; height: 18px; }
.chantier-recit-nav-arrow:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(168, 117, 48, 0.22) 0%, rgba(168, 117, 48, 0.10) 100%);
border-color: var(--ocre-signature);
transform: scale(1.05);
}
.chantier-recit-nav-arrow:active:not(:disabled) { transform: scale(0.96); }
.chantier-recit-nav-arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.chantier-recit-nav-dots {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
justify-content: center;
flex-wrap: wrap;
}
.chantier-recit-nav-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(168, 117, 48, 0.25);
border: none;
padding: 0;
cursor: pointer;
transition: background 200ms, transform 200ms, width 220ms;
}
.chantier-recit-nav-dot:hover { background: rgba(168, 117, 48, 0.55); transform: scale(1.15); }
.chantier-recit-nav-dot.actif {
background: var(--ocre-signature);
width: 22px;
border-radius: 999px;
}
.chantier-recit-nav-counter {
flex-shrink: 0;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
min-width: 50px;
text-align: center;
}
@media (max-width: 360px) {
.chantier-recit-nav { padding: 12px 12px; gap: 8px; }
.chantier-recit-nav-arrow { width: 36px; height: 36px; }
.chantier-recit-nav-counter { display: none; }
.chantier-recit-frontispice-titre { font-size: 28px; }
}
/* ============================================================
SOUS-ÉTAPE — boutons cliquables (lecture + édition)
============================================================ */
.sous-etape-libelle-btn,
.sous-etape-item-btn {
flex: 1;
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px 4px;
font-family: inherit;
text-align: left;
border-radius: 6px;
transition: background 160ms;
min-width: 0;
}
.sous-etape-libelle-btn:hover,
.sous-etape-item-btn:hover {
background: rgba(168, 117, 48, 0.06);
}
.sous-etape-libelle-titre {
flex: 1;
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-principal);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 0;
}
.sous-etape-libelle-titre.vide {
font-style: italic;
color: var(--texte-tertiaire);
}
.sous-etape-ligne.faite .sous-etape-libelle-titre {
color: var(--texte-tertiaire);
text-decoration: line-through;
text-decoration-color: rgba(168, 117, 48, 0.50);
}
.sous-etape-richesse {
flex-shrink: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ocre-signature);
opacity: 0.55;
}
.sous-etape-richesse svg { width: 14px; height: 14px; }
.sous-etape-libelle-btn:hover .sous-etape-richesse,
.sous-etape-item-btn:hover .sous-etape-richesse { opacity: 1; }
/* Breadcrumb dans le header popup (sous-étape) */
.tuile-popup-breadcrumb {
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--ocre-signature);
cursor: pointer;
padding: 0;
text-decoration: underline;
text-decoration-color: rgba(168, 117, 48, 0.30);
text-underline-offset: 3px;
transition: color 200ms, text-decoration-color 200ms;
}
.tuile-popup-breadcrumb:hover {
color: var(--ocre-profond);
text-decoration-color: var(--ocre-signature);
}
.tuile-popup-breadcrumb-sep {
display: inline-block;
margin: 0 6px;
color: var(--texte-tertiaire);
font-weight: 400;
}
/* ============================================================
TUILE — Focus actuel (pin) + compteur sous-étapes
============================================================ */
.tuile.tuile-pinned {
border-color: rgba(168, 117, 48, 0.45);
background:
radial-gradient(circle at 0% 0%, rgba(168, 117, 48, 0.10) 0%, transparent 60%),
var(--bg-carte);
box-shadow:
0 1px 2px rgba(168, 117, 48, 0.10),
0 4px 14px rgba(168, 117, 48, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.tuile-focus-badge {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
padding: 2px 8px;
margin: 0 0 4px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.20) 0%, rgba(168, 117, 48, 0.10) 100%);
border: 1px solid rgba(168, 117, 48, 0.40);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ocre-profond);
}
.tuile-focus-badge svg { width: 10px; height: 10px; }
.tuile-sousetapes-count {
display: inline-block;
margin-top: 2px;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
}
/* Bouton pin dans le popup édit */
.tuile-popup-pin {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px 18px;
background: rgba(253, 251, 246, 0.65);
border: 1px solid rgba(168, 117, 48, 0.24);
border-radius: 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
color: var(--texte-secondaire);
cursor: pointer;
transition: background 200ms, border-color 200ms, color 200ms, transform 200ms;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tuile-popup-pin svg { width: 16px; height: 16px; color: var(--ocre-signature); }
.tuile-popup-pin:hover {
transform: translateY(-1px);
background: rgba(168, 117, 48, 0.08);
border-color: var(--ocre-signature);
color: var(--ocre-profond);
}
.tuile-popup-pin.actif {
background: linear-gradient(135deg, rgba(168, 117, 48, 0.18) 0%, rgba(168, 117, 48, 0.08) 100%);
border-color: var(--ocre-signature);
color: var(--ocre-profond);
}
.tuile-popup-pin.actif svg { color: var(--ocre-signature); }
@media (max-width: 600px) {
.tuile-popup-overlay { padding: 0; align-items: flex-end; }
.tuile-popup {
border-radius: 22px 22px 0 0;
max-height: 92vh;
animation: popup-sheet-up 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes popup-sheet-up {
from { transform: translateY(100%); opacity: 0.5; }
to { transform: translateY(0); opacity: 1; }
}
.tuile-popup-header { padding: 12px 20px 6px; }
.tuile-popup-titre { font-size: 22px; padding: 4px 20px 14px; }
.tuile-popup-champs { padding: 0 20px 8px; }
.tuile-popup-actions { padding: 14px 20px 24px; }
}
/* ============================================================
SECTION IMAGE — tuile popup + clôture
============================================================ */
.tuile-popup-champ-image .tuile-image-corps,
.cloture-zone-image .tuile-image-corps {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 6px;
}
.tuile-popup-champ-image { padding-bottom: 14px; }
.tuile-image-preview {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 12px;
background: var(--bg-carte);
box-shadow: 0 1px 3px rgba(45, 36, 24, 0.08);
flex-shrink: 0;
cursor: zoom-in;
}
.tuile-image-actions {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
align-items: flex-start;
padding-top: 4px;
}
.tuile-image-btn {
background: transparent;
border: 1px solid var(--separateur);
border-radius: 8px;
padding: 6px 12px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tuile-image-btn:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
}
.tuile-image-btn.supp:hover {
background: rgba(180, 60, 60, 0.08);
border-color: rgba(180, 60, 60, 0.4);
color: #B43C3C;
}
.tuile-image-ajouter {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 12px 14px;
background: transparent;
border: 1.5px dashed var(--separateur-fort, var(--separateur));
border-radius: 12px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--texte-tertiaire);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
justify-content: center;
}
.tuile-image-ajouter:hover {
border-color: var(--ocre-signature);
border-style: solid;
background: rgba(168, 117, 48, 0.04);
color: var(--ocre-signature);
}
.tuile-image-ajouter-icone {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid currentColor;
font-size: 14px;
line-height: 1;
}
.tuile-image-corps.charge { opacity: 0.5; pointer-events: none; }
.tuile-image-corps.charge::after {
content: 'Compression…';
position: absolute;
font-family: var(--font-sans);
font-size: 12px;
color: var(--ocre-signature);
}
.cloture-zone-image { margin-top: var(--space-medium); text-align: left; }
/* — Mobile : image plus compacte, layout stack — */
@media (max-width: 600px) {
.tuile-popup-champ-image .tuile-image-corps,
.cloture-zone-image .tuile-image-corps {
flex-direction: column;
align-items: stretch;
}
.tuile-image-preview {
width: 100%;
height: 180px;
}
.tuile-image-actions {
flex-direction: row;
width: 100%;
}
.tuile-image-btn { flex: 1; text-align: center; }
}
/* ============================================================
Mobile-friendly : scrollabilité de la fiche chantier
============================================================ */
@media (max-width: 600px) {
.fiche-chantier-conteneur {
-webkit-overflow-scrolling: touch;
padding-left: 16px;
padding-right: 16px;
}
.tuile {
padding: 12px 40px 12px 12px;
}
.tuile-titre { font-size: 16px; }
.cloture-conteneur {
padding-left: 16px;
padding-right: 16px;
-webkit-overflow-scrolling: touch;
}
}
/* ============================================================
HUB — 4 cartes "magazine" plus impactantes, full screen mobile
Profondeur, gradient subtil, halo d'icône, chevron d'invitation
============================================================ */
.vivre-hub {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: var(--space-large) 0;
animation: hub-apparition 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vivre-hub.cache { display: none; }
@keyframes hub-apparition {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.vivre-hub-carte {
position: relative;
/* Calibré pour qu'un grille 2x2 + entête + date tiennent sur iPhone SE (667px) */
min-height: 150px;
aspect-ratio: auto;
/* Halo radial absorbé dans le background — laisse ::before libre pour le chiffre romain */
background:
radial-gradient(circle at 110% -10%, rgba(168, 117, 48, 0.12) 0%, transparent 55%),
linear-gradient(155deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
border-radius: 22px;
padding: 16px 16px 42px;
display: flex;
flex-direction: column;
text-align: left;
cursor: pointer;
overflow: hidden;
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 260ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 20px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
outline: none;
font-family: inherit;
color: var(--texte-principal);
}
/* Chiffre romain en haut-gauche — caractère manuscrit, ton ocre estompé */
.vivre-hub-carte::before {
content: attr(data-num);
position: absolute;
top: 10px;
left: 14px;
font-family: var(--font-serif);
font-style: italic;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.2px;
color: rgba(168, 117, 48, 0.55);
pointer-events: none;
transition: color 260ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 2;
}
/* Filigrane — illustration thématique en arrière-plan, à peine visible */
.vivre-hub-filigrane {
position: absolute;
right: -18%;
bottom: -22%;
width: 78%;
height: 78%;
color: var(--ocre-signature);
opacity: 0.07;
pointer-events: none;
transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 0;
}
.vivre-hub-filigrane svg { width: 100%; height: 100%; display: block; }
.vivre-hub-carte:hover .vivre-hub-filigrane {
opacity: 0.11;
transform: scale(1.04) rotate(-2deg);
}
/* Garder icône, label, preview au-dessus du filigrane */
.vivre-hub-icone,
.vivre-hub-label,
.vivre-hub-preview { position: relative; z-index: 1; }
/* Chevron d'invitation en bas-droite — mask pour adopter la couleur de chaque variation */
.vivre-hub-carte::after {
content: '';
position: absolute;
bottom: 14px;
right: 14px;
width: 16px;
height: 16px;
z-index: 2;
background-color: var(--ocre-signature);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0.6;
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vivre-hub-carte:nth-child(2)::after { background-color: var(--vert-profond, #5A6B4F); }
.vivre-hub-carte:nth-child(3)::after { background-color: var(--bleu-nuit, #4A5970); }
.vivre-hub-carte:nth-child(4)::after { background-color: var(--rouge-terre, #A8523D); }
.vivre-hub-carte:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 18px 36px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
border-color: rgba(168, 117, 48, 0.45);
}
.vivre-hub-carte:hover::before { color: var(--ocre-signature); }
.vivre-hub-carte:hover::after {
opacity: 1;
transform: translateX(3px);
}
.vivre-hub-carte:active {
transform: translateY(0) scale(0.985);
transition-duration: 120ms;
}
.vivre-hub-carte:focus-visible {
border-color: var(--ocre-signature);
box-shadow:
0 0 0 3px rgba(168, 117, 48, 0.18),
0 18px 36px rgba(45, 36, 24, 0.12);
}
/* Icône — pastille colorée ocre claire, taille adaptée mobile */
.vivre-hub-icone {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg,
rgba(168, 117, 48, 0.14) 0%,
rgba(168, 117, 48, 0.06) 100%);
border: 1px solid rgba(168, 117, 48, 0.18);
color: var(--ocre-signature);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
margin-bottom: auto;
}
.vivre-hub-icone svg { width: 22px; height: 22px; }
/* Label — Cormorant, identité éditoriale */
.vivre-hub-label {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--texte-principal);
letter-spacing: -0.3px;
margin-top: 12px;
}
/* Preview — Cormorant italique */
.vivre-hub-preview {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
line-height: 1.35;
letter-spacing: 0;
margin-top: 4px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding-right: 22px; /* place pour le chevron */
}
/* Variations subtiles entre les cartes via :nth-child
pour donner de la personnalité sans casser la cohérence.
Chaque variation conserve son halo radial mais teinté de sa couleur. */
.vivre-hub-carte:nth-child(2) {
background:
radial-gradient(circle at 110% -10%, rgba(122, 139, 111, 0.14) 0%, transparent 55%),
linear-gradient(155deg, #FDFBF6 0%, #EFE5D2 100%);
}
.vivre-hub-carte:nth-child(2) .vivre-hub-icone {
background: linear-gradient(135deg, rgba(122, 139, 111, 0.16) 0%, rgba(122, 139, 111, 0.06) 100%);
border-color: rgba(122, 139, 111, 0.22);
color: var(--vert-profond, #5A6B4F);
box-shadow: 0 2px 6px rgba(122, 139, 111, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vivre-hub-carte:nth-child(2) .vivre-hub-filigrane { color: var(--vert-profond, #5A6B4F); }
.vivre-hub-carte:nth-child(2)::before { color: rgba(90, 107, 79, 0.55); }
.vivre-hub-carte:nth-child(3) {
background:
radial-gradient(circle at 110% -10%, rgba(74, 89, 112, 0.14) 0%, transparent 55%),
linear-gradient(155deg, #FDFBF6 0%, #E8DECA 100%);
}
.vivre-hub-carte:nth-child(3) .vivre-hub-icone {
background: linear-gradient(135deg, rgba(74, 89, 112, 0.14) 0%, rgba(74, 89, 112, 0.05) 100%);
border-color: rgba(74, 89, 112, 0.22);
color: var(--bleu-nuit, #4A5970);
box-shadow: 0 2px 6px rgba(74, 89, 112, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vivre-hub-carte:nth-child(3) .vivre-hub-filigrane { color: var(--bleu-nuit, #4A5970); }
.vivre-hub-carte:nth-child(3)::before { color: rgba(74, 89, 112, 0.55); }
.vivre-hub-carte:nth-child(4) {
background:
radial-gradient(circle at 110% -10%, rgba(168, 82, 61, 0.14) 0%, transparent 55%),
linear-gradient(155deg, #FDFBF6 0%, #F2DDD5 100%);
}
.vivre-hub-carte:nth-child(4) .vivre-hub-icone {
background: linear-gradient(135deg, rgba(168, 82, 61, 0.14) 0%, rgba(168, 82, 61, 0.05) 100%);
border-color: rgba(168, 82, 61, 0.22);
color: var(--rouge-terre, #A8523D);
box-shadow: 0 2px 6px rgba(168, 82, 61, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vivre-hub-carte:nth-child(4) .vivre-hub-filigrane { color: var(--rouge-terre, #A8523D); }
.vivre-hub-carte:nth-child(4)::before { color: rgba(168, 82, 61, 0.55); }
/* Mobile haute densité (≥400px) : un peu plus généreux */
@media (min-width: 400px) {
.vivre-hub-carte {
min-height: 162px;
padding: 18px 18px 44px;
}
.vivre-hub-icone { width: 46px; height: 46px; border-radius: 14px; }
.vivre-hub-icone svg { width: 24px; height: 24px; }
.vivre-hub-label { font-size: 24px; margin-top: 14px; }
.vivre-hub-preview { font-size: 14px; }
}
/* Tablette : utiliser un peu plus l'écran */
@media (min-width: 700px) {
.vivre-hub {
gap: 18px;
max-width: 720px;
}
.vivre-hub-carte {
min-height: 200px;
padding: 24px 22px 56px;
border-radius: 24px;
}
.vivre-hub-icone { width: 56px; height: 56px; border-radius: 16px; }
.vivre-hub-icone svg { width: 28px; height: 28px; }
.vivre-hub-label { font-size: 30px; margin-top: 18px; }
.vivre-hub-preview { font-size: 15px; }
.vivre-hub-carte::after { width: 20px; height: 20px; bottom: 20px; right: 20px; }
}
/* Mobile très étroit (<360px) : compact mais reste impactant */
@media (max-width: 360px) {
.vivre-hub { gap: 10px; }
.vivre-hub-carte {
min-height: 138px;
padding: 14px 14px 38px;
border-radius: 18px;
}
.vivre-hub-icone { width: 38px; height: 38px; border-radius: 11px; }
.vivre-hub-icone svg { width: 20px; height: 20px; }
.vivre-hub-label { font-size: 19px; margin-top: 10px; }
.vivre-hub-preview { font-size: 12px; margin-top: 3px; }
.vivre-hub-carte::after { bottom: 12px; right: 12px; width: 14px; height: 14px; }
}
/* ============================================================
SOUS-PAGES VIVRE — bouton retour + animation push iOS
============================================================ */
.vivre-sous-page {
animation: souspage-push-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes souspage-push-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* Bouton retour iOS-style : sticky en haut, full-width avec backdrop blur */
.vivre-retour {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 4px;
border: none;
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
cursor: pointer;
padding: 14px 20px;
/* Étend la barre jusqu'aux bords du viewport */
margin: -32px -20px 16px;
width: calc(100% + 40px);
background: rgba(245, 239, 230, 0.88);
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border-bottom: 1px solid rgba(45, 36, 24, 0.06);
letter-spacing: -0.2px;
transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 160ms cubic-bezier(0.22, 1, 0.36, 1);
text-align: left;
border-radius: 0;
}
.vivre-retour:hover { background: rgba(245, 239, 230, 0.95); }
.vivre-retour:active { opacity: 0.55; }
.vivre-retour > span {
font-size: 22px;
line-height: 1;
margin-right: 4px;
margin-top: -1px;
}
@media (min-width: 641px) {
.vivre-retour {
margin-left: -32px;
margin-right: -32px;
width: calc(100% + 64px);
padding-left: 32px;
padding-right: 32px;
}
}
/* Hide piece-entete (titre + icône) + date Aujourd'hui quand on est en sous-page */
.piece.en-sous-page .piece-entete,
.piece.en-sous-page .aujourdhui-date {
display: none;
}
/* ============================================================
CHANTIERS ACHEVÉS — section collapsible, mémoire de ce qui a abouti
============================================================ */
.chantiers-acheves-section {
margin-top: var(--space-large);
}
.chantiers-acheves-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 12px 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ocre-signature);
list-style: none;
user-select: none;
border-radius: 8px;
transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chantiers-acheves-label::-webkit-details-marker { display: none; }
.chantiers-acheves-label::marker { display: none; }
.chantiers-acheves-label:hover { background: rgba(168, 117, 48, 0.06); }
.chantiers-acheves-label::after {
content: '▸';
font-size: 10px;
margin-left: auto;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chantiers-acheves-section[open] .chantiers-acheves-label::after {
transform: rotate(90deg);
}
.chantiers-acheves-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--ocre-signature);
color: white;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
}
.chantiers-acheves-liste { margin-top: 8px; }
.vivre-ligne-acheve {
opacity: 0.75;
}
.vivre-ligne-acheve .vivre-ligne-titre {
color: var(--texte-secondaire);
text-decoration: line-through;
text-decoration-color: rgba(45, 36, 24, 0.25);
text-decoration-thickness: 1px;
}
.vivre-ligne-acheve:hover {
opacity: 1;
}
/* ============================================================
BANDEAU "ACHEVÉ" + RÉSUMÉ CLÔTURE dans la fiche
============================================================ */
.fiche-bandeau-acheve {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 16px;
margin-bottom: var(--space-medium);
background: linear-gradient(135deg, rgba(168, 117, 48, 0.08) 0%, rgba(168, 117, 48, 0.04) 100%);
border-left: 3px solid var(--ocre-signature);
border-radius: 0 12px 12px 0;
}
.fiche-bandeau-acheve-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ocre-signature);
}
.fiche-bandeau-acheve-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--ocre-signature);
color: white;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
.fiche-bandeau-acheve-date {
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
letter-spacing: 0.1px;
}
.fiche-resume-cloture {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 18px;
padding: 18px 20px;
margin-bottom: var(--space-large);
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
}
.resume-cloture-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.resume-cloture-etoiles {
font-family: var(--font-serif);
font-size: 18px;
letter-spacing: 2px;
color: var(--ocre-signature);
line-height: 1;
}
.resume-cloture-emotion {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--ocre-signature);
padding: 4px 12px;
background: rgba(168, 117, 48, 0.1);
border: 1px solid rgba(168, 117, 48, 0.3);
border-radius: 999px;
}
.resume-cloture-image {
width: 100%;
max-height: 280px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(45, 36, 24, 0.1);
}
.resume-cloture-champ {
display: flex;
flex-direction: column;
gap: 4px;
}
.resume-cloture-champ-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--texte-tertiaire);
}
.resume-cloture-champ-texte {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.55;
font-style: italic;
color: var(--texte-principal);
margin: 0;
white-space: pre-wrap;
}
@media (max-width: 600px) {
.fiche-resume-cloture { padding: 14px 16px; border-radius: 14px; }
.resume-cloture-image { max-height: 220px; }
}
/* ============================================================
JARDIN — vue plan interactive
============================================================ */
.jardin-entete {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: var(--space-medium) 0 var(--space-small);
}
.jardin-titre {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
margin: 0;
letter-spacing: -0.4px;
}
.jardin-compte {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.5px;
color: var(--texte-tertiaire);
text-transform: uppercase;
font-weight: 500;
}
/* Barre vue (toggle + bouton export) */
.jardin-barre-vue {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 var(--space-medium);
}
.jardin-btn-export {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-elevation);
border: 1px solid var(--separateur);
color: var(--texte-secondaire);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
}
.jardin-btn-export:hover {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(45, 36, 24, 0.08);
}
.jardin-btn-export svg { width: 18px; height: 18px; }
/* Toggle Plan / Saison */
.jardin-toggle {
display: inline-flex;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 4px;
margin: 0 0 var(--space-medium);
gap: 2px;
}
.jardin-toggle-btn {
background: transparent;
border: none;
padding: 7px 18px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-tertiaire);
cursor: pointer;
transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
letter-spacing: -0.1px;
}
.jardin-toggle-btn.actif {
background: var(--ocre-signature);
color: white;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.25);
}
.jardin-toggle-btn:not(.actif):hover {
color: var(--texte-secondaire);
}
/* Vue Saison */
.jardin-saison-vue {
background: var(--bg-elevation);
border: 1px solid var(--separateur);
border-radius: 18px;
padding: 16px;
margin-bottom: var(--space-large);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.06);
}
.jardin-saison-vide {
text-align: center;
padding: 40px 20px;
font-family: var(--font-serif);
font-style: italic;
color: var(--texte-tertiaire);
margin: 0;
font-size: 15px;
}
.jardin-timeline {
display: flex;
flex-direction: column;
min-width: 600px;
}
.jardin-timeline-entete {
display: grid;
align-items: end;
padding-bottom: 8px;
border-bottom: 1.5px solid var(--separateur);
margin-bottom: 6px;
}
.jardin-timeline-mois {
text-align: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--texte-tertiaire);
padding: 4px 0;
}
.jardin-timeline-mois.actuel {
color: var(--ocre-signature);
font-weight: 700;
}
.jardin-timeline-ligne {
display: grid;
align-items: center;
padding: 6px 0;
cursor: pointer;
border-radius: 8px;
transition: background 160ms;
}
.jardin-timeline-ligne:hover { background: rgba(168, 117, 48, 0.05); }
.jardin-timeline-nom {
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px 0 4px;
overflow: hidden;
}
.jardin-timeline-emoji { font-size: 20px; flex-shrink: 0; }
.jardin-timeline-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.jardin-timeline-plante {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--texte-principal);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jardin-timeline-zone {
font-family: var(--font-sans);
font-size: 11px;
color: var(--texte-tertiaire);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jardin-timeline-cell {
height: 28px;
border-right: 1px solid rgba(45, 36, 24, 0.05);
display: flex;
align-items: center;
justify-content: center;
position: relative;
gap: 2px;
}
.jardin-timeline-cell.col-actuel {
background: rgba(168, 117, 48, 0.05);
}
.jardin-timeline-cell.phase-semis::before,
.jardin-timeline-cell.phase-plantation::before,
.jardin-timeline-cell.phase-recolte::before {
content: '';
position: absolute;
left: 0; right: 0;
height: 6px;
border-radius: 3px;
}
.jardin-timeline-cell.phase-semis::before {
background: rgba(168, 117, 48, 0.5);
top: 4px;
}
.jardin-timeline-cell.phase-plantation::before {
background: rgba(168, 117, 48, 0.85);
top: 11px;
}
.jardin-timeline-cell.phase-recolte::before {
background: var(--ocre-signature);
top: 18px;
}
.jardin-saison-legende {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 12px 4px 0;
border-top: 1px solid var(--separateur);
margin-top: 8px;
font-family: var(--font-sans);
font-size: 11px;
color: var(--texte-tertiaire);
}
.jardin-saison-legende span:not(.leg-pastille) {
letter-spacing: 0.3px;
}
.leg-pastille {
display: inline-block;
width: 14px;
height: 6px;
border-radius: 3px;
margin-right: 4px;
vertical-align: middle;
}
.leg-pastille.semis { background: rgba(168, 117, 48, 0.5); }
.leg-pastille.plantation { background: rgba(168, 117, 48, 0.85); }
.leg-pastille.recolte { background: var(--ocre-signature); }
/* Plan SVG */
.jardin-plan-wrapper {
position: relative;
background: var(--bg-elevation);
border: 1px solid var(--separateur);
border-radius: 18px;
padding: 12px;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.06);
margin-bottom: var(--space-large);
overflow: hidden;
}
.jardin-plan-svg {
display: block;
width: 100%;
height: auto;
max-height: 80vh;
touch-action: none;
cursor: default;
}
.jardin-plan-svg.en-dessin {
cursor: crosshair;
}
.jardin-plan-svg.en-dessin #jardin-parcelle-bg {
fill: rgba(168, 117, 48, 0.04);
}
/* Zones utilisateur (groupes SVG) */
.jardin-zone-groupe {
cursor: pointer;
transition: filter 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-zone-groupe:hover {
filter: brightness(1.05) drop-shadow(0 2px 4px rgba(45, 36, 24, 0.1));
}
.jardin-zone-rect {
transition: fill-opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-zone-groupe:hover .jardin-zone-rect {
fill-opacity: 0.55;
}
.jardin-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
pointer-events: none;
padding: 20px;
background: linear-gradient(to bottom, rgba(245, 239, 230, 0) 0%, rgba(245, 239, 230, 0.8) 60%, rgba(245, 239, 230, 0.95) 100%);
}
.jardin-empty-icone {
width: 56px;
height: 56px;
color: var(--ocre-signature);
opacity: 0.6;
margin-bottom: 4px;
animation: jardin-empty-pulse 2.6s ease-in-out infinite;
}
.jardin-empty-icone svg { width: 100%; height: 100%; }
@keyframes jardin-empty-pulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.06); }
}
.jardin-empty-titre {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: var(--texte-principal);
margin: 0;
letter-spacing: -0.3px;
}
.jardin-empty-texte {
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
text-align: center;
max-width: 320px;
line-height: 1.5;
margin: 0;
}
.jardin-empty strong { color: var(--ocre-signature); font-weight: 600; }
/* FAB groupe "+ Zone" (polygone + rectangle) */
.jardin-fab-groupe {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
z-index: 100;
}
.jardin-fab {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ocre-signature);
border: none;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(168, 117, 48, 0.35),
0 8px 24px rgba(45, 36, 24, 0.15);
transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-fab.secondaire {
width: 44px;
height: 44px;
background: var(--bg-elevation);
color: var(--ocre-signature);
border: 1.5px solid var(--ocre-signature);
box-shadow: 0 2px 8px rgba(45, 36, 24, 0.1);
}
.jardin-fab:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 18px rgba(168, 117, 48, 0.45),
0 12px 32px rgba(45, 36, 24, 0.2);
}
.jardin-fab.secondaire:hover {
background: var(--ocre-signature);
color: white;
box-shadow: 0 4px 12px rgba(168, 117, 48, 0.35);
}
.jardin-fab:active { transform: scale(0.95); }
.jardin-fab svg { width: 24px; height: 24px; }
.jardin-fab.secondaire svg { width: 20px; height: 20px; }
/* Overlay pendant le dessin */
.jardin-overlay-dessin {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: var(--ocre-signature);
color: white;
padding: 10px 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 24px rgba(168, 117, 48, 0.4),
0 16px 40px rgba(45, 36, 24, 0.25);
z-index: 200;
font-family: var(--font-sans);
animation: overlay-dessin-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes overlay-dessin-in {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.jardin-overlay-label {
font-size: 13px;
font-weight: 500;
padding-left: 6px;
}
.jardin-overlay-btn {
background: rgba(255, 255, 255, 0.18);
border: none;
color: white;
padding: 6px 14px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 160ms;
}
.jardin-overlay-btn:hover { background: rgba(255, 255, 255, 0.3); }
.jardin-overlay-btn.primaire {
background: white;
color: var(--ocre-signature);
font-weight: 600;
}
.jardin-overlay-btn.primaire:hover { background: rgba(255, 255, 255, 0.9); }
.jardin-overlay-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Suggestions saisonnières */
.jardin-saison {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 14px;
padding: 14px 16px;
margin-bottom: var(--space-large);
}
.jardin-saison-titre {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 10px;
}
.jardin-saison-ligne {
margin-bottom: 10px;
}
.jardin-saison-ligne:last-child { margin-bottom: 0; }
.jardin-saison-ligne-label {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--texte-secondaire);
margin-bottom: 6px;
}
.jardin-saison-ligne-icone { font-size: 14px; }
.jardin-saison-rangee {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.jardin-saison-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(168, 117, 48, 0.06);
border: 1px solid rgba(168, 117, 48, 0.2);
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-principal);
white-space: nowrap;
}
.jardin-saison-chip.muet {
background: transparent;
border-color: var(--separateur);
color: var(--texte-tertiaire);
}
.jardin-saison-chip.cliquable {
cursor: pointer;
border: 1px solid var(--separateur);
background: var(--bg-elevation);
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-saison-chip.cliquable:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
transform: translateY(-1px);
}
/* Historique de zone (rotation) */
.zone-sheet-historique {
padding: 0 24px 12px;
}
.zone-sheet-historique-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 10px 0;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
list-style: none;
user-select: none;
}
.zone-sheet-historique-label::-webkit-details-marker,
.zone-sheet-historique-label::marker { display: none; }
.zone-sheet-historique-label::after {
content: '▸';
font-size: 9px;
margin-left: auto;
transition: transform 200ms;
}
.zone-sheet-historique[open] .zone-sheet-historique-label::after {
transform: rotate(90deg);
}
.zone-historique-liste {
display: flex;
flex-direction: column;
gap: 10px;
padding: 6px 0 0;
}
.zone-historique-annee-label {
font-family: var(--font-serif);
font-size: 14px;
font-style: italic;
color: var(--ocre-signature);
margin-bottom: 4px;
}
.zone-sheet-actions-double {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.zone-sheet-modifier {
width: 100%;
background: transparent;
border: 1.5px solid var(--separateur);
border-radius: 12px;
padding: 12px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--texte-principal);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-sheet-modifier:hover {
border-color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.04);
color: var(--ocre-signature);
}
/* Zone en édition + handles SVG */
.jardin-zone-groupe.en-edition .jardin-zone-rect {
fill-opacity: 0.55;
stroke-width: 2.5;
cursor: move;
}
.jardin-handle {
cursor: grab;
filter: drop-shadow(0 1px 2px rgba(45, 36, 24, 0.2));
}
.jardin-handle:active { cursor: grabbing; }
.jardin-overlay-edition {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: var(--encre);
color: white;
padding: 10px 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: 0 8px 24px rgba(45, 36, 24, 0.35);
z-index: 200;
font-family: var(--font-sans);
animation: overlay-dessin-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-overlay-edition .jardin-overlay-label {
font-size: 12px;
font-weight: 500;
padding-left: 6px;
}
.jardin-overlay-edition .jardin-overlay-btn {
background: rgba(255, 255, 255, 0.18);
color: white;
}
.jardin-overlay-edition .jardin-overlay-btn.primaire {
background: white;
color: var(--encre);
}
@media (max-width: 600px) {
.zone-sheet-historique { padding-left: 20px; padding-right: 20px; }
}
/* ============================================================
BOTTOM SHEET — zone détail
============================================================ */
.zone-sheet-overlay {
position: fixed;
inset: 0;
background: rgba(30, 24, 15, 0.62);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2100;
animation: popup-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-sheet-overlay.fermeture {
opacity: 0;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-sheet {
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 45%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-bottom: none;
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 560px;
max-height: 92vh;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 -16px 48px rgba(30, 24, 15, 0.30),
0 -32px 80px rgba(30, 24, 15, 0.20);
display: flex;
flex-direction: column;
animation: sheet-up 360ms cubic-bezier(0.22, 1, 0.36, 1);
padding-bottom: env(safe-area-inset-bottom, 0);
}
@keyframes sheet-up {
from { transform: translateY(100%); opacity: 0.6; }
to { transform: translateY(0); opacity: 1; }
}
@media (min-width: 700px) {
.zone-sheet-overlay { align-items: center; padding: 20px; }
.zone-sheet { border-radius: 22px; max-height: 88vh; }
}
.zone-sheet-poignee {
width: 36px;
height: 5px;
background: rgba(45, 36, 24, 0.15);
border-radius: 999px;
margin: 10px auto 0;
flex-shrink: 0;
}
.zone-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 24px 8px;
}
.zone-sheet-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
letter-spacing: -0.2px;
color: var(--texte-principal);
}
.zone-sheet-pastille {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
}
.zone-sheet-surface {
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid var(--separateur);
color: var(--texte-tertiaire);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
text-transform: none;
}
.zone-sheet-termine {
background: transparent;
border: none;
color: var(--ocre-signature);
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
letter-spacing: -0.2px;
transition: background 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-sheet-termine:hover { background: rgba(168, 117, 48, 0.08); }
.zone-sheet-termine:active { opacity: 0.6; }
.zone-sheet-nom {
width: calc(100% - 48px);
margin: 0 24px 12px;
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
background: transparent;
border: none;
border-bottom: 1.5px solid transparent;
padding: 4px 0 8px;
color: var(--texte-principal);
outline: none;
transition: border-color 200ms;
letter-spacing: -0.2px;
}
.zone-sheet-nom:focus { border-bottom-color: var(--ocre-signature); }
.zone-sheet-nom::placeholder { color: var(--texte-tertiaire); font-style: italic; font-weight: 400; }
.zone-sheet-types {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 24px 12px;
}
.zone-type-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 999px;
background: transparent;
border: 1.5px solid var(--separateur);
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.zone-type-chip:hover {
border-color: var(--c);
color: var(--c);
}
.zone-type-chip.actif {
background: var(--c);
border-color: var(--c);
color: white;
}
/* Chips d'exposition : pas de variable --c → ocre signature par défaut */
.zone-expo-chip {
--c: var(--ocre-signature);
}
.zone-expo-chip.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: #FDFBF7;
}
.zone-expo-chip:hover {
border-color: var(--ocre-signature);
color: var(--ocre-profond);
}
.zone-sheet-section {
padding: 8px 24px 14px;
}
.zone-sheet-section-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ocre-profond);
margin-bottom: 10px;
}
/* Divider subtil entre sections du sheet (visuel respiration) */
.zone-sheet-section + .zone-sheet-section,
.zone-sheet-section + .zone-sheet-historique,
.zone-sheet-types + .zone-sheet-section {
border-top: 1px solid rgba(45, 36, 24, 0.06);
margin-top: 4px;
padding-top: 16px;
}
.zone-sheet-notes {
width: 100%;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 12px;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--texte-principal);
outline: none;
resize: vertical;
transition: border-color 160ms;
}
.zone-sheet-notes:focus { border-color: var(--ocre-signature); }
.zone-sheet-notes::placeholder { color: var(--texte-secondaire); font-style: italic; opacity: 0.7; }
/* Plantations dans la zone */
.zone-sheet-plantations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
gap: 8px;
}
.plantation-carte {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 6px 10px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 14px;
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
min-height: 90px;
font-family: inherit;
}
.plantation-carte:hover {
border-color: var(--c, var(--ocre-signature));
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(45, 36, 24, 0.08);
}
.plantation-carte:active { transform: translateY(0) scale(0.98); }
.plantation-carte-haut {
display: flex;
align-items: center;
justify-content: center;
}
.plantation-emoji {
font-size: 28px;
line-height: 1;
}
.plantation-nom {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
color: var(--texte-principal);
text-align: center;
letter-spacing: 0.1px;
line-height: 1.2;
word-break: break-word;
}
.plantation-quantite {
font-family: var(--font-sans);
font-size: 10px;
color: var(--texte-tertiaire);
font-weight: 600;
}
.plantation-ajouter {
background: transparent;
border-style: dashed;
color: var(--texte-tertiaire);
}
.plantation-ajouter:hover {
border-color: var(--ocre-signature);
border-style: solid;
background: rgba(168, 117, 48, 0.04);
color: var(--ocre-signature);
}
.plantation-ajouter-icone {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 300;
line-height: 1;
}
.plantation-ajouter-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
}
.zone-sheet-actions {
padding: 16px 24px 24px;
display: flex;
justify-content: center;
}
.zone-sheet-supprimer {
background: transparent;
border: none;
color: var(--texte-tertiaire);
font-family: var(--font-sans);
font-size: 13px;
cursor: pointer;
padding: 10px 16px;
border-radius: 8px;
transition: all 160ms;
}
.zone-sheet-supprimer:hover {
color: #B43C3C;
background: rgba(180, 60, 60, 0.06);
}
/* ============================================================
PLANTATION DÉTAIL SHEET
============================================================ */
.plantation-sheet-emoji {
font-size: 22px;
line-height: 1;
}
.plantation-info {
padding: 4px 24px 12px;
}
.plantation-info-conseil {
font-family: var(--font-serif);
font-size: 16px;
font-style: italic;
color: var(--texte-principal);
margin: 0 0 14px;
line-height: 1.55;
background: rgba(168, 117, 48, 0.05);
border-left: 3px solid var(--ocre-signature);
padding: 10px 14px;
border-radius: 0 8px 8px 0;
}
.plantation-info-fenetres {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px;
}
.plantation-info-fenetre {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 10px;
padding: 10px 14px;
}
.pif-titre {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ocre-profond);
}
.pif-valeur {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: var(--texte-principal);
margin-top: 3px;
}
.plantation-quantite-ligne {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
/* Statut planté / à planter + date libre */
.plantation-statut-toggle {
display: inline-flex;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
padding: 3px;
gap: 2px;
width: 100%;
max-width: 320px;
}
.plantation-statut-chip {
flex: 1;
background: transparent;
border: none;
padding: 8px 14px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-secondaire);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
letter-spacing: -0.1px;
transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plantation-statut-chip:not(.actif):hover { color: var(--texte-principal); }
.plantation-statut-chip.actif {
background: var(--ocre-signature);
color: white;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.25);
}
.plantation-date-zone {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.plantation-date-zone[hidden] { display: none; }
.plantation-date-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--texte-secondaire);
}
.plantation-date-input {
background: #FFFFFF;
border: 1.5px solid var(--separateur);
border-radius: 10px;
padding: 11px 14px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--texte-principal);
outline: none;
transition: border-color 160ms;
font-variant-numeric: tabular-nums;
max-width: 220px;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.05);
}
.plantation-date-input:focus {
border-color: var(--ocre-signature);
box-shadow: 0 0 0 3px rgba(168, 117, 48, 0.15);
}
/* Carte plantation : variation "à planter" */
.plantation-carte.a-planter {
background: transparent;
border-style: dashed;
border-color: var(--separateur);
opacity: 0.85;
}
.plantation-carte.a-planter .plantation-emoji { opacity: 0.7; }
.plantation-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--texte-tertiaire);
color: var(--bg-carte);
font-family: var(--font-sans);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
line-height: 1;
}
.plantation-q-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
font-size: 18px;
font-weight: 400;
color: var(--texte-principal);
cursor: pointer;
transition: all 160ms;
}
.plantation-q-btn:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
}
.plantation-q-val {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 500;
min-width: 40px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* ============================================================
PLANT PICKER — grille visuelle, recherche, filtres
============================================================ */
.plant-picker-overlay {
position: fixed;
inset: 0;
background: rgba(30, 24, 15, 0.65);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2200;
animation: popup-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-picker-overlay.fermeture {
opacity: 0;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-picker {
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 45%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-bottom: none;
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 600px;
max-height: 92vh;
display: flex;
flex-direction: column;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 -16px 48px rgba(30, 24, 15, 0.30),
0 -32px 80px rgba(30, 24, 15, 0.20);
animation: sheet-up 380ms cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 700px) {
.plant-picker-overlay { align-items: center; padding: 20px; }
.plant-picker { border-radius: 22px; max-height: 80vh; }
}
.plant-picker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 24px 8px;
flex-shrink: 0;
}
.plant-picker-titre {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
margin: 0;
letter-spacing: -0.3px;
}
.plant-picker-recherche {
margin: 4px 24px 12px;
padding: 12px 16px;
font-family: var(--font-sans);
font-size: 15px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 12px;
outline: none;
transition: border-color 160ms;
color: var(--texte-principal);
flex-shrink: 0;
}
.plant-picker-recherche:focus { border-color: var(--ocre-signature); }
.plant-picker-recherche::placeholder { color: var(--texte-tertiaire); font-style: italic; }
.plant-picker-filtres {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 0 24px 14px;
flex-shrink: 0;
scrollbar-width: thin;
}
.plant-filtre-chip {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-principal);
cursor: pointer;
white-space: nowrap;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-filtre-chip:hover {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
.plant-filtre-chip.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
}
.plant-picker-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
padding: 4px 24px 24px;
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.plant-carte {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 14px 8px 12px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 14px;
cursor: pointer;
transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
font-family: inherit;
min-height: 100px;
}
.plant-carte:hover {
border-color: var(--c);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(45, 36, 24, 0.08);
}
.plant-carte:active { transform: translateY(0) scale(0.98); }
.plant-carte.possible {
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(168, 117, 48, 0.06) 100%);
border-color: rgba(168, 117, 48, 0.4);
}
.plant-carte-emoji {
font-size: 32px;
line-height: 1;
}
.plant-carte-nom {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
color: var(--texte-principal);
text-align: center;
line-height: 1.25;
letter-spacing: -0.1px;
}
.plant-carte-badge {
position: absolute;
top: 6px;
right: 6px;
font-family: var(--font-sans);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--ocre-signature);
}
.plant-carte-badge.alerte {
width: 16px;
height: 16px;
border-radius: 50%;
background: #C97A4A;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
letter-spacing: 0;
}
.plant-carte-badge.rotation {
width: 16px;
height: 16px;
border-radius: 50%;
background: #B8A04E;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
letter-spacing: 0;
}
.plant-carte.conflit {
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(201, 122, 74, 0.06) 100%);
border-color: rgba(201, 122, 74, 0.4);
}
.plant-carte.rotation {
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(184, 160, 78, 0.06) 100%);
border-color: rgba(184, 160, 78, 0.35);
}
.plant-carte-badge.expo {
width: 16px;
height: 16px;
border-radius: 50%;
background: #B89B66;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
letter-spacing: 0;
}
.plant-carte.expo-bad { opacity: 0.65; }
/* À faire ce mois-ci — section tâches */
.jardin-taches {
background: linear-gradient(135deg, rgba(168, 117, 48, 0.08) 0%, rgba(168, 117, 48, 0.03) 100%);
border: 1px solid rgba(168, 117, 48, 0.2);
border-radius: 16px;
padding: 16px 18px;
margin-bottom: 14px;
}
.jardin-taches-titre {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ocre-signature);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 6px;
}
.jardin-taches-ligne {
margin-bottom: 12px;
}
.jardin-taches-ligne:last-child { margin-bottom: 0; }
.jardin-taches-verbe {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--texte-secondaire);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.jardin-taches-cartes {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.jardin-tache-carte {
background: var(--bg-elevation);
border: 1px solid var(--separateur);
border-radius: 10px;
padding: 6px 10px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-family: inherit;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jardin-tache-carte:hover {
border-color: var(--ocre-signature);
transform: translateY(-1px);
}
.jardin-tache-emoji { font-size: 18px; }
.jardin-tache-texte {
display: flex;
flex-direction: column;
text-align: left;
}
.jardin-tache-plante {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-principal);
}
.jardin-tache-zone {
font-family: var(--font-sans);
font-size: 10px;
color: var(--texte-tertiaire);
font-style: italic;
}
/* Alerte de cohabitation dans la fiche plantation */
.plantation-alerte {
display: flex;
align-items: flex-start;
gap: 10px;
background: rgba(201, 122, 74, 0.08);
border-left: 3px solid #C97A4A;
padding: 12px 14px;
margin: 0 24px 12px;
border-radius: 0 10px 10px 0;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
color: var(--texte-principal);
}
.plantation-alerte-icone {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: #C97A4A;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
}
.plantation-alerte strong { color: #C97A4A; }
@media (max-width: 600px) {
.plantation-alerte { margin-left: 20px; margin-right: 20px; }
}
.plant-picker-vide {
grid-column: 1 / -1;
text-align: center;
padding: 40px 20px;
color: var(--texte-tertiaire);
font-style: italic;
font-family: var(--font-serif);
}
/* Tuile "+ Autre" */
.plant-carte-autre {
background: transparent;
border: 1.5px dashed var(--separateur-fort, var(--separateur));
color: var(--texte-tertiaire);
}
.plant-carte-autre:hover {
border-color: var(--ocre-signature);
border-style: solid;
color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.04);
}
.plant-carte-autre .plant-carte-emoji {
font-size: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ============================================================
COMPOSANT IMAGE — réutilisable (zone, plantation, etc.)
Deux boutons : Prendre une photo + Choisir une image
============================================================ */
.image-composant {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.image-composant.charge::after {
content: 'Compression…';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(45, 36, 24, 0.85);
color: white;
padding: 8px 14px;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.3px;
z-index: 5;
}
/* État vide : deux gros boutons (Photo + Galerie) */
.image-composant-choix {
display: flex;
gap: 8px;
}
.image-composant-cta {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 18px 12px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-principal);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
text-align: center;
}
.image-composant-cta:hover {
border-color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.04);
color: var(--ocre-signature);
transform: translateY(-1px);
}
.image-composant-cta:active { transform: translateY(0) scale(0.98); }
.image-composant-cta svg { width: 22px; height: 22px; flex-shrink: 0; }
.image-composant-cta.secondaire {
background: transparent;
border-style: dashed;
}
.image-composant-cta.secondaire:hover {
border-style: solid;
}
/* État avec image : preview + 3 boutons (Photo / Galerie / Retirer) */
.image-composant-preview {
width: 100%;
max-height: 280px;
object-fit: cover;
border-radius: 12px;
background: var(--bg-carte);
box-shadow: 0 1px 3px rgba(45, 36, 24, 0.08);
}
/* ============================================================
TROIS BONNES CHOSES — carte Aujourd'hui + sheet
Seligman 2005. Anti-négativité par design.
============================================================ */
.troischoses-carte {
width: 100%;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 18px;
padding: 18px 20px;
text-align: left;
cursor: pointer;
transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.06);
display: flex;
flex-direction: column;
gap: 8px;
font-family: inherit;
color: inherit;
}
.troischoses-carte:hover {
border-color: rgba(168, 117, 48, 0.4);
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.06),
0 10px 28px rgba(45, 36, 24, 0.10);
}
.troischoses-carte:active { transform: translateY(0) scale(0.99); }
.troischoses-carte.en-attente {
cursor: default;
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(168, 117, 48, 0.04) 100%);
border-style: dashed;
border-color: var(--separateur);
}
.troischoses-carte.en-attente:hover {
transform: none;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
}
.troischoses-carte.faite {
background: linear-gradient(135deg, var(--bg-carte) 0%, rgba(168, 117, 48, 0.06) 100%);
border-color: rgba(168, 117, 48, 0.35);
}
.troischoses-carte-entete {
display: flex;
align-items: center;
gap: 10px;
}
.troischoses-carte-icone {
width: 26px;
height: 26px;
color: var(--ocre-signature);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.troischoses-carte-icone svg { width: 100%; height: 100%; }
.troischoses-carte-label {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: var(--texte-principal);
letter-spacing: -0.3px;
}
.troischoses-carte-etat {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--texte-secondaire);
letter-spacing: 0;
margin: 0;
line-height: 1.4;
}
.troischoses-carte.faite .troischoses-carte-etat { color: var(--ocre-profond); font-weight: 600; }
.troischoses-carte-apercu {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--separateur);
}
.troischoses-carte-ligne {
font-family: var(--font-serif);
font-size: 14px;
font-style: italic;
color: var(--texte-principal);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Historique récent sous la carte 3 choses (sous-page Aujourd'hui) */
.troischoses-historique {
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.troischoses-historique-titre {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ocre-profond);
margin: 0 0 4px;
}
.troischoses-historique-carte {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
}
.troischoses-historique-date {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0 0 8px;
}
.troischoses-historique-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.troischoses-historique-liste li {
display: flex;
gap: 10px;
align-items: flex-start;
}
.troischoses-historique-num {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(168, 117, 48, 0.12);
color: var(--ocre-signature);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
}
.troischoses-historique-texte {
flex: 1;
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.45;
color: var(--texte-principal);
}
/* ===== SHEET 3 choses (Apple modal sheet) ===== */
.tc-overlay {
position: fixed;
inset: 0;
background: rgba(30, 24, 15, 0.62);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2100;
animation: popup-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tc-overlay.fermeture {
opacity: 0;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tc-sheet {
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 45%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-bottom: none;
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 560px;
max-height: 92vh;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 -16px 48px rgba(30, 24, 15, 0.30),
0 -32px 80px rgba(30, 24, 15, 0.20);
display: flex;
flex-direction: column;
animation: sheet-up 360ms cubic-bezier(0.22, 1, 0.36, 1);
padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 700px) {
.tc-overlay { align-items: center; padding: 20px; }
.tc-sheet { border-radius: 22px; max-height: 88vh; }
}
.tc-sheet-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 24px 8px;
gap: 12px;
}
.tc-sheet-label-zone { display: flex; flex-direction: column; gap: 2px; }
.tc-sheet-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--ocre-profond);
}
.tc-sheet-soustitre {
font-family: var(--font-serif);
font-size: 15px;
font-style: italic;
color: var(--texte-secondaire);
}
.tc-sheet-accueil {
margin: 4px 24px 14px;
padding: 12px 14px;
background: rgba(168, 117, 48, 0.05);
border-left: 3px solid var(--ocre-signature);
border-radius: 0 10px 10px 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: var(--texte-principal);
}
/* Synergie — Échos du jour */
.tc-section-echos {
margin: 4px 24px 16px;
padding: 14px;
background: rgba(184, 160, 78, 0.06);
border-radius: 14px;
border: 1px solid rgba(184, 160, 78, 0.18);
}
.tc-section-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ocre-profond);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.tc-section-hint {
font-family: var(--font-sans);
font-size: 11px;
font-style: italic;
color: var(--texte-secondaire);
margin: 0 0 10px;
}
.tc-echos-rangee {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tc-echo-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-principal);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
max-width: 100%;
}
.tc-echo-chip:hover {
border-color: var(--ocre-signature);
background: rgba(168, 117, 48, 0.06);
color: var(--ocre-profond);
transform: translateY(-1px);
}
.tc-echo-icone { font-size: 14px; flex-shrink: 0; }
.tc-echo-label {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.tc-echo-contexte {
font-style: italic;
color: var(--texte-tertiaire);
font-size: 11px;
}
/* Champs de saisie 1, 2, 3 */
.tc-champs {
padding: 8px 24px 8px;
display: flex;
flex-direction: column;
gap: 10px;
}
.tc-champ {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 14px;
padding: 12px 14px;
transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tc-champ:focus-within {
border-color: var(--ocre-signature);
box-shadow: 0 0 0 3px rgba(168, 117, 48, 0.12);
}
.tc-champ-numero {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ocre-signature);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.tc-champ-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.4;
color: var(--texte-principal);
min-width: 0;
}
.tc-champ-input::placeholder {
color: var(--texte-secondaire);
font-style: italic;
opacity: 0.7;
}
/* Approfondir (pourquoi) */
.tc-pourquoi {
margin: 8px 24px 12px;
padding: 10px 14px;
background: rgba(168, 117, 48, 0.03);
border-radius: 12px;
}
.tc-pourquoi-summary {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--texte-secondaire);
cursor: pointer;
padding: 4px 0;
list-style: none;
}
.tc-pourquoi-summary::-webkit-details-marker,
.tc-pourquoi-summary::marker { display: none; }
.tc-pourquoi-summary::before {
content: '▸';
margin-right: 6px;
font-size: 9px;
display: inline-block;
transition: transform 200ms;
}
.tc-pourquoi[open] .tc-pourquoi-summary::before { transform: rotate(90deg); }
.tc-pourquoi-input {
margin-top: 8px;
width: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.5;
color: var(--texte-principal);
}
.tc-pourquoi-input::placeholder { color: var(--texte-tertiaire); font-style: italic; }
/* Synergie — Souvenir d'une trois choses passée */
.tc-section-souvenir {
margin: 8px 24px 12px;
padding: 12px 16px;
background: rgba(74, 89, 112, 0.05);
border-left: 3px solid var(--bleu-nuit, #4A5970);
border-radius: 0 12px 12px 0;
}
.tc-section-souvenir .tc-section-label { color: var(--bleu-nuit, #4A5970); }
.tc-souvenir-liste {
margin: 8px 0 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.tc-souvenir-liste li {
font-family: var(--font-serif);
font-size: 14px;
font-style: italic;
color: var(--texte-principal);
line-height: 1.45;
}
.tc-footer {
margin: 4px 24px 16px;
font-family: var(--font-sans);
font-size: 11px;
font-style: italic;
color: var(--texte-tertiaire);
text-align: center;
}
.tc-actions {
padding: 8px 24px 24px;
}
.tc-garder {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
background: var(--ocre-signature);
color: white;
border: none;
border-radius: 14px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
letter-spacing: -0.1px;
transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 1px 2px rgba(168, 117, 48, 0.3),
0 4px 12px rgba(168, 117, 48, 0.15);
}
.tc-garder:hover {
box-shadow: 0 1px 2px rgba(168, 117, 48, 0.4),
0 8px 22px rgba(168, 117, 48, 0.25);
}
.tc-garder:active { transform: scale(0.985); }
@media (max-width: 600px) {
.tc-sheet-header { padding: 12px 20px 6px; }
.tc-sheet-accueil, .tc-section-echos, .tc-section-souvenir,
.tc-pourquoi, .tc-footer { margin-left: 20px; margin-right: 20px; }
.tc-champs { padding-left: 20px; padding-right: 20px; }
.tc-actions { padding-left: 20px; padding-right: 20px; }
.tc-echo-label { max-width: 160px; }
}
.image-composant-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--ocre-profond);
letter-spacing: 0.1px;
padding: 2px 4px;
}
/* ============================================================
LIRE — Hub 4 cartes + sous-pages
============================================================ */
.lire-sous-page-titre {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
margin: 0 0 var(--space-large);
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 10px;
}
.lire-recherche {
width: 100%;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 15px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 12px;
outline: none;
transition: border-color 160ms;
color: var(--texte-principal);
margin-bottom: var(--space-medium);
}
.lire-recherche:focus { border-color: var(--ocre-signature); box-shadow: 0 0 0 3px rgba(168, 117, 48, 0.12); }
.lire-recherche::placeholder { color: var(--texte-secondaire); font-style: italic; opacity: 0.7; }
.lire-filtre-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ocre-profond);
margin: 14px 0 8px;
}
.lire-chips-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
/* Sur mobile, scroll horizontal pour ne pas étouffer verticalement */
@media (max-width: 600px) {
.lire-chips-row {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
padding-bottom: 4px;
margin-left: -4px;
margin-right: -4px;
padding-left: 4px;
padding-right: 4px;
}
.lire-chips-row::-webkit-scrollbar { height: 3px; }
.lire-chips-row::-webkit-scrollbar-thumb { background: var(--separateur); border-radius: 3px; }
}
.lire-chip-filtre {
padding: 8px 14px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--texte-secondaire);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
white-space: nowrap;
min-height: 36px;
flex-shrink: 0;
}
.lire-chip-filtre:hover {
border-color: var(--ocre-signature);
color: var(--ocre-signature);
}
.lire-chip-filtre.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
}
.lire-recents-section {
margin-top: 16px;
}
.lire-recents-summary {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--texte-secondaire);
cursor: pointer;
padding: 8px 0;
list-style: none;
}
.lire-recents-summary::-webkit-details-marker,
.lire-recents-summary::marker { display: none; }
.lire-recents-summary::before {
content: '▸';
margin-right: 6px;
font-size: 10px;
display: inline-block;
transition: transform 200ms;
}
.lire-recents-section[open] .lire-recents-summary::before { transform: rotate(90deg); }
.lire-compteur {
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-tertiaire);
letter-spacing: 0.3px;
margin: 14px 0 8px;
}
/* ============================================================
MARCHE-PIED — bouton d'urgence douce dans Souffle
============================================================ */
.marchepied-bouton {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
padding: 16px 18px;
margin: 0 0 var(--space-medium);
background:
radial-gradient(circle at 100% 0%, rgba(168, 82, 61, 0.10) 0%, transparent 60%),
linear-gradient(135deg, #FDF6EF 0%, #F4DDD0 100%);
border: 1px solid rgba(168, 82, 61, 0.25);
border-radius: 18px;
cursor: pointer;
font-family: inherit;
color: var(--texte-principal);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.05),
0 6px 16px rgba(168, 82, 61, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.marchepied-bouton:hover {
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 14px 28px rgba(168, 82, 61, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.marchepied-bouton:active { transform: translateY(0) scale(0.99); }
.marchepied-bouton-icone {
flex: 0 0 auto;
width: 42px; height: 42px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(168, 82, 61, 0.18) 0%, rgba(168, 82, 61, 0.07) 100%);
border: 1px solid rgba(168, 82, 61, 0.28);
color: var(--rouge-terre);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(168, 82, 61, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.marchepied-bouton-icone svg { width: 22px; height: 22px; }
.marchepied-bouton-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marchepied-bouton-titre {
font-family: var(--font-serif);
font-size: 21px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--texte-principal);
}
.marchepied-bouton-meta {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
line-height: 1.35;
}
/* ============================================================
MARCHE-PIED — overlay plein écran
============================================================ */
.marchepied-pleinecran {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: max(env(safe-area-inset-top), 60px) 24px 32px;
gap: 16px;
}
.marchepied-etiquette {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(168, 117, 48, 0.65);
margin: 0;
}
.marchepied-soustitre {
font-family: var(--font-serif);
font-style: italic;
font-size: 17px;
color: var(--texte-secondaire);
text-align: center;
margin: 0 0 4px;
max-width: 28ch;
line-height: 1.4;
}
.marchepied-instruction {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
color: var(--texte-principal);
text-align: center;
margin: 8px 0 0;
letter-spacing: -0.4px;
max-width: 22ch;
line-height: 1.25;
transition: opacity 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.marchepied-instruction.marchepied-verset {
font-style: italic;
font-size: 24px;
max-width: 28ch;
margin-top: 24px;
}
.marchepied-instruction.marchepied-fin {
font-size: 32px;
font-style: italic;
color: var(--ocre-signature);
}
.marchepied-reference {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 1px;
color: var(--texte-tertiaire);
text-align: center;
margin: 6px 0 0;
text-transform: uppercase;
}
@media (max-width: 360px) {
.marchepied-instruction { font-size: 24px; }
.marchepied-instruction.marchepied-verset { font-size: 20px; }
.marchepied-soustitre { font-size: 15px; }
}
/* ============================================================
SOUFFLE — sous-page enrichie
============================================================ */
.souffle-section {
padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
/* Bandeau d'ouverture */
.page-entete {
text-align: center;
margin: 4px 0 22px;
padding: 0 12px;
}
.page-entete-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ocre-signature);
margin-bottom: 6px;
}
.page-entete-titre {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 500;
color: var(--texte-principal);
letter-spacing: -0.4px;
margin: 0 0 10px;
line-height: 1.1;
}
.page-entete-citation {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--texte-secondaire);
margin: 0;
line-height: 1.45;
max-width: 32ch;
margin-inline: auto;
}
/* Séparateur ornemental */
.page-orne {
display: flex;
align-items: center;
gap: 12px;
margin: 22px auto;
max-width: 220px;
color: rgba(168, 117, 48, 0.4);
}
.page-orne-trait {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(168, 117, 48, 0.35), transparent);
}
.page-orne-glyphe { width: 24px; height: 24px; flex: 0 0 auto; }
.page-section-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--texte-tertiaire);
text-align: center;
margin: 0 0 14px;
}
/* Cartes de respiration */
.souffle-cartes {
display: flex;
flex-direction: column;
gap: 12px;
}
.souffle-carte {
display: flex;
align-items: stretch;
gap: 14px;
width: 100%;
text-align: left;
padding: 16px 18px;
background:
radial-gradient(circle at 0% 50%, rgba(168, 117, 48, 0.06) 0%, transparent 55%),
linear-gradient(135deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.16);
border-radius: 18px;
cursor: pointer;
font-family: inherit;
color: var(--texte-principal);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 14px rgba(45, 36, 24, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.souffle-carte:hover {
transform: translateY(-2px);
border-color: rgba(168, 117, 48, 0.32);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 12px 24px rgba(45, 36, 24, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.souffle-carte:active { transform: translateY(0) scale(0.99); }
.souffle-carte-visuel {
flex: 0 0 auto;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.10) 0%, rgba(168, 117, 48, 0.03) 100%);
border: 1px solid rgba(168, 117, 48, 0.16);
display: flex; align-items: center; justify-content: center;
color: var(--ocre-signature);
align-self: center;
}
.souffle-carte-visuel svg { width: 100%; height: 100%; padding: 4px; box-sizing: border-box; }
/* Variations chromatiques par carte */
.souffle-carte:nth-child(2) .souffle-carte-visuel {
background: linear-gradient(135deg, rgba(122, 139, 111, 0.10) 0%, rgba(122, 139, 111, 0.03) 100%);
border-color: rgba(122, 139, 111, 0.20);
color: var(--vert-profond);
}
.souffle-carte:nth-child(3) .souffle-carte-visuel {
background: linear-gradient(135deg, rgba(74, 89, 112, 0.10) 0%, rgba(74, 89, 112, 0.03) 100%);
border-color: rgba(74, 89, 112, 0.20);
color: var(--bleu-nuit);
}
.souffle-carte-corps {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.souffle-carte-ligne-titre {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.souffle-carte-titre {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.3px;
color: var(--texte-principal);
margin: 0;
line-height: 1.1;
}
.souffle-carte-duree {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
white-space: nowrap;
}
.souffle-carte-rythme {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.5px;
color: var(--ocre-signature);
margin: 0;
font-weight: 500;
}
.souffle-carte:nth-child(2) .souffle-carte-rythme { color: var(--vert-profond); }
.souffle-carte:nth-child(3) .souffle-carte-rythme { color: var(--bleu-nuit); }
.souffle-carte-description {
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-secondaire);
margin: 2px 0 0;
line-height: 1.4;
}
.souffle-carte-source {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1px;
color: var(--texte-tertiaire);
margin: 2px 0 0;
}
/* Pied de page poétique */
.page-pied {
text-align: center;
margin: 26px auto 0;
padding: 18px 16px 4px;
border-top: 1px solid rgba(168, 117, 48, 0.12);
max-width: 32ch;
}
.page-pied-verset {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: var(--texte-secondaire);
margin: 0 0 6px;
line-height: 1.4;
}
.page-pied-ref {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
@media (max-width: 360px) {
.page-entete-titre { font-size: 26px; }
.page-entete-citation { font-size: 14px; }
.souffle-carte { padding: 14px 14px; gap: 12px; }
.souffle-carte-visuel { width: 50px; height: 50px; }
.souffle-carte-titre { font-size: 20px; }
.souffle-carte-description { font-size: 13px; }
}
@media (min-width: 700px) {
.souffle-section { max-width: 580px; margin-inline: auto; }
.page-entete-titre { font-size: 36px; }
.page-entete-citation { font-size: 18px; }
.souffle-carte { padding: 18px 22px; }
.souffle-carte-visuel { width: 68px; height: 68px; }
.souffle-carte-titre { font-size: 24px; }
}
/* ============================================================
POUR CE MOMENT — sous-page enrichie (verset long + explication)
============================================================ */
.pource-section {
padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.pource-reference {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ocre-signature);
text-align: center;
margin: 0 0 12px;
}
.pource-verset {
margin: 0 0 22px;
padding: 22px 20px 24px;
background:
radial-gradient(circle at 0% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 50%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 4px 18px rgba(45, 36, 24, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
position: relative;
}
/* Petits guillemets ornementaux en watermark */
.pource-verset::before,
.pource-verset::after {
font-family: var(--font-serif);
font-size: 56px;
color: rgba(168, 117, 48, 0.15);
position: absolute;
line-height: 1;
pointer-events: none;
}
.pource-verset::before { content: '\201C'; top: 4px; left: 10px; }
.pource-verset::after { content: '\201D'; bottom: -8px; right: 14px; }
.pource-verset-texte {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 400;
font-style: italic;
color: var(--texte-principal);
line-height: 1.55;
margin: 0;
letter-spacing: 0;
text-align: left;
position: relative;
z-index: 1;
}
.pource-passage {
margin: 0 0 18px;
padding: 18px 20px 20px;
background: rgba(245, 239, 230, 0.55);
border: 1px solid rgba(168, 117, 48, 0.15);
border-radius: 14px;
}
.pource-passage .page-section-eyebrow {
text-align: left;
margin: 0 0 8px;
}
.pource-passage-corps {
font-family: var(--font-serif);
font-size: 16px;
color: var(--texte-secondaire);
line-height: 1.65;
margin: 0;
letter-spacing: 0;
}
/* Lien vers la lecture longue (POC) — apparaît si l'œuvre est disponible */
.pource-lecture-lien {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
margin: 4px 0 18px;
padding: 12px 14px;
background:
radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 12%, transparent) 0%, transparent 60%),
linear-gradient(135deg, #FDFBF6 0%, #F1EAD9 100%);
border: 1px solid color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 28%, rgba(168, 117, 48, 0.18));
border-radius: 14px;
cursor: pointer;
font-family: inherit;
color: var(--texte-principal);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms,
box-shadow 240ms;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.pource-lecture-lien:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 55%, var(--ocre-signature));
box-shadow: 0 4px 14px rgba(45, 36, 24, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.pource-lecture-icone {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 16%, transparent) 0%, color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 5%, transparent) 100%);
border: 1px solid color-mix(in srgb, var(--lecture-couleur, var(--ocre-signature)) 22%, rgba(168, 117, 48, 0.18));
color: var(--lecture-couleur, var(--ocre-signature));
display: inline-flex; align-items: center; justify-content: center;
}
.pource-lecture-icone svg { width: 18px; height: 18px; }
.pource-lecture-corps {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.pource-lecture-titre {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
color: var(--texte-principal);
letter-spacing: -0.1px;
line-height: 1.2;
}
.pource-lecture-meta {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--texte-secondaire);
}
.pource-lecture-fleche {
font-size: 22px;
color: var(--lecture-couleur, var(--ocre-signature));
line-height: 1;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pource-lecture-lien:hover .pource-lecture-fleche { transform: translateX(3px); }
.pource-explication {
margin: 0 0 22px;
padding: 16px 18px 18px;
background: rgba(255, 251, 245, 0.6);
border-left: 3px solid rgba(168, 117, 48, 0.35);
border-radius: 0 14px 14px 0;
}
.pource-explication .page-section-eyebrow {
text-align: left;
margin: 0 0 8px;
}
.pource-explication-corps {
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-secondaire);
line-height: 1.6;
margin: 0;
letter-spacing: 0;
}
/* Capitale ornée — première lettre du paragraphe en grand serif ocre */
.pource-explication-corps::first-letter {
font-family: var(--font-serif);
font-size: 2.6em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 8px 0 0;
margin-top: 4px;
}
.pource-question {
margin: 0 0 22px;
padding: 18px 20px 20px;
background:
linear-gradient(160deg, rgba(122, 139, 111, 0.08) 0%, rgba(122, 139, 111, 0.02) 100%);
border: 1px solid rgba(122, 139, 111, 0.22);
border-radius: 18px;
text-align: center;
}
.pource-question .page-section-eyebrow {
color: var(--vert-profond);
}
.pource-question-texte {
font-family: var(--font-serif);
font-style: italic;
font-size: 19px;
color: var(--texte-principal);
line-height: 1.4;
margin: 6px 0 0;
max-width: 28ch;
margin-inline: auto;
}
.pource-contexte-lien {
display: block;
margin: 6px auto 0;
background: none;
border: none;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 1px;
color: var(--ocre-signature);
cursor: pointer;
padding: 10px 14px;
border-radius: 999px;
transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pource-contexte-lien span { margin-left: 4px; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.pource-contexte-lien:hover {
background: rgba(168, 117, 48, 0.08);
color: var(--ocre-profond);
}
.pource-contexte-lien:hover span { transform: translateX(3px); }
@media (max-width: 360px) {
.pource-verset { padding: 18px 16px 22px; }
.pource-verset-texte { font-size: 17px; }
.pource-explication-corps { font-size: 14px; }
.pource-question-texte { font-size: 17px; }
}
@media (min-width: 700px) {
.pource-section { max-width: 620px; margin-inline: auto; }
.pource-verset { padding: 28px 28px 30px; }
.pource-verset-texte { font-size: 22px; }
.pource-explication-corps { font-size: 16px; }
}
/* ============================================================
FOCUS DU JOUR — sous-page enrichie
============================================================ */
.focus-section {
padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.focus-carte {
position: relative;
margin: 0 0 20px;
padding: 28px 24px 24px;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.10) 0%, transparent 55%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 22px;
text-align: center;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.04),
0 6px 22px rgba(45, 36, 24, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.focus-carte-glyphe {
width: 56px;
height: 56px;
border-radius: 18px;
margin: 0 auto 14px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.14) 0%, rgba(168, 117, 48, 0.05) 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
color: var(--ocre-signature);
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(168, 117, 48, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.focus-carte-glyphe svg { width: 28px; height: 28px; }
.focus-carte-eyebrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--texte-tertiaire);
margin: 0 0 8px;
letter-spacing: 0.3px;
}
.focus-carte-titre {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 500;
color: var(--texte-principal);
line-height: 1.25;
margin: 0 0 22px;
letter-spacing: -0.4px;
}
.focus-carte-action {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px 12px 26px;
background: var(--ocre-signature);
color: #FDFBF7;
border: none;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.10),
0 6px 16px rgba(168, 117, 48, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
background 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.focus-carte-action-glyphe {
font-size: 18px;
line-height: 1;
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.focus-carte-action:hover {
background: var(--ocre-clair);
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.12),
0 14px 28px rgba(168, 117, 48, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.focus-carte-action:hover .focus-carte-action-glyphe { transform: translateX(3px); }
.focus-carte-action:active { transform: translateY(0) scale(0.98); }
@media (max-width: 360px) {
.focus-carte { padding: 22px 18px 20px; }
.focus-carte-titre { font-size: 22px; }
.focus-carte-glyphe { width: 48px; height: 48px; }
.focus-carte-glyphe svg { width: 24px; height: 24px; }
}
@media (min-width: 700px) {
.focus-section { max-width: 580px; margin-inline: auto; }
.focus-carte { padding: 36px 32px 30px; }
.focus-carte-titre { font-size: 30px; }
}
/* ============================================================
ONBOARDING ÉTHIQUE — modal d'accueil parchemin
============================================================ */
.onboarding-ethique {
align-items: center;
justify-content: center;
padding: max(env(safe-area-inset-top), 60px) 24px max(env(safe-area-inset-bottom), 40px);
}
.onboarding-conteneur {
max-width: 460px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.onboarding-glyphe {
width: 64px;
height: 64px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.16) 0%, rgba(168, 117, 48, 0.04) 100%);
border: 1px solid rgba(168, 117, 48, 0.24);
color: var(--ocre-signature);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(168, 117, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.onboarding-glyphe svg { width: 30px; height: 30px; }
.onboarding-titre {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 500;
color: var(--texte-principal);
margin: 6px 0 12px;
letter-spacing: -0.4px;
line-height: 1.1;
}
.onboarding-explication {
margin: 0 0 22px;
padding: 18px 20px 20px;
background: rgba(255, 251, 245, 0.6);
border-left: 3px solid rgba(168, 117, 48, 0.35);
border-radius: 0 14px 14px 0;
text-align: left;
width: 100%;
}
.onboarding-explication-corps {
font-family: var(--font-serif);
font-size: 15px;
color: var(--texte-secondaire);
line-height: 1.6;
margin: 0;
}
.onboarding-explication-corps::first-letter {
font-family: var(--font-serif);
font-size: 2.6em;
line-height: 0.9;
font-weight: 500;
color: var(--ocre-signature);
float: left;
padding: 4px 8px 0 0;
margin-top: 4px;
}
.onboarding-action { margin-top: 4px; }
@media (max-width: 360px) {
.onboarding-titre { font-size: 26px; }
.onboarding-glyphe { width: 54px; height: 54px; }
.onboarding-glyphe svg { width: 26px; height: 26px; }
.onboarding-explication-corps { font-size: 14px; }
}
/* ============================================================
MODAL PARCHEMIN — panneau partagé pour modals de création/picker
============================================================ */
.modal-parchemin-panneau,
.picker-stoicien-panneau {
max-width: 540px;
width: 100%;
background:
radial-gradient(circle at 50% 0%, rgba(168, 117, 48, 0.06) 0%, transparent 50%),
linear-gradient(160deg, #FDFBF6 0%, #F4ECDE 100%);
border: 1px solid rgba(168, 117, 48, 0.20);
border-radius: 22px;
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.06),
0 18px 40px rgba(45, 36, 24, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
padding: 28px 22px 24px;
}
.modal-parchemin-champ {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 0 18px;
}
.modal-parchemin-champ .champ-edition-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin: 0;
}
.modal-parchemin-champ .champ-edition {
font-family: var(--font-serif);
font-size: 18px;
padding: 12px 14px;
background: rgba(255, 251, 245, 0.7);
border: 1px solid rgba(168, 117, 48, 0.22);
border-radius: 12px;
color: var(--texte-principal);
transition: border-color 200ms, background 200ms;
}
.modal-parchemin-champ .champ-edition:focus {
outline: none;
border-color: var(--ocre-signature);
background: #FDFBF7;
}
.modal-parchemin-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 14px;
}
.modal-parchemin-actions .btn-primaire {
background: var(--ocre-signature);
color: #FDFBF7;
border-radius: 999px;
padding: 12px 22px;
border: none;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 12px rgba(168, 117, 48, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform 200ms, background 200ms, box-shadow 240ms;
}
.modal-parchemin-actions .btn-primaire:hover {
background: var(--ocre-clair);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(168, 117, 48, 0.30);
}
.modal-parchemin-actions .btn-tertiaire {
background: none;
border: none;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
cursor: pointer;
padding: 10px 16px;
border-radius: 999px;
transition: background 200ms, color 200ms;
}
.modal-parchemin-actions .btn-tertiaire:hover {
background: rgba(168, 117, 48, 0.06);
color: var(--texte-secondaire);
}
/* Espacement spécifique picker-stoicien */
.picker-stoicien .page-entete { margin-bottom: 20px; }
.picker-groupe { margin-bottom: 22px; }
.picker-groupe:last-of-type { margin-bottom: 16px; }
.picker-groupe-eyebrow {
text-align: left;
margin: 0 0 10px;
padding-left: 2px;
}
.picker-stoicien-cartes {
display: flex;
flex-direction: column;
gap: 10px;
}
.picker-stoicien-carte {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
padding: 14px 16px;
background:
radial-gradient(circle at 0% 0%, rgba(122, 139, 111, 0.07) 0%, transparent 50%),
linear-gradient(135deg, #FDFBF6 0%, #F1EAD9 100%);
border: 1px solid rgba(122, 139, 111, 0.20);
border-radius: 14px;
cursor: pointer;
font-family: inherit;
color: var(--texte-principal);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.03),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.picker-stoicien-carte:hover {
transform: translateY(-1px);
border-color: rgba(122, 139, 111, 0.40);
box-shadow:
0 1px 2px rgba(45, 36, 24, 0.05),
0 8px 18px rgba(45, 36, 24, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.picker-stoicien-carte:active { transform: translateY(0) scale(0.99); }
.picker-stoicien-carte-glyphe {
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(122, 139, 111, 0.16) 0%, rgba(122, 139, 111, 0.05) 100%);
border: 1px solid rgba(122, 139, 111, 0.22);
color: var(--vert-profond);
display: inline-flex; align-items: center; justify-content: center;
}
.picker-stoicien-carte-glyphe svg { width: 20px; height: 20px; }
.picker-stoicien-carte-corps {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.picker-stoicien-carte-titre {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: var(--texte-principal);
letter-spacing: -0.2px;
line-height: 1.15;
}
.picker-stoicien-carte-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--texte-secondaire);
line-height: 1.35;
margin-top: 2px;
}
.picker-stoicien-carte-meta {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--texte-tertiaire);
margin-top: 2px;
}
.picker-stoicien-actions {
text-align: center;
margin-top: 14px;
}
.picker-stoicien-annuler {
background: none;
border: none;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: var(--texte-tertiaire);
cursor: pointer;
padding: 10px 16px;
border-radius: 999px;
transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1),
color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.picker-stoicien-annuler:hover {
background: rgba(168, 117, 48, 0.06);
color: var(--texte-secondaire);
}
@media (max-width: 360px) {
.picker-stoicien-panneau { padding: 22px 16px 18px; }
.picker-stoicien-carte { padding: 12px 14px; gap: 12px; }
.picker-stoicien-carte-titre { font-size: 17px; }
.picker-stoicien-carte-desc { font-size: 12px; }
}
/* ============================================================
SOUS-PAGE PARCHEMIN — conteneur générique pour pages Vivre/Lire
============================================================ */
.sous-page-parchemin {
position: relative;
padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
/* Bouton flottant en haut-droite (édition, ajout) — au-dessus du page-entete */
.sous-page-action-flottante {
position: absolute;
top: 6px;
right: 0;
z-index: 3;
display: flex;
gap: 8px;
}
.sous-page-action-flottante .vivre-edit-btn,
.sous-page-action-flottante .vivre-btn-ajouter {
width: 38px;
height: 38px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(168, 117, 48, 0.14) 0%, rgba(168, 117, 48, 0.05) 100%);
border: 1px solid rgba(168, 117, 48, 0.22);
color: var(--ocre-signature);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
padding: 0;
font-size: 22px;
font-weight: 400;
line-height: 1;
box-shadow: 0 2px 6px rgba(168, 117, 48, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sous-page-action-flottante .vivre-edit-btn:hover,
.sous-page-action-flottante .vivre-btn-ajouter:hover {
transform: translateY(-1px);
background: linear-gradient(135deg, rgba(168, 117, 48, 0.22) 0%, rgba(168, 117, 48, 0.10) 100%);
}
.sous-page-action-flottante .vivre-edit-btn svg { width: 18px; height: 18px; }
.lire-categorie-titre {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
font-style: italic;
color: var(--ocre-profond);
margin: 18px 0 8px;
}
.lire-plus-resultats {
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-tertiaire);
font-style: italic;
margin: 6px 0 14px;
text-align: center;
}
/* TRACES — Livre Trois choses */
.lire-livre-trois {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.lire-livre-page {
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 1px 2px rgba(45, 36, 24, 0.04);
}
.lire-livre-date {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ocre-profond);
margin: 0 0 10px;
}
.lire-livre-liste {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.lire-livre-liste li {
display: flex;
gap: 12px;
align-items: flex-start;
}
.lire-livre-num {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(168, 117, 48, 0.12);
color: var(--ocre-signature);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.lire-livre-texte {
flex: 1;
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.5;
color: var(--texte-principal);
}
.lire-livre-pourquoi {
font-family: var(--font-serif);
font-size: 14px;
font-style: italic;
color: var(--texte-secondaire);
border-top: 1px solid var(--separateur);
padding-top: 10px;
margin: 12px 0 0;
line-height: 1.45;
}
/* Compagnon sous-page */
.lire-compagnon-intro {
font-family: var(--font-serif);
font-size: 16px;
line-height: 1.55;
color: var(--texte-principal);
background: rgba(168, 117, 48, 0.05);
border-left: 3px solid var(--ocre-signature);
padding: 12px 14px;
border-radius: 0 10px 10px 0;
margin: 0;
}
.lire-compagnon-note {
font-family: var(--font-sans);
font-size: 12px;
color: var(--texte-tertiaire);
font-style: italic;
text-align: center;
margin-top: 20px;
padding: 0 20px;
}
.image-composant-date svg {
width: 14px;
height: 14px;
opacity: 0.85;
flex-shrink: 0;
}
.image-composant-actions {
display: flex;
gap: 6px;
}
.image-composant-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 10px;
background: var(--bg-carte);
border: 1px solid var(--separateur);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
color: var(--texte-secondaire);
cursor: pointer;
transition: all 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.image-composant-btn:hover {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
color: white;
}
.image-composant-btn svg { width: 14px; height: 14px; }
.image-composant-btn.supp:hover {
background: rgba(180, 60, 60, 0.08);
border-color: rgba(180, 60, 60, 0.4);
color: #B43C3C;
}
@media (max-width: 600px) {
.image-composant-preview { max-height: 220px; }
.image-composant-cta { padding: 14px 8px; font-size: 12px; }
}
/* Modal plante personnalisée */
.plant-custom-overlay {
position: fixed;
inset: 0;
background: rgba(30, 24, 15, 0.65);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
display: flex;
align-items: flex-end;
justify-content: center;
z-index: 2300;
animation: popup-fadein 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-custom-overlay.fermeture {
opacity: 0;
transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plant-custom-modal {
background: #FDFBF6;
border-radius: 22px 22px 0 0;
width: 100%;
max-width: 560px;
max-height: 92vh;
overflow-y: auto;
box-shadow:
0 -2px 0 rgba(255, 255, 255, 0.6) inset,
0 -16px 48px rgba(30, 24, 15, 0.35);
animation: sheet-up 380ms cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 700px) {
.plant-custom-overlay { align-items: center; padding: 20px; }
.plant-custom-modal { border-radius: 22px; max-height: 80vh; }
}
.plant-custom-corps {
padding: 8px 24px 16px;
display: flex;
flex-direction: column;
gap: 18px;
}
.plant-custom-champ {
display: flex;
flex-direction: column;
gap: 8px;
}
.plant-custom-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ocre-profond);
}
.plant-custom-input {
width: 100%;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 15px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
border-radius: 12px;
outline: none;
transition: border-color 160ms;
}
.plant-custom-input:focus { border-color: var(--ocre-signature); }
.plant-custom-emojis {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.plant-custom-emoji-btn {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--bg-carte);
border: 1.5px solid var(--separateur);
font-size: 18px;
cursor: pointer;
transition: all 140ms cubic-bezier(0.22, 1, 0.36, 1);
display: inline-flex;
align-items: center;
justify-content: center;
}
.plant-custom-emoji-btn:hover { border-color: var(--ocre-signature); transform: translateY(-1px); }
.plant-custom-emoji-btn.actif {
background: var(--ocre-signature);
border-color: var(--ocre-signature);
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(168, 117, 48, 0.3);
}
.plant-custom-types {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
@media (max-width: 600px) {
.plant-custom-corps { padding: 8px 20px 16px; }
}
@media (max-width: 600px) {
.jardin-plan-wrapper { padding: 8px; border-radius: 14px; }
.jardin-fab { bottom: 80px; right: 16px; width: 52px; height: 52px; } /* éviter la barre nav */
.zone-sheet-section, .zone-sheet-types { padding-left: 20px; padding-right: 20px; }
.zone-sheet-header { padding: 12px 20px 6px; }
.zone-sheet-nom { font-size: 22px; margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); }
.plant-picker-header { padding: 12px 20px 6px; }
.plant-picker-recherche, .plant-picker-filtres { margin-left: 20px; margin-right: 20px; padding-left: 0; padding-right: 0; }
.plant-picker-grille { padding: 4px 20px 24px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.plant-carte-emoji { font-size: 28px; }
}