/* Application école — styles. La couleur d'accent vient du logo de l'école (--accent). */
:root {
  --accent: #0E6A8C; --accent-texte: #FFFFFF; --accent-doux: rgba(14,106,140,.1);
  --bg: #F5F6F2; --surface: #FFFFFF; --surface-2: #F3F5F8; --texte: #0A1424; --texte-2: #4A5568;
  --bord: #E3E7ED; --bord-2: #CFD6DF; --ok: #1D6B3A; --ok-bg: #DDF3E5; --non: #B42318; --non-bg: #FDECEA;
  --ombre: 0 1px 2px rgba(10,20,36,.04), 0 12px 32px -16px rgba(10,20,36,.18);
  --f: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --f-titre: "Space Grotesk", Inter, system-ui, sans-serif;
  color-scheme: light;
  /* Marge gauche et droite des textes, identique au site ViNoCode : 24 px, 16 px sous 900 px. */
  --gouttiere: 24px;
}
@media (max-width: 900px) { :root { --gouttiere: 16px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070F1C; --surface: #0F1A2C; --surface-2: #142236; --texte: #EEF2F7; --texte-2: #A9B4C6;
    --bord: rgba(255,255,255,.09); --bord-2: rgba(255,255,255,.18); --ok: #7FDCA0; --ok-bg: rgba(85,196,122,.16);
    --non: #FF8A7A; --non-bg: rgba(255,138,122,.14); --ombre: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -18px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 var(--f); color: var(--texte); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-titre); margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.barre { display: flex; align-items: center; gap: 16px; padding: 12px var(--gouttiere); background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; }
.barre__marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); font-family: var(--f-titre); font-weight: 700; font-size: 18px; min-width: 0; }
.barre__marque span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre__marque img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; flex: none; }
.barre__compte { margin-left: auto; font-size: 14px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.barre .lien { flex: none; }

.app { max-width: 880px; margin: 0 auto; padding: 32px var(--gouttiere) 80px; }
.chargement { color: var(--texte-2); text-align: center; padding: 48px 0; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: 20px; padding: 28px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 18px; }
.carte--etroite { max-width: 440px; margin: 24px auto 0; }
.titre { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.6px; }
.sous { color: var(--texte-2); }
.pile { display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }

label.champ { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
label.champ small { font-weight: 400; color: var(--texte-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], select {
  font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bord-2); border-radius: 12px;
  padding: 11px 13px; min-height: 44px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
input[type=number] { max-width: 140px; }
.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--bord-2); border-radius: 12px; cursor: pointer; font-weight: 500; min-height: 44px; }
.choix label:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.choix input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }

.bouton { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 12px 22px; min-height: 44px; cursor: pointer;
  background: var(--accent); color: var(--accent-texte); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: .55; cursor: default; filter: none; }
