/* Charte « Mon papier imprimé » (maquette du site, 2026-10-24) : fond chaux, encre, un seul accent bleu encre, l'ocre pour
   les crédits ; Cormorant Garamond pour les titres, Hanken Grotesk pour le texte, Montserrat (la voix du logo) en
   capitales espacées pour le menu et les surtitres. Le mur reste la vedette : l'interface s'efface autour de lui. */
:root {
  --chaux: #F3F1EC; --chaux-2: #E8E5DD; --carte: #FFFFFF;
  --encre: #1D1F1C; --encre-2: #5B5D57; --ligne: rgba(29, 31, 28, .14);
  --bleu-encre: #243B6B; --bleu-encre-fonce: #1A2B50; --bleu-encre-pale: #DDE3EE;
  --ocre: #B97A1E; --argile: #E9D5C7; --ardoise: #D5DEE3; --nuit: #1F2B45; --sur-nuit: #F3EBD8; --or: #D7B25A;
  --f-titre: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-marque: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* les noms d'avant, pour le reste de la feuille */
  --fond: var(--chaux); --texte: var(--encre); --discret: var(--encre-2); --trait: #DCD8CF;
  --accent: var(--bleu-encre); --accent-fonce: var(--bleu-encre-fonce); --accent-pale: var(--bleu-encre-pale); --rayon: 8px;
  --ombre: 0 1px 2px rgba(29, 31, 28, .06), 0 12px 32px -12px rgba(29, 31, 28, .18);
  --titre: var(--f-titre);
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--chaux); color: var(--encre);
  font: 16px/1.55 var(--f-texte); -webkit-font-smoothing: antialiased;
}
main { max-width: 1320px; margin: 0 auto; padding: 32px 16px 72px; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 500; letter-spacing: -.01em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 56px); margin: 0 0 10px; }
h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 32px 0 14px; }
h3 { font-size: 22px; margin: 0 0 4px; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.surtitre { font-family: var(--f-marque); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--encre-2); margin: 0 0 14px; }

/* bandeau d'annonce, en-tête, pied */
.annonce { background: var(--nuit); color: var(--sur-nuit); font-size: 13px; text-align: center; padding: 9px 16px; }
.annonce b { color: var(--or); font-weight: 600; }
.tete { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--chaux) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); }
.tete-in { max-width: 1320px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: flex; color: var(--encre); text-decoration: none; flex: none; }
.logo svg { height: 46px; width: auto; display: block; }
.menu { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; }
.menu a { padding: 10px 12px; font-family: var(--f-marque); font-size: 11.5px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none; color: var(--encre); border-radius: 6px; white-space: nowrap; }
.menu a:hover, .menu a.actif { background: var(--chaux-2); }
.outils { display: flex; align-items: center; gap: 14px; }
.credits { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ocre);
  text-decoration: none; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ocre) 12%, transparent); white-space: nowrap; }
