/* Admin Un nuage pour soi — charte du site, téléphone d'abord. Aucune ressource externe. */

@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-400.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 300; font-display: swap; src: url(/fonts/montserrat-300.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url(/fonts/montserrat-400.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(/fonts/montserrat-500.woff2) format("woff2"); }

:root {
    --ivoire: #FBF8F4;
    --lin: #F2ECE4;
    --sable: #D8CBBB;
    --taupe: #7E6B5A;
    --taupe-fonce: #776453;
    --moka: #3B2F28;
    --rouge: #9B3B2F;
    --f-titre: "Instrument Serif", Georgia, serif;
    --f-texte: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--ivoire);
    color: var(--moka);
    font-family: var(--f-texte);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.6;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--f-titre); font-weight: 400; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--moka); outline-offset: 3px; }

.entete { display: flex; justify-content: center; padding: 20px 16px 8px; }
.contenu { max-width: 640px; margin: 0 auto; padding: 8px 16px 48px; display: grid; gap: 20px; }

.titre { font-size: 2.25rem; text-align: center; }
.intro { text-align: center; color: var(--taupe-fonce); }

.bloc { background: var(--lin); padding: 20px; display: grid; gap: 12px; border-top: 3px solid var(--taupe); }
.bloc h2 { font-size: 1.75rem; }
.bloc--accompagnement { border-top-color: var(--sable); }

.btn {
    display: block; width: 100%;
    min-height: 52px; padding: 14px 18px;
    border: 1px solid var(--taupe); border-radius: 0;
    background: var(--taupe); color: var(--ivoire);
    font: 500 1rem/1.3 var(--f-texte); letter-spacing: .02em;
    text-align: center; text-decoration: none; cursor: pointer;
}
.btn--contour { background: transparent; color: var(--moka); }
.btn:disabled { opacity: .5; cursor: default; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 500; }
input, select, textarea {
    width: 100%; padding: 12px; border: 1px solid var(--sable); border-radius: 0;
    background: #fff; color: var(--moka); font: 400 1rem/1.4 var(--f-texte);
}
textarea { min-height: 160px; resize: vertical; }

.message { padding: 14px 16px; background: var(--lin); border-left: 3px solid var(--taupe); }
.message--erreur { border-left-color: var(--rouge); }
.discret { font-size: .875rem; color: var(--taupe-fonce); text-align: center; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; text-align: left; border-bottom: 1px solid var(--sable); }