.bouton--clair { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord-2); }
.bouton--google { background: var(--surface); color: var(--texte); box-shadow: inset 0 0 0 1px var(--bord-2); width: 100%; }
.bouton--plein { width: 100%; }
.lien { font: inherit; background: none; border: 0; padding: 4px; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.separateur { display: flex; align-items: center; gap: 12px; color: var(--texte-2); font-size: 14px; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.onglets { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.onglets button { font: inherit; font-weight: 600; border: 0; background: none; border-radius: 999px; padding: 10px; cursor: pointer; color: var(--texte-2); min-height: 40px; }
.onglets button[aria-selected=true] { background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }

.erreur { color: var(--non); background: var(--non-bg); border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.info { background: var(--accent-doux); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--texte); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 2 * var(--gouttiere)); box-shadow: var(--ombre); z-index: 10; }

/* Assistant */
.progres { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.progres__texte { font-size: 14px; color: var(--texte-2); font-weight: 600; }
.progres__barre { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.progres__barre span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.etapes { display: flex; flex-wrap: wrap; gap: 6px; }
.etapes button { font: inherit; font-size: 13px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.etapes button[aria-current=step] { border-color: var(--accent); color: var(--texte); font-weight: 700; }
.etapes button:disabled { opacity: .45; cursor: default; }
.pied-etape { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

.logo-zone { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-apercu { width: 88px; height: 88px; border-radius: 16px; border: 1px dashed var(--bord-2); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface-2); color: var(--texte-2); font-size: 12px; text-align: center; flex: none; }
.logo-apercu img { width: 100%; height: 100%; object-fit: contain; }
input[type=color] { width: 52px; height: 44px; border: 1px solid var(--bord-2); border-radius: 12px; padding: 4px; background: var(--surface); cursor: pointer; }
.pastille { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; }

.tableau-defile { overflow-x: auto; border: 1px solid var(--bord); border-radius: 14px; }
table.grille { border-collapse: collapse; width: 100%; font-size: 14px; }
table.grille th, table.grille td { padding: 8px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
table.grille tr:last-child td { border-bottom: 0; }
table.grille thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
table.grille input[type=number] { min-width: 64px; width: 72px; padding: 8px; min-height: 38px; }
table.grille input[type=text] { min-width: 150px; padding: 8px; min-height: 38px; }
.apercu-noms { font-size: 13px; color: var(--texte-2); }
.niveau-ligne { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.niveau-ligne input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.cycle-titre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texte-2); margin-top: 6px; }
.tarif { border: 1px solid var(--bord); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.tarif h3 { font-size: 17px; }
.tranches { display: flex; flex-wrap: wrap; gap: 8px; }
.tranches input { width: 120px !important; max-width: 120px; }

/* Tableau de bord */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.stat { background: var(--surface-2); border-radius: 14px; padding: 14px; }
.stat b { display: block; font-family: var(--f-titre); font-size: 28px; color: var(--accent); }
.stat span { font-size: 13px; color: var(--texte-2); font-weight: 600; }
.liste-ecoles { display: flex; flex-direction: column; gap: 10px; }
.liste-ecoles button { font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer; }
.liste-ecoles button:hover { border-color: var(--accent); }
.liste-ecoles small { color: var(--texte-2); display: block; }
.etiquette { display: inline-flex; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); }

@media (max-width: 560px) {
  .carte { padding: 20px; border-radius: 16px; }
  .app { padding-top: 20px; }
  .barre__compte { display: none !important; }
  .barre [data-deconnexion] { margin-left: auto; }
}

/* Navigation de l'école */
.nav-ecole { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: var(--surface); border: 1px solid var(--bord); border-radius: 999px; box-shadow: var(--ombre); scrollbar-width: none; }
.nav-ecole button { font: inherit; font-weight: 600; font-size: 15px; border: 0; background: none; color: var(--texte-2); border-radius: 999px; padding: 10px 16px; cursor: pointer; white-space: nowrap; min-height: 42px; }
.nav-ecole button[aria-current=page] { background: var(--accent); color: var(--accent-texte); }
.filtres input[type=search] { flex: 1 1 240px; width: auto; }
.filtres select { width: auto; flex: 0 1 220px; }
input[type=search] { font: inherit; color: var(--texte); background: var(--surface); border: 1px solid var(--bord-2); border-radius: 12px; padding: 11px 13px; min-height: 44px; width: 100%; }
table.liste tbody tr { cursor: pointer; }
table.liste tbody tr:hover, table.liste tbody tr:focus { background: var(--accent-doux); outline: none; }
tr.annule td { color: var(--texte-2); text-decoration: line-through; }
tr.annule td small, tr.annule td button { text-decoration: none; }
.non { color: var(--non); }
.element { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--bord-2); border-radius: 12px; cursor: pointer; min-height: 48px; }
.element:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.element input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.total { font-size: 18px; }
.total strong { font-family: var(--f-titre); }
.stat b { font-size: clamp(20px, 3.4vw, 28px); }

/* ---------- Assistant de configuration (version 2) ---------- */
@keyframes apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse-copie { 0% { box-shadow: 0 0 0 0 var(--accent-doux); } 40% { box-shadow: 0 0 0 6px var(--accent-doux); } 100% { box-shadow: 0 0 0 0 transparent; } }

.app:has(.config) { max-width: 1120px; }
.config-entete {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: 24px; color: #fff;
  background: radial-gradient(circle at 90% 0%, rgba(255,255,255,.22), transparent 45%), linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0A1424));
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--accent) 70%, transparent); margin-bottom: 22px; animation: apparition .4s ease-out;
}
.config-entete::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size: 22px 22px; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.config-entete__logo { width: 64px; height: 64px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); position: relative; z-index: 1; }
.config-entete__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.config-entete__logo span { font-family: var(--f-titre); font-weight: 700; font-size: 30px; color: var(--accent); }
.config-entete__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; position: relative; z-index: 1; }
.config-entete__sur { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .85; }
.config-entete h1 { font-size: clamp(22px, 3.4vw, 32px); letter-spacing: -.5px; overflow-wrap: anywhere; }
.config-entete__aide { font-size: 14px; opacity: .9; }
.config-entete__retour { align-self: flex-start; font: inherit; font-weight: 600; font-size: 14px; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.anneau { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; z-index: 1;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.22) 0); transition: background .6s; }
.anneau span { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 17px; background: color-mix(in srgb, var(--accent) 80%, #0A1424); font-family: var(--f-titre); font-weight: 700; font-size: 20px; }
.anneau small { font-size: 11px; margin-left: 1px; }

.config { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.config-etapes { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--bord); border-radius: 20px; box-shadow: var(--ombre); }
.config-etape { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 0; background: none; color: var(--texte); font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.config-etape:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 46px; height: 12px; width: 2px; background: var(--bord); border-radius: 2px; }
.config-etape.est-faite:not(:last-child)::after { background: var(--accent); }
.config-etape:hover:not(:disabled):not(.est-active) { background: var(--surface-2); }
.config-etape:disabled { cursor: default; opacity: .5; }
.config-etape__ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--texte-2); transition: background .2s, color .2s; }
.config-etape.est-faite .config-etape__ico { background: var(--accent-doux); color: var(--accent); }
.config-etape.est-active { background: var(--accent-doux); }
.config-etape.est-active .config-etape__ico { background: var(--accent); color: var(--accent-texte); box-shadow: 0 8px 18px -8px var(--accent); }
.config-etape__txt { display: flex; flex-direction: column; min-width: 0; }
.config-etape__txt b { font-size: 14px; }
.config-etape__txt small { font-size: 12px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.config-panneau { background: var(--surface); border: 1px solid var(--bord); border-radius: 24px; box-shadow: var(--ombre); display: flex; flex-direction: column; min-width: 0; }
.config-panneau__tete { display: flex; gap: 16px; align-items: flex-start; padding: 26px 26px 0; }
.config-panneau__ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--accent-doux); color: var(--accent); }
.config-panneau__num { font-size: 13px; font-weight: 700; color: var(--accent); }
.config-panneau h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.4px; margin: 2px 0 4px; }
.config-panneau__tete p { color: var(--texte-2); font-size: 15px; }
.config-corps { padding: 22px 26px; display: flex; flex-direction: column; gap: 20px; animation: apparition .35s ease-out; }
.config-pied { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--bord);
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 0 0 24px 24px; }
.config-panneau > .erreur { margin: 0 26px 12px; }
.bouton--petit { padding: 8px 14px; min-height: 38px; font-size: 14px; }

