/* Copropriété – beige des murs, bordeaux des volets. Mobile d'abord. */
:root {
  --fond: #f8f1e6;
  --fond-2: #f1e6d5;
  --carte: #fffdf8;
  --encre: #2b1d1f;
  --doux: #5f4f49;
  --filet: #ecdfcb;
  --hero-1: #fbe7d3;
  --hero-2: #f6d6bf;
  --hero-bord: #f0cdb3;
  --barre-fond: rgba(255, 251, 244, .92);
  --accent: #8c2a1e;          /* rouge des volets, chaud (entre RAL 3011 et brique) */
  --accent-fonce: #6a1d14;
  --accent-clair: #f5e0d6;
  --sur-accent: #fbf3e8;
  --ocre: #a5671b;
  --ocre-clair: #f6e7cc;
  --rouge: #b42318;
  --rouge-clair: #fbe2df;
  --vert: #3f6f35;
  --vert-clair: #e2eed9;
  --rayon: 18px;
  --ombre: 0 1px 2px rgba(60, 30, 25, .06), 0 10px 30px -12px rgba(60, 30, 25, .18);
  --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1b1416; --fond-2: #231a1c; --carte: #261c1f; --encre: #f3e9dc; --doux: #b5a59d;
    --filet: #3a2c2f; --accent: #d7684f; --accent-fonce: #a8442f; --accent-clair: #3b211b;
    --hero-1: #3a241c; --hero-2: #2e1d17; --hero-bord: #4a2e24; --barre-fond: rgba(30, 22, 24, .92);
    --sur-accent: #fff6ec; --ocre: #e0a54d; --ocre-clair: #3a2a14; --rouge: #f28b82;
    --rouge-clair: #3d1b1b; --vert: #9cc68a; --vert-clair: #1f2e1b; --ombre: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: .2rem 0 1.2rem; }
h2 { font-size: 1.3rem; margin: 2.4rem 0 .9rem; display: flex; align-items: center; gap: .6rem; }
h2::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--accent); }
h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
small, .doux { color: var(--doux); }
.mono { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ en-tête bordeaux « volets » */
.barre {
  position: sticky; top: 0; z-index: 5; color: var(--sur-accent);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--accent) 0%, var(--accent-fonce) 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.barre-in { max-width: 1080px; margin: 0 auto; padding: .75rem 16px; display: flex; align-items: center; gap: 1rem; }
.marque { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--sur-accent); text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.marque svg { color: var(--sur-accent); background: rgba(255,255,255,.14); border-radius: 10px; padding: 5px; width: 32px; height: 32px; }
nav.principale { display: flex; gap: .25rem; flex-wrap: wrap; margin-left: auto; }
nav.principale a { color: rgba(251,243,232,.82); text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-size: .93rem; font-weight: 500; transition: background .15s, color .15s; }
nav.principale a:hover { background: rgba(255,255,255,.12); color: var(--sur-accent); }
nav.principale a.actif { background: var(--sur-accent); color: var(--accent); font-weight: 600; }
.menu-mobile { display: none; margin-left: auto; }
.barre .menu-mobile { background: rgba(255,255,255,.14); color: var(--sur-accent); border: 0; }
@media (max-width: 780px) {
  nav.principale { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--accent-fonce); padding: .6rem 16px 1rem; flex-direction: column; }
  nav.principale.ouvert { display: flex; }
  .menu-mobile { display: inline-flex; }
}

main { max-width: 1080px; margin: 0 auto; padding: 1.8rem 16px 4rem; }

/* ------------------------------------------------------------------ bandeau d'accueil */
.hero {
  position: relative; overflow: hidden; border-radius: calc(var(--rayon) + 6px);
  padding: 1.6rem 1.5rem; margin-bottom: 1.6rem; color: var(--sur-accent);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 22px),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-fonce) 100%);
  box-shadow: var(--ombre);
}
.hero h1 { margin: 0 0 .3rem; color: var(--sur-accent); }
.hero p { margin: 0; color: rgba(251,243,232,.82); max-width: 46ch; }
.hero .maison-deco { position: absolute; right: -10px; bottom: -14px; width: 150px; opacity: .16; color: var(--sur-accent); }

