/* ===== EN-TÊTE COMMUN DU PORTAIL — identité du site public =====
   Feuille libre : ni l oracle ni le candidat OAuth ne la suivent, elle peut
   être modifiée directement sur le serveur. Couleurs et typographie relevées sur deus-ex-machina.be : barre de menu
   #CBB192, liens blancs en majuscules, texte #585656. Les polices du site,
   DM Sans et Baskervville, ne peuvent pas être chargées ici : la politique de
   sécurité du Portail interdit les ressources externes. On utilise donc des
   substituts proches, Georgia pour les titres comme sur la page du site. */
.dem-entree{color:#171714;background:#0a0002;font-size:18px;
    font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.dem-entree *{box-sizing:border-box}

/* Marges noires de part et d autre, comme le site.

   Le corps devient la colonne de 1300 px et html porte le noir : le fond de
   pierre est donc peint dans la colonne et ne va plus jusqu aux bords de la
   fenêtre. L attachement fixe hérité de portal.css fait le reste — l image
   reste dimensionnée sur la fenêtre, donc ni déformée ni agrandie, mais elle
   n est peinte qu à l intérieur du corps.

   La règle ne vaut que pour les pages qui chargent cette feuille, donc celles
   qui portent l en-tête partagé. */
html{background:#0a0002}
body{max-width:1300px;margin:0 auto}

/* Le voile de portal.css est en position fixe sur toute la fenêtre : il
   teinterait les marges noires que l on vient de dégager. */
body::before{display:none}

/* Bandeau et ligne de contact, repris du site. L'image est servie par le
   Portail : img-src 'self' interdit de la charger depuis deus-ex-machina.be. */
/* Proportions relevées sur deus-ex-machina.be le 30/08/2026 : colonne blanche
   de 1300 px sur fond sombre, contenu de 1170 px centré dedans — d où 65 px de
   blanc de chaque côté — 33 px de blanc au-dessus de la bannière et 34 px
   sous la barre de menu. Sans ces marges le bandeau touchait les bords et
   l ensemble paraissait plus etroit et plus serré que le site. */
/* position et z-index : portal.css pose sur body un voile ::before en
   position fixe, qui recouvre tout element non positionne. Tant que
   l en-tete vivait dans .portal-shell il passait au-dessus par heritage ;
   sorti de la, il se retrouvait dessous et se salissait. */
.dem-site{position:relative;z-index:5;width:min(1300px,100%);margin:0 auto;background:#fff}

/* La barre déborde de 32 px sur ce qui suit : le premier contenu se décale
   d autant, sans quoi elle le recouvrirait. */
.dem-site + .dem-hero{padding-top:72px}
.dem-site + .portal-shell{padding-top:64px}
.dem-site-int{position:relative;width:min(1170px,100%);margin:0 auto;padding:33px 0 34px}
.dem-banniere{display:block;width:100%;height:auto}
.dem-contact{padding:24px 0;text-align:right}
.dem-contact-libelle{color:#8a8078;font-size:.78rem;line-height:1.4}
.dem-contact a{color:#171714;font-size:1rem;font-weight:700;text-decoration:none}
.dem-contact a:hover,.dem-contact a:focus{text-decoration:underline}

.dem-nav{position:absolute;right:0;bottom:-32px;left:0;z-index:2;
    background:#cbb192;border-radius:5px}
.dem-nav ul{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.25em 2.2em;
    margin:0;padding:18px 26px;list-style:none}
.dem-nav a{color:#fff;font-size:16px;font-weight:600;letter-spacing:.02em;
    text-transform:uppercase;text-decoration:none;white-space:nowrap}
.dem-nav a:hover,.dem-nav a:focus{text-decoration:underline;text-underline-offset:.35em}

.dem-hero{padding:54px 18px;color:#171714;background:
    linear-gradient(rgba(15,14,12,.58),rgba(15,14,12,.68)),
    url("portal-gate.jpg") center center / cover no-repeat}
.dem-wrap{width:min(1170px,100%);margin:0 auto}
.dem-card{overflow:hidden;background:rgba(251,247,238,.96);
    border:1px solid rgba(105,79,43,.30);border-radius:22px;
    box-shadow:0 24px 64px rgba(0,0,0,.30)}
.dem-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr)}
.dem-main{padding:clamp(28px,5vw,52px)}

.dem-kicker{display:inline-flex;margin-bottom:18px;padding:8px 13px;color:#754614;
    font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    background:#f4ead6;border:1px solid rgba(117,70,20,.22);border-radius:999px}
.dem-titre{margin:0 0 14px;color:#18242f;font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,5vw,3.2rem);font-weight:500;line-height:1.1}
.dem-chapo{max-width:620px;margin:0 0 26px;color:#4b4438;font-size:1rem;line-height:1.75}

/* Le formulaire hérite de portal.css ; on l ajuste au fond clair de la carte. */
.dem-main label{display:block;margin:1.1em 0 .35em;color:#4b4438;font-weight:700;font-size:.9rem}
.dem-main input[type=email],.dem-main input[type=password]{width:100%;padding:.75em .9em;
    font-size:1rem;color:#171714;background:#fff;border:1px solid #cdbfa4;border-radius:10px}
.dem-main input:focus{outline:2px solid #9a6227;outline-offset:1px}
.dem-bouton{display:inline-flex;min-height:52px;align-items:center;justify-content:center;
    margin-top:1.4em;padding:0 24px;color:#fff !important;font-weight:800;
    text-decoration:none !important;background:#9a6227;border:1px solid #754614;
    border-radius:12px;cursor:pointer;font-size:1rem;
    transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
.dem-bouton:hover,.dem-bouton:focus{background:#754614;transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(117,70,20,.26)}
.dem-bouton-secondaire{color:#18242f !important;background:#fff;border-color:#cdbfa4}
.dem-bouton-secondaire:hover,.dem-bouton-secondaire:focus{background:#f7f0e2;color:#18242f !important}

.dem-separateur{margin:2.2em 0 0;padding-top:1.6em;border-top:1px solid rgba(105,79,43,.20)}
.dem-note{margin:1.2em 0 0;padding:13px 15px;color:#5f5546;font-size:.9rem;line-height:1.55;
    background:rgba(255,253,248,.75);border:1px solid rgba(105,79,43,.18);border-radius:12px}
.dem-lien-discret{color:#754614;font-size:.9rem}

.dem-side{display:flex;min-height:520px;flex-direction:column;justify-content:flex-end;
    padding:32px;color:#fff;background:
    linear-gradient(180deg,rgba(17,22,27,.28),rgba(17,22,27,.90)),
    url("portal-gate.jpg") center center / cover no-repeat}
.dem-side-kicker{margin-bottom:8px;color:#e6d0a7;font-size:.72rem;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase}
.dem-side h2{margin:0 0 14px;color:#fff;font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:500;line-height:1.15}
.dem-side dl{margin:0}
.dem-side dt{margin-top:1.1em;color:#e6d0a7;font-size:.72rem;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase}
.dem-side dd{margin:.25em 0 0;color:#ece5d8;font-size:.95rem;line-height:1.6}
.dem-side a{color:#fff}

.dem-alerte{margin:0 0 1.2em;padding:.9em 1.1em;border-radius:12px;font-size:.95rem}
.dem-alerte-erreur{color:#7a1f1f;background:#fbeaea;border:1px solid #e5b4b4}
.dem-alerte-info{color:#1f4a7a;background:#eaf1fb;border:1px solid #b4cbe5}

@media (max-width:850px){
    .dem-hero{padding:28px 12px;background-position:center top}
    .dem-grid{grid-template-columns:1fr}
    .dem-side{min-height:auto;padding:28px}
}
@media (max-width:560px){
    .dem-main{padding:24px 18px}
    .dem-site-int{padding:16px 12px}
    .dem-nav ul{gap:.4em 1.1em;padding:16px 13px}
    .dem-bouton{width:100%}
}

/* Fin de barre : la session, puis les marqueurs du site séparés par un filet.
   L ensemble est poussé à droite, et reste en place qu il y ait une session
   ouverte ou non. */
.dem-nav ul{align-items:center}
.dem-nav-fin{display:flex;align-items:center;margin-left:auto}
.dem-session{display:flex;align-items:center;justify-content:flex-end;gap:.85em;
    color:#8a8078;font-size:.78rem;line-height:1.4}
.dem-nav-icone{display:flex;align-items:center;justify-content:center;
    width:54px;height:34px;color:#fff;border-left:1px solid rgba(255,255,255,.45)}
.dem-nav-icone:hover,.dem-nav-icone:focus{color:#4b3a24;text-decoration:none}
.dem-nav-icone svg{display:block}
.dem-session-nom{white-space:nowrap;color:#5a5148}
.dem-session form{display:flex;margin:0}
.dem-session-quitter{padding:0;color:#8a8078;font:inherit;background:none;border:0;
    cursor:pointer;white-space:nowrap;text-decoration:underline;text-underline-offset:.25em}
.dem-session-quitter:hover,.dem-session-quitter:focus{color:#5a5148}
.dem-session-lien{color:#8a8078;white-space:nowrap;text-decoration:underline;
    text-underline-offset:.25em}
.dem-session-lien:hover,.dem-session-lien:focus{color:#5a5148}

/* Sur petit écran, la barre de session reste groupée à droite au-dessus de la
   bannière : elle a quitté le menu, elle n a plus à en épouser la largeur. */
@media (max-width:700px){
    .dem-session{flex-wrap:wrap;gap:.6em}
    .dem-nav{position:static;border-radius:0}
    .dem-site-int{padding-bottom:0}
    .dem-site + .dem-hero{padding-top:28px}
    .dem-site + .portal-shell{padding-top:32px}
}

/* Le contenu des pages authentifiées était plus étroit que la barre de menu.
   On l aligne sur la largeur du site ; la règle ne vaut que pour les pages qui
   chargent cette feuille, donc celles qui portent l en-tête partagé. */
.portal-shell{width:min(1170px,calc(100% - 28px))}
.portal-card-wide{width:100%}

/* Sur téléphone, le menu se plie derrière un bouton « Menu », comme sur le site
   (Armand, 08/09/2026) : la liste se repliait en trois lignes. Même seuil que
   le reste de l en-tête, 700 px ; sur grand écran, rien ne change. */
.dem-nav-toggle{display:none}
@media (max-width:700px){
    .dem-nav-toggle{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;
        color:#fff;background:transparent;border:0;font-family:inherit;font-size:16px;font-weight:600;
        line-height:1;letter-spacing:.02em;text-transform:uppercase;cursor:pointer}
    .dem-nav-toggle-barres{display:inline-flex;flex-direction:column;gap:4px;width:22px}
    .dem-nav-toggle-barres i{display:block;height:3px;border-radius:2px;background:#fff}
    .dem-nav ul{display:none;flex-direction:column;align-items:stretch;gap:0;padding:0 0 6px}
    .dem-nav.is-open ul{display:flex}
    .dem-nav li{border-top:1px solid rgba(255,255,255,.35)}
    .dem-nav li a{display:block;padding:13px 18px}
    .dem-nav-fin{margin-left:0;justify-content:flex-start}
    .dem-nav-icone{width:auto;height:auto;padding:13px 18px;border-left:0}
}