/* Cartes à choisir (type, cycles, ticket) */
.cartes-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.carte-choix { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1.5px solid var(--bord-2); border-radius: 18px; cursor: pointer; background: var(--surface);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.carte-choix:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.carte-choix input { position: absolute; opacity: 0; pointer-events: none; }
.carte-choix b { font-size: 17px; font-family: var(--f-titre); }
.carte-choix small { color: var(--texte-2); font-size: 13px; }
.carte-choix__ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); color: var(--texte-2); margin-bottom: 4px; transition: background .2s, color .2s; }
.carte-choix__coche { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--bord-2); color: transparent; transition: all .2s; }
.carte-choix:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux); }
.carte-choix:has(input:checked) .carte-choix__ico { background: var(--accent); color: var(--accent-texte); }
.carte-choix:has(input:checked) .carte-choix__coche { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.carte-choix:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.puces-niveaux { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.puces-niveaux i, .puces-classes i { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); }
.carte-choix:has(input:checked) .puces-niveaux i { background: var(--accent-doux); color: var(--texte); }
.ticket-dessin { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px 14px; background: var(--surface-2); border-radius: 4px 4px 0 0; align-self: flex-start; margin-bottom: 4px;
  -webkit-mask: radial-gradient(circle 4px at 50% 100%, transparent 98%, #000) bottom / 9px 100% repeat-x; mask: radial-gradient(circle 4px at 50% 100%, transparent 98%, #000) bottom / 9px 100% repeat-x; }
.ticket-dessin--petit { width: 46px; } .ticket-dessin--grand { width: 64px; }
.ticket-dessin i { display: block; height: 4px; border-radius: 2px; background: var(--bord-2); }
.ticket-dessin i:nth-child(2) { width: 70%; } .ticket-dessin i:nth-child(4) { width: 50%; margin-left: auto; }

/* Identité : dépôt du logo, pastilles de couleur, aperçu */
.etiquette-champ { font-weight: 600; font-size: 14px; }
.etiquette-champ small { font-weight: 400; color: var(--texte-2); }
.identite { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; padding: 18px; border-radius: 20px; background: var(--surface-2); }
.depot { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px dashed var(--bord-2); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.depot:hover, .depot.est-survole { border-color: var(--accent); background: var(--accent-doux); }
.depot__apercu { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); color: var(--texte-2); flex: none; }
.depot__apercu img { width: 100%; height: 100%; object-fit: contain; }
.depot__texte { display: flex; flex-direction: column; gap: 2px; }
.depot__texte small { color: var(--texte-2); font-size: 13px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 22px 10px; padding-bottom: 6px; }
.pastille-choix { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .15s; }
.pastille-choix:hover { transform: scale(1.1); }
.pastille-choix.est-choisie { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--c); }
.pastille-choix i { position: absolute; bottom: -16px; font-size: 10px; font-style: normal; font-weight: 700; color: var(--texte-2); }
.pastille-choix--libre { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); overflow: hidden; }
.pastille-choix--libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.maquette { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg); border: 1px solid var(--bord); box-shadow: var(--ombre); font-size: 12px; }
.maquette > small { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--texte-2); }
.maquette__barre { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--bord); }
.maquette__barre b { font-family: var(--f-titre); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.maquette__logo { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-doux); overflow: hidden; flex: none; }
.maquette__logo img { width: 100%; height: 100%; object-fit: contain; }
.maquette__corps { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.maquette__onglets { display: flex; gap: 4px; }
.maquette__onglets i { font-style: normal; padding: 4px 8px; border-radius: 999px; color: var(--texte-2); font-weight: 600; }
.maquette__onglets i.actif { background: var(--accent); color: var(--accent-texte); }
.maquette__stat { background: var(--surface); border-radius: 10px; padding: 10px; color: var(--texte-2); }
.maquette__stat b { display: block; font-family: var(--f-titre); font-size: 20px; color: var(--accent); }
.maquette__bouton { align-self: flex-start; background: var(--accent); color: var(--accent-texte); border-radius: 999px; padding: 7px 12px; font-weight: 700; transition: background .3s; }

/* Blocs, curseur, compteurs, interrupteurs */
.bloc { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--bord); border-radius: 18px; }
.bloc__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.bulle { font-family: var(--f-titre); font-weight: 700; font-size: 15px; color: var(--accent); background: var(--accent-doux); border-radius: 999px; padding: 4px 12px; }
.curseur { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-doux)); accent-color: var(--accent); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: var(--ombre); cursor: grab; }
.curseur::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); cursor: grab; }
.compteur { display: inline-flex; align-items: center; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--surface); overflow: hidden; flex: none; }
.compteur button { width: 38px; height: 40px; border: 0; background: var(--surface-2); color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.compteur button:hover { background: var(--accent-doux); color: var(--accent); }
.compteur input[type=number] { width: 52px; max-width: 52px; min-height: 40px; border: 0; border-radius: 0; text-align: center; padding: 0 4px; font-weight: 700; -moz-appearance: textfield; }
.compteur input::-webkit-outer-spin-button, .compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.poids { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.poids__item { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.repartition { display: flex; height: 30px; border-radius: 10px; overflow: hidden; font-size: 12px; font-weight: 700; }
.repartition span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; transition: flex-grow .3s; min-width: 0; }
.repartition span:first-child { background: var(--accent); color: var(--accent-texte); }
.repartition span:last-child { background: var(--accent-doux); color: var(--texte); }
.formule { font-size: 14px; color: var(--texte-2); background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.formule b { color: var(--texte); }
.interrupteur { cursor: pointer; }
.interrupteur > input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interrupteur > i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--bord-2); position: relative; transition: background .2s; }
.interrupteur > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.interrupteur > input:checked + i { background: var(--accent); }
.interrupteur > input:checked + i::after { transform: translateX(18px); }
.interrupteur > input:focus-visible + i { outline: 3px solid var(--accent); outline-offset: 2px; }
.bloc--ligne { flex-direction: row; align-items: center; justify-content: space-between; }
.bloc--ligne > span { display: flex; flex-direction: column; gap: 2px; }
.astuce { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texte-2); background: var(--accent-doux); border-radius: 14px; padding: 12px 14px; }
.astuce svg { flex: none; color: var(--accent); margin-top: 2px; }
.astuce svg + svg, .astuce svg:not(:first-child) { display: inline; vertical-align: -2px; margin: 0; }