/* ------------------------------------------------------------------ cartes */
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.carte {
  background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: 1.15rem 1.25rem; box-shadow: var(--ombre); position: relative;
}
a.carte { transition: transform .15s ease, box-shadow .15s ease; }
a.carte:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(90, 21, 32, .35); }
.carte.appel-action { border-color: color-mix(in srgb, var(--accent) 35%, var(--filet)); background: linear-gradient(180deg, var(--accent-clair), var(--carte) 70%); }
.carte.ok { background: linear-gradient(180deg, var(--vert-clair), var(--carte) 80%); }
.carte .chiffre { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1.1; margin: .15rem 0 .2rem; font-variant-numeric: tabular-nums; }
.etiquette { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); font-weight: 600; }
.icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-clair); color: var(--accent); margin-bottom: .7rem; }
.icone svg { width: 22px; height: 22px; }
.carte .icone + .etiquette { margin-top: 0; }

/* ------------------------------------------------------------------ boutons */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 600 .95rem var(--sans); border: 1px solid transparent; border-radius: 12px;
  padding: .65rem 1.15rem; cursor: pointer; text-decoration: none; min-height: 44px;
  background: var(--accent); color: var(--sur-accent);
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 12px -6px rgba(90, 21, 32, .6);
}
.btn:hover, button:hover { background: var(--accent-fonce); }
.btn:active, button:active { transform: translateY(1px); }
.btn.second, button.second { background: var(--carte); color: var(--encre); border-color: var(--filet); box-shadow: none; }
.btn.second:hover, button.second:hover { background: var(--fond-2); }
.btn.ambre, button.ambre { background: var(--accent); }
.btn.danger, button.danger { background: transparent; color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 50%, transparent); box-shadow: none; }
.btn.danger:hover, button.danger:hover { background: var(--rouge-clair); }
.btn.petit, button.petit { min-height: 34px; padding: .3rem .75rem; font-size: .85rem; border-radius: 10px; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ------------------------------------------------------------------ formulaires */
form p, .champ { margin: 0 0 1rem; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=tel], input[type=file], select, textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--fond);
  border: 1px solid var(--filet); border-radius: 12px; padding: .65rem .8rem; min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1.15rem; height: 1.15rem; vertical-align: -3px; margin-right: .35rem; }
input[type=file]::file-selector-button { font: 600 .85rem var(--sans); background: var(--accent); color: var(--sur-accent); border: 0; border-radius: 8px; padding: .45rem .8rem; margin-right: .7rem; cursor: pointer; }
.helptext { display: block; color: var(--doux); font-size: .85rem; margin-top: .3rem; font-weight: 400; }
ul.errorlist { list-style: none; padding: 0; margin: .3rem 0; color: var(--rouge); font-size: .9rem; }
.form-ligne { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }

/* ------------------------------------------------------------------ tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--carte); box-shadow: var(--ombre); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--filet); vertical-align: middle; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); font-weight: 600; background: var(--fond-2); }
tbody tr:hover td { background: color-mix(in srgb, var(--accent-clair) 45%, transparent); }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: var(--fond-2); }
.neg { color: var(--rouge); }
.pos { color: var(--vert); }

/* ------------------------------------------------------------------ pastilles */
.pastille { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastille.ok { background: var(--vert-clair); color: var(--vert); }
.pastille.attente { background: var(--ocre-clair); color: var(--ocre); }
.pastille.ko { background: var(--rouge-clair); color: var(--rouge); }
.pastille.neutre { background: var(--fond-2); color: var(--doux); }

/* ------------------------------------------------------------------ messages */
.messages { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.messages li { padding: .8rem 1rem; border-radius: 12px; margin-bottom: .5rem; background: var(--accent-clair); border-left: 4px solid var(--accent); }
.messages li.error { background: var(--rouge-clair); color: var(--rouge); border-color: var(--rouge); }
.messages li.warning { background: var(--ocre-clair); border-color: var(--ocre); }
.messages li.success { background: var(--vert-clair); border-color: var(--vert); }
.alerte { padding: .85rem 1rem; border-radius: 12px; background: var(--ocre-clair); border-left: 4px solid var(--ocre); margin: 1rem 0; }
.alerte.ko { background: var(--rouge-clair); border-color: var(--rouge); }
.alerte ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* ------------------------------------------------------------------ appel de charges */
.lignes-appel .ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 0; border-bottom: 1px dashed var(--filet); }
.lignes-appel .ligne .detail { white-space: pre-line; color: var(--doux); font-size: .9rem; margin-top: .25rem; }
.lignes-appel .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; margin-top: .3rem; border-top: 2px solid var(--accent); font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--accent); }
.qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.qr img { width: 150px; height: 150px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--filet); }
.iban { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .92rem; }

