/* =========================================================================
   DDM Meeting — feuille de style
   ========================================================================= */

/* La charte du cabinet vit dans charte.css, chargée avant cette feuille par
   les gabarits. Elle n'est plus importée ici : un @import ne porte pas le
   numéro de version que les gabarits ajoutent, si bien qu'un navigateur
   pouvait servir l'ancienne charte avec la nouvelle feuille de style — les
   couleurs demandées n'existaient alors plus et les fonds disparaissaient. */

:root {
    /* Les rôles de l'interface, chacun renvoyé à la charte.
       Deux niveaux plutôt qu'un : « le bouton primaire est bleu » se décide
       ici, « le bleu du cabinet vaut #1F3357 » se décide dans la charte, et
       on peut changer l'un sans toucher à l'autre. */
    --marine: var(--ddm-encre-600);
    --accent-ddm: var(--ddm-accent-500);   /* l'indigo des actions DDM */
    --accent-ddm-clair: var(--ddm-accent-400);

    /* Les surfaces sombres — barre latérale et salle de réunion — passent du
       bleu marine à l'anthracite du site. La salle était bleue sur bleu : la
       vidéo des participants y perdait, et la marque avec, parce qu'une
       couleur étalée sur tout un écran cesse d'être un signe. */
    --nuit: var(--ddm-nuit-900);
    --nuit-2: var(--ddm-nuit-850);
    --nuit-3: var(--ddm-nuit-800);

    --bleu: var(--ddm-encre-600);
    --bleu-fonce: var(--ddm-encre-800);
    --bleu-clair: var(--ddm-encre-100);
    --bleu-texte: var(--ddm-encre-600);

    /* Ce qui est actif à l'instant. La charte d'AAZ Central ne connaît que
       deux couleurs : c'est donc le marine qui le porte, et le rouge reste
       réservé à ce qui presse. */
    --cyan: var(--ddm-accent-500);
    --cyan-fonce: var(--ddm-accent-700);
    --cyan-clair: var(--ddm-accent-50);

    --vert: #16a34a;
    --vert-clair: #e6f7ec;
    --orange: #f59e0b;
    --orange-clair: #fef3e2;
    --violet: #7c3aed;
    --violet-clair: #f1ebff;
    --rouge: #DC2626;          /* le danger : un vrai rouge, distinct du bordeaux de la marque */
    --rouge-clair: #FEE2E2;
    --texte: var(--ddm-navy-900);
    --texte-2: var(--ddm-plume-600);
    --texte-3: var(--ddm-plume-500);
    --fond: var(--ddm-surface);   /* le gris tres clair des pages, comme sur AAZ Central */
    --carte: #ffffff;
    --bordure: #e5e9f2;
    --rayon: 14px;
    --ombre: 0 1px 2px rgb(17 29 51 / .05), 0 10px 30px -14px rgb(17 29 51 / .18);
    --police: var(--ddm-police);
}

*, *::before, *::after { box-sizing: border-box; }
/* « hidden » l'emporte toujours : une grille (.grille-2) ne doit pas réafficher un bloc masqué. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    font-family: var(--police);
    font-size: 14.5px;
    line-height: 1.5;
    background: var(--fond);
    color: var(--texte);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.015em; }
p { margin: 0; }
.icone { flex: none; }

/* -- Boutons --------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.5rem; border-radius: 3px; border: 1px solid transparent;
    font-size: .9rem; font-weight: 700; line-height: 1.2; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* L action principale porte le rouge du cabinet : c est ce que fait le site,
   ou il est declare `primary`, et c est le bouton qu on y clique pour prendre
   rendez-vous. Le bleu reste la couleur de la navigation. */
.btn-primaire { background: var(--accent-ddm); color: #fff; }
.btn-primaire:hover { background: var(--ddm-accent-600); }
.btn-secondaire { background: #fff; color: var(--texte); border-color: var(--bordure); }
.btn-secondaire:hover { border-color: var(--ddm-encre-300); background: #fafbfe; }
.btn-doux { background: var(--bleu-clair); color: var(--bleu-texte); }
.btn-doux:hover { background: var(--ddm-encre-200); }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { background: var(--ddm-rouge-700); }
.btn-lien { background: none; color: var(--bleu-texte); padding: .3rem .4rem; }
.btn-sm { padding: .45rem 1rem; font-size: .82rem; border-radius: 3px; }
.btn-lg { padding: .85rem 2rem; font-size: 1rem; border-radius: 3px; }
.btn-bloc { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* -- Badges ---------------------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
}
.badge-bleu { background: var(--bleu-clair); color: var(--bleu-texte); }
.badge-vert { background: var(--vert-clair); color: var(--vert); }
.badge-orange { background: var(--orange-clair); color: #b45309; }
.badge-violet { background: var(--violet-clair); color: var(--violet); }
.badge-gris { background: #eef2f7; color: var(--texte-2); }
.badge-rouge { background: var(--rouge-clair); color: var(--rouge); }
.badge .point { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* -- Cartes ---------------------------------------------------------------- */

.carte {
    background: var(--carte); border: 1px solid var(--bordure);
    border-radius: var(--rayon); box-shadow: var(--ombre);
}
.carte-entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--bordure);
}
.carte-entete h2 { font-size: 1rem; font-weight: 700; }
.carte-corps { padding: 1.25rem; }

/* -- Formulaires ----------------------------------------------------------- */

.champ { margin-bottom: 1.1rem; }
.champ > label, .etiquette { display: block; font-size: .82rem; font-weight: 600; color: var(--texte); margin-bottom: .4rem; }
.champ .aide { display: block; font-size: .78rem; color: var(--texte-3); margin-top: .35rem; }
.champ .requis { color: var(--rouge); }
.saisie, .champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="datetime-local"], .champ input[type="date"], .champ input[type="time"],
.champ input[type="number"], .champ select, .champ textarea {
    width: 100%; padding: .65rem .85rem; border: 1px solid var(--bordure); border-radius: 10px;
    font: inherit; font-size: .92rem; background: #fff; color: var(--texte);
    transition: border-color .15s, box-shadow .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus, .saisie:focus {
    outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(31 78 150 / .18);
}
.champ textarea { min-height: 96px; resize: vertical; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
    border: 1px solid var(--bordure); border-radius: 10px; font-size: .88rem; color: var(--texte-2);
    cursor: pointer; background: #fff;
}
.case input { accent-color: var(--bleu); width: 16px; height: 16px; }
.erreur { color: var(--rouge); font-size: .8rem; margin-top: .35rem; }

.choix-type, .choix-moment { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Zone de depot : pre-remplissage du formulaire depuis un fichier. */
.depot {
    display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 1rem;
    padding: 1rem 1.1rem; margin-bottom: 1.5rem; cursor: pointer;
    border: 1px dashed var(--bordure); border-radius: var(--rayon); background: var(--fond);
    transition: border-color .15s, background .15s;
}
.depot:hover, .depot.survole { border-color: var(--ddm-navy-400); background: var(--ddm-navy-50); }
.depot-icone { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--ddm-navy-700); border: 1px solid var(--bordure); }
.depot-texte strong { display: block; font-size: .92rem; }
.depot-texte span { display: block; font-size: .8rem; color: var(--texte-2); line-height: 1.5; margin-top: .15rem; }
.depot-texte b { font-weight: 600; color: var(--texte); }
.depot-actions { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.depot-etat { grid-column: 1 / -1; font-size: .82rem; padding: .55rem .7rem; border-radius: 9px; }
.depot-etat.attente { background: #fff; color: var(--texte-2); border: 1px solid var(--bordure); }
.depot-etat.succes { background: var(--ddm-navy-50); color: var(--ddm-navy-700); }
.depot-etat.echec { background: var(--ddm-rouge-100); color: var(--ddm-rouge-600); }
.champ-duree { max-width: 220px; }

.choix-type label, .choix-moment label {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem;
    border: 1px solid var(--bordure); border-radius: 999px; font-size: .85rem; cursor: pointer;
    color: var(--texte-2); background: #fff;
}
.choix-type input, .choix-moment input { accent-color: var(--bleu); }
.choix-type label:has(input:checked), .choix-moment label:has(input:checked) { border-color: var(--bleu); color: var(--bleu-texte); background: var(--bleu-clair); }

.puces { display: flex; flex-direction: column; gap: .5rem; }
.puce-participant {
    display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
    border: 1px solid var(--bordure); border-radius: 10px; background: #fafbfe; font-size: .88rem;
}
.puce-participant .avatar { width: 28px; height: 28px; font-size: .7rem; }
.puce-participant span { flex: 1; }
.puce-participant button { background: none; border: 0; color: var(--texte-3); cursor: pointer; display: flex; }
.puce-participant button:hover { color: var(--rouge); }

.alerte { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: 10px; font-size: .88rem; margin-bottom: 1.25rem; }
.alerte-succes { background: var(--vert-clair); color: #15803d; }
.alerte-avertissement { background: var(--orange-clair); color: #b45309; }

/* -- Avatars --------------------------------------------------------------- */

.avatar {
    width: 36px; height: 36px; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--marine); color: #fff;
    font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.avatar-sm { width: 28px; height: 28px; font-size: .68rem; }
.avatar-gris { background: #e2e8f0; color: var(--texte-2); }

/* =========================================================================
   Shell application : barre laterale + barre superieure
   ========================================================================= */

.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.laterale {
    background: linear-gradient(180deg, var(--ddm-navy-800) 0%, var(--ddm-navy-900) 100%);
    color: var(--ddm-plume-400); display: flex; flex-direction: column;
    padding: 1.1rem .9rem; position: sticky; top: 0; height: 100vh;
}
.marque { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.15rem; padding: .3rem .5rem 1.2rem; letter-spacing: -.02em; }
.logo-ddm { display: inline-flex; align-items: center; gap: .7rem; }
.logo-ddm-plaque {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 10px; padding: .32rem .45rem;
    box-shadow: 0 2px 10px -4px rgb(10 18 34 / .5);
}
.logo-ddm-texte { display: flex; flex-direction: column; line-height: 1; }
.logo-ddm-texte small { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .28em; color: var(--texte-3); }
.logo-ddm-texte strong { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin-top: .25rem; color: var(--ddm-navy-800); }
.logo-ddm-texte em { font-style: normal; font-size: .62rem; letter-spacing: .18em; color: var(--texte-3); margin-top: .35rem; font-weight: 500; }
.logo-ddm-clair .logo-ddm-texte small, .logo-ddm-clair .logo-ddm-texte em { color: rgb(255 255 255 / .7); }
.logo-ddm-clair .logo-ddm-texte strong { color: #fff; }

.nav { display: flex; flex-direction: column; gap: .2rem; }
.nav a {
    display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: 10px;
    font-size: .9rem; font-weight: 500; color: var(--ddm-plume-400); transition: background .15s, color .15s;
}
.nav a:hover { background: rgb(255 255 255 / .06); color: #fff; }
.nav a.actif { background: rgb(255 255 255 / .12); color: #fff; box-shadow: inset 3px 0 0 var(--accent-ddm); }
.nav a .icone { opacity: .9; }
.nav .section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ddm-plume-500); padding: 1rem .8rem .35rem; font-weight: 700; }

.laterale-pied { margin-top: auto; }
.carte-central {
    display: flex; align-items: center; gap: .7rem; padding: .8rem; border-radius: 12px;
    background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); color: #fff;
}
.carte-central .logo { width: 34px; height: 34px; border-radius: 9px; background: rgb(255 255 255 / .1); display: grid; place-items: center; }
.carte-central strong { display: block; font-size: .85rem; }
.carte-central span { font-size: .72rem; color: var(--ddm-plume-400); }

.principal { display: flex; flex-direction: column; min-width: 0; }

.barre-haute {
    display: flex; align-items: center; gap: 1rem; padding: .85rem 1.75rem;
    background: #fff; border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 10;
}
.recherche {
    flex: 1; max-width: 460px; display: flex; align-items: center; gap: .6rem;
    padding: .55rem .9rem; border: 1px solid var(--bordure); border-radius: 10px; background: #f8fafc; color: var(--texte-3);
}
.recherche input { border: 0; background: none; outline: none; flex: 1; font: inherit; font-size: .88rem; color: var(--texte); }
.barre-haute-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.btn-rond {
    width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--bordure); background: #fff;
    display: grid; place-items: center; color: var(--texte-2); cursor: pointer; position: relative;
}
.btn-rond:hover { background: #f8fafc; }
.btn-rond .pastille { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--rouge); border: 2px solid #fff; }
.profil { display: flex; align-items: center; gap: .7rem; padding-left: .6rem; border-left: 1px solid var(--bordure); }
.profil .nom { font-size: .86rem; font-weight: 600; line-height: 1.2; }
.profil .role { font-size: .72rem; color: var(--texte-3); }
.profil form button { background: none; border: 0; color: var(--texte-3); cursor: pointer; display: flex; padding: .3rem; border-radius: 6px; }
.profil form button:hover { color: var(--rouge); background: var(--rouge-clair); }

.contenu { padding: 1.75rem; max-width: 1240px; width: 100%; margin: 0 auto; }
.contenu-etroit { max-width: 820px; }

.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.entete-page h1 { font-size: 1.5rem; font-weight: 800; }
.entete-page .sous { color: var(--texte-2); margin-top: .25rem; font-size: .92rem; }
.entete-page .actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.fil { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--texte-3); margin-bottom: .6rem; }

/* -- Tableau de bord ------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.stat .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.stat .libelle { font-size: .8rem; color: var(--texte-2); font-weight: 500; }
.stat .valeur { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat .tendance { font-size: .76rem; color: var(--texte-3); }
.stat .tendance.vert { color: var(--vert); }
.ico-bleu { background: var(--bleu-clair); color: var(--bleu); }
.ico-vert { background: var(--vert-clair); color: var(--vert); }
.ico-violet { background: var(--violet-clair); color: var(--violet); }
.ico-orange { background: var(--orange-clair); color: var(--orange); }

.deux-colonnes { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }

.liste-reunions { display: flex; flex-direction: column; }
.ligne-reunion {
    display: grid; grid-template-columns: 92px 1fr auto auto; gap: 1rem; align-items: center;
    padding: .9rem 1.25rem; border-bottom: 1px solid var(--bordure);
}
.ligne-reunion:last-child { border-bottom: 0; }
.ligne-reunion .heure { font-weight: 700; font-size: .9rem; }
.ligne-reunion .heure small { display: block; font-weight: 500; color: var(--texte-3); font-size: .74rem; }
.ligne-reunion .titre { font-weight: 600; }
.ligne-reunion .meta { display: flex; align-items: center; gap: .5rem; color: var(--texte-3); font-size: .78rem; margin-top: .15rem; flex-wrap: wrap; }
.ligne-reunion .meta .sep { width: 3px; height: 3px; border-radius: 999px; background: var(--texte-3); }
.ligne-reunion .actions { display: flex; gap: .4rem; }

/* Reunion imminente ou en cours : on la distingue au premier coup d'oeil. */
.ligne-reunion.imminente { background: linear-gradient(90deg, rgb(181 64 64 / .06), transparent 45%); box-shadow: inset 3px 0 0 var(--ddm-rouge-500); }
.ligne-reunion .en-attente { color: var(--ddm-rouge-600); font-weight: 600; }
.ligne-reunion .rattachement { display: inline-flex; align-items: center; gap: .3rem; color: var(--ddm-navy-600); font-weight: 600; }
.cellule-client { display: flex; align-items: center; gap: .7rem; }
.cellule-client .pastille-hote { width: 36px; height: 36px; font-size: .74rem; flex: none; }
.sous-ligne { font-size: .76rem; color: var(--texte-3); margin-top: .1rem; }

/* Invitations recues : l'hote prend la place de l'heure, avec ses initiales. */
.ligne-invitation { grid-template-columns: 44px 1fr auto auto; }
.ligne-invitation .pastille-hote {
    width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
    background: var(--bleu-clair, var(--ddm-encre-100)); color: var(--bleu-texte, var(--ddm-encre-600));
    font-weight: 700; font-size: .84rem; letter-spacing: .02em;
}
.carte-invitations { margin-bottom: 1.25rem; padding: 1.25rem 0 0; }
.carte-invitations .carte-entete, .carte-invitations > .sous { padding-left: 1.25rem; padding-right: 1.25rem; }
.carte-invitations .carte-entete h2 { display: inline-flex; align-items: center; gap: .45rem; }

/* Pastille de comptage sur l'onglet « Invitations recues ». */
.pastille-onglet {
    display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--ddm-rouge-500); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.5;
}

/* Retour visuel du bouton « Copier le lien ». */
.copier-lien.copie { background: var(--ddm-navy-50); color: var(--ddm-navy-700); border-color: var(--ddm-navy-300); }

.acces-rapide { display: flex; flex-direction: column; }
.acces-rapide a {
    display: flex; align-items: center; gap: .8rem; padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--bordure); font-size: .9rem; font-weight: 500; color: var(--texte);
}
.acces-rapide a:last-child { border-bottom: 0; }
.acces-rapide a:hover { background: #fafbfe; }
.acces-rapide .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bleu-clair); color: var(--bleu); }
.acces-rapide .fleche { margin-left: auto; color: var(--texte-3); }

.bandeau-central {
    margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--rayon); color: #fff;
    background: linear-gradient(135deg, var(--nuit-3), var(--nuit)); display: flex; align-items: center; gap: 1rem;
}
.bandeau-central strong { display: block; font-size: 1rem; }
.bandeau-central p { color: #a9b8e0; font-size: .82rem; margin-top: .15rem; }

.etat-vide { text-align: center; padding: 2.5rem 1.5rem; color: var(--texte-2); }
.etat-vide .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--bleu-clair); color: var(--bleu); display: grid; place-items: center; margin: 0 auto .9rem; }
.etat-vide h3 { font-size: 1rem; margin-bottom: .3rem; color: var(--texte); }
.etat-vide p { font-size: .88rem; }

.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordure); margin-bottom: 1.25rem; }
.onglets a, .onglets button {
    padding: .7rem 1rem; font-size: .9rem; font-weight: 600; color: var(--texte-2); border: 0; background: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.onglets a.actif, .onglets button.actif { color: var(--bleu-texte); border-color: var(--bleu); }

.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tableau th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); padding: .75rem 1.25rem; border-bottom: 1px solid var(--bordure); font-weight: 700; }
.tableau td { padding: .85rem 1.25rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tr:hover td { background: #fafbfe; }

/* -- Confirmation ---------------------------------------------------------- */

.confirmation { text-align: center; padding: 2.5rem 2rem 1.5rem; }
.confirmation .coche { width: 64px; height: 64px; border-radius: 999px; background: var(--vert-clair); color: var(--vert); display: grid; place-items: center; margin: 0 auto 1rem; }
.confirmation h1 { font-size: 1.4rem; font-weight: 800; }
.confirmation p { color: var(--texte-2); margin-top: .3rem; }
.boite-lien { display: flex; gap: .6rem; align-items: center; margin-top: .5rem; }
.boite-lien .saisie { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; background: #f8fafc; color: var(--texte-2); }
.detail-liste { display: grid; gap: .8rem; }
.detail-liste .ligne { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.detail-liste .ligne .icone { color: var(--texte-3); }

/* -- Compte rendu ---------------------------------------------------------- */

.meta-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.meta-grille .cle { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-3); font-weight: 700; }
.meta-grille .val { font-weight: 600; margin-top: .2rem; }
.actions-liste { display: flex; flex-direction: column; gap: .6rem; }
.action-ligne { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--bordure); border-radius: 10px; background: #fff; }
.action-ligne.fait { opacity: .6; }
.action-ligne.fait .titre { text-decoration: line-through; }
.action-ligne form { display: flex; }
.action-ligne button.cocher { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; display: grid; place-items: center; color: #fff; }
.action-ligne.fait button.cocher { background: var(--vert); border-color: var(--vert); }
.action-ligne .titre { font-weight: 600; }
.action-ligne .sous { font-size: .78rem; color: var(--texte-3); margin-top: .15rem; }
.transcription-ligne { display: flex; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--bordure); font-size: .9rem; }
.transcription-ligne:last-child { border-bottom: 0; }
.transcription-ligne .heure { color: var(--texte-3); font-size: .78rem; width: 44px; flex: none; padding-top: .15rem; }
.transcription-ligne strong { display: block; font-size: .8rem; color: var(--texte-2); }

.note-info { display: flex; gap: .7rem; padding: .9rem 1rem; background: var(--bleu-clair); color: var(--bleu-texte); border-radius: 10px; font-size: .86rem; }
.note-info .icone { flex: none; margin-top: .1rem; }

/* -- Module en preparation ------------------------------------------------- */

.module-vide { max-width: 560px; margin: 3rem auto; text-align: center; padding: 2.5rem; }
.module-vide .ico { width: 64px; height: 64px; border-radius: 18px; background: var(--bleu-clair); color: var(--bleu); display: grid; place-items: center; margin: 0 auto 1rem; }
.module-vide h1 { font-size: 1.3rem; font-weight: 800; }
.module-vide p { color: var(--texte-2); margin-top: .5rem; }

/* =========================================================================
   Site public
   ========================================================================= */

.site-entete { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2.5rem; background: var(--ddm-navy-900); border-bottom: 1px solid rgb(255 255 255 / .08); }
.site-entete .marque { padding: 0; }
.site-entete nav { display: flex; gap: .6rem; }
.btn-contour-clair { background: transparent; color: #fff; border-color: rgb(255 255 255 / .25); }
.btn-contour-clair:hover { background: rgb(255 255 255 / .08); }

.heros {
    background: radial-gradient(ellipse at 12% -10%, var(--ddm-navy-500) 0%, var(--ddm-navy-700) 45%, var(--ddm-navy-800) 100%);
    color: #fff; padding: 4.5rem 2.5rem 5rem; border-bottom: 3px solid var(--ddm-accent-500);
}
.heros-int { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.heros h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.1; }
.heros h1 span { color: var(--accent-ddm-clair); }
.heros .devise { color: var(--ddm-plume-400); font-weight: 600; margin: 1rem 0 1.25rem; letter-spacing: .02em; }
.heros .devise i { font-style: normal; margin: 0 .5rem; color: var(--ddm-navy-400); }
.heros .texte { color: var(--ddm-plume-300); font-size: 1.05rem; line-height: 1.65; max-width: 540px; }
.heros .actions { display: flex; gap: .8rem; margin-top: 1.75rem; flex-wrap: wrap; }
.heros .gages { display: flex; gap: 1.5rem; margin-top: 2.25rem; flex-wrap: wrap; }
.heros .gage { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--ddm-plume-400); }
.heros .gage .icone { color: var(--accent-ddm-clair); }
.apercu-photo { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(10 18 34 / .65); border: 1px solid rgb(255 255 255 / .12); }
.apercu-photo img { display: block; width: 100%; height: 440px; object-fit: cover; }
.apercu-flottant { position: absolute; left: 1.1rem; bottom: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; background: rgb(255 255 255 / .96); color: var(--texte); padding: .6rem 1rem; border-radius: 10px; font-size: .82rem; font-weight: 600; box-shadow: var(--ombre); }
.point-direct { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-ddm); box-shadow: 0 0 0 3px rgb(199 70 70 / .25); }

.fonctions { max-width: 1140px; margin: -2.5rem auto 4rem; padding: 0 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fonction { padding: 1.5rem; }
.fonction .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem; }
.fonction h3 { font-size: 1rem; margin-bottom: .35rem; }
.fonction p { color: var(--texte-2); font-size: .9rem; }

.etapes { max-width: 1140px; margin: 0 auto 5rem; padding: 2.5rem; border-radius: 20px; background: var(--nuit); color: #fff; }
.etapes h2 { font-size: 1.3rem; margin-bottom: 1.5rem; }
.etapes ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.etapes li { display: flex; flex-direction: column; gap: .5rem; }
.etapes .num { width: 32px; height: 32px; border-radius: 999px; background: var(--accent-ddm); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.etapes strong { font-size: .92rem; }
.etapes span { font-size: .8rem; color: var(--ddm-plume-400); }

.page-auth { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 2rem 1.25rem; }
.carte-auth { width: 100%; max-width: 440px; padding: 2rem; }
.carte-auth h1 { font-size: 1.35rem; font-weight: 800; }
.carte-auth .sous { color: var(--texte-2); margin: .3rem 0 1.5rem; font-size: .92rem; }
.pied-auth { text-align: center; font-size: .86rem; color: var(--texte-2); margin-top: 1.25rem; }
.pied-auth a { color: var(--bleu-texte); font-weight: 600; }

/* =========================================================================
   Salle de reunion
   ========================================================================= */

.salle { display: grid; grid-template-columns: 1fr 340px 62px; height: 100vh; background: var(--ddm-navy-950); color: #fff; overflow: hidden; transition: grid-template-columns .18s ease; }
.salle:has(.salle-panneau:not(.ouvert)) { grid-template-columns: 1fr 0 62px; }
.salle-principale { display: flex; flex-direction: column; min-width: 0; }

.salle-entete { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / .06); }
.salle-entete .marque { padding: 0; font-size: 1rem; }
.salle-entete .marque .logo { width: 28px; height: 28px; }
.salle-entete .titre { font-weight: 600; font-size: .95rem; padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .12); }
.salle-entete .droite { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.minuteur { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 8px; background: rgb(255 255 255 / .06); font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--ddm-plume-400); }
.minuteur .point { width: 8px; height: 8px; border-radius: 999px; background: var(--rouge); box-shadow: 0 0 0 3px rgb(220 38 38 / .25); }
.btn-salle { background: rgb(255 255 255 / .08); color: #fff; border-color: transparent; }
.btn-salle:hover { background: rgb(255 255 255 / .14); }

.salle-grille {
    flex: 1; display: grid; gap: .75rem; padding: 1rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: minmax(180px, 1fr); align-content: center; overflow: auto;
}
.salle-grille.solo { grid-template-columns: minmax(0, 900px); justify-content: center; }
.salle-grille.avec-vedette { grid-template-columns: 1fr; grid-auto-rows: auto; align-content: start; }
.salle-grille.avec-vedette .tuile:not(.en-vedette) { display: none; }
.rangee-miniatures { display: flex; gap: .6rem; padding: 0 1.25rem .5rem; overflow-x: auto; }
.rangee-miniatures .tuile { width: 180px; min-height: 100px; flex: none; }

.tuile {
    position: relative; background: var(--ddm-navy-800); border-radius: 14px; overflow: hidden;
    display: grid; place-items: center; min-height: 160px;
    border: 2px solid rgb(255 255 255 / .07); transition: border-color .2s;
    box-shadow: 0 10px 28px -18px rgb(0 0 0 / .8);
}
.tuile.parle { border-color: var(--accent-ddm-clair); }
.tuile.en-vedette { min-height: 55vh; }
.tuile .media { position: absolute; inset: 0; display: grid; place-items: center; }
.tuile video { width: 100%; height: 100%; object-fit: cover; }
.tuile.en-vedette video, .tuile.partage video { object-fit: contain; background: #000; }
.tuile .initiales { width: 72px; height: 72px; border-radius: 999px; background: var(--marine); border: 2px solid rgb(255 255 255 / .18); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; }
.tuile .plaque {
    position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .65rem; border-radius: 8px; background: rgb(0 0 0 / .55); backdrop-filter: blur(6px); font-size: .8rem; font-weight: 500;
}
.tuile .plaque .icone { width: 14px; height: 14px; color: var(--ddm-plume-400); }
.tuile .plaque .coupe { color: #f87171; }
.tuile .main-levee { position: absolute; top: .7rem; right: .7rem; width: 32px; height: 32px; border-radius: 999px; background: var(--orange); display: grid; place-items: center; color: #fff; }
.tuile .role { position: absolute; top: .7rem; left: .7rem; padding: .2rem .55rem; border-radius: 6px; background: var(--accent-ddm); font-size: .7rem; font-weight: 700; }

.salle-avis { grid-column: 1 / -1; text-align: center; color: var(--ddm-plume-400); padding: 3rem 1rem; }
.salle-avis .spinner { width: 34px; height: 34px; border-radius: 999px; border: 3px solid rgb(255 255 255 / .12); border-top-color: var(--bleu); margin: 0 auto 1rem; animation: tourner .8s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }

.barre-controles { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid rgb(255 255 255 / .06); }
.controle { display: flex; flex-direction: column; align-items: center; gap: .35rem; background: none; border: 0; color: var(--ddm-plume-400); cursor: pointer; padding: 0 .4rem; font-size: .7rem; font-weight: 500; }
.controle .rond { width: 50px; height: 50px; border-radius: 999px; background: rgb(255 255 255 / .09); display: grid; place-items: center; color: #fff; transition: background .15s; }
.controle:hover .rond { background: rgb(255 255 255 / .16); }
.controle.eteint .rond { background: var(--rouge); }
.controle.actif .rond { background: rgb(255 255 255 / .18); }
.controle.danger .rond { background: var(--rouge); width: 64px; border-radius: 26px; }
.controle .compteur { position: absolute; top: -4px; right: -2px; background: var(--bleu); color: #fff; font-size: .62rem; padding: .1rem .35rem; border-radius: 999px; font-weight: 700; }
.controle .rond-wrap { position: relative; }
.separateur-v { width: 1px; height: 36px; background: rgb(255 255 255 / .1); margin: 0 .4rem; }

.menu-plus { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); background: #1F3357; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; padding: .4rem; min-width: 220px; box-shadow: 0 20px 40px -10px rgb(0 0 0 / .6); z-index: 30; }
.menu-plus button, .menu-plus a { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: 0; color: #fff; padding: .6rem .8rem; border-radius: 8px; cursor: pointer; font-size: .86rem; text-align: left; font-family: inherit; }
.menu-plus button:hover, .menu-plus a:hover { background: rgb(255 255 255 / .08); }
.menu-plus .danger { color: #f87171; }
.menu-plus[hidden] { display: none; }

.salle-panneau { background: var(--ddm-navy-900); border-left: 1px solid rgb(255 255 255 / .06); display: flex; flex-direction: column; min-height: 0; }
.panneau-onglets { display: flex; padding: .6rem .6rem 0; gap: .25rem; border-bottom: 1px solid rgb(255 255 255 / .06); }
.panneau-onglets button { flex: 1; background: none; border: 0; color: var(--ddm-plume-400); padding: .7rem .5rem; font-size: .84rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: inherit; }
.panneau-onglets button.actif { color: #fff; border-color: var(--accent-ddm-clair); }
.panneau-onglets .nb { background: rgb(255 255 255 / .1); border-radius: 999px; padding: 0 .4rem; font-size: .7rem; }
.panneau-corps { flex: 1; overflow-y: auto; padding: .9rem; min-height: 0; }
.panneau-titre { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #6f82b8; font-weight: 700; margin: .2rem 0 .6rem; }

.participant-ligne { display: flex; align-items: center; gap: .7rem; padding: .55rem .5rem; border-radius: 10px; }
.participant-ligne:hover { background: rgb(255 255 255 / .04); }
.participant-ligne .nom { font-size: .88rem; font-weight: 500; }
.participant-ligne .sous { font-size: .72rem; color: #6f82b8; }
.participant-ligne .etats { margin-left: auto; display: flex; gap: .4rem; color: #6f82b8; }
.participant-ligne .etats .coupe { color: #f87171; }
.participant-ligne .etats .actif { color: #7ea2ff; }

.message { margin-bottom: .9rem; }
.message .entete { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.message .auteur { font-size: .8rem; font-weight: 700; color: var(--ddm-plume-400); }
.message .heure { font-size: .7rem; color: #6f82b8; }
.message .bulle { display: inline-block; background: rgb(255 255 255 / .07); padding: .5rem .75rem; border-radius: 0 12px 12px 12px; font-size: .86rem; line-height: 1.45; max-width: 100%; overflow-wrap: anywhere; }
.message.moi .bulle { background: var(--accent-ddm); border-radius: 12px 0 12px 12px; }
.message.moi { text-align: right; }
.message.systeme { text-align: center; font-size: .74rem; color: #6f82b8; }

.panneau-pied { padding: .75rem; border-top: 1px solid rgb(255 255 255 / .06); display: flex; gap: .5rem; }
.panneau-pied input { flex: 1; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); border-radius: 10px; padding: .6rem .8rem; color: #fff; font: inherit; font-size: .86rem; }
.panneau-pied input:focus { outline: none; border-color: var(--bleu); }
.panneau-pied button { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--accent-ddm); color: #fff; display: grid; place-items: center; cursor: pointer; }

/* -- Rail d'icones et vues du panneau (salle) ------------------------------ */

.salle-panneau { overflow: hidden; transition: opacity .18s ease; }
.salle-panneau:not(.ouvert) { opacity: 0; pointer-events: none; }

.panneau-entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .95rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .07); flex: none; }
.panneau-entete strong { font-size: .92rem; }
.panneau-fermer { background: none; border: 0; color: var(--ddm-plume-400); cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.panneau-fermer:hover { background: rgb(255 255 255 / .08); color: #fff; }

/* Une seule vue affichee a la fois, chacune occupant toute la hauteur utile. */
.panneau-vue { display: none; flex-direction: column; min-height: 0; flex: 1; }
.panneau-vue.actif { display: flex; }
.panneau-vue .panneau-corps { flex: 1; overflow-y: auto; }

.panneau-texte { font-size: .84rem; line-height: 1.55; color: var(--ddm-plume-400); white-space: pre-line; }
.panneau-texte.discret { color: #8195c4; }

.liste-invites { display: flex; flex-direction: column; gap: .3rem; }
.ligne-invite { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 9px; background: rgb(255 255 255 / .04); font-size: .8rem; }
.ligne-invite .jeton-etat { color: var(--ddm-rouge-400); display: grid; place-items: center; }
.ligne-invite.venu .jeton-etat { color: var(--ddm-navy-200); }
.ligne-invite .courriel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dbe4f7; }
.ligne-invite .etat { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8195c4; font-weight: 600; }
.ligne-invite.venu .etat { color: var(--ddm-navy-300); }

.ligne-action { display: grid; grid-template-columns: 22px 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid rgb(255 255 255 / .06); }
.ligne-action .jeton-etat { color: #8195c4; display: grid; place-items: center; padding-top: 2px; }
.ligne-action.faite .jeton-etat { color: var(--ddm-navy-300); }
.ligne-action .intitule { font-size: .85rem; font-weight: 600; color: #fff; }
.ligne-action.faite .intitule { text-decoration: line-through; color: #8195c4; }
.ligne-action .detail { font-size: .74rem; color: #8195c4; margin-top: .1rem; }

.fiche .ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgb(255 255 255 / .06); font-size: .83rem; }
.fiche .ligne span:first-child { color: #8195c4; }
.fiche .ligne span:last-child { color: #fff; font-weight: 500; text-align: right; }
.panneau-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.salle-rail { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .5rem; background: var(--ddm-navy-800); border-left: 1px solid rgb(255 255 255 / .06); }
.rail-bouton { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--ddm-plume-400); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
.rail-bouton:hover { background: rgb(255 255 255 / .08); color: #fff; }
.rail-bouton.actif { background: var(--ddm-navy-600); color: #fff; box-shadow: inset 0 -3px 0 var(--ddm-accent-500); }
.rail-bouton .nombre { position: absolute; top: 2px; right: 2px; min-width: 17px; padding: 0 .2rem; border-radius: 999px; background: var(--bleu-fonce); color: #fff; font-size: .62rem; font-weight: 700; line-height: 17px; }
.rail-bouton.actif .nombre { background: #fff; color: var(--accent-ddm); }


.avis-serveur { max-width: 520px; margin: 4rem auto; text-align: center; padding: 2.5rem; border-radius: 18px; background: var(--ddm-navy-800); color: #fff; }
.avis-serveur code { background: rgb(255 255 255 / .1); padding: .1rem .4rem; border-radius: 4px; font-size: .85em; }

/* -- Accueil du meet : ce que l'on voit avant d'entrer --------------------- */

.corps-salle { background: var(--ddm-navy-950); margin: 0; }

.accueil-salle {
    position: fixed; inset: 0; z-index: 60; overflow-y: auto;
    display: grid; place-items: center; padding: 2rem 1.25rem;
    background: linear-gradient(165deg, var(--ddm-navy-700) 0%, var(--ddm-navy-900) 55%, var(--ddm-navy-950) 100%);
    color: #fff;
    transition: opacity .25s ease;
}
.accueil-salle.parti { opacity: 0; pointer-events: none; }

.accueil-cadre { width: 100%; max-width: 1060px; }

.accueil-marque { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.accueil-cabinet {
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgb(255 255 255 / .55); padding-left: .85rem; border-left: 1px solid rgb(255 255 255 / .18);
}

.accueil-corps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; }

/* Aperçu de la caméra */
.apercu-video {
    position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
    background: var(--ddm-navy-950); border: 1px solid rgb(255 255 255 / .1);
    box-shadow: 0 30px 60px -25px rgb(0 0 0 / .7);
}
.apercu-video video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.apercu-vide { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .7rem; }
.apercu-initiales {
    width: 92px; height: 92px; border-radius: 999px; display: grid; place-items: center;
    background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16);
    font-size: 1.7rem; font-weight: 700; letter-spacing: .03em;
}
.apercu-note { font-size: .84rem; color: rgb(255 255 255 / .6); }

.apercu-commandes { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: .7rem; }
.apercu-bouton {
    width: 50px; height: 50px; border-radius: 999px; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: rgb(16 28 51 / .72); backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px -6px rgb(0 0 0 / .6); transition: background .15s, transform .12s;
}
.apercu-bouton:hover { transform: translateY(-1px); }
.apercu-bouton.actif { background: rgb(255 255 255 / .22); }
.apercu-bouton.coupe { background: var(--ddm-rouge-500); }
.apercu-bouton.coupe:hover { background: var(--ddm-rouge-600); }
.apercu-aide { margin-top: .9rem; font-size: .8rem; line-height: 1.6; color: rgb(255 255 255 / .55); }

/* Fiche de la réunion */
.accueil-fiche {
    position: relative; overflow: hidden;
    background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1);
    border-radius: 18px; padding: 1.5rem;
}
.accueil-fiche::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ddm-accent-500); }
.accueil-etiquettes { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.accueil-fiche h1 { font-size: 1.45rem; line-height: 1.25; }
.accueil-sous { margin-top: .4rem; font-size: .86rem; color: rgb(255 255 255 / .62); line-height: 1.55; }

.accueil-bloc { margin-top: 1.35rem; }
.accueil-titre-bloc {
    display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: rgb(255 255 255 / .45);
}
.accueil-attente { text-transform: none; letter-spacing: 0; color: var(--ddm-rouge-400); font-size: .72rem; }
.accueil-objet { margin-top: .5rem; font-size: .88rem; line-height: 1.6; color: rgb(255 255 255 / .82); white-space: pre-line; }
.accueil-points { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.7; color: rgb(255 255 255 / .82); }

.accueil-reglages { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.reglage {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem;
    border-radius: 999px; font-size: .77rem; border: 1px solid transparent;
}
.reglage.oui { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .14); }
.reglage.non { background: transparent; color: rgb(255 255 255 / .42); border-color: rgb(255 255 255 / .1); }
.accueil-avis { margin-top: .6rem; display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--ddm-rouge-400); }

.accueil-invites { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.jeton-invite {
    width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
    font-size: .72rem; font-weight: 700; background: rgb(255 255 255 / .09);
    border: 1px solid rgb(255 255 255 / .14); color: rgb(255 255 255 / .75);
}
.jeton-invite.venu { background: rgb(197 209 230 / .18); border-color: rgb(197 209 230 / .45); color: var(--ddm-navy-200); }
.jeton-invite.plus { background: transparent; color: rgb(255 255 255 / .5); }

.accueil-entree { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid rgb(255 255 255 / .1); }
.accueil-formulaire label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .4rem; }
.accueil-formulaire label span { font-weight: 400; color: rgb(255 255 255 / .45); }
.accueil-formulaire input {
    width: 100%; padding: .75rem .9rem; margin-bottom: .8rem; border-radius: 11px;
    border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .07);
    color: #fff; font: inherit; font-size: .9rem;
}
.accueil-formulaire input::placeholder { color: rgb(255 255 255 / .4); }
.accueil-formulaire input:focus { outline: none; border-color: var(--ddm-accent-400); }
.accueil-pied { margin-top: .85rem; text-align: center; font-size: .8rem; color: rgb(255 255 255 / .55); }
.accueil-pied a, .lien-discret {
    color: #fff; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
}

@media (max-width: 900px) {
    .accueil-corps { grid-template-columns: 1fr; gap: 1.25rem; }
    .accueil-salle { padding: 1.25rem 1rem; place-items: start center; }
    .apercu-video { aspect-ratio: 4 / 3; }
}

.toast { position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--texte); padding: .7rem 1rem; border-radius: 10px; box-shadow: 0 20px 40px -10px rgb(0 0 0 / .5); font-size: .86rem; font-weight: 500; z-index: 50; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.visible { opacity: 1; }

/* -- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .deux-colonnes { grid-template-columns: 1fr; }
    .fonctions { grid-template-columns: 1fr; }
    .etapes ol { grid-template-columns: repeat(2, 1fr); }
    .heros-int { grid-template-columns: 1fr; }
    .apercu-photo { display: none; }
}

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .laterale { position: fixed; inset: 0 auto 0 0; width: 250px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
    .laterale.ouverte { transform: none; }
    .btn-menu { display: grid !important; }
    .recherche { display: none; }
    .contenu { padding: 1.25rem; }
    .ligne-reunion { grid-template-columns: 1fr; gap: .5rem; }
    .grille-2 { grid-template-columns: 1fr; }
    .salle, .salle:has(.salle-panneau:not(.ouvert)) { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .salle-panneau { display: none; }
    .salle-panneau.ouvert { display: flex; position: fixed; inset: 0; z-index: 30; opacity: 1; pointer-events: auto; }
    .salle-rail { flex-direction: row; justify-content: center; border-left: 0; border-top: 1px solid rgb(255 255 255 / .06); padding: .5rem; }
    .controle span.lib { display: none; }
    .stats { grid-template-columns: 1fr; }
}

.btn-menu { display: none; }

/* -- Reunion rapide sans compte (accueil) --------------------------------- */

/* -- Entrer dans une reunion : demarrer, ou coller le lien recu ------------ */

.entrees { display: grid; gap: .75rem; margin-top: 1.75rem; max-width: 560px; }
.entree {
    padding: 1rem; border-radius: 14px;
    background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14);
}
.entree-rejoindre { background: rgb(255 255 255 / .04); }
.entree-titre {
    display: flex; align-items: center; gap: .4rem; color: #fff;
    font-size: .8rem; font-weight: 600; margin-bottom: .6rem;
}
.entree-ligne { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.entree-ligne input {
    padding: .7rem .9rem; border-radius: 10px; font: inherit; font-size: .9rem;
    border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); color: #fff;
}
.entree-ligne input::placeholder { color: rgb(255 255 255 / .55); }
.entree-ligne input:focus { outline: none; border-color: var(--ddm-accent-400); }
.entree .aide { display: block; margin-top: .5rem; color: rgb(255 255 255 / .6); font-size: .78rem; }
.entree .erreur-claire { color: #ffb4b4; }
.entrees-avis {
    display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 12px;
    background: rgb(181 64 64 / .18); border: 1px solid rgb(204 102 102 / .45); color: var(--ddm-rouge-100); font-size: .84rem;
}

/* Version compacte, dans l'en-tete du tableau de bord. */
.entree-compacte {
    display: flex; align-items: center; gap: .4rem; padding: .25rem .25rem .25rem .7rem;
    border: 1px solid var(--bordure); border-radius: 999px; background: var(--carte); color: var(--texte-3);
}
.entree-compacte:focus-within { border-color: var(--bleu); }
.entree-compacte input { border: 0; background: none; font: inherit; font-size: .85rem; padding: .4rem 0; width: 160px; color: var(--texte); }
.entree-compacte input:focus { outline: none; }
.entree-compacte button {
    width: 32px; height: 32px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--bleu); color: #fff; display: grid; place-items: center;
}

@media (max-width: 640px) {
    .entree-ligne { grid-template-columns: 1fr; }
}

.reunion-rapide { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1.75rem; padding: 1rem; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); max-width: 560px; }
.reunion-rapide .etiquette { grid-column: 1 / -1; color: #fff; font-size: .85rem; font-weight: 600; margin: 0; }
.reunion-rapide input { padding: .7rem .9rem; border-radius: 10px; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .1); color: #fff; font: inherit; }
.reunion-rapide input::placeholder { color: rgb(255 255 255 / .55); }
.reunion-rapide input:focus { outline: none; border-color: var(--accent-ddm-clair); }
.reunion-rapide .aide { grid-column: 1 / -1; color: rgb(255 255 255 / .6); font-size: .78rem; }
.btn-accent { background: var(--accent-ddm); color: #fff; }
.btn-accent:hover { background: #a93838; }
.salle-entete .minuteur .point { background: var(--accent-ddm-clair); box-shadow: 0 0 0 3px rgb(227 107 107 / .25); }

/* -- Téléphones et petites tablettes -------------------------------------- */

@media (max-width: 760px) {
    /* Rien ne doit déborder en largeur : sur un téléphone, une page qui se
       décale horizontalement donne l'impression d'un site cassé. */
    html, body { overflow-x: hidden; }
    .contenu { padding: 1.1rem; }

    /* En-tête de page : le titre, puis les actions en pleine largeur. */
    .entete-page { align-items: stretch; gap: .9rem; }
    .entete-page .actions { width: 100%; }
    .entete-page .actions > * { flex: 1 1 auto; }
    .entete-page .actions .btn { justify-content: center; }
    .entete-page h1 { font-size: 1.3rem; }

    /* La recherche compacte prend toute la largeur au lieu d'être écrasée. */
    .entree-compacte { width: 100%; }
    .entree-compacte input { width: 100%; }

    /* Les onglets défilent plutôt que de se chevaucher. */
    .onglets { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .onglets::-webkit-scrollbar { display: none; }
    .onglets a, .onglets button { white-space: nowrap; }

    /* Un tableau devient une suite de fiches : chaque valeur porte le nom de
       sa colonne, que l'en-tête ne montre plus. */
    .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
    .tableau thead { display: none; }
    .tableau tr { padding: .9rem 1.1rem; border-bottom: 1px solid var(--bordure); }
    .tableau tr:last-child { border-bottom: 0; }
    .tableau tr:hover td { background: none; }
    .tableau td {
        border: 0; padding: .3rem 0; display: flex; align-items: center;
        justify-content: space-between; gap: 1rem; text-align: right;
    }
    .tableau td::before {
        content: attr(data-libelle); flex: none; text-align: left;
        font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
        color: var(--texte-3); font-weight: 700;
    }
    /* La première cellule fait le titre de la fiche, la dernière l'action. */
    .tableau td:first-child { display: block; text-align: left; padding-bottom: .5rem; }
    .tableau td:first-child::before { content: none; }
    .tableau td[data-libelle=""] { justify-content: stretch; padding-top: .6rem; }
    .tableau td[data-libelle=""]::before { content: none; }
    .tableau td[data-libelle=""] .btn { width: 100%; justify-content: center; }
    .tableau td[data-libelle=""][style] { text-align: left !important; }

    /* Zone de dépôt du fichier : trois colonnes ne tiennent pas. */
    .depot { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: .7rem; }
    .depot-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }

    /* Lien de réunion : le champ puis le bouton, l'un sous l'autre. */
    .boite-lien { flex-direction: column; align-items: stretch; }
    .boite-lien .btn { justify-content: center; }

    /* Cartes et listes. */
    .carte-entete { flex-wrap: wrap; gap: .6rem; }
    .ligne-invitation { grid-template-columns: 44px 1fr; }
    .ligne-invitation .actions { grid-column: 1 / -1; }
    .ligne-reunion .actions { flex-wrap: wrap; }
    .champ-duree { max-width: none; }
    .stats { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    /* La salle : l'en-tête garde la marque et le bouton « Quitter », le reste
       passe dans le menu — une barre de commandes qui déborde est pire
       qu'une commande absente. */
    .salle-entete { gap: .6rem; padding: .7rem .9rem; }
    .salle-entete .titre { display: none; }
    .salle-entete .droite { gap: .4rem; }
    .salle-entete #bouton-copier { display: none; }
    .barre-controles { gap: .35rem; padding: .7rem .5rem .9rem; flex-wrap: wrap; }
    .controle .rond { width: 44px; height: 44px; }
    .salle-grille { padding: .6rem; gap: .5rem; grid-template-columns: 1fr; }
    .rangee-miniatures { padding: 0 .6rem .4rem; }
    .rangee-miniatures .tuile { width: 132px; min-height: 76px; }

    /* L'accueil du meet : l'aperçu d'abord, la fiche dessous, sans rognage. */
    .accueil-salle { padding: 1rem .9rem; }
    .accueil-fiche { padding: 1.1rem; }
    .accueil-fiche h1 { font-size: 1.2rem; }
    .accueil-marque { margin-bottom: 1rem; }
    .accueil-cabinet { display: none; }
    .apercu-bouton { width: 46px; height: 46px; }

    /* Page d'accueil publique. */
    .site-entete { padding: .8rem 1rem; gap: .6rem; flex-wrap: wrap; }
    .heros { padding: 2.5rem 1.1rem 3rem; }
    .heros h1 { font-size: 1.9rem; }
    .entrees { margin-top: 1.25rem; }
}

@media (max-width: 420px) {
    /* Les plus petits écrans : on renonce aux libellés des commandes et aux
       colonnes de secours plutôt que de tout rétrécir. */
    .entete-page .actions { flex-direction: column; }
    .entete-page .actions > * { width: 100%; }
    .tableau td { flex-direction: column; align-items: flex-start; text-align: left; gap: .15rem; }
    .tableau td::before { text-align: left; }
    .depot-actions { flex-direction: column; width: 100%; }
    .depot-actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   DDM — les composants propres aux réunions structurées
   ========================================================================= */

.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grille-3 label, .contexte-ddm label { font-size: .8rem; font-weight: 600; color: var(--texte-2); display: flex; flex-direction: column; gap: .3rem; }

/* Arrivée depuis DDM : le contexte est déjà là, on le dit. */
.bandeau-ddm { display: flex; align-items: center; gap: .75rem; background: var(--cyan-clair); border: 1px solid var(--ddm-accent-200);
    color: var(--ddm-accent-800); border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .88rem; }
.bandeau-ddm code { background: #fff; border-radius: 6px; padding: .05rem .4rem; font-size: .8rem; }
.bandeau-ddm .btn { margin-left: auto; }
.contexte-ddm { border: 1px dashed var(--bordure); border-radius: 12px; padding: .7rem .9rem; }
.contexte-ddm summary { cursor: pointer; list-style: none; }
.contexte-ddm summary::-webkit-details-marker { display: none; }
.contexte-ddm summary::before { content: '▸ '; color: var(--cyan); }
.contexte-ddm[open] summary::before { content: '▾ '; }

/* L'ordre du jour : une ligne par point, numérotée. */
.odj { display: flex; flex-direction: column; gap: .45rem; }
.odj-ligne { display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px minmax(0, 190px) 34px; gap: .5rem; align-items: center; }
.odj-num { font-weight: 700; color: var(--cyan); text-align: right; }
.odj-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.odj-lecture { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.odj-lecture li span { font-weight: 600; }
.odj-lecture li small { display: block; color: var(--texte-3); font-size: .78rem; }

/* Les co-organisateurs : des cases, filtrables. */
.liste-organisateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; max-height: 240px; overflow-y: auto; padding: .2rem; }
.organisateur { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--bordure); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; background: #fff; }
.organisateur:has(input:checked) { border-color: var(--cyan); background: var(--cyan-clair); }
.organisateur input { accent-color: var(--cyan); }
.organisateur b { display: block; font-size: .84rem; }
.organisateur small { display: block; color: var(--texte-3); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le compte rendu. */
.cr-titre { font-size: .95rem; margin: 0 0 .5rem; color: var(--marine); }
.cr-point { border: 1px solid var(--bordure); border-left: 4px solid var(--ddm-accent-200); border-radius: 10px; padding: .7rem .9rem; margin-bottom: .6rem; }
.cr-point-traite { border-left-color: var(--vert); }
.cr-point-reporte { border-left-color: var(--orange); }
.cr-point-en_cours { border-left-color: var(--cyan); }
.cr-point-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; flex-wrap: wrap; }
.cr-point-tete small { color: var(--texte-3); }
.cr-point-tete select { margin-left: auto; width: auto; }
.cr-point textarea { min-height: 54px; }
.cr-decision { display: flex; gap: .45rem; align-items: flex-start; background: var(--cyan-clair); color: var(--ddm-accent-800); border-radius: 8px; padding: .4rem .6rem; margin-top: .4rem; font-size: .86rem; }
.cr-decision small { color: var(--texte-3); }
.cr-decision-ligne span { flex: 1; }
.cr-ajout { margin-top: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.tableau-presence { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tableau-presence th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-3); padding: .5rem; border-bottom: 1px solid var(--bordure); }
.tableau-presence td { padding: .55rem .5rem; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau-presence td small { display: block; color: var(--texte-3); font-size: .75rem; }
.tableau-presence select { width: auto; min-width: 120px; }

/* Tableau de bord : les actions à suivre. */
.action-rapide { display: block; padding: .5rem 0; border-bottom: 1px solid var(--bordure); color: var(--texte); text-decoration: none; }
.action-rapide:last-child { border-bottom: 0; }
.action-rapide b { display: block; font-size: .85rem; }
.action-rapide small { color: var(--texte-3); font-size: .75rem; }
.action-rapide .en-retard { color: var(--rouge); font-weight: 700; }

/* L'agenda. */
.bascule-vue { display: inline-flex; border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; }
.bascule-vue a { padding: .4rem .8rem; font-size: .82rem; font-weight: 600; color: var(--texte-2); text-decoration: none; }
.bascule-vue a.actif { background: var(--cyan); color: #fff; }
.agenda-legende { display: flex; gap: 1.2rem; align-items: center; font-size: .8rem; color: var(--texte-2); margin-bottom: .8rem; flex-wrap: wrap; }
.agenda-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-right: .3rem; }
.agenda-legende .aide { margin-left: auto; }
.agenda-org { background: var(--cyan); color: #fff; border: 1px solid var(--cyan); }
.agenda-inv { background: #fff; color: var(--ddm-accent-700); border: 1.5px solid var(--cyan); }
.agenda-semaine { overflow-x: auto; }
.agenda-tete, .agenda-corps { display: grid; grid-template-columns: 58px repeat(7, minmax(110px, 1fr)); min-width: 860px; }
.agenda-tete > div { padding: .6rem .5rem; text-align: center; border-bottom: 1px solid var(--bordure); }
.agenda-tete small { display: block; font-size: .7rem; text-transform: uppercase; color: var(--texte-3); letter-spacing: .05em; }
.agenda-tete b { font-size: 1.15rem; }
.agenda-tete .aujourdhui b { background: var(--cyan); color: #fff; border-radius: 999px; padding: .05rem .5rem; }
.agenda-heures div { height: var(--h); font-size: .7rem; color: var(--texte-3); text-align: right; padding-right: .4rem; transform: translateY(-.45rem); }
.agenda-jour { position: relative; border-left: 1px solid var(--bordure); }
.agenda-jour.aujourdhui { background: rgb(31 78 150 / .03); }
.agenda-creneau { display: block; height: var(--h); border-bottom: 1px dashed #eef0f6; }
a.agenda-creneau:hover { background: var(--cyan-clair); }
.agenda-creneau.passe { background: repeating-linear-gradient(135deg, transparent, transparent 6px, #f7f8fb 6px, #f7f8fb 7px); }
.agenda-evt { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: .25rem .4rem; font-size: .74rem; line-height: 1.25; overflow: hidden; text-decoration: none; box-shadow: 0 2px 6px rgb(31 42 92 / .12); z-index: 2; }
.agenda-evt small { display: block; opacity: .8; font-size: .68rem; }
.agenda-evt.fini { opacity: .55; }
.agenda-evt.direct { box-shadow: 0 0 0 2px var(--rouge); }
.agenda-mois-tete, .agenda-mois-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-mois-tete div { padding: .5rem; font-size: .72rem; text-transform: uppercase; color: var(--texte-3); text-align: center; border-bottom: 1px solid var(--bordure); }
.agenda-case { min-height: 108px; border-right: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); padding: .35rem; display: flex; flex-direction: column; gap: .2rem; }
.agenda-case.hors { background: #fafbfd; color: var(--texte-3); }
.agenda-case.aujourdhui .agenda-case-tete b { background: var(--cyan); color: #fff; border-radius: 999px; padding: 0 .4rem; }
.agenda-case-tete { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.agenda-plus { color: var(--texte-3); opacity: 0; }
.agenda-case:hover .agenda-plus { opacity: 1; }
.agenda-puce { font-size: .7rem; border-radius: 6px; padding: .1rem .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.agenda-plus-de { font-size: .7rem; color: var(--cyan); }

/* L'ordre du jour en séance (panneau sombre de la salle). */
.odj-seance-point { display: grid; grid-template-columns: 24px 1fr auto; gap: .5rem; align-items: start; padding: .55rem .4rem; border-radius: 8px; border-bottom: 1px solid rgb(255 255 255 / .06); }
.odj-seance-num { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgb(255 255 255 / .08); color: #D5DEEA; }
.odj-seance-point .intitule { font-size: .85rem; font-weight: 600; color: #fff; }
.odj-seance-point .detail { font-size: .72rem; color: #C9A34E; margin-top: .1rem; }
.odj-seance-point.statut-en_cours { background: rgb(201 163 78 / .28); }
.odj-seance-point.statut-en_cours .odj-seance-num { background: var(--ddm-accent-500); color: #fff; }
.odj-seance-point.statut-traite .intitule { text-decoration: line-through; color: #8FA3BF; }
.odj-seance-point.statut-traite .odj-seance-num { background: #16a34a; color: #fff; }
.odj-seance-point.statut-reporte .odj-seance-num { background: #d97706; color: #fff; }
.odj-seance-actions { display: flex; gap: .2rem; }
.odj-seance-actions button { width: 26px; height: 26px; border-radius: 7px; border: 0; background: rgb(255 255 255 / .08); color: #D5DEEA; cursor: pointer; display: grid; place-items: center; }
.odj-seance-actions button:hover { background: var(--ddm-accent-500); color: #fff; }

/* L'accueil public : une salle DDM dessinée, avec son ordre du jour. */
.apercu-salle { border-radius: 20px; overflow: hidden; background: #0B1322; border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 80px -30px rgb(10 15 34 / .7); }
.apercu-salle-barre { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; color: #E8EDF4; font-size: .8rem; font-weight: 600; background: rgb(255 255 255 / .04); }
.apercu-salle-barre b { margin-left: auto; font-variant-numeric: tabular-nums; color: #C9A34E; }
.apercu-salle-corps { display: grid; grid-template-columns: 1fr 170px; gap: .7rem; padding: .7rem; }
.apercu-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tuile { position: relative; height: 150px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #152238, #1B2C47); }
.tuile span { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .12); color: #fff; font-weight: 700; }
.tuile small { position: absolute; left: .6rem; bottom: .5rem; color: #D5DEEA; font-size: .68rem; }
.tuile.t2 { background: linear-gradient(135deg, #2A4B7C, #152238); }
.tuile.t3 { background: linear-gradient(135deg, #101B2E, #23406B); }
.tuile.parle { box-shadow: 0 0 0 3px #C9A34E; }
.apercu-odj { background: rgb(255 255 255 / .05); border-radius: 12px; padding: .7rem; font-size: .72rem; color: #D5DEEA; display: flex; flex-direction: column; gap: .45rem; }
.apercu-odj b { color: #fff; font-size: .78rem; }
.apercu-odj .fait { text-decoration: line-through; opacity: .6; }
.apercu-odj .courant { color: #fff; background: rgb(31 78 150 / .55); border-radius: 6px; padding: .2rem .35rem; }
.apercu-salle-pied { display: flex; justify-content: center; gap: .6rem; padding: .7rem; }
.apercu-salle-pied i { width: 34px; height: 34px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.apercu-salle-pied i.rouge { background: #dc2626; }

@media (max-width: 900px) {
    .grille-3 { grid-template-columns: 1fr; }
    .odj-ligne { grid-template-columns: 22px 1fr 34px; }
    .odj-ligne input[type=number], .odj-ligne input[name$="[responsable]"] { grid-column: 2; }
    .apercu-salle { display: none; }
}

/* Les champs du compte rendu (points, décisions, émargement) prennent le style des formulaires. */
:is(.cr-point, .cr-ajout, .tableau-presence, .contexte-ddm) :is(input[type="text"], input[type="number"], input[type="date"], select, textarea) {
    width: 100%; padding: .55rem .75rem; border: 1px solid var(--bordure); border-radius: 10px;
    font: inherit; font-size: .88rem; background: #fff; color: var(--texte);
}
:is(.cr-point, .cr-ajout, .tableau-presence, .contexte-ddm) :is(input, select, textarea):focus {
    outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(31 78 150 / .18);
}
:is(.cr-point, .cr-ajout, .tableau-presence, .contexte-ddm) :is(select, textarea):disabled { background: #f7f8fb; color: var(--texte-2); }
.cr-point-tete select, .tableau-presence select { width: auto; padding: .35rem .6rem; }

/* Le logo DIADDEM : l'image officielle, jamais redessinée. Sur fond sombre, une plaque blanche lui rend son contraste. */
.logo-ddm img { display: block; height: auto; }
.logo-ddm-plaque { display: inline-flex; background: #fff; border-radius: 10px; padding: .3rem .45rem; }

/* L'accueil : la marque, puis le tour des modules DIADDEM. */
.heros-marque { margin-bottom: 1.25rem; }
.heros .gages .gage { color: var(--ddm-plume-300); }
.modules { max-width: 1140px; margin: 3.5rem auto 1rem; padding: 0 2.5rem; }
.modules-tete { max-width: 720px; margin-bottom: 1.75rem; }
.sur-titre { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ddm-accent-500); margin-bottom: .5rem; }
.modules-tete h2 { font-size: 1.7rem; margin: 0 0 .6rem; color: var(--ddm-navy-800); }
.modules-tete p { color: var(--texte-2); font-size: 1rem; line-height: 1.6; margin: 0; }
.modules-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.module { background: #fff; border: 1px solid var(--bordure); border-top: 4px solid var(--mc); border-radius: var(--rayon); padding: 1.35rem 1.25rem; box-shadow: var(--ombre); }
.module-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--mc) 12%, #fff); color: var(--mc); margin-bottom: .9rem; }
.module h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ddm-navy-800); }
.module > p { color: var(--texte-2); font-size: .86rem; line-height: 1.55; margin: 0 0 .8rem; }
.module ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; border-top: 1px dashed var(--bordure); padding-top: .8rem; }
.module li { font-size: .8rem; color: var(--texte-2); line-height: 1.45; padding-left: .9rem; position: relative; }
.module li::before { content: ''; position: absolute; left: 0; top: .5rem; width: 6px; height: 6px; border-radius: 999px; background: var(--mc); }
.module li b { color: var(--texte); }
.m-gouv { --mc: #66100F; } .m-risque { --mc: #C2410C; } .m-audit { --mc: #1D4ED8; } .m-proc { --mc: #0F766E; }
.modules-lien { display: flex; gap: .8rem; align-items: center; margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px;
    background: var(--ddm-accent-50); border: 1px solid var(--ddm-accent-200); color: var(--ddm-accent-800); font-size: .9rem; }
.modules-lien svg { flex: none; }
.fonctions { margin-top: 3rem; }
@media (max-width: 1000px) { .modules-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .modules-grille { grid-template-columns: 1fr; } .modules { padding: 0 1.25rem; } }

/* =========================================================================
   Palette combinée : bleu nuit, bleu roi, or de la couronne, bordeaux de marque
   ========================================================================= */
.logo-ddm-texte small { color: var(--ddm-bordeaux); }
.logo-ddm-clair .logo-ddm-texte small { color: var(--ddm-or); }
.heros { border-bottom-color: var(--ddm-or); }
.heros h1 span { color: var(--ddm-or); }
.heros .devise i { color: var(--ddm-or); }
.sur-titre { color: var(--ddm-bordeaux); }
.etapes .num { background: var(--ddm-or); color: var(--ddm-navy-900); }
.nav a.actif { box-shadow: inset 3px 0 0 var(--ddm-or); }
.agenda-evt.direct { box-shadow: 0 0 0 2px var(--ddm-or); }
.tuile.parle { box-shadow: 0 0 0 3px var(--ddm-or); }
.apercu-odj .courant { background: rgb(201 163 78 / .28); color: #fff; }
.modules-lien { background: var(--ddm-or-clair); border-color: #E8D7A8; color: #5C4718; }

/* Les photos : le héros, les modules, la connexion. */
.heros-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(9 17 31 / .75); border: 1px solid rgb(255 255 255 / .14); }
.heros-photo img { display: block; width: 100%; height: 470px; object-fit: cover; }
.heros-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(9 17 31 / .55)); }
.heros-photo .apercu-flottant { z-index: 1; }
.heros-carte-odj { position: absolute; right: 1rem; top: 1rem; z-index: 1; background: rgb(255 255 255 / .96); color: var(--texte); border-radius: 12px;
    padding: .75rem .9rem; width: 230px; box-shadow: var(--ombre); font-size: .78rem; }
.heros-carte-odj b { display: block; font-size: .8rem; margin-bottom: .35rem; color: var(--ddm-navy-800); }
.heros-carte-odj div { padding: .18rem 0; color: var(--texte-2); }
.heros-carte-odj .fait { text-decoration: line-through; color: var(--texte-3); }
.heros-carte-odj .courant { color: var(--ddm-navy-900); font-weight: 700; border-left: 3px solid var(--ddm-or); padding-left: .4rem; }
.module-photo { margin: -1.35rem -1.25rem 1rem; height: 150px; overflow: hidden; border-radius: var(--rayon) var(--rayon) 0 0; }
.module-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.module:hover .module-photo img { transform: scale(1.04); }
.module { border-top-width: 0; overflow: hidden; }
.module-photo { border-bottom: 4px solid var(--mc); }
.credit-photos { max-width: 1140px; margin: -3.5rem auto 3rem; padding: 0 2.5rem; font-size: .72rem; color: var(--texte-3); }
.credit-photos a { color: inherit; }
.auth-photo { background: center / cover no-repeat url('/images/connexion-visio.jpg'); position: relative; }
.auth-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(15 26 44 / .82), rgb(31 78 150 / .55)); }
@media (max-width: 900px) { .heros-photo { display: none; } .module-photo { height: 130px; } }
.auth-photo .carte-auth { position: relative; z-index: 1; box-shadow: 0 30px 70px -25px rgb(9 17 31 / .7); }