/* Année : trimestres, mois, niveaux */
.trimestres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.trimestre { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.trimestre label { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 6px; font-size: 13px; color: var(--texte-2); }
.trimestre input { min-height: 40px; padding: 8px 10px; }
.mois { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.mois__puce { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--bord-2); background: var(--surface); color: var(--texte-2); cursor: pointer; font: inherit; transition: all .15s; }
.mois__puce b { font-size: 14px; text-transform: capitalize; }
.mois__puce small { font-size: 11px; }
.mois__puce[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.niveau-puce { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 4px; border-radius: 14px; border: 1px solid var(--bord); position: relative; }
.niveau-puce input[type=text] { border: 0; background: transparent; font-weight: 600; min-height: 38px; padding: 6px 10px; }
.niveau-puce input[type=text]:focus { background: var(--surface-2); box-shadow: none; }
.niveau-puce:has(input:not(:checked)) input[type=text] { color: var(--texte-2); text-decoration: line-through; }

/* Sections */
.segment { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.segment label { cursor: pointer; }
.segment input { position: absolute; opacity: 0; }
.segment span { display: block; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--texte-2); transition: all .2s; }
.segment input:checked + span { background: var(--surface); color: var(--texte); box-shadow: var(--ombre); }
.segment input:focus-visible + span { outline: 3px solid var(--accent); }
.sections-liste { display: flex; flex-direction: column; gap: 8px; }
.section-ligne { display: grid; grid-template-columns: 90px auto 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.puces-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.puces-classes i { background: var(--surface); color: var(--texte); border: 1px solid var(--bord); animation: apparition .25s ease-out; }

/* Matières */
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.puce-ajout { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--bord-2); background: var(--surface); color: var(--texte); cursor: pointer; }
.puce-ajout:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-doux); }
.matrice th:first-child, .matrice tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.matrice thead th:first-child { background: var(--surface-2); }
.matrice thead th { text-align: center; }
.matrice thead th span { margin-right: 4px; }
.matrice tbody th input { min-width: 160px; font-weight: 600; }
.matrice td { text-align: center; }
.matrice input[type=number] { text-align: center; }
.matrice tbody tr { animation: apparition .25s ease-out; }
.actions-ligne { white-space: nowrap; }
.icone-bouton { width: 32px; height: 32px; border-radius: 10px; border: 0; background: transparent; color: var(--texte-2); cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; }
.icone-bouton:hover { background: var(--accent-doux); color: var(--accent); }
.icone-bouton--non:hover { background: var(--non-bg); color: var(--non); }

/* Tarifs */
.recap-tarifs td, .recap-tarifs th { white-space: nowrap; }
.tarifs { display: flex; flex-direction: column; gap: 14px; }
.tarif-carte { border: 1px solid var(--bord); border-radius: 20px; overflow: hidden; }
.tarif-carte > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-2); }
.tarif-carte h3 { font-size: 19px; }
.tarif-carte > header .bouton { margin-left: auto; }
.tarif-carte__blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tarif-bloc { display: flex; flex-direction: column; gap: 12px; padding: 16px; position: relative; border-radius: 0; }
.tarif-bloc + .tarif-bloc { border-left: 1px solid var(--bord); }
.tarif-bloc.est-copie { animation: pulse-copie .8s ease-out; }
.tarif-bloc__tete { display: flex; align-items: center; gap: 8px; }
.tarif-bloc__tete small { color: var(--texte-2); }
.tarif-bloc__tete .icone-bouton { margin-left: auto; }
.tarif-bloc .tranches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.tranche { display: flex; flex-direction: column; gap: 2px; }
.tranche small { font-size: 11px; color: var(--texte-2); font-weight: 600; }
.tranche input { min-height: 40px; padding: 8px 10px; max-width: none !important; width: 100% !important; }
.champ--compact { font-size: 13px; }
.montant { display: flex; align-items: center; border: 1px solid var(--bord-2); border-radius: 12px; background: var(--surface); overflow: hidden; max-width: 220px; }
.montant input { border: 0 !important; box-shadow: none !important; max-width: none; min-height: 40px; }
.montant i { font-style: normal; padding: 0 12px; color: var(--texte-2); font-weight: 600; }
.tarif-bloc__total { font-size: 13px; color: var(--texte-2); }
.tarif-bloc__total b { color: var(--texte); }
.copie { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--accent-doux); animation: apparition .2s ease-out; }
.copie__niveaux, .copie__quoi { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.copie__niveaux label, .copie__quoi label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.copie input[type=checkbox] { accent-color: var(--accent); width: 17px; height: 17px; }
.copie .bouton { align-self: flex-start; }

/* Récapitulatif */
.equipe-bientot { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; border: 1px dashed var(--bord-2); color: var(--texte-2); }
.equipe-bientot b { color: var(--texte); display: block; }
.recaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.recap { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--surface-2); font-size: 14px; animation: apparition .35s ease-out both; }
.recap:nth-child(2) { animation-delay: .04s; } .recap:nth-child(3) { animation-delay: .08s; } .recap:nth-child(4) { animation-delay: .12s; }
.recap:nth-child(5) { animation-delay: .16s; } .recap:nth-child(6) { animation-delay: .2s; } .recap:nth-child(7) { animation-delay: .24s; }
.recap header { display: flex; justify-content: space-between; align-items: center; }
.recap header b { font-family: var(--f-titre); font-size: 16px; }
.recap p { color: var(--texte-2); line-height: 1.5; }

@media (max-width: 900px) {
  .config { grid-template-columns: 1fr; }
  .config-etapes { position: static; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 16px; scrollbar-width: none; }
  .config-etape { flex: none; padding: 8px 10px; }
  .config-etape::after { display: none; }
  .config-etape__txt small { display: none; }
  .identite { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .config-entete { padding: 18px; gap: 12px; border-radius: 20px; }
  .config-entete__logo { width: 48px; height: 48px; border-radius: 14px; }
  .anneau { width: 58px; height: 58px; } .anneau span { width: 46px; height: 46px; font-size: 16px; padding-top: 13px; }
  .config-panneau__tete { padding: 18px 18px 0; } .config-panneau__ico { width: 42px; height: 42px; }
  .config-corps { padding: 18px; } .config-pied { padding: 12px 18px; }
  .config-panneau > .erreur { margin: 0 18px 12px; }
  .section-ligne { grid-template-columns: 1fr auto; } .section-ligne .puces-classes { grid-column: 1 / -1; }
  .tarif-bloc + .tarif-bloc { border-left: 0; border-top: 1px solid var(--bord); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }