/* Lancer son projet avec Dieu — feuille de style unique (site + espace membre)
   Construite à partir de la charte graphique : papier lin, encre bleu de Prusse, or de l'aube.
   Mise en page : colonne de lecture 680 px pour les cartes, 1120 px pour la vente ; gouttière 16 px minimum. */
:root {
  --lin: #F8F0E1; --lin-profond: #EFE2C9; --papier: #FFFAF1;
  --encre: #1C2A48; --encre-douce: #5B5A6E; --horizon: #2D5A8C;
  --or-aube: #83561A; --or-soleil: #E9A93A; --sur-soleil: #1C2A48;
  --ciel-aube: #EDE3E3; --ciel-miel: #F6DDB0;
  --bande: #1C2A48; --bande-bas: #3A3150; --lueur: rgba(233,169,58,.42); --sur-bande: #F8F0E1; --sur-bande-doux: #DCCFBD;
  --ligne: rgba(60,40,20,.13); --ligne-forte: rgba(60,40,20,.26);
  --vert-pousse: #2F6B4A; --brique: #A3402F;
  --ombre-carte: 0 1px 2px rgba(70,45,20,.10), 0 16px 36px -20px rgba(70,45,20,.38);
  --ombre-levee: 0 2px 4px rgba(70,45,20,.12), 0 24px 48px -22px rgba(70,45,20,.48);
  --font-titre: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-texte: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-interface: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --espace-1: 4px; --espace-2: 8px; --espace-3: 16px; --espace-4: 24px; --espace-5: 40px; --espace-6: 64px; --espace-7: 112px;
  --arrondi-champ: 8px; --arrondi-carte: 14px; --arrondi-bloc: 22px; --arrondi-pilule: 999px;
  --gouttiere-g: max(16px, env(safe-area-inset-left, 0px)); --gouttiere-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lin: #15131F; --lin-profond: #1C1A29; --papier: #252334;
    --encre: #F3ECE0; --encre-douce: #BDB4A8; --horizon: #9DBBE0;
    --or-aube: #E6B868; --ciel-aube: #2A2438; --ciel-miel: #3B2E22;
    --bande: #2A2742; --bande-bas: #3B2C3A; --lueur: rgba(233,169,58,.30); --sur-bande: #F3ECE0; --sur-bande-doux: #CFC4B4;
    --ligne: rgba(243,236,224,.14); --ligne-forte: rgba(243,236,224,.3);
    --vert-pousse: #86C9A0; --brique: #F0A08E;
    --ombre-carte: 0 1px 2px rgba(0,0,0,.45), 0 16px 36px -20px rgba(0,0,0,.75);
    --ombre-levee: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -22px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --lin: #15131F; --lin-profond: #1C1A29; --papier: #252334;
  --encre: #F3ECE0; --encre-douce: #BDB4A8; --horizon: #9DBBE0;
  --or-aube: #E6B868; --ciel-aube: #2A2438; --ciel-miel: #3B2E22;
  --bande: #2A2742; --bande-bas: #3B2C3A; --lueur: rgba(233,169,58,.30); --sur-bande: #F3ECE0; --sur-bande-doux: #CFC4B4;
  --ligne: rgba(243,236,224,.14); --ligne-forte: rgba(243,236,224,.3);
  --vert-pousse: #86C9A0; --brique: #F0A08E;
  --ombre-carte: 0 1px 2px rgba(0,0,0,.45), 0 16px 36px -20px rgba(0,0,0,.75);
  --ombre-levee: 0 2px 4px rgba(0,0,0,.5), 0 24px 48px -22px rgba(0,0,0,.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--lin); color: var(--encre); font: 400 17px/1.6 var(--font-interface); }
img, svg { max-width: 100%; }
a { color: var(--horizon); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 600; line-height: 1.12; color: var(--encre); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 5.2vw, 3.75rem); font-variation-settings: "opsz" 36; letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.25rem); font-variation-settings: "opsz" 36; }
h3 { font-size: 1.25rem; font-variation-settings: "opsz" 36; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--horizon); outline-offset: 3px; border-radius: 4px; }
.sauter { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--papier); color: var(--encre); padding: 10px 14px; border-radius: var(--arrondi-champ); }
.sauter:focus { left: 16px; }
.cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.etiquette { font: 700 12px/1.3 var(--font-interface); letter-spacing: .16em; text-transform: uppercase; color: var(--or-aube); }
.doux { color: var(--encre-douce); }
.petit { font-size: 14px; color: var(--encre-douce); }
.chiffres { font-variant-numeric: tabular-nums; }

