/* =====================================================================
   client.css -- espace client (accueil, configurateur, formulaire).
   Design neutre et propre, distinct des 10 themes d'invitation : c'est
   l'outil de creation, pas le faire-part lui-meme.
   ===================================================================== */

:root {
  --bg: #F3EFE6;
  --surface: #FFFFFF;
  --ink: #2A2722;
  --muted: #76705F;
  --rule: rgba(42, 39, 34, .14);
  --accent: #C9A44C;
  --accent-ink: #9C7B2E;
  --accent-bg: rgba(201, 164, 76, .12);
  --radius: 14px;
  --font-titre: "Cormorant Garamond", Georgia, serif;
  --font-corps: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-he: "Frank Ruhl Libre", Georgia, serif;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-corps);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
  padding: 0 20px 60px;
}
@media (min-width: 620px) {
  body { padding: 28px 16px; }
  .page { min-height: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(42, 39, 34, .14); overflow: hidden; padding-bottom: 50px; }
}

a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * En-tete / progression
 * ------------------------------------------------------------------ */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
}
.entete__marque {
  font-family: var(--font-titre);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}
.entete__etape {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.progression { display: flex; gap: 6px; margin: 0 0 28px; }
.progression__segment { flex: 1; height: 4px; border-radius: 999px; background: var(--rule); }
.progression__segment--fait { background: var(--accent); }

/* ------------------------------------------------------------------ *
 * Typo generale
 * ------------------------------------------------------------------ */

h1.titre {
  margin: 0 0 10px;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.18;
}
h2.soustitre {
  margin: 0 0 8px;
  font-family: var(--font-titre);
  font-weight: 500;
  font-size: 22px;
}
p.chapo { margin: 0 0 28px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 44em; }
.note { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------------ *
 * Boutons
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  font-family: var(--font-corps);
  font-size: 14px;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn--principal { background: var(--accent); color: #2A2008; font-weight: 600; }
.btn--principal:disabled { opacity: .45; cursor: not-allowed; }
.btn--secondaire { background: transparent; color: var(--accent-ink); }
.btn--texte { border-color: transparent; color: var(--muted); padding-inline: 4px; }

.barre-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

/* ------------------------------------------------------------------ *
 * Accueil (marketing)
 * ------------------------------------------------------------------ */

.accueil__bloc { margin: 0 0 40px; }
.accueil__hero {
  text-align: center;
  padding: 44px 0 36px;
}
.accueil__hero .titre { font-size: clamp(32px, 9vw, 46px); }
.accueil__hero p.chapo { margin-inline: auto; text-align: center; }

.etapes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 40px;
}
.etape-carte {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.etape-carte__num {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-family: var(--font-titre);
  font-size: 17px;
}
.etape-carte__titre { margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.etape-carte__texte { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.accueil__cta { text-align: center; margin: 0 0 32px; }
.accueil__cta .btn--principal { padding-inline: 44px; }
.accueil__cta #bouton-exemple { display: flex; margin: 14px auto 0; text-decoration: underline; text-underline-offset: 3px; }

.rassurance {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Configurateur : chips + liste reordonnable
 * ------------------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px dashed var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.chip__plus { font-size: 15px; color: var(--accent-ink); }

/* Zone dediee au glissement : fond legerement teinte, bien distincte du
   reste de la page, pour que la limite "ici on glisse / ici la page
   defile" soit visible et pas seulement comportementale. Les cartes n'en
   occupent pas toute la largeur : la marge laissee de part et d'autre
   (couleur du conteneur) reste une zone de defilement normal de la page,
   meme a l'interieur du cadre. */
.conf-boite {
  padding: 16px 14px;
  border-radius: calc(var(--radius) + 6px);
  background: var(--accent-bg);
  border: 1px dashed var(--accent-ink);
}
.conf-boite__aide {
  margin: 8px 0 24px;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

.conf-liste {
  position: relative;   /* repere stable pour offsetTop pendant le glissement */
  list-style: none;
  margin: 0;
  /* Marges FIXES (pas en %) : la ligne et les numeros sont aussi positionnes
     en pixels fixes plus bas -- avec un centrage en %, leur alignement se
     serait decale selon la largeur d'ecran. */
  padding: 0 14px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;              /* encore un peu plus d'air entre les cartes */
}
/* Ligne verticale en pointilles derriere les numeros : rend visible que
   cette liste EST une sequence ordonnee (l'ordre des cartes = l'ordre des
   evenements sur l'invitation). */
.conf-liste::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  bottom: 16px;
  width: 0;
  border-left: 2px dotted var(--accent-ink);
  opacity: .45;
}

.conf-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: grab;
  touch-action: none;          /* le JS gere TOUT geste tactile sur une carte (la zone autour, dans .conf-boite, defile normalement) */
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  position: relative;
}
.conf-item--drag {
  cursor: grabbing;
  box-shadow: 0 18px 36px rgba(42, 39, 34, .28);
  border-color: var(--accent);
  transition: none;             /* le JS pilote le transform image par image : pas de latence */
  /* Amincie pendant le geste : moins de contenu affiche, plus facile de
     "lire" ou elle va s'inserer entre deux autres cartes. */
  padding-block: 7px;
}
.conf-item--drag .conf-item__titre-he,
.conf-item--drag .conf-item__note,
.conf-item--drag .conf-item__fleches,
.conf-item--drag .conf-item__numero { display: none; }
.conf-item--drag .conf-item__titre { font-size: 13px; }

/* Numero rond, integre PILE sur la ligne (cf. .conf-liste::before a
   left:9px) : le point du numero EST un point de cette ligne, pas un
   element qui flotte a cote. Le fond plein (var(--surface)) interrompt
   proprement la ligne pointillee derriere lui. */
.conf-item__numero {
  position: absolute;
  left: -31.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--accent-ink);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  z-index: 2;
}

/* Repere EN FLUX, fin (pas la taille d'une carte -- juste assez pour se
   voir clairement) : un vrai vide qui ecarte les cartes voisines pendant
   le glissement (pas un calque flottant par-dessus). Pulsation continue,
   comme la cible de fusion : les deux reperes actifs d'un glissement
   "respirent" pour bien se distinguer des cartes immobiles. */
.conf-item--espace {
  border: 2px dashed var(--accent);
  background: var(--accent-bg);
  box-shadow: none;
  animation: conf-pulse 1s ease-in-out infinite;
}
.conf-item--espace > * { visibility: hidden; }

/* Repere permanent, discret, entre CHAQUE paire de cartes (meme hors
   glissement) : suggere "on peut deposer ici" avant meme de commencer a
   glisser. S'efface pendant un glissement actif (l'espace le remplace). */
.conf-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -11px;
  height: 0;
  border-top: 1.5px dashed var(--rule);
  opacity: .6;
  pointer-events: none;
}
.conf-item--drag::before,
.conf-item--espace::before,
.conf-item--cible-fusion::before { display: none; }

/* Cible de fusion : le FOND devient semi-transparent (pas la carte entiere
   via "opacity", qui emporterait aussi le texte avec elle) et la carte
   respire en continu (petit rebond repete), comme si elle "accueillait"
   activement la carte posee dessus. Le texte reste donc net et lisible.
   La classe n'etant desormais touchee QUE quand la cible change (cf.
   configurateur.js), l'animation en boucle ne redemarre jamais en rafale. */
.conf-item--cible-fusion {
  animation: conf-fusion-accueil 1s cubic-bezier(.34, 1.56, .64, 1) infinite;
  border-color: var(--accent);
  border-width: 2px;
  background: color-mix(in srgb, var(--accent-bg) 55%, transparent);
  backdrop-filter: blur(1px);
}
@keyframes conf-fusion-accueil {
  0%, 100% { transform: scale(1.02); }
  50% { transform: scale(1.065); }
}
/* Meme idee de "respiration" pour le repere d'insertion -- garde en phase
   avec la cible de fusion (duree identique) pour un rythme coherent. */
@keyframes conf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.conf-item--cible-fusion::after {
  content: "Réunir ici";
  position: absolute;
  top: -10px; right: 12px;
  background: var(--accent);
  color: var(--surface);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 1;
}
.conf-item--fusion { border-style: dashed; }
@media (prefers-reduced-motion: reduce) {
  .conf-item--cible-fusion { animation: none; transform: scale(1.025); }
  .conf-item--espace { animation: none; }
}

.conf-item__poignee {
  flex: none;
  width: 24px; height: 32px;
  display: grid; place-items: center;
  color: var(--muted);
  font-size: 18px;
  pointer-events: none;   /* la carte entiere est saisissable : la poignee n'est qu'un indice visuel */
}
.conf-item__corps { flex: 1 1 auto; min-width: 0; }
.conf-item__titre { font-weight: 600; font-size: 14.5px; }
.conf-item__titre-he { margin: 0; font-family: var(--font-he); font-size: 12px; color: var(--muted); }
.conf-item__note { margin: 3px 0 0; font-size: 11px; color: var(--accent-ink); font-style: italic; }
.conf-item__suppr {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
}
.conf-item__suppr:hover { background: var(--accent-bg); color: var(--accent-ink); }

.conf-item__fleches { flex: none; display: flex; flex-direction: column; }
.conf-item__fleche {
  width: 26px; height: 20px;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  border-radius: 6px;
}
.conf-item__fleche:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent-ink); }
.conf-item__fleche:disabled { opacity: .25; cursor: default; }

.conf-liste:empty::after {
  content: "Ajoutez un premier événement ci-dessus.";
  display: block;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--accent-bg);
}
.legende li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.legende__icone {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

/* Un court temps apres l'arrivee sur la page (premiere visite seulement),
   une legere pulsation sur la premiere carte suggere l'appui-glissement. */
.conf-liste--demo li.conf-item:first-child { animation: conf-demo-pulse 1.1s ease-in-out 2; }
@keyframes conf-demo-pulse {
  0%, 100% { transform: none; box-shadow: none; }
  50% { transform: scale(1.015) translateY(-2px); box-shadow: 0 8px 18px rgba(42, 39, 34, .16); }
}
@media (prefers-reduced-motion: reduce) {
  .conf-liste--demo li.conf-item:first-child { animation: none; }
}

/* ------------------------------------------------------------------ *
 * Formulaire
 * ------------------------------------------------------------------ */

.form-section { margin: 0 0 34px; }
.form-section + .form-section { padding-top: 30px; border-top: 1px solid var(--rule); }

.grille-champs { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 460px) {
  .grille-champs--2 { grid-template-columns: 1fr 1fr; }
}

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.champ .req { color: var(--accent-ink); }
.champ input[type="text"],
.champ input[type="date"],
.champ input[type="time"],
.champ input[type="url"],
.champ select,
.champ textarea {
  font: inherit;
  font-size: 15px;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.champ textarea { min-height: 80px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 1px;
}
.champ .aide { font-size: 11.5px; color: var(--muted); }

.evenement-bloc {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin: 0 0 16px;
}
.evenement-bloc__titre {
  margin: 0 0 14px;
  font-family: var(--font-titre);
  font-size: 19px;
  color: var(--accent-ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.evenement-bloc__titre span { font-family: var(--font-he); font-size: 13px; color: var(--muted); }
.evenement-bloc .grille-champs { margin-top: 14px; }

/* Selecteur de theme (cartes radio) */
.theme-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 460px) { .theme-grille { grid-template-columns: repeat(3, 1fr); } }
.theme-case { position: relative; }
.theme-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-case label {
  display: block;
  padding: 12px 10px;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
  line-height: 1.35;
}
.theme-case input:checked + label { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.theme-case input:focus-visible + label { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Selecteur de couleur (pastilles radio) */
.couleur-grille { display: flex; flex-wrap: wrap; gap: 10px; }
.couleur-case { position: relative; }
.couleur-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.couleur-case label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 58px;
  cursor: pointer;
}
.couleur-case__pastille {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}
.couleur-case input:checked + label .couleur-case__pastille { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-ink); }
.couleur-case label span.nom { font-size: 10px; text-align: center; color: var(--muted); line-height: 1.2; }
.couleur-case input:focus-visible + label .couleur-case__pastille { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

.verset-apercu {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent-bg);
  font-family: var(--font-he);
  font-size: 15px;
  text-align: center;
  color: var(--accent-ink);
}

.familles__sous-titre {
  margin: 22px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.form-section .familles__sous-titre:first-of-type { margin-top: 24px; }

/* Suggestions de prenom hebreu : chips cliquables juste au-dessus du
   champ, qui reste vide tant qu'on n'en choisit pas une (chacun ecrit
   son prenom hebreu a sa facon -- ce n'est qu'une proposition). */
.suggestions-hebreu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.suggestion-hebreu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px dashed var(--accent-ink);
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-family: var(--font-he);
  font-size: 14px;
  cursor: pointer;
}
.suggestion-hebreu:hover { background: color-mix(in srgb, var(--accent) 20%, var(--accent-bg)); }
.suggestion-hebreu__etiquette {
  font-family: var(--font-corps);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.message-erreur {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FBEAEA;
  color: #8A2E2E;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

/* Lecteur de musique du formulaire (lecteur-musique.css), aux couleurs
   claires de l'espace client. */
.lecteur-formulaire { margin: 10px 0 6px; }
.lecteur-formulaire .lecteur {
  --lecteur-fond: var(--bg);
  --lecteur-bord: var(--rule);
  --lecteur-texte: var(--ink);
  --lecteur-doux: var(--muted);
  --lecteur-accent: var(--accent);
  --lecteur-sur-accent: #FFFFFF;
  --lecteur-piste: rgba(42, 39, 34, .16);
}

/* Choix du logo dans le formulaire */
.champ__titre { font-weight: 600; font-size: 14px; }
.logo-choix { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.logo-choix__option { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.logo-choix__option input { width: 18px; height: 18px; accent-color: var(--accent-ink); }
.logo-choix__perso { display: flex; align-items: center; gap: 16px; margin: 6px 0 8px; }
.logo-choix__apercu { width: 92px; flex: none; }
.logo-choix__apercu:empty { display: none; }
.logo-choix__apercu svg { width: 100%; height: auto; display: block; }