/* =====================================================================
   ASSOETU — feuille de style unique.
   §14 : le registre du cahier annoté — réglure Seyès, marge rouge, stabilo.
   Le back-office, lui, reste sobre : le registre s'arrête à la porte de
   l'administration.
   Aucune ressource distante : la CSP n'autorise que ce domaine.
   ===================================================================== */

:root {
    --papier: #faf9f5;
    --surface: #ffffff;
    --surface-creuse: #f2f3f8;
    --encre: #17224a;
    --encre-douce: #55608a;
    --encre-pale: #8891b0;
    --reglure: #c9d2ec;
    --reglure-pale: #e4e8f4;
    --marge: #c6362f;
    --marge-pale: #f8e9e7;
    --stabilo: #ffe873;
    --ok: #1e7a52;
    --ok-pale: #e6f4ed;
    --alerte: #b45309;
    --alerte-pale: #fdf3e3;
    --rayon: 4px;
    --ombre: 0 1px 2px rgba(23, 34, 74, .05), 0 8px 24px -18px rgba(23, 34, 74, .45);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--encre); text-underline-offset: .18em; text-decoration-color: var(--marge); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--marge);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -.015em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.55rem); font-weight: 700; }
h3 { font-size: 1.06rem; font-weight: 650; }
p { margin: 0 0 1rem; }

.mono { font-family: var(--mono); }
.etiquette {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--encre-pale);
}
.discret { color: var(--encre-douce); font-size: .92rem; }
.tres-discret { color: var(--encre-pale); font-size: .84rem; }
.stabilo { background: linear-gradient(transparent 55%, var(--stabilo) 55%); padding: 0 .12em; }
.rien { color: var(--encre-pale); font-style: italic; }

/* ------------------------------------------------------------ boutons */

.btn, button.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .6rem 1.15rem;
    border: 1px solid var(--encre);
    border-radius: var(--rayon);
    background: var(--encre);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .06s ease, background .15s ease;
}
.btn:hover { background: #101a3a; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-marge { background: var(--marge); border-color: var(--marge); }
.btn-marge:hover { background: #a72c26; }

.btn-fantome { background: transparent; color: var(--encre); border-color: var(--reglure); }
.btn-fantome:hover { background: var(--surface-creuse); }

.btn-danger { background: transparent; color: var(--marge); border-color: var(--marge); }
.btn-danger:hover { background: var(--marge-pale); }

.btn-petit { min-height: 34px; padding: .3rem .7rem; font-size: .85rem; }
.btn-large { width: 100%; font-size: 1.05rem; padding: .85rem 1.2rem; }

/* ------------------------------------------------------- formulaires */

label { display: block; font-weight: 600; margin-bottom: .3rem; }
.champ { margin-bottom: 1.25rem; }
.champ .aide { color: var(--encre-douce); font-size: .88rem; margin: .25rem 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="date"], input[type="search"],
select, textarea {
    width: 100%;
    min-height: 44px;
    padding: .6rem .75rem;
    border: 1px solid var(--reglure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--encre);
    font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--marge); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--marge); background: var(--marge-pale); }

.erreur-champ { color: var(--marge); font-size: .88rem; margin: .3rem 0 0; font-weight: 600; }

.case { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; }
.case input[type="checkbox"], .case input[type="radio"] { width: 22px; height: 22px; min-height: 0; margin-top: .15rem; flex: none; accent-color: var(--marge); }

.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.1rem; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1.1rem; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------- messages */

