/* Service client ArkiaSuite — les couleurs et la police du site arkiasuite.fr. */

@font-face { font-family: 'Archivo'; font-weight: 400; font-display: swap; src: url('polices/Archivo-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-weight: 400; font-display: swap; src: url('polices/Archivo-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap; src: url('polices/Archivo-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap; src: url('polices/Archivo-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #FAF7F6; --surface: #FFFFFF; --ink: #1B1416; --doux: #6B5E60;
  --line: #E6DCDB; --line-fort: #D3C5C4;
  --accent: #8B1A1A; --accent-soft: #F7EAE9; --sur-accent: #FFFFFF;
  --vert: #3F7A54; --vert-soft: #E8F2EC; --ambre: #8A5A00; --ambre-soft: #FBF1DC;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #151011; --surface: #1E1718; --ink: #F3ECEB; --doux: #B5A7A8;
    --line: #342A2B; --line-fort: #4A3B3C;
    --accent: #D9564F; --accent-soft: #2B1A1A; --sur-accent: #1A1112;
    --vert: #6FB489; --vert-soft: #17261D; --ambre: #E0B054; --ambre-soft: #2A2112;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.55 var(--sans); }
a { color: var(--accent); }
img { max-width: 100%; }

.haut { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 17px; }
.marque svg { width: 30px; height: 30px; }
.marque span { color: var(--doux); font-weight: 400; }
.haut nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.haut nav a { text-decoration: none; }
.haut form { margin: 0; }

main { max-width: 720px; margin: 0 auto; padding: 28px 16px 60px; }
main.large { max-width: 1180px; }
h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 28px 0 10px; }
.intro { color: var(--doux); margin: 0 0 24px; }
.carte { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin: 0 0 18px; }
.pied { color: var(--doux); font-size: 14px; text-align: center; padding: 20px 16px 40px; }

label, .etiquette { display: block; font-weight: 600; margin: 18px 0 6px; }
.aide { display: block; font-weight: 400; color: var(--doux); font-size: 14px; }
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  width: 100%; font: inherit; color: inherit; background: var(--ground); border: 1px solid var(--line-fort);
  border-radius: 10px; padding: 11px 12px;
}
textarea { min-height: 170px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, .tuile:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px;
}
input[type=file] { font: inherit; font-size: 15px; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.tuile { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px; font-weight: 600;
  border: 1.5px solid var(--line-fort); border-radius: 12px; background: var(--ground); cursor: pointer; }
.tuile input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.tuile:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.bouton { display: inline-block; font: inherit; font-weight: 600; border-radius: 10px; padding: 11px 20px; cursor: pointer;
  border: 1.5px solid var(--accent); background: var(--accent); color: var(--sur-accent); text-decoration: none; }
.bouton.vide { background: transparent; color: var(--accent); }
.bouton.petit { padding: 6px 12px; font-size: 14px; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }

.note-bas { margin-top: 16px; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message { border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; border: 1px solid var(--line); }
.message.erreur { background: var(--accent-soft); border-color: var(--accent); }
.message.ok { background: var(--vert-soft); border-color: var(--vert); }
.message.avis { background: var(--ambre-soft); border-color: var(--ambre); }

.identite { display: flex; gap: 12px; align-items: center; background: var(--vert-soft); border: 1px solid var(--vert); border-radius: 12px; padding: 12px 14px; }
.identite strong { display: block; }
.capture { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.capture img { width: 160px; border: 1px solid var(--line-fort); border-radius: 8px; }
.case { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 10px 0 0; }

/* Le fil d'une demande */
.fil { list-style: none; padding: 0; margin: 0; }
.fil li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--surface); }
.fil .qui { font-size: 14px; color: var(--doux); margin-bottom: 6px; }
.fil .texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.fil li.equipe { border-left: 4px solid var(--accent); }
.fil li.note { background: var(--ambre-soft); border-color: var(--ambre); }
.fil li.brouillon { border-style: dashed; border-color: var(--ambre); }
.fil li.systeme { background: transparent; border: 0; padding: 2px 14px; color: var(--doux); font-size: 14px; }
.vignettes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.vignettes img { width: 140px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-fort); }

/* L'espace de l'équipe */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 0 0 18px; }
.filtres > * { flex: 1 1 180px; }
.filtres .bouton { flex: 0 0 auto; }
.colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }
.colonne h2 { margin-top: 0; font-size: 17px; display: flex; justify-content: space-between; }
.fiche { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0 0 10px; }
.fiche:hover { border-color: var(--accent); }
.fiche .tete { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--doux); }
.fiche .titre { font-weight: 600; margin: 4px 0; overflow-wrap: anywhere; }
.pastille { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--line-fort); }
.pastille.verifie { color: var(--vert); border-color: var(--vert); background: var(--vert-soft); }
.pastille.non-verifie { color: var(--ambre); border-color: var(--ambre); background: var(--ambre-soft); }
.pastille.nouveau { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.contact { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 17px; padding: 14px 18px; }
.contact a.tel { font-size: 22px; font-weight: 600; text-decoration: none; }
.grille-demande { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .grille-demande { grid-template-columns: 1fr; } }
dl.infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 15px; }
dl.infos dt { color: var(--doux); }
dl.infos dd { margin: 0; overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.codes { font: 600 18px/1.9 ui-monospace, Consolas, monospace; columns: 2; background: var(--ground); border: 1px dashed var(--line-fort); border-radius: 10px; padding: 12px 18px; }
.qr { background: #fff; padding: 12px; border-radius: 10px; width: max-content; }
.qr svg { display: block; width: 220px; height: 220px; }
.secret { font: 15px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.bandeau-maj { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; }
@media print { .haut, .pied, .actions, .non-imprime { display: none; } body { background: #fff; } }