/* Conteneurs */
.large, .etroit, .page { padding-left: var(--gouttiere-g); padding-right: var(--gouttiere-d); margin-inline: auto; }
.large { max-width: calc(1120px + 32px); }
.etroit { max-width: calc(720px + 32px); }
.page { max-width: calc(760px + 32px); padding-block: var(--espace-5) var(--espace-6); display: grid; gap: var(--espace-4); }
.page > * { min-width: 0; }

/* En-tête */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--papier); }
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--ligne); }
@supports not (background: color-mix(in srgb, red, blue)) { .entete { background: var(--papier); } }
.entete__in { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); min-height: 64px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.marque svg { width: 36px; height: 36px; flex: none; }
.marque__nom { font: 600 18px/1.1 var(--font-titre); font-variation-settings: "opsz" 36; }
.marque__nom em { color: var(--or-aube); font-style: italic; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { padding: 8px 12px; border-radius: var(--arrondi-pilule); color: var(--encre-douce); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--lin-profond); color: var(--encre); }
@media (max-width: 560px) { .marque__nom { font-size: 15px; } .nav a { padding: 6px 9px; font-size: 14px; } .marque__nom .long { display: none; } }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2); min-height: 48px; padding: 0 26px;
  border-radius: var(--arrondi-pilule); border: 2px solid var(--encre); background: var(--encre); color: var(--lin);
  font: 600 16px/1.2 var(--font-interface); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; text-align: center; }
.bouton:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.bouton--second { background: transparent; color: var(--encre); }
.bouton--soleil { background: var(--or-soleil); border-color: var(--or-soleil); color: var(--sur-soleil); }
.bouton--plein { width: 100%; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.lien-discret { color: var(--encre-douce); }

/* Messages */
.messages { display: grid; gap: var(--espace-2); }
.message { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--arrondi-champ); font-size: 15px; line-height: 1.45; }
.message svg { flex: none; margin-top: 2px; }
.message--ok { background: var(--papier); color: var(--vert-pousse); box-shadow: inset 0 0 0 1.5px var(--vert-pousse); }
.message--info { background: var(--ciel-aube); color: var(--encre); }
.message--erreur { background: var(--papier); color: var(--brique); box-shadow: inset 0 0 0 1.5px var(--brique); }

/* Formulaires */
.formulaire { background: var(--papier); border-radius: var(--arrondi-carte); box-shadow: var(--ombre-carte); padding: var(--espace-5) clamp(20px, 5vw, 40px); display: grid; gap: var(--espace-3); }
.formulaire--etroit { max-width: 480px; width: 100%; margin-inline: auto; }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: 15px; }
.champ .aide { font-size: 13px; color: var(--encre-douce); }
.champ input, .champ textarea, .champ select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--ligne-forte); border-radius: var(--arrondi-champ); background: var(--lin); color: var(--encre); font: 400 16px/1.4 var(--font-interface); }
.champ textarea { min-height: 170px; font: 400 17px/1.55 var(--font-texte); resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--horizon); box-shadow: 0 0 0 3px var(--ciel-aube); }
.case { display: flex; gap: 10px; align-items: center; font-weight: 400 !important; }
.case input { width: 20px; height: 20px; accent-color: var(--horizon); }
.liens-form { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 15px; }

/* Pastille, chemin des 30 jalons */
.pastille { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--or-soleil); color: var(--sur-soleil); font: 600 26px/1 var(--font-titre); font-variant-numeric: tabular-nums; flex: none; }
.chemin { position: relative; display: grid; grid-template-columns: repeat(30, 1fr); align-items: center; padding: 12px 0; list-style: none; margin: 0; }
.chemin::before { content: ""; position: absolute; left: 1.6%; right: 1.6%; top: 50%; height: 2px; background: var(--ligne-forte); }
.jalon { position: relative; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 2px var(--ligne-forte); }
.jalon--vecu { background: var(--vert-pousse); box-shadow: none; }
.jalon--sabbat { width: 14px; height: 7px; border-radius: 14px 14px 0 0; background: var(--or-aube); box-shadow: none; transform: translateY(-3px); }
.jalon--sabbat.jalon--vecu { background: var(--vert-pousse); }
.jalon--jour { width: 20px; height: 20px; border-radius: 50%; background: var(--or-soleil); box-shadow: 0 0 0 4px var(--papier); transform: none; }
.chemin-legende { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .jalon { width: 7px; height: 7px; } .jalon--sabbat { width: 10px; height: 5px; } .jalon--jour { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--papier); } }