.ico-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--encre); white-space: nowrap; }
.ico-btn svg { width: 22px; height: 22px; }
.badge-maquette { font-size: 11px; color: var(--encre-2); border: 1px dashed var(--ligne); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
@media (max-width: 960px) { .menu { display: none; } .tete-in { gap: 14px; justify-content: space-between; } }
@media (max-width: 560px) { .ico-btn span, .tete .bouton { display: none; } .logo svg { height: 36px; } }
.pied { border-top: 1px solid var(--ligne); margin-top: 40px; }
.pied-in { max-width: 1320px; margin: 0 auto; padding: 48px 16px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.pied .logo svg { height: 56px; }
.pied p { color: var(--encre-2); font-size: 14px; max-width: 26em; margin: 14px 0 0; }
.pied h4 { font-family: var(--f-marque); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; color: var(--encre-2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.pied ul a { color: var(--encre); text-decoration: none; }
.pied ul a:hover { text-decoration: underline; }
.mentions { max-width: 1320px; margin: 0 auto; padding: 0 16px 32px; font-size: 12.5px; color: var(--encre-2); }
@media (max-width: 760px) { .pied-in { grid-template-columns: 1fr 1fr; } .pied-in > div:first-child { grid-column: 1 / -1; } }

/* boutons */
[hidden] { display: none !important; }
.actions-motifs { display: flex; flex-wrap: wrap; gap: 8px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--encre);
  background: transparent; color: var(--encre); font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s, color .15s, box-shadow .15s;
}
.bouton:hover:not(:disabled) { background: var(--encre); color: var(--chaux); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton.principal { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton.principal:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: var(--ombre); }
.bouton.grand { padding: 15px 28px; font-size: 16px; }
.bouton.petit { padding: 8px 15px; font-size: 14px; }
.bouton.or { background: var(--or); border-color: var(--or); color: var(--nuit); }
.bouton.discret { border-color: transparent; color: var(--discret); background: transparent; }
.bouton.discret:hover:not(:disabled) { background: var(--chaux-2); color: var(--encre); }

/* questions */
.questions { max-width: 860px; margin: 0 auto; }
.progression { list-style: none; padding: 0; margin: 0 0 8px; display: flex; gap: 6px; counter-reset: pas; }
.progression li {
  flex: 1; font-size: 13px; color: var(--discret); padding-top: 8px;
  border-top: 3px solid var(--trait); counter-increment: pas;
}
.progression li::before { content: counter(pas) ". "; }
.progression li.fait { border-color: var(--accent); }
.progression li.actif { border-color: var(--accent); color: var(--texte); font-weight: 600; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tuiles.petites { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tuile, .pastille {
  text-align: left; padding: 14px 16px; border-radius: var(--rayon); border: 1.5px solid var(--trait);
  background: var(--carte); font: inherit; color: var(--texte); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.tuile:hover, .pastille:hover { border-color: #c9bfb2; }
.tuile.choisi, .pastille.choisi { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 59, 107, .14); }
.pastilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pastille { display: flex; align-items: center; gap: 10px; }
.echantillon { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }
.echantillon.mini { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.raccords { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.raccord b { display: block; margin-bottom: 4px; }
.raccord span { font-size: 14px; color: var(--discret); }
@media (max-width: 720px) { .raccords { grid-template-columns: 1fr; } }
.champ { display: block; margin-top: 18px; font-weight: 500; }
.champ small { color: var(--discret); font-weight: 400; }
.champ input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  border: 1.5px solid var(--trait); border-radius: 8px; background: var(--carte);
}
.dimensions { display: flex; gap: 16px; flex-wrap: wrap; }
.dimensions .champ span { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.dimensions .champ input { width: 130px; display: inline-block; margin: 6px 0 0; }
.metrage { margin-top: 18px; padding: 12px 16px; background: var(--carte); border-radius: var(--rayon); border: 1px dashed var(--trait); }
.aide { color: var(--discret); font-size: 14px; }
.navigation { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.navigation.centre { justify-content: center; }
.erreur { color: #a0302a; background: #fbecea; border-radius: 8px; padding: 10px 14px; }

/* ébauches */
.resume { margin-bottom: 20px; }
.resume p { margin: 4px 0; }
.idee { font-style: italic; color: var(--discret); }
.discret { color: var(--discret); }
.grille-ebauches { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; display: flex; flex-direction: column; }
.carte .apercu { position: relative; display: block; overflow: hidden; background-color: var(--chaux-2); }
.carte .apercu.attente, .carte .apercu.vide { min-height: 260px; display: flex; align-items: center; justify-content: center; color: var(--discret); text-align: center; padding: 16px; }
.carte .apercu.attente { background: linear-gradient(100deg, var(--chaux-2) 30%, #f6f4ef 50%, var(--chaux-2) 70%); background-size: 300% 100%; animation: reflet 1.4s linear infinite; }
@keyframes reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }
.carte .texte { padding: 14px 16px 6px; flex: 1; }
.carte .texte p { margin: 0; font-size: 14px; color: var(--discret); }
.carte .actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 14px; }
.pastille-info { font: 500 11px/1 system-ui, sans-serif; color: var(--discret); border: 1px solid var(--trait); border-radius: 99px; padding: 3px 7px; vertical-align: 3px; }
.jonction { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(42, 38, 34, .35); pointer-events: none; }

/* détail d'une ébauche */
.onglets { display: flex; gap: 6px; margin: 8px 0 14px; flex-wrap: wrap; }
.onglet { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--trait); background: transparent; font: inherit; cursor: pointer; }
.onglet.actif { background: var(--texte); color: #fff; border-color: var(--texte); }
.vue { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; overflow: hidden; }
.mur { position: relative; margin: 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.numero-le { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; background: rgba(255,255,255,.85); border-radius: 99px; padding: 1px 7px; }
.cote { text-align: center; color: var(--discret); font-size: 13px; margin: 8px 0 0; }
.les { display: flex; justify-content: center; }
.les figure { margin: 0; text-align: center; }
.les .le { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.les figcaption { font-size: 12px; color: var(--discret); margin-top: 6px; }
.palette { display: flex; gap: 6px; margin-top: 12px; }

/* écran interne */
.tableau { overflow-x: auto; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
th { font-weight: 600; color: var(--discret); }
.ligne-erreur td { color: #a0302a; }

/* atelier (lot L2) */
.atelier { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .atelier { grid-template-columns: 1fr; } }
.barre-scene { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.comparer { font-size: 14px; color: var(--discret); display: flex; gap: 6px; align-items: center; }
.comparer select, .curseur select { font: inherit; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); max-width: 220px; }
.duo-vues { display: flex; gap: 14px; }
.colonne-vue { flex: 1; min-width: 0; }
.etiquette-vue { font-size: 13px; color: var(--discret); margin: 0 0 6px; }
.explication { background: #eef5ee; border-radius: 8px; padding: 10px 14px; margin-top: 12px; }
.panneau { display: flex; flex-direction: column; gap: 14px; }
.bloc { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px 16px; }
.bloc h2 { font-size: 18px; margin: 0 0 10px; }
.bloc h2 small { font: 400 12px system-ui, sans-serif; color: var(--discret); }
.ajouts { display: flex; flex-wrap: wrap; gap: 6px; }
.bloc .champ textarea { display: block; width: 100%; margin: 6px 0 8px; padding: 8px 10px; font: inherit; border: 1.5px solid var(--trait); border-radius: 8px; resize: vertical; }
.attente { color: var(--accent-fonce); font-size: 14px; }
.attente::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: battement 1s ease-in-out infinite; }
@keyframes battement { 50% { opacity: .25; } }
.curseur { display: block; font-size: 14px; margin: 10px 0; }
.curseur span { float: right; color: var(--discret); }
.curseur input[type=range] { width: 100%; }
.couleurs { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 10px 0; }
.couleur { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.couleur input { width: 30px; height: 30px; padding: 0; border: 1px solid var(--trait); border-radius: 50%; background: none; cursor: pointer; }
.actions-reglages { display: flex; gap: 6px; }
.historique { list-style: none; padding: 0; margin: 0 0 10px; max-height: 280px; overflow-y: auto; }
.historique button { width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; cursor: pointer; }
.historique button:hover:not(:disabled) { background: var(--fond); }
.historique small { display: block; color: var(--discret); font-size: 12px; }
.historique .courante button { background: #f6e7e1; }

/* banque de motifs (lot L2 ter) */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtres select, .filtres input { font: inherit; padding: 7px 10px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); }
.grille-motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.motif { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px; display: flex; flex-direction: column; gap: 6px; border-top: 4px solid transparent; }
.motif.valide { border-top-color: #4b9a5c; }
.motif.refuse { border-top-color: #b5573b; opacity: .6; }
.motif .vignette svg { width: 100%; height: auto; display: block; border-radius: 8px; }
.motif input, .motif select { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--trait); border-radius: 6px; width: 100%; background: var(--carte); }
.motif .meta { font-size: 12px; color: var(--discret); margin: 0; }
.motif .actions { display: flex; gap: 6px; }

/* atelier : motif par motif (lot L2 ter) */
.liste-motifs { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.liste-motifs li { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 6px; border-radius: 8px; background: var(--fond); }
.vignette-motif { grid-row: span 2; }
.vignette-motif svg { width: 44px; height: 44px; display: block; border-radius: 6px; }
.nom-motif { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-motif { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); }
.gestes { grid-column: 2 / 4; display: flex; gap: 4px; flex-wrap: wrap; }
.gestes button { font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--trait); border-radius: 99px; background: var(--carte); cursor: pointer; }
.gestes .avis.actif { background: #f6e7e1; border-color: var(--accent); }
.choix-banque { margin-top: 10px; border-top: 1px solid var(--trait); padding-top: 10px; }
.recherche-banque { display: flex; gap: 6px; }
.recherche-banque input, .recherche-banque select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); }
.recherche-banque input { flex: 1; min-width: 0; }
.resultats-banque { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin: 8px 0; max-height: 300px; overflow-y: auto; }
.resultat-banque { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); cursor: pointer; font: inherit; font-size: 11px; }
.resultat-banque:hover { border-color: var(--accent); }
.resultat-banque svg { width: 56px; height: 56px; }
.resultat-banque span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* banque : tailles, thèmes, commande de graphismes */
.motif .tailles { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; }
.motif .tailles label, .motif .themes label { display: flex; align-items: center; gap: 3px; }
.motif .tailles input, .motif .themes input { width: auto; }
.motif .themes { font-size: 12px; }
.motif .themes summary { cursor: pointer; color: var(--discret); }
.motif .themes div { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; margin-top: 4px; }
.motif.propose { border-top-color: #d9a521; }
.commande { margin-bottom: 24px; }
.commande-motifs textarea { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; font: inherit; border: 1.5px solid var(--trait); border-radius: 8px; }
.ligne-commande { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; font-size: 14px; }
.ligne-commande select { font: inherit; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); margin-left: 4px; }
.resultat-commande { background: #eef5ee; border-radius: 8px; padding: 10px 14px; }
.demandes-passees { margin-top: 12px; font-size: 14px; color: var(--discret); }
.demandes-passees ul { padding-left: 18px; }

/* gammes de couleurs */
.choix-gamme { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; font-size: 14px; color: var(--discret); }
.pastille-gamme { font: inherit; font-size: 13px; padding: 5px 10px 5px 30px; border: 1px solid var(--trait); border-radius: 99px; cursor: pointer; position: relative; background: var(--carte); color: var(--texte); }
.pastille-gamme[data-gamme]:not([data-gamme=""])::before { content: ""; position: absolute; left: 7px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: conic-gradient(var(--g1) 0 33%, var(--g2) 0 66%, var(--g3) 0); box-shadow: 0 0 0 2px var(--gf); }
.pastille-gamme[data-gamme=""] { padding-left: 10px; }
.pastille-gamme.actif { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(36, 59, 107, .18); }
.motif .garder-gamme { align-self: flex-start; }
.motif .couleurs-motif { display: flex; gap: 6px; }
.motif .couleurs-motif input { width: 28px; height: 28px; padding: 0; border: 1px solid var(--trait); border-radius: 50%; cursor: pointer; overflow: hidden; }
.motif .couleurs-motif input::-webkit-color-swatch-wrapper { padding: 0; }
.motif .couleurs-motif input::-webkit-color-swatch { border: none; border-radius: 50%; }
.motif .couleurs-motif input::-moz-color-swatch { border: none; border-radius: 50%; }


.avec-fond { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--texte); margin-left: 4px; }

/* atelier : l'aperçu du mur reste visible pendant qu'on fait défiler les réglages (ordinateur seulement) */
@media (min-width: 901px) {
  .atelier .scene { position: sticky; top: 12px; }
}

.image-modele { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--discret); }
.image-modele img { height: 64px; border-radius: 6px; border: 1px solid var(--trait); }

/* thèmes */
.ajout-theme { display: flex; flex-wrap: wrap; gap: 8px; }
.ajout-theme input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 8px; flex: 1 1 220px; }
.table-themes input:not([type=checkbox]) { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 6px; width: 100%; min-width: 140px; background: var(--carte); }
.table-themes td { white-space: normal; }
.table-themes .ordre button { font: inherit; border: 1px solid var(--trait); background: var(--carte); border-radius: 6px; cursor: pointer; padding: 0 6px; margin-right: 2px; }
.table-themes tr.masque td { color: var(--discret); }
.table-themes tr.masque input:not([type=checkbox]) { opacity: .6; }

/* importer des illustrations (admin) */
.onglets-import { display: flex; gap: 6px; margin: 8px 0 12px; }
.grille-oeuvres { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 12px; }
.oeuvre { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.oeuvre img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #f1ede6; border-radius: 6px; }
.oeuvre p { margin: 0; font-size: 13px; }
.oeuvre small { color: var(--discret); }
.formulaire-import { display: grid; gap: 8px; max-width: 560px; }
.motif .meta a { color: inherit; }

/* l'image du client dans l'atelier */
.mon-image { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border: 1px dashed var(--trait); border-radius: var(--rayon); }
.mon-image img { max-width: 160px; max-height: 160px; object-fit: contain; border-radius: 6px; background: #f1ede6; }
.mon-image .droits { font-size: 13px; }
.resultat-mon-image { margin-top: 10px; font-size: 14px; }
.resultat-mon-image p { margin: 4px 0; }
.nettete { font-size: 12px; margin-left: 6px; padding: 1px 6px; border-radius: 9px; background: #e6efe3; color: #35603a; }
.nettete.correct { background: #f5ecd5; color: #7a5a12; }
.nettete.flou { background: #f6dede; color: #8a2a2a; }
p.nettete { display: inline-block; margin-left: 0; }
.alerte { color: #8a2a2a; }

/* loupe : contrôler un détourage de près */
.loupe { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 18, 16, .82); display: flex; flex-direction: column; padding: 14px; gap: 8px; }
.loupe-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #fff; }
.loupe-titre { font: 600 16px Georgia, serif; margin-right: auto; }
.loupe-barre button { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; cursor: pointer; }
.loupe-barre button.actif { background: #fff; color: #222; }
.loupe-zoom { display: inline-flex; align-items: center; gap: 6px; }
.loupe-zoom .pct { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.loupe-vue { position: relative; flex: 1; overflow: hidden; border-radius: 8px; cursor: grab; touch-action: none; background: #fff; }
.loupe-vue:active { cursor: grabbing; }
.loupe-vue.damier { background-color: #fff; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.loupe-vue img { position: absolute; left: 0; top: 0; transform-origin: 0 0; image-rendering: auto; max-width: none; user-select: none; }
.loupe-aide { margin: 0; color: rgba(255,255,255,.75); font-size: 13px; }

/* ---------------------------------------------------------------- concepteur de mur (lot C1) */
.concepteur { max-width: 920px; margin: 0 auto; }
.recap-choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; min-height: 22px; }
.recap-choix span { font-size: 13px; background: var(--carte); border: 1px solid var(--trait); border-radius: 99px; padding: 2px 10px; color: var(--discret); }
.coloris-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.coloris-grille.petite { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.coloris { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: var(--rayon);
  border: 2px solid var(--trait); background: var(--carte); font: inherit; cursor: pointer; text-align: left; }
.coloris:hover { border-color: var(--discret); }
.coloris.choisi { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 59, 107, .14); }
.coloris small { color: var(--discret); font-size: 12px; }
/* un coloris = une bande : le fond en large, puis chaque couleur ; elle tient dans sa case quel que soit leur nombre */
.pastilles-coloris { display: inline-flex; width: 112px; height: 18px; border-radius: 5px; overflow: hidden; vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pastilles-coloris span { flex: 1 1 0; min-width: 0; }
.pastilles-coloris span:first-child { flex-grow: 2.2; }
.coloris .pastilles-coloris { display: flex; width: 100%; height: 30px; border-radius: 7px; }
.mes-couleurs { margin-top: 14px; }
.mes-couleurs summary { cursor: pointer; color: var(--accent-fonce); }
.mes-couleurs-champs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.champ-couleur { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); }
.champ-couleur input[type=color] { width: 36px; height: 32px; border: 1px solid var(--trait); border-radius: 6px; padding: 0; background: none; }
.champ-couleur .code { width: 84px; font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--trait); border-radius: 6px; }
.idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.idee { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--rayon); border: 1px solid var(--trait);
  background: var(--carte); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--ombre); }
.idee:hover { border-color: var(--accent); }
.idee b { font-family: var(--titre); font-size: 17px; }
.idee span { color: var(--texte); font-size: 14px; }
.idee small { color: var(--discret); font-size: 12px; }
.idee.moi { background: transparent; box-shadow: none; border-style: dashed; }
.curseur.densite { display: block; max-width: 560px; }
.curseur.densite input { width: 100%; }
.reperes-densite { display: flex; justify-content: space-between; max-width: 560px; font-size: 12px; color: var(--discret); }
.cherche { width: 100%; max-width: 420px; font: inherit; padding: 8px 12px; border: 1px solid var(--trait); border-radius: 99px; margin-bottom: 8px; }
#interets h3 { font-size: 15px; margin: 16px 0 6px; color: var(--discret); }
.mots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mots input { font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; }
dl.recap { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; background: var(--carte); padding: 16px 20px; border-radius: var(--rayon); box-shadow: var(--ombre); }
dl.recap dt { color: var(--discret); }
dl.recap dd { margin: 0; }
.lien { border: none; background: none; color: var(--accent-fonce); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; margin-left: 6px; }

/* le mur créé */
.creation { max-width: 1200px; margin: 0 auto; }
.fil { margin: 0 0 8px; }
.intention { font-size: 17px; margin: 0 0 4px; }
.cadre-mur { background: var(--carte); padding: 12px; border-radius: var(--rayon); box-shadow: var(--ombre); margin: 12px 0 6px; }
.mur-entier { position: relative; width: 100%; }
.mur-entier img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mur-entier i { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(0, 0, 0, .3); }
.mur-entier b { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; background: rgba(255, 255, 255, .85);
  border-radius: 99px; padding: 1px 7px; color: var(--texte); }
.actions-mur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 18px; }
.actions-mur .avis.actif { background: var(--accent-pale); border-color: var(--accent); }

/* admin des listes */
.ajout-liste { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ajout-liste input, .ajout-liste select, .table-liste input, .table-liste select { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--trait); border-radius: 6px; }
.table-liste input { width: 100%; min-width: 90px; }
.table-liste input.court { width: 70px; min-width: 0; }
.table-liste input[type=checkbox] { width: auto; min-width: 0; }
.table-liste tr.masque { opacity: .5; }

/* compte et crédits (lot C2) */
.page-compte { max-width: 920px; margin: 0 auto; }
.accueil-compte { max-width: 440px; margin: 24px auto; }
.entree-compte, .carte-compte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.entree-compte label, .carte-compte label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.entree-compte input, .carte-compte input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1.5px solid var(--trait); border-radius: 8px; }
.entree-compte input:focus { outline: none; border-color: var(--accent); }
.entree-compte small, .carte-compte small { font-weight: 400; color: var(--discret); }
.entree-compte .erreur, .carte-compte .erreur { margin: 0; }
.onglets-compte { display: flex; gap: 4px; background: var(--fond); border-radius: 10px; padding: 4px; }
.onglets-compte button { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--discret); cursor: pointer; }
.onglets-compte button.actif { background: var(--carte); color: var(--texte); box-shadow: var(--ombre); }
.offre-bienvenue { margin: 0; font-size: 14px; background: color-mix(in srgb, var(--ocre) 10%, var(--carte)); border-radius: 8px; padding: 8px 12px; }
.compte-haut { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chiffre-solde { font-family: var(--titre); font-size: 36px; margin: 0; }
.montants { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.bouton.montant { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; }
.bouton.montant strong { font-size: 20px; }
.bouton.montant small { font-size: 12px; color: var(--discret); }
.succes { color: #2f6b3a; background: #e8f3ea; border-radius: 8px; padding: 10px 14px; }
.mes-murs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mon-mur { display: flex; flex-direction: column; gap: 6px; background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 12px 14px; text-decoration: none; color: var(--texte); }
.mon-mur:hover { box-shadow: 0 0 0 1.5px var(--accent), var(--ombre); }
.mon-mur small { color: var(--discret); }
.mon-mur.statut-echec strong { color: var(--discret); font-weight: 400; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
td.debit { color: var(--discret); }
td.credit { color: #2f6b3a; }
.paiement-simule { max-width: 480px; margin: 32px auto; }
.paiement-simule .badge-maquette { display: inline-block; margin: 0 0 8px; }
.chiffres-credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 8px; }
.chiffres-credits .bloc { display: flex; flex-direction: column; gap: 4px; }
.chiffres-credits small { color: var(--discret); font-size: 12px; }
.chiffres-credits strong { font-family: var(--titre); font-size: 24px; }
.champs-geste { display: flex; flex-wrap: wrap; gap: 10px; }
.champs-geste label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--discret); }
.champs-geste input { font: inherit; padding: 8px 10px; border: 1.5px solid var(--trait); border-radius: 8px; }
.champs-geste input[type=number] { width: 90px; }
.champs-geste label:last-child { flex: 1; min-width: 200px; }
.credit-recap { background: color-mix(in srgb, var(--ocre) 10%, var(--carte)); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.panneau-compte { margin-top: 14px; max-width: 440px; }

/* résultat : le mur reste visible (collant) pendant qu'on parcourt les outils, à droite sur grand écran */
.disposition-mur { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 12px; }
.colonne-mur { position: sticky; top: 12px; z-index: 2; }
.colonne-mur .cadre-mur { margin-top: 0; }
.mur-entier { width: min(100%, calc((100vh - 120px) * var(--ratio, 1.5))); margin: 0 auto; }
.outils-mur { display: flex; flex-direction: column; gap: 14px; }
.outils-mur .actions-mur { margin: 0 0 10px; }
.outils-mur .actions-reglages { flex-wrap: wrap; margin-bottom: 10px; }
.outils-mur .mes-couleurs { margin: 0 0 12px; }
.outils-mur .coloris-grille.petite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.outils-mur .coloris { padding: 8px 10px; }
.outils-mur .coloris b { font-size: 14px; }
@media (max-width: 999px) {
  .disposition-mur { grid-template-columns: 1fr; }
  .colonne-mur { top: 0; background: var(--fond); padding-top: 6px; }
  .colonne-mur .aide { display: none; }
  .mur-entier { width: min(100%, calc(42vh * var(--ratio, 1.5))); }
  .outils-mur .coloris-grille.petite { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* galerie, Mes créations, idées illustrées (lot C3) */
.grille-murs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.grille-murs.grande { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 22px; }
@media (max-width: 900px) { .grille-murs.grande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grille-murs.grande { grid-template-columns: 1fr; } }
.carte-mur { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--encre); }
.carte-mur .vignette-mur { box-shadow: var(--ombre); transition: transform .25s; }
a.carte-mur:hover .vignette-mur { transform: translateY(-3px); }
.carte-mur strong { font-family: var(--f-titre); font-size: 24px; font-weight: 500; line-height: 1.1; margin-top: 10px; }
.carte-mur small { color: var(--discret); font-size: 13px; }
.carte-mur.statut-echec strong { color: var(--discret); font-weight: 400; }
.vignette-mur { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: var(--chaux-2);
  border-radius: 4px; overflow: hidden; }
.vignette-mur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-mur em { color: var(--discret); font-size: 14px; }
.filtres-galerie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 18px; }
.puce { font: inherit; font-size: 14px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte); border-radius: 99px;
  padding: 5px 12px; text-decoration: none; cursor: pointer; }
.puce small { color: var(--discret); }
.puce.active { background: var(--texte); border-color: var(--texte); color: #fff; }
.puce.active small { color: rgba(255, 255, 255, .7); }
.puce.petite { font-size: 12px; padding: 3px 9px; }
.filtres-galerie .separateur { width: 1px; height: 22px; background: var(--trait); margin: 0 6px; }
.admin-galerie .carte-mur { background: var(--carte); padding: 10px 10px 12px; border-radius: 8px; box-shadow: var(--ombre); }
.admin-galerie .carte-mur .vignette-mur { box-shadow: none; }
.admin-galerie .carte-mur strong { font-size: 20px; }
.admin-galerie .carte-mur.publiee { box-shadow: 0 0 0 2px var(--accent), var(--ombre); }
.themes-mur { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.case-publication { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 12px; }
.idee.de-la-galerie { padding: 10px; }
.idee .vignette-mur { margin-bottom: 4px; }

/* accueil « Mon papier imprimé » : héros avec la pièce dessinée, étapes, galerie, bande d'offre */
.heros { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 56px; align-items: center; padding: 24px 0 56px; }
.heros h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.02; margin: 0; }
.heros-texte { display: flex; flex-direction: column; gap: 22px; }
.chapeau { font-size: 18px; color: var(--encre-2); max-width: 34em; margin: 0; }
.heros-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.lien-fort { font-weight: 600; color: var(--encre); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lien-fort:hover { color: var(--accent); }
.preuves { list-style: none; margin: 6px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ligne); display: grid; gap: 10px; font-size: 14.5px; }
.preuves li { display: flex; gap: 12px; align-items: baseline; }
.preuves li::before { content: ""; width: 14px; height: 1px; background: var(--encre); flex: none; transform: translateY(-4px); }
.heros-scene { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scene-cadre { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--chaux-2); box-shadow: var(--ombre); }
.scene-cadre > .couche { position: absolute; inset: 0; transition: opacity .9s ease; }
.scene-cadre svg { width: 100%; height: 100%; display: block; }
.legende { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.legende a { font-family: var(--f-titre); font-size: 24px; font-style: italic; color: var(--encre); text-decoration: none; }
.legende a:hover { color: var(--accent); }
.legende span { font-size: 13px; color: var(--encre-2); }
.onglets-pieces { display: flex; gap: 8px; flex-wrap: wrap; }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--chaux); }
@media (max-width: 960px) { .heros { grid-template-columns: 1fr; gap: 32px; } }
.section { padding: 56px 0; }
.section-tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.section-tete h2 { font-size: clamp(34px, 3.6vw, 52px); margin: 0; }
.section-tete p { max-width: 30em; color: var(--encre-2); margin: 0; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--encre); }
.etapes li { padding: 28px 28px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.etapes li + li { padding-left: 28px; border-left: 1px solid var(--ligne); }
.etapes .num { font-family: var(--f-titre); font-size: 56px; line-height: 1; color: var(--accent); font-style: italic; }
.etapes h3 { font-size: 26px; margin: 0; }
.etapes p { color: var(--encre-2); font-size: 15px; margin: 0; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; } .etapes li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } .etapes li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne); } }
.voir-plus { text-align: center; margin: 32px 0 0; }
.bande-offre { background: var(--nuit); color: var(--sur-nuit); border-radius: 10px; padding: 56px; display: grid; grid-template-columns: 1fr auto;
  gap: 32px; align-items: center; position: relative; overflow: hidden; }
.bande-offre h2 { font-size: clamp(32px, 4vw, 54px); color: var(--sur-nuit); margin: 0; }
.bande-offre h2 em { color: var(--or); }
.bande-offre p { opacity: .8; max-width: 36em; margin: 12px 0 0; }
.bande-offre > * { position: relative; z-index: 1; }
.bande-offre .les-deco { position: absolute; right: 0; top: 0; bottom: 0; width: 38%; display: flex; gap: 3px; opacity: .13; pointer-events: none; z-index: 0; }
.les-deco i { flex: 1; background: var(--sur-nuit); }
@media (max-width: 760px) { .bande-offre { grid-template-columns: 1fr; padding: 32px; } }

/* page d'un mur : bascule « mur à plat / dans la pièce » */
.bascule { display: inline-flex; background: var(--carte); border-radius: 999px; padding: 3px; border: 1px solid var(--ligne); margin-bottom: 10px; }
.bascule button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--encre); cursor: pointer; }
.bascule button[aria-pressed="true"] { background: var(--encre); color: var(--chaux); }
.cadre-piece { border-radius: 8px; overflow: hidden; box-shadow: var(--ombre); background: var(--chaux-2); aspect-ratio: 16 / 10; }
.cadre-piece svg { width: 100%; height: 100%; display: block; }

/* concepteur « Mon papier imprimé » : la progression en lés numérotés, des tuiles sobres, des titres qui chuchotent */
.concepteur { max-width: 980px; margin-inline: auto; }
.concepteur .progression { gap: 3px; margin-bottom: 14px; }
.concepteur .progression li { height: 40px; display: flex; align-items: flex-end; padding: 0 8px 5px; border: 0; border-radius: 2px;
  background: var(--chaux-2); font-size: 11px; font-weight: 600; color: var(--encre-2); letter-spacing: .02em; }
.concepteur .progression li.fait { background: color-mix(in srgb, var(--accent) 45%, var(--chaux-2)); color: #fff; }
.concepteur .progression li.actif { background: var(--accent); color: #fff; }
/* au téléphone, les neuf libellés ne tiennent pas : les lés gardent leur numéro, seule l'étape en cours garde son nom */
@media (max-width: 720px) {
  .concepteur .progression li { min-width: 0; justify-content: center; padding: 0 0 5px; font-size: 0; }
  .concepteur .progression li::before { content: counter(pas); font-size: 11px; }
  .concepteur .progression li.actif { flex: 0 0 auto; padding: 0 10px 5px; font-size: 11px; }
  .concepteur .progression li.actif::before { content: counter(pas) ". "; white-space: pre; }
}
.concepteur .etape h2 { font-size: clamp(32px, 3.4vw, 44px); margin: 18px 0 14px; }
.tuile, .pastille, .coloris, .idee { border: 1px solid var(--ligne); border-radius: 6px; }
.tuile:hover, .pastille:hover, .coloris:hover, .idee:hover { border-color: var(--encre); }
.tuile.choisi, .pastille.choisi, .coloris.choisi { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.idee b { font-family: var(--f-titre); font-size: 22px; font-weight: 500; }
.metrage { border-style: solid; border-color: var(--ligne); font-variant-numeric: tabular-nums; }
.recap { background: var(--carte); border-radius: 8px; box-shadow: none; border: 1px solid var(--ligne); }
.credit-recap, .offre-bienvenue { background: color-mix(in srgb, var(--ocre) 10%, var(--carte)); color: var(--encre); }
.bloc { border-radius: 8px; box-shadow: none; border: 1px solid var(--ligne); }
.bloc h2 { font-family: var(--f-titre); font-size: 24px; font-weight: 500; }
.tableau { border-radius: 8px; box-shadow: none; border: 1px solid var(--ligne); }
.chiffre-solde { font-family: var(--f-titre); font-size: 44px; color: var(--ocre); }

/* comptes : attente de validation, mot de passe */
.attente-validation { background: color-mix(in srgb, var(--ocre) 12%, var(--carte)); border-radius: 8px; padding: 12px 16px; }
.changer-mdp { margin-top: 24px; }
.changer-mdp summary { cursor: pointer; font-weight: 600; }
.formulaire-mdp { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-top: 14px; }
.formulaire-mdp label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.formulaire-mdp input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 8px; }
.formulaire-mdp small { font-weight: 400; color: var(--encre-2); }
.lien-cree input { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 8px; }

/* zoom sur le mur : plein écran, vectoriel */
.bouton-zoom { margin: 0 0 10px 8px; vertical-align: top; }
#mur { cursor: zoom-in; }
.zoom-mur { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 22, 20, .9); display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.zoom-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #F3F1EC; }
.zoom-titre { font-family: var(--f-titre); font-size: 22px; font-weight: 500; margin-right: auto; }
.zoom-barre button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243, 241, 236, .35);
  background: transparent; color: #F3F1EC; cursor: pointer; }
.zoom-barre button:hover, .zoom-barre button.actif { background: #F3F1EC; color: var(--encre); }
.zoom-les { display: flex; flex-wrap: wrap; gap: 4px; }
.zoom-pas { display: inline-flex; align-items: center; gap: 6px; }
.zoom-pas .pct { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.zoom-vue { flex: 1; min-height: 0; border-radius: 6px; overflow: hidden; background: #fff; cursor: grab; touch-action: none; }
.zoom-vue:active { cursor: grabbing; }
.zoom-vue svg { width: 100%; height: 100%; display: block; }
.zoom-aide { margin: 0; color: rgba(243, 241, 236, .7); font-size: 12.5px; text-align: center; }
@media (max-width: 640px) { .zoom-les { order: 5; width: 100%; overflow-x: auto; flex-wrap: nowrap; } .zoom-titre { font-size: 18px; } }

/* admin : fichier de fabrication */
.formulaire-fab { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.formulaire-fab label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.formulaire-fab span { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.formulaire-fab select, .formulaire-fab input { font: inherit; font-size: 14px; font-weight: 400; padding: 7px 10px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--carte); }
.formulaire-fab input { width: 80px; }
.fabrication h2 small { font: 600 11px var(--f-marque); letter-spacing: .14em; text-transform: uppercase; color: var(--ocre); }
.lien-fab { margin: 2px 0 0; font-size: 13px; }
.choix-decor { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.choix-decor .puce { font-size: 12.5px; padding: 5px 11px; }

/* admin : décors des pièces */
.grille-decors { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 22px; }
.carte-decor { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.carte-decor figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.carte-decor b { font-family: var(--f-titre); font-size: 22px; font-weight: 500; }
.carte-decor label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.carte-decor.ecarte .scene-cadre { opacity: .35; filter: grayscale(1); }
.bascule-public { margin: 0 0 14px; }

/* mon design : chargement d'une image, d'un PDF ou d'un SVG */
.page-mon-design { max-width: 1000px; margin: 0 auto; }
.mon-design { display: flex; flex-direction: column; gap: 16px; }
.champs-mur { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.champs-mur label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.champs-mur span { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.champs-mur select, .champs-mur input { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--carte); }
.champs-mur input { width: 110px; }
.pixels-ideaux { margin: 14px 0 0; font-size: 14.5px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.pixels-ideaux b { color: var(--encre); }
.deux-envois { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
@media (max-width: 760px) { .deux-envois { grid-template-columns: 1fr; } }
.zone-depot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 180px;
  border: 2px dashed var(--ligne); border-radius: 10px; padding: 20px; cursor: pointer; background: var(--chaux); }
.zone-depot.survol, .zone-depot:hover { border-color: var(--encre); }
.zone-depot input { display: none; }
.zone-depot strong { font-size: 17px; }
.zone-depot span { font-size: 13px; color: var(--encre-2); }
.progression-envoi { height: 8px; border-radius: 4px; background: var(--chaux-2); overflow: hidden; margin-top: 12px; }
.progression-envoi i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.qr { margin-top: 12px; }
.qr svg { width: 200px; height: 200px; display: block; }
.design-charge .resolution.faible { color: #a0302a; }
.design-charge .resolution.bonne b { color: var(--accent); }
.depot-telephone { max-width: 520px; margin: 24px auto; display: flex; flex-direction: column; gap: 16px; }
.bouton-photo { width: 100%; }

/* concepteur : le choix de départ, faire dessiner ou partir de son image (2026-10-25) */
.choix-depart { max-width: 1100px; margin: 8px auto 24px; text-align: center; }
.choix-depart h1 { font-size: clamp(36px, 4.6vw, 58px); margin: 0 0 28px; }
.choix-depart .deux-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align: left; }
.choix-depart .porte { display: grid; grid-template-columns: 1fr 1fr; background: var(--carte); border-radius: 10px; overflow: hidden;
  box-shadow: var(--ombre); border: 1px solid var(--ligne); padding: 0; font: inherit; color: var(--encre); text-decoration: none;
  cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s; }
.choix-depart .porte:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent), var(--ombre); }
.choix-depart .vis { display: block; min-height: 240px; }
.choix-depart .vis svg { width: 100%; height: 100%; display: block; }
.choix-depart .txt { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.choix-depart .txt b { font-family: var(--f-titre); font-size: 30px; font-weight: 500; line-height: 1.05; }
.choix-depart .txt > span { color: var(--encre-2); font-size: 14.5px; }
.choix-depart .txt small { color: var(--encre-2); font-size: 12.5px; }
.choix-depart .faux-bouton { align-self: flex-start; margin-top: auto; background: var(--accent); color: #fff !important; border-radius: 999px;
  padding: 10px 18px; font-weight: 600; font-size: 14px; }
@media (max-width: 860px) { .choix-depart .deux-portes, .choix-depart .porte { grid-template-columns: 1fr; } .choix-depart .vis { min-height: 0; height: 150px; } }
@media (max-width: 560px) { .choix-depart h1 { margin-bottom: 18px; } .choix-depart .deux-portes { gap: 14px; }
  .choix-depart .vis { height: 90px; } .choix-depart .txt { padding: 14px 16px; gap: 6px; } .choix-depart .txt b { font-size: 25px; }
  .choix-depart .txt > span { font-size: 13.5px; } }

/* concepteur : répartition de la densité sur la hauteur (fresque) */
.repartition h2 { margin-top: 28px; }
.zones-reglage { display: flex; gap: 22px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; }
.mini-mur { width: 150px; height: 100px; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--ligne); background: var(--carte); }
.mini-mur i { flex: 1; background: var(--accent); }
.mini-mur i + i { border-top: 1px dashed rgba(255, 255, 255, .6); }
.curseurs-zones { display: grid; gap: 8px; flex: 1; min-width: 240px; }
.curseurs-zones label { display: grid; grid-template-columns: 70px 1fr 50px; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.curseurs-zones label span { order: 3; font-weight: 400; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.curseurs-zones input { order: 2; width: 100%; accent-color: var(--accent); }
.bandeau-depart { background: var(--accent-pale); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.garder-dessin { background: var(--accent-pale); border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; }
.garder-dessin label { display: flex; gap: 8px; align-items: baseline; font-size: 15px; }
.garder-dessin .aide { margin: 6px 0 0 24px; }
.metrage .estimation { display: block; margin-top: 6px; color: var(--encre-2); font-size: 14px; }
.metrage .estimation b { color: var(--encre); }

/* échantillons : zones à taille réelle posées sur le mur */
.mur-entier.pose-echantillon { cursor: crosshair; }
.mur-entier .zone-ech, .mur-entier .zone-fantome { position: absolute; box-sizing: border-box; }
.mur-entier .zone-ech { border: 2px solid var(--accent); background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9); cursor: pointer; }
.mur-entier .zone-ech em { position: absolute; top: -1px; left: -1px; background: var(--accent); color: #fff; font-style: normal;
  font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 0 0 4px 0; }
.mur-entier .zone-ech:hover { background: rgba(255, 255, 255, .45); }
.mur-entier .zone-fantome { border: 2px dashed var(--accent); background: rgba(255, 255, 255, .25); pointer-events: none; }
.commande-echantillon .panier-echantillon { margin-top: 12px; display: grid; gap: 10px; }
.commande-echantillon .liste-zones { margin: 0; padding-left: 20px; font-size: 14px; }
.commande-echantillon .total-echantillon { margin: 0; }
.formulaire-livraison { display: grid; gap: 8px; border-top: 1px solid var(--trait, rgba(0, 0, 0, .1)); padding-top: 10px; }
.formulaire-livraison h3 { margin: 0; font-size: 16px; }
.formulaire-livraison label { display: grid; gap: 3px; font-size: 14px; }
.formulaire-livraison input { font: inherit; padding: 7px 9px; border: 1px solid var(--trait, #ccc); border-radius: 6px; background: var(--carte, #fff); }
.formulaire-livraison .deux-champs { display: grid; grid-template-columns: 7em 1fr; gap: 8px; }

/* attente du dessin : les lés s'impriment dans les couleurs du client, des calculs défilent, sa demande reste visible */
.attente-mur { text-align: left; padding: 24px 0; }
.attente-tete { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.etape-attente { font-family: var(--f-titre); font-size: 22px; font-style: italic; color: var(--accent); margin: 4px 0 12px; min-height: 1.3em; }
.jauge-attente { height: 6px; border-radius: 3px; background: var(--chaux-2); overflow: hidden; max-width: 420px; margin: 0 auto 10px; }
.jauge-attente span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }
.attente-corps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.atelier-attente { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 40%); gap: 0;
  background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; height: 300px; }
.les-animes { display: flex; gap: 3px; padding: 18px; background: var(--chaux-2); }
.les-animes i { position: relative; flex: 1; background: var(--fond); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.les-animes b { position: absolute; left: 0; right: 0; top: 0; height: 0; background-color: var(--fond);
  box-shadow: 0 2px 0 rgba(255, 255, 255, .95), 0 4px 6px rgba(0, 0, 0, .18); animation: imprimer-le 1.4s cubic-bezier(.5, 0, .4, 1) forwards; }
@keyframes imprimer-le { to { height: 100%; box-shadow: none; } }
.formules { position: relative; overflow: hidden; background: var(--nuit); color: var(--sur-nuit);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.formules .defile { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; animation: defiler 60s linear infinite;
  font-family: var(--f-titre); font-size: 15px; line-height: 1.25; }
.formules .defile span { font-style: italic; opacity: .75; }
.formules .defile b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 500; color: var(--or); }
@keyframes defiler { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.votre-demande { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px 18px; }
.votre-demande h2 { margin: 0 0 8px; font-size: 20px; }
.votre-demande dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.votre-demande dt { color: var(--discret); }
.votre-demande dd { margin: 0; overflow-wrap: anywhere; }
.pastilles-coloris.grandes { width: 150px; height: 22px; }
.astuce { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--discret); min-height: 3em; }
.astuce::before { content: "Bon à savoir : "; font-weight: 600; color: var(--texte); }
@media (max-width: 760px) {
  .attente-corps { grid-template-columns: 1fr; }
  .atelier-attente { height: 230px; grid-template-columns: minmax(0, 1fr) 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .les-animes b { animation: none; height: 100%; }
  .formules .defile { animation: none; }
  .jauge-attente span { transition: none; }
}