.flash { border-radius: var(--rayon); padding: .85rem 1.1rem; margin: 0 0 1.4rem; font-weight: 600; }
.flash-success { background: var(--ok-pale); color: var(--ok); border: 1px solid #b9e0cd; }
.flash-error { background: var(--marge-pale); color: var(--marge); border: 1px solid #f0c8c4; }
.flash-info { background: var(--surface-creuse); color: var(--encre-douce); border: 1px solid var(--reglure); }

.encart {
    background: var(--surface);
    border: 1px solid var(--reglure);
    border-left: 3px solid var(--marge);
    border-radius: var(--rayon);
    padding: 1rem 1.15rem;
    margin: 0 0 1.4rem;
}
.encart > :last-child { margin-bottom: 0; }
.encart-calme { border-left-color: var(--reglure); }

/* =====================================================================
   Public — le cahier
   ===================================================================== */

.page-publique { background: var(--papier); }

.entete-publique {
    border-bottom: 1px solid var(--reglure);
    background: var(--surface);
}
.entete-publique .dedans {
    max-width: 62rem;
    margin: 0 auto;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.marque { font-weight: 800; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: baseline; gap: .5rem; }
.marque .petit { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--marge); }

.feuille { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; position: relative; }
.feuille-large { max-width: 62rem; }

/* Réglure Seyès : un seul effet fort par écran, jamais sous du texte. */
.reglure {
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 31px, var(--reglure-pale) 31px 32px),
        linear-gradient(to right, transparent 0 47px, var(--marge-pale) 47px 50px, transparent 50px);
    border: 1px solid var(--reglure);
    border-radius: var(--rayon);
}

.heros { padding: 2.5rem 0 1rem; }
.heros h1 { margin-bottom: .8rem; }
.chapo { font-family: var(--serif); font-size: 1.2rem; color: var(--encre-douce); max-width: 34em; }

/* La barre de progression est une règle graduée (§14). */
.regle {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--reglure);
    border-radius: var(--rayon);
    background: var(--surface);
    overflow: hidden;
    margin: 0 0 2rem;
    box-shadow: var(--ombre);
}
.regle li {
    flex: 1;
    list-style: none;
    padding: .55rem .4rem .5rem;
    text-align: center;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--encre-pale);
    border-right: 1px solid var(--reglure-pale);
    border-top: 3px solid transparent;
    background: repeating-linear-gradient(to right, var(--reglure-pale) 0 1px, transparent 1px 12px) bottom / 100% 5px no-repeat;
}
.regle li:last-child { border-right: 0; }
.regle li.faite { color: var(--encre-douce); border-top-color: var(--reglure); }
.regle li.courante { color: var(--marge); border-top-color: var(--marge); background-color: #fff; font-weight: 700; }
.regle .numero { display: block; font-size: 1rem; letter-spacing: 0; }

.carte-papier {
    background: var(--surface);
    border: 1px solid var(--reglure);
    border-radius: var(--rayon);
    padding: 1.5rem;
    box-shadow: var(--ombre);
    margin-bottom: 1.5rem;
}
.carte-papier > :last-child { margin-bottom: 0; }

/* Le bloc « conditions » : des passages surlignés au stabilo. */
.conditions { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.condition { background: var(--surface); border: 1px solid var(--reglure); border-radius: var(--rayon); padding: 1.1rem 1.2rem; }
.condition h3 { display: flex; align-items: baseline; gap: .5rem; }
.condition ul { margin: 0; padding-left: 1.1rem; }
.condition li { margin-bottom: .4rem; }
.condition-limites { border-left: 3px solid var(--marge); }

/* Le dépôt de carte : un badge que l'on glisse dans un porte-carte. */
.porte-carte {
    position: relative;
    border: 2px dashed var(--reglure);
    border-radius: 8px;
    background: var(--surface-creuse);
    padding: 1rem;
    text-align: center;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}
.porte-carte.rempli { border-style: solid; border-color: var(--ok); background: var(--surface); }
.porte-carte img, .porte-carte canvas { max-width: 100%; border-radius: 4px; display: block; }
.porte-carte .legende { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale); }

.zone-masquage { position: relative; display: inline-block; max-width: 100%; touch-action: none; }
.zone-masquage canvas { max-width: 100%; height: auto; cursor: crosshair; }
.outils-masquage { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; justify-content: center; }

/* La signature se fait au stylo, sur une ligne pointillée. */
.zone-signature {
    border: 1px solid var(--reglure);
    border-radius: var(--rayon);
    background: var(--surface);
    padding: .75rem;
    position: relative;
}
.zone-signature canvas { width: 100%; height: 220px; display: block; touch-action: none; background: var(--surface); }
.ligne-signature {
    position: absolute;
    left: 1.5rem; right: 1.5rem; bottom: 2.6rem;
    border-bottom: 1px dashed var(--encre-pale);
    pointer-events: none;
}
.conseil-paysage { display: none; }

.apercu-pdf { width: 100%; height: min(70vh, 720px); border: 1px solid var(--reglure); border-radius: var(--rayon); background: var(--surface-creuse); }

.actions-etape { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.actions-etape .btn-large { flex: 1 1 14rem; }

.pied-public {
    border-top: 1px solid var(--reglure);
    padding: 1.5rem 1.25rem 3rem;
    color: var(--encre-pale);
    font-size: .85rem;
    text-align: center;
}

/* =====================================================================
   Back-office — sobre
   ===================================================================== */

.appli { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.barre-laterale {
    background: var(--encre);
    color: #dfe4f5;
    padding: 1.1rem 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.barre-laterale .marque { color: #fff; padding: 0 1.2rem 1rem; }
.barre-laterale a { color: #c2c9e4; text-decoration: none; padding: .6rem 1.2rem; display: flex; justify-content: space-between; gap: .5rem; }
.barre-laterale a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.barre-laterale a.actif { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--marge); font-weight: 600; }
.barre-laterale .pastille { background: var(--marge); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .75rem; font-weight: 700; }
.barre-laterale .bas { margin-top: auto; padding: 1rem 1.2rem 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; color: #8b95bd; }

.contenu { padding: 1.75rem 2rem 4rem; max-width: 78rem; }
.entete-page { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.entete-page h1 { margin: 0; font-size: 1.7rem; }

.cartes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.stat { background: var(--surface); border: 1px solid var(--reglure); border-radius: var(--rayon); padding: 1rem 1.1rem; }
.stat .valeur { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stat .valeur.alerte { color: var(--marge); }

.panneau { background: var(--surface); border: 1px solid var(--reglure); border-radius: var(--rayon); padding: 1.25rem 1.4rem; margin-bottom: 1.5rem; }
.panneau > :last-child { margin-bottom: 0; }
.panneau h2 { font-size: 1.15rem; }

.colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale); padding: .5rem .6rem; border-bottom: 1px solid var(--reglure); }
td { padding: .65rem .6rem; border-bottom: 1px solid var(--reglure-pale); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.tableau-defilant { overflow-x: auto; }

.badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .18rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.st-draft { background: var(--surface-creuse); color: var(--encre-douce); }
.st-wait { background: #fff3cd; color: #8a6100; }
.st-ok { background: var(--ok-pale); color: var(--ok); }
.st-old { background: var(--surface-creuse); color: var(--encre-pale); }
.st-ko { background: var(--marge-pale); color: var(--marge); }

.filtres { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.filtres .champ { margin-bottom: 0; }

.paires { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem 1.5rem; }
.paire .cle { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale); }
.paire .valeur { font-weight: 600; overflow-wrap: anywhere; }

.specimens { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.specimen { border: 1px solid var(--reglure); border-radius: var(--rayon); overflow: hidden; background: var(--surface-creuse); }
.specimen img { width: 100%; display: block; }
.specimen .pied { padding: .5rem .7rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .82rem; }

.journal li { list-style: none; padding: .5rem 0; border-bottom: 1px solid var(--reglure-pale); font-size: .9rem; }
.journal { margin: 0; padding: 0; }
.journal .quand { font-family: var(--mono); font-size: .72rem; color: var(--encre-pale); }

details.repli { border: 1px solid var(--reglure); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: 1rem; background: var(--surface); }
details.repli > summary { cursor: pointer; font-weight: 600; }
details.repli[open] > summary { margin-bottom: .9rem; }

.onglets { display: flex; gap: .35rem; border-bottom: 1px solid var(--reglure); margin-bottom: 1.5rem; flex-wrap: wrap; }
.onglets a { padding: .55rem .9rem; text-decoration: none; border-bottom: 2px solid transparent; color: var(--encre-douce); }
.onglets a.actif { border-bottom-color: var(--marge); color: var(--encre); font-weight: 600; }

/* Mur des cartes — pensé pour une tablette au comptoir. */
.page-accueil { background: #0f1631; color: #e8ecf9; min-height: 100vh; }
.page-accueil .entete { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .12); flex-wrap: wrap; }
.page-accueil input[type="search"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; min-width: 16rem; }
.page-accueil input[type="search"]::placeholder { color: #8f9ac4; }
.page-accueil a { color: #cdd6f5; }

.mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; padding: 1.5rem; }
.mur .vignette { background: #182147; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; overflow: hidden; cursor: zoom-in; }
.mur .vignette img { width: 100%; display: block; background: #0b1226; }
.mur .vignette .titre { padding: .7rem .8rem; }
.mur .vignette .ecole { font-weight: 700; }
.mur .vignette .annee { font-family: var(--mono); font-size: .72rem; color: #93a0cd; }
.mur .vignette .annee.perimee { color: #ffb27d; }

.loupe { position: fixed; inset: 0; background: rgba(6, 10, 26, .93); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; padding: 1.5rem; z-index: 50; }
.loupe.ouverte { display: flex; }
.loupe img { max-width: 100%; max-height: 78vh; border-radius: 6px; }
.loupe .faces { display: flex; gap: .6rem; }

/* --------------------------------------------------------- pages nues */

.page-nue { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--papier); }
.boite { width: min(26rem, 100%); background: var(--surface); border: 1px solid var(--reglure); border-radius: var(--rayon); padding: 2rem; box-shadow: var(--ombre); }

.page-erreur { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.erreur { text-align: center; max-width: 32rem; }
.erreur-code { font-family: var(--mono); font-size: 3.5rem; font-weight: 800; color: var(--reglure); margin: 0; }
.erreur-message { color: var(--encre-douce); white-space: pre-wrap; text-align: left; }

/* ------------------------------------------------------------ mobile */

@media (max-width: 860px) {
    .appli { grid-template-columns: 1fr; }
    .barre-laterale { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .6rem .8rem; gap: .2rem; }
    .barre-laterale .marque { padding: 0 .8rem 0 0; }
    .barre-laterale a { padding: .45rem .7rem; }
    .barre-laterale a.actif { box-shadow: inset 0 -3px 0 var(--marge); }
    .barre-laterale .bas { margin: 0; padding: .4rem .8rem 0; border: 0; width: 100%; }
    .contenu { padding: 1.25rem 1rem 3rem; }
    .colonnes { grid-template-columns: 1fr; }
    .regle li { font-size: 0; padding: .4rem .2rem; }
    .regle .numero { font-size: .9rem; }
    .conseil-paysage { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

@media print {
    .barre-laterale, .regle, .actions-etape, .btn { display: none !important; }
    body { background: #fff; }
}