/* Accueil membre */
.salut { display: grid; gap: var(--espace-3); }
.salut__ligne { display: flex; align-items: center; gap: var(--espace-3); }
.encadre { background: var(--papier); border-radius: var(--arrondi-carte); box-shadow: var(--ombre-carte); padding: var(--espace-4) clamp(20px, 4vw, var(--espace-5)); display: grid; gap: var(--espace-3); }
.encadre--ciel { background: linear-gradient(180deg, var(--ciel-aube), var(--papier) 70%); }
.encadre--bande { background: var(--bande); color: var(--sur-bande); box-shadow: none; }
.encadre--bande h2, .encadre--bande h3 { color: var(--sur-bande); }
.encadre--bande .etiquette { color: var(--or-soleil); }
.rangee { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-3); align-items: center; }

/* Carte du parcours */
.carte { background: var(--papier); border-radius: var(--arrondi-carte); box-shadow: var(--ombre-carte); padding: clamp(24px, 5vw, var(--espace-5)); display: grid; gap: var(--espace-4); }
.carte--sabbat { background: linear-gradient(180deg, var(--ciel-aube), var(--papier) 40%); }
.carte__tete { display: flex; align-items: center; gap: var(--espace-3); }
.carte__titre { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-top: var(--espace-2); }
.verset { margin: 0; padding-left: 18px; border-left: 2px solid var(--or-soleil); }
.verset p { font: italic 400 19px/1.5 var(--font-texte); margin-bottom: 6px; }
.verset cite { font: normal 400 15px/1.4 var(--font-texte); color: var(--encre-douce); }
.bloc h2 { font: 600 19px/1.35 var(--font-interface); margin-bottom: 6px; }
.bloc p { font: 400 17px/1.65 var(--font-texte); }
.bloc--tache { background: var(--lin-profond); border-radius: var(--arrondi-bloc); padding: var(--espace-4); }
.bloc--priere p { font-style: italic; }
.bloc--preuve { border-top: 1px solid var(--ligne); padding-top: var(--espace-4); display: grid; gap: var(--espace-3); }
.carte-nav { display: flex; justify-content: space-between; gap: var(--espace-3); font-weight: 600; font-size: 15px; }
.carte-nav a { text-decoration: none; }
.carte-nav span { min-width: 1px; }

/* Grille du parcours */
.semaine { display: grid; gap: var(--espace-3); }
.semaine h2 { font-size: 1.3rem; }
.grille { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tuile > a, .tuile > div { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; height: 100%; min-height: 128px; padding: 14px; border-radius: var(--arrondi-carte); background: var(--papier); color: var(--encre); text-decoration: none; border: 1.5px solid var(--ligne); transition: box-shadow .15s ease, border-color .15s ease; }
.tuile > a:hover { border-color: var(--horizon); box-shadow: var(--ombre-carte); }
.tuile__n { font: 600 24px/1 var(--font-titre); color: var(--or-aube); font-variant-numeric: tabular-nums; }
.tuile__titre { font-weight: 600; font-size: 15px; line-height: 1.3; }
.tuile__etat { font-size: 13px; color: var(--encre-douce); display: flex; align-items: center; gap: 6px; }
.etat-vecue > a { background: var(--lin-profond); border-color: transparent; }
.etat-vecue .tuile__etat { color: var(--vert-pousse); font-weight: 600; }
.etat-du-jour > a { border-color: var(--or-soleil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--or-soleil) 35%, transparent); }
.etat-a-venir > div { border-style: dashed; color: var(--encre-douce); }
.etat-verrouillee > a { border-style: dashed; }
.sabbat > a, .sabbat > div { background: linear-gradient(180deg, var(--ciel-aube), var(--papier)); }

/* Badges */
.badges { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.badge { display: grid; justify-items: center; gap: 6px; padding: var(--espace-3) 10px; background: var(--papier); border-radius: var(--arrondi-carte); text-align: center; }
.badge__rond { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px dashed var(--ligne-forte); color: var(--encre-douce); font: 700 14px/1 var(--font-interface); font-variant-numeric: tabular-nums; }
.badge--obtenu .badge__rond { border: 0; background: var(--or-soleil); color: var(--sur-soleil); }
.badge strong { font: 600 16px/1.2 var(--font-titre); }
.badge span:last-child { font-size: 13px; color: var(--encre-douce); line-height: 1.3; }

/* Offres */
.offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--espace-4); align-items: stretch; }
.offre { position: relative; display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-5) clamp(20px, 4vw, 32px); background: var(--papier); border-radius: var(--arrondi-carte); box-shadow: var(--ombre-carte); }
.offre--vedette { background: var(--bande); color: var(--sur-bande); }
.offre--vedette h3, .offre--vedette .prix { color: var(--sur-bande); }
.offre--vedette .etiquette { color: var(--or-soleil); }
.offre--vedette .bouton { background: var(--or-soleil); border-color: var(--or-soleil); color: var(--sur-soleil); }
.offre h3 { font-size: 1.6rem; }
.prix { font: 600 3rem/1 var(--font-titre); font-variant-numeric: tabular-nums; }
.prix small { font: 400 14px/1.2 var(--font-interface); opacity: .85; margin-left: 6px; }
.offre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; flex: 1; font-size: 15.5px; }
.offre li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.offre li svg { margin-top: 4px; color: var(--vert-pousse); }
.offre--vedette li svg { color: var(--or-soleil); }
.ruban { position: absolute; top: -12px; right: 20px; padding: 4px 12px; border-radius: var(--arrondi-pilule); background: var(--or-soleil); color: var(--sur-soleil); font: 700 12px/1.2 var(--font-interface); letter-spacing: .08em; text-transform: uppercase; }