/* ------------------------------------------------------------------ sondage d'AG */
.sondage td.case, .sondage th.case { text-align: center; }
.choix { display: inline-flex; border: 1px solid var(--filet); border-radius: 12px; overflow: hidden; background: var(--fond); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label { margin: 0; padding: .5rem .7rem; font-size: .84rem; cursor: pointer; font-weight: 500; transition: background .15s; }
.choix label + input + label { border-left: 1px solid var(--filet); }
.choix input:checked + label.oui { background: var(--vert-clair); color: var(--vert); font-weight: 700; }
.choix input:checked + label.peutetre { background: var(--ocre-clair); color: var(--ocre); font-weight: 700; }
.choix input:checked + label.non { background: var(--rouge-clair); color: var(--rouge); font-weight: 700; }
.choix input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.meilleur { background: var(--accent-clair) !important; }
th.meilleur { color: var(--accent); }
.creneaux-saisie { display: grid; gap: .5rem; }
.creneaux-saisie .un { display: flex; gap: .5rem; }

/* ------------------------------------------------------------------ connexion */
.connexion { max-width: 420px; margin: 7vh auto; }
.connexion .logo { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center; color: var(--sur-accent);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px), linear-gradient(135deg, var(--accent), var(--accent-fonce)); box-shadow: var(--ombre); }
.connexion .logo svg { width: 32px; height: 32px; }
.connexion h1 { text-align: center; }

.pied { text-align: center; color: var(--doux); font-size: .85rem; padding: 2rem 16px 3rem; }
img.vignette { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 1px solid var(--filet); }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.infos dt { color: var(--doux); }
dl.infos dd { margin: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ajustements */
.form-ligne .champ, .form-ligne p { margin: 0; }
.champ { margin: 0 0 1rem; }
.champ label { margin-bottom: .35rem; }
.lignes-appel .ligne > .n { white-space: nowrap; }
.grille { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.form-ligne { margin-bottom: 1rem; }

/* ------------------------------------------------------------------ thème « lumineux » : en-tête clair, rouge en touches */
.barre { background: var(--barre-fond); backdrop-filter: blur(8px); color: var(--encre); box-shadow: 0 1px 0 var(--filet); }
.marque { color: var(--accent); }
.marque svg { background: var(--accent); color: var(--sur-accent); }
nav.principale a { color: var(--doux); }
nav.principale a:hover { background: var(--accent-clair); color: var(--accent); }
nav.principale a.actif { background: var(--accent); color: var(--sur-accent); }
.barre .menu-mobile { background: var(--accent-clair); color: var(--accent); }
@media (max-width: 780px) { nav.principale { background: var(--carte); border-bottom: 1px solid var(--filet); } }

.hero { background: linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 100%); color: var(--encre); box-shadow: none; border: 1px solid var(--hero-bord); padding: 1.8rem 1.6rem; }
.hero h1 { color: var(--encre); font-size: clamp(2rem, 5vw, 2.8rem); }
.hero p { color: var(--doux); }
.hero .hero-sur { color: var(--accent); margin-bottom: .3rem; }

.carte { border-radius: 22px; border-color: transparent; box-shadow: 0 2px 4px rgba(120, 60, 30, .05), 0 18px 40px -22px rgba(120, 60, 30, .35); }
.carte.appel-action { background: var(--carte); border: 1.5px solid var(--accent); }
.carte.ok { border: 1.5px solid var(--vert); background: var(--carte); }
.icone { border-radius: 50%; background: var(--accent); color: var(--sur-accent); }
.table-wrap { border-color: transparent; border-radius: 22px; box-shadow: 0 2px 4px rgba(120, 60, 30, .05), 0 18px 40px -22px rgba(120, 60, 30, .3); }
h2::before { width: 8px; height: 8px; border-radius: 50%; }
.lignes-appel .total { border-top-color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .carte, .table-wrap { border-color: var(--filet); }
}

/* lisibilité : titres en Inter gras, petits textes un peu plus grands */
h1, h2, h3, .marque, .carte .chiffre, .lignes-appel .total { font-weight: 700; letter-spacing: -.02em; }
h3 { font-size: 1.08rem; }
.etiquette { font-size: .78rem; letter-spacing: .06em; }
.helptext, small { font-size: .88rem; }
th { font-size: .76rem; }
.iban { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; font-weight: 500; }