/* Tableaux (administration) */
.chiffres-cles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chiffres-cles li { background: var(--papier); border-radius: var(--arrondi-carte); padding: 16px; font-size: 14px; color: var(--encre-douce); }
.chiffres-cles strong { display: block; font: 600 1.6rem/1.1 var(--font-titre); color: var(--encre); font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; border-radius: var(--arrondi-carte); background: var(--papier); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.tableau th { color: var(--encre-douce); font-weight: 600; background: var(--lin-profond); }
.barre { height: 8px; border-radius: 99px; background: var(--lin-profond); overflow: hidden; min-width: 80px; }
.barre span { display: block; height: 100%; background: var(--horizon); border-radius: 99px; }

/* Filet d'horizon */
.filet { display: flex; align-items: center; gap: 14px; color: var(--or-aube); }
.filet::before, .filet::after { content: ""; flex: 1; height: 1px; background: var(--ligne-forte); }

/* Pied */
.pied { border-top: 1px solid var(--ligne); padding-block: var(--espace-5) calc(var(--espace-5) + env(safe-area-inset-bottom, 0px)); color: var(--encre-douce); font-size: 14px; }
.pied__in { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied a { color: var(--encre-douce); }

/* Célébration (carte 30) */
.celebration { text-align: center; justify-items: center; background: linear-gradient(180deg, var(--ciel-miel), var(--papier) 75%); }
.soleil-anime { width: 120px; height: 72px; }
.soleil-anime .s { transform-origin: 60px 64px; animation: lever 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lever { from { transform: translateY(40px); } to { transform: none; } }

/* Champs nus dans un formulaire (pages de connexion) */
.formulaire label { font-weight: 600; font-size: 15px; display: block; margin-bottom: -10px; }
.formulaire label.case, .formulaire label.cache { margin-bottom: 0; }
.formulaire input:not([type="checkbox"]):not([type="hidden"]), .formulaire select, .formulaire textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--ligne-forte); border-radius: var(--arrondi-champ); background: var(--lin); color: var(--encre); font: 400 16px/1.4 var(--font-interface); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--horizon); box-shadow: 0 0 0 3px var(--ciel-aube); }
.formulaire h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.formulaire .aide { font-weight: 400; font-size: 13px; color: var(--encre-douce); }

/* Téléphone étroit : le symbole seul, le menu sur une ligne */
@media (max-width: 480px) {
  .entete .marque__nom { display: none; }
  .nav { flex-wrap: nowrap; }
}

/* ---- Répartition du texte (v2.1) ---- */
p, li { text-wrap: pretty; }
.carte .bloc p, .encadre p { max-width: 62ch; }
.salut h1 { line-height: 1.05; }
.carte__titre { max-width: 22ch; }
.verset p { max-width: 52ch; }
.formulaire h1 { max-width: 16ch; }
h1, h2, h3 { letter-spacing: -.012em; }
/* Titres en Source Serif 4, graisse 700 pour une présence nette */
h1, h2 { font-weight: 700; }
.heros h1 em, .final h2 em { font-weight: 700; }
.carte__titre, .formulaire h1 { max-width: none; }

/* Mes parcours */
.mes-parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mes-parcours li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--arrondi-carte); background: var(--papier); border: 1.5px solid var(--ligne); }
.mes-parcours li.actif { border-color: var(--or-soleil); }
.mes-parcours li > div { display: grid; gap: 2px; min-width: 0; }
.mes-parcours strong { font: 700 17px/1.25 var(--font-titre); }
.mes-parcours span { font-size: 14px; color: var(--encre-douce); }
.mes-parcours .bouton { min-height: 40px; padding: 0 18px; font-size: 15px; flex: none; }
.sommaire-semaines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sommaire-semaines li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: var(--papier); border-radius: var(--arrondi-carte); }
.sommaire-semaines__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lin-profond); color: var(--or-aube); font: 700 17px/1 var(--font-titre); }
.sommaire-semaines strong { display: block; font-weight: 600; line-height: 1.3; }