:root {
      --bleu: #2166d8;
      --bleu-clair: #dce8ff;
      --texte: #15213a;
      --gris: #6f7c92;
      --fond: #eef2f7;
      --blanc: #ffffff;
      --ombre: 0 18px 50px rgba(28, 42, 70, 0.16);
      --rayon: 24px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--texte);
      background: radial-gradient(circle at top left, rgba(33,102,216,.12), transparent 32%), var(--fond);
      padding: 18px;
    }

    button, input { font: inherit; }

    .app {
      width: min(1400px, 100%);
      min-height: calc(100vh - 36px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(330px, 41%) 1fr;
      background: var(--blanc);
      border-radius: var(--rayon);
      overflow: hidden;
      box-shadow: var(--ombre);
    }

   .assistant-panel {
    position: relative;
    min-height: 1000px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
    color: #fff;
    overflow: hidden;
    background: #10213d;
}

.assistant-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
   
}


@media only screen and (max-width: 900px) {

    .assistant-panel {
        height: 100dvh;
        min-height: 100dvh;
        padding: 20px;
    }

    .assistant-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

}

    .assistant-shade {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 25%),
        linear-gradient(to top, rgba(8,17,35,.66), rgba(8,17,35,0) 48%);
      pointer-events: none;
    }

  


    .assistant-card,
    .assistant-actions {
      position: relative;
      z-index: 2;
    }

    

    .assistant-card {
      width: min(430px, 100%);
      margin: 0 auto 34px;
      padding: 20px 22px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 18px;
      background: rgba(8, 15, 28, .72);
      backdrop-filter: blur(12px);
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 16px;
      align-items: center;
    }

    .sound-bars {
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
    }

    .sound-bars span {
      width: 4px;
      height: 10px;
      border-radius: 4px;
      background: #fff;
      opacity: .75;
    }

    .speaking .sound-bars span { animation: soundWave .8s ease-in-out infinite; }
    .speaking .sound-bars span:nth-child(2) { animation-delay: .1s; }
    .speaking .sound-bars span:nth-child(3) { animation-delay: .2s; }
    .speaking .sound-bars span:nth-child(4) { animation-delay: .3s; }
    .speaking .sound-bars span:nth-child(5) { animation-delay: .4s; }

    @keyframes soundWave {
      0%, 100% { height: 10px; opacity: .65; }
      50% { height: 30px; opacity: 1; }
    }

    .assistant-card strong {
      display: block;
      margin-bottom: 5px;
      font-size: 18px;
    }

    .assistant-card span {
      line-height: 1.45;
      color: rgba(255,255,255,.9);
    }

    .assistant-actions {
      display: flex;
      justify-content: center;
      gap: 48px;
    }

    .round-action {
      border: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      text-align: center;
    }

    .round-action .icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 8px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 50%;
      background: rgba(0,0,0,.24);
      font-size: 23px;
    }

    .round-action.active .icon {
      background: rgba(33,102,216,.9);
      border-color: #fff;
    }

    .chat-panel {
      min-width: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: #f9fbfe;
    }

   /* =========================================
   AGRANDIR / RÉDUIRE LA ZONE DE TRAVAIL
   ========================================= */

@media (min-width: 769px) {

    .app.zone-travail-agrandie {
        width: 100% !important;
        max-width: none !important;

        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app.zone-travail-agrandie > .assistant-panel {
        display: none !important;
    }

    .app.zone-travail-agrandie > .chat-panel {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

.carte-module-colonne-image {
    border-radius: 14px;
}

/* Couleurs du client uniquement si une icône personnalisée existe */
.carte-module-colonne-image.avec-icone-personnalisee {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--couleur-client);
}

/* Le pictogramme personnalisable */
.carte-module-pictogramme {
    display: block;

    width: 52px;
    height: 52px;

    background-color: var(--couleur-texte-client);

    -webkit-mask-image: var(--icone-module);
    mask-image: var(--icone-module);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

.carte-module-image {
    object-fit: contain;
}
    .topbar {
      min-height: 110px;
      padding: 22px 32px;
      background: #fff;
      border-bottom: 1px solid #e7ebf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand { display: flex; align-items: center; gap: 18px; }
    .logo { font-size: clamp(38px, 5vw, 58px); line-height: 1; font-weight: 800; letter-spacing: -4px; color: #3871d8; }
    .brand h1 { margin: 0; font-size: 25px; }
    .brand p { margin: 4px 0 0; color: var(--gris); font-size: 16px; }

    .top-actions { display: flex; align-items: center; gap: 12px; }
    .top-actions button { width: 42px; height: 42px; border: 0; background: transparent; border-radius: 50%; font-size: 24px; color: #5f6b80; cursor: pointer; }
    .top-actions button:hover { background: #f0f4fa; }

.bouton-affichage-principal {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 1px solid #d7e0ec !important;
    border-radius: 9px !important;

    background: #ffffff !important;
    color: #2166d8 !important;

    box-shadow: 0 3px 10px rgba(0,0,0,.10);
    cursor: pointer;
}

.bouton-affichage-principal svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bouton-affichage-principal:hover {
    background: #f3f7ff !important;
}
    .login-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(8, 17, 35, .64);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }


/* ===================================== */
/* RACCOURCIS - UNIQUEMENT SUR GSM */
/* ===================================== */

#boutonRaccourcisMobile {
    display: none;
}

@media (max-width: 768px) {
    #boutonRaccourcisMobile {
        display: inline-flex;
    }
}

    .login-modal.ouvert { display: flex; }

    .login-card {
      width: min(430px, 100%);
      padding: 28px;
      border-radius: 22px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(0,0,0,.28);
    }

    .login-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 22px;
    }

    .login-card h2 { margin: 0; font-size: 24px; }

    .login-close {
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 50%;
      background: #eef2f7;
      color: #34425a;
      font-size: 25px;
      cursor: pointer;
    }

    .login-field {
      display: grid;
      gap: 7px;
      margin-bottom: 17px;
    }

    .login-field label { font-weight: 700; }

    .login-field input {
      width: 100%;
      min-height: 52px;
      padding: 0 15px;
      border: 1px solid #ccd6e4;
      border-radius: 12px;
      outline: none;
    }

    .login-field input:focus {
      border-color: var(--bleu);
      box-shadow: 0 0 0 4px rgba(33,102,216,.10);
    }



.login-field select {
    width: 100%;
    min-height: 52px;
    padding: 0 42px 0 15px;
    border: 1px solid #ccd6e4;
    border-radius: 12px;
    background: #ffffff;
    color: var(--texte);
    font: inherit;
    outline: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.login-field select:focus {
    border-color: var(--bleu);
    box-shadow: 0 0 0 4px rgba(33,102,216,.10);
}

    .login-remember {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 4px 0 18px;
      color: var(--gris);
    }

    .login-remember input { width: auto; }

    .login-submit {
      width: 100%;
      min-height: 52px;
      border: 0;
      border-radius: 999px;
      background: var(--bleu);
      color: #fff;
      font-weight: 800;
      cursor: pointer;
    }

    .login-submit + .login-submit {
    margin-top: 10px;
}

.login-bouton-secondaire {
    background: var(--bleu);
    color: #ffffff;
}

.login-bouton-secondaire:hover,
.login-submit:hover {
    filter: brightness(.94);
}

    .login-separateur {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 17px 0;
    color: #8a96a8;
    font-size: 12px;
}

.login-separateur::before,
.login-separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dfe5ee;
}

.login-nouveau-compte {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #2166d8;
    border-radius: 12px;
    background: #ffffff;
    color: #2166d8;
    font-weight: 700;
    cursor: pointer;
}

.login-nouveau-compte:hover {
    background: #f0f5ff;
}
    .login-message {
      display: none;
      margin-bottom: 16px;
      padding: 11px 13px;
      border-radius: 10px;
      line-height: 1.4;
    }

    .login-message.erreur {
      display: block;
      background: #fdeaea;
      color: #941b1b;
    }

    .login-message.succes {
      display: block;
      background: #e7f8ed;
      color: #176534;
    }

    .login-access-button {
      width: auto !important;
      min-width: 116px;
      padding: 0 15px;
      border-radius: 999px !important;
      background: #eef4ff !important;
      color: var(--bleu) !important;
      font-size: 15px !important;
      font-weight: 750;
    }

    @media (max-width: 768px) {
      .login-mobile-button {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 25;
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid rgba(255,255,255,.65);
        border-radius: 999px;
        background: rgba(8,17,35,.72);
        color: #fff;
        font-weight: 750;
        cursor: pointer;
        backdrop-filter: blur(8px);
      }
 
      
    }

    @media (min-width: 769px) {
      .login-mobile-button { display: none; }
    }

    .conversation { overflow: auto; padding: 32px clamp(22px, 5vw, 64px); scroll-behavior: smooth; }

    .message-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 28px; }
    .message-row.user { justify-content: flex-end; }

    .mini-avatar {
      width: 64px;
      height: 64px;
      flex: 0 0 auto;
      border-radius: 50%;
      background-image: url('/secretaire-test/assets/images/sophie-avatar-panel.png');
      /* Cadre plus large sur le visage : yeux, nez, bouche et menton visibles. */
      background-size: 190%;
      background-position: 50% 18%;
      border: 3px solid #d8e4f8;
    }

    .message-wrap { max-width: min(590px, 76%); }

    .bubble {
      padding: 22px 26px;
      border-radius: 18px;
      font-size: clamp(17px, 2vw, 21px);
      line-height: 1.55;
      box-shadow: 0 8px 22px rgba(36, 52, 80, .09);
      white-space: pre-line;
    }

    .assistant .bubble { background: #fff; border: 1px solid #e8ecf2; border-top-left-radius: 5px; }
    .user .bubble { background: var(--bleu-clair); border-top-right-radius: 5px; }
    .bubble strong { color: var(--bleu); }
    .asterisque-obligatoire {
    margin-left: 5px;
    color: #d60000;
    font-size: 1.2em;
    font-weight: 900;
    vertical-align: middle;
}
    .time { margin-top: 7px; color: #7b8799; font-size: 14px; }
    .user .time { text-align: right; }




    .typing-dots { display: inline-flex; gap: 5px; align-items: center; min-width: 42px; }
    .typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: #8190a5; animation: dot 1s infinite ease-in-out; }
    .typing-dots span:nth-child(2) { animation-delay: .15s; }
    .typing-dots span:nth-child(3) { animation-delay: .3s; }
    @keyframes dot { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-5px); opacity: 1; } }

    .choices {
      width: min(540px, calc(100% - 62px));
      margin: -4px 0 28px 62px;
      display: grid;
      gap: 12px;
    }

    .choice {
      width: 100%;
      min-height: 68px;
      padding: 14px 18px;
      display: grid;
      grid-template-columns: 42px 1fr 26px;
      align-items: center;
      gap: 12px;
      border: 1px solid #dce3ee;
      border-radius: 14px;
      background: #fff;
      color: var(--texte);
      box-shadow: 0 5px 16px rgba(30, 45, 70, .06);
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .choice:hover { transform: translateY(-2px); border-color: #9ebcf2; box-shadow: 0 10px 25px rgba(35, 80, 160, .12); }
    .choice:disabled { cursor: default; opacity: .55; transform: none; }
    .choice-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--bleu); color: var(--bleu); font-size: 18px; }

    .composer {
      padding: 22px 28px;
      background: #fff;
      border-top: 1px solid #e7ebf2;
      display: grid;
      grid-template-columns: auto 1fr 62px;
      gap: 12px;
      align-items: center;
    }

    .micro {
      width: 52px;
      height: 52px;
      border: 1px solid #d8e0eb;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      font-size: 21px;
    }

    .composer input,
    .composer textarea {
      width: 100%;
      min-height: 58px;
      padding: 0 20px;
      border: 1px solid #d8e0eb;
      border-radius: 16px;
      font-size: 17px;
      outline: none;
    }

    .composer input:focus,
    .composer textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(33,102,216,.1); }

    .composer textarea {
      min-height: 120px;
      padding: 16px 20px;
      resize: vertical;
      line-height: 1.45;
    }

    .composer .champ-cache { display: none; }
    .composer.mode-textarea { align-items: end; }

    .send {
      width: 62px;
      height: 62px;
      border: 0;
      border-radius: 50%;
      background: var(--bleu);
      color: #fff;
      font-size: 25px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(33,102,216,.28);
    }

    .send:disabled, .micro:disabled { opacity: .45; cursor: default; }

    @media (max-width: 900px) {
      body { padding: 0; }
      .app { min-height: 100vh; border-radius: 0; grid-template-columns: 1fr; }
      .assistant-panel { min-height: 420px; }
      .assistant-photo { object-position: center 12%; }
      .chat-panel { min-height: 720px; }
    }

    @media (max-width: 560px) {
      .assistant-panel { min-height: 360px; padding: 20px; }
      .assistant-card { margin-bottom: 20px; padding: 15px; grid-template-columns: 38px 1fr; }
      .assistant-card strong { font-size: 16px; }
      .assistant-card span { font-size: 14px; }
      .assistant-actions { gap: 28px; }
      .round-action { font-size: 13px; }
      .topbar { min-height: 88px; padding: 16px 18px; }
      .logo { font-size: 38px; }
      .brand h1 { font-size: 19px; }
      .brand p { font-size: 13px; }
      .top-actions button:first-child { display: none; }
      .conversation { padding: 22px 14px; }
      .mini-avatar { width: 52px; height: 52px; background-size: 190%; background-position: 50% 18%; }
      .message-row { gap: 9px; }
      .message-wrap { max-width: calc(100% - 61px); }
      .bubble { padding: 16px 17px; font-size: 16px; }
      .choices { width: calc(100% - 61px); margin-left: 61px; }
      .choice { min-height: 60px; font-size: 15px; }
      .composer { padding: 14px; grid-template-columns: 46px 1fr 54px; gap: 8px; }
      .micro { width: 46px; height: 46px; }
      .send { width: 54px; height: 54px; }
    }
  
    .start-overlay {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(8, 17, 35, .66);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: opacity .45s ease, visibility .45s ease;
    }

    .start-overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .start-card {
      width: min(430px, 100%);
      padding: 30px;
      border-radius: 24px;
      background: #ffffff;
      color: #14213a;
      text-align: center;
      box-shadow: 0 22px 60px rgba(0,0,0,.28);
    }

    .start-card h2 {
      margin: 0 0 10px;
      font-size: clamp(1.55rem, 3vw, 2.2rem);
    }

    .start-card p {
      margin: 0 0 22px;
      line-height: 1.55;
      color: #516078;
    }

.accueil-client-identite{
    position:relative;
    z-index:20;

    max-width:430px;
 margin:0 auto 20px;
padding:0;
background:#ffffff;
border-radius:0;
box-shadow:none;

    text-align:center;
}

.accueil-client-label {
    margin-bottom: 7px;
    color: #6f7c92;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.accueil-client-nom {
    margin: 0 0 14px;
    color: #15213a;
    font-size:30px;
    line-height: 1.2;
}

.accueil-formulaire-titre {
    margin: 14px auto 18px;
    padding: 12px 16px;
   
    color: #15213a;
    text-align: center;
}

.accueil-formulaire-titre span {
    display: block;
    margin-bottom: 4px;
    color: #6f7c92;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.accueil-formulaire-titre strong {
    display: block;
    color: #2166d8;
    font-size: 18px;
    line-height: 1.3;
}
.accueil-client-coordonnee {
    margin-top: 6px;
    color: #516078;
    font-size: 14px;
    line-height: 1.4;
}



.accueil-metier {
    margin-bottom: 12px;
    color: #2166d8;
    font-size: 18px;
    font-weight: 800;
}

.accueil-client-message {
    margin-bottom: 22px !important;
}

.accueil-client-signature {
    margin-top: 20px;
    color: #8a96a8;
    font-size: 12px;
}

   .start-button{
   
     display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 150px;
    height: 44px !important;
    min-width: 0 !important;

    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #2166d8 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800;

    cursor: pointer;

}

  

    .assistant-panel.nodding .assistant-photo {
      animation: acquiescement .7s ease-in-out 1;
    }

    @keyframes acquiescement {
      0%, 100% { transform: scale(1.018) translateY(0) rotate(0deg); }
      30% { transform: scale(1.023) translateY(6px) rotate(.2deg); }
      60% { transform: scale(1.021) translateY(-2px) rotate(-.12deg); }
    }

    /* Étape 7 : sélection professionnelle du métier */
    .metiers-zone {
      width: min(760px, calc(100% - 62px));
      margin: -4px 0 30px 62px;
    }

    .metiers-toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .metiers-recherche {
      width: 100%;
      min-height: 48px;
      padding: 0 16px;
      border: 1px solid #d8e0eb;
      border-radius: 14px;
      background: #fff;
      color: var(--texte);
      outline: none;
    }

    .metiers-recherche:focus {
      border-color: var(--bleu);
      box-shadow: 0 0 0 4px rgba(33,102,216,.1);
    }

    .metiers-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .carte-metier {
      min-width: 0;
      padding: 17px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 13px;
      border: 1px solid #dce3ee;
      border-radius: 17px;
      background: #fff;
      color: var(--texte);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(30,45,70,.07);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .carte-metier:hover, .carte-metier:focus-visible {
      transform: translateY(-2px);
      border-color: #8eb1ec;
      box-shadow: 0 12px 28px rgba(33,102,216,.14);
      outline: none;
    }

    .carte-metier:disabled { opacity: .55; cursor: default; transform: none; }

    .metier-icone {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #eaf1ff;
      color: var(--bleu);
      font-size: 23px;
    }

    .metier-contenu { min-width: 0; }
    .metier-nom { display: block; font-size: 16px; font-weight: 780; line-height: 1.25; }
    .metier-description { display: block; margin-top: 5px; color: var(--gris); font-size: 13px; line-height: 1.35; }
    .metier-fleche { color: #8a96a8; font-size: 25px; }
    .metiers-vide { padding: 20px; border: 1px dashed #cbd5e3; border-radius: 15px; background: #fff; color: var(--gris); text-align: center; }

    @media (max-width: 700px) {
      .metiers-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
      .metiers-zone { width: calc(100% - 61px); margin-left: 61px; }
      .carte-metier { padding: 14px; grid-template-columns: 43px minmax(0,1fr) 18px; }
      .metier-icone { width: 42px; height: 42px; }
    }

  
    .metier-client-id {
      display: block;
      margin-top: 4px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #8b5e00;
    }

    /* 20260718-V76 : sur ordinateur, seule la partie droite défile.
       Sur mobile, on conserve le défilement naturel de toute la page. */
   
       @media (min-width: 769px) {

    body {
        padding-top: 2cm !important;
    }

    html, body {
        height: 100%;
        overflow: hidden;
    }

    .app {
        height: calc(100dvh - 10px) !important;
        min-height: calc(100dvh - 10px) !important;
        overflow: hidden;
    }

      .assistant-panel {
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;
        
      }

      .chat-panel {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
      }

      .conversation {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
    }

    @media (max-width: 768px) {
      html, body {
        height: auto;
        overflow: auto;
      }

      .app,
      .assistant-panel,
      .chat-panel {
        height: auto;
        overflow: visible;
      }

      .assistant-panel {
        position: relative;
        top: auto;
      }

      .conversation {
        overflow-y: visible;
      }
    }


    .message-row.user .edit-answer {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      margin-top: 8px;
      border: 2px solid #2f5f9f;
      background: #ffffff;
      color: #2f5f9f;
      cursor: pointer;
      font-size: 23px;
      font-weight: 700;
      line-height: 1;
      padding: 0;
      border-radius: 50%;
      opacity: 1 !important;
      visibility: visible !important;
      box-shadow: 0 3px 10px rgba(36, 52, 80, .18);
      z-index: 5;
    }
    .message-row.user .edit-answer:hover { transform: scale(1.06); }


    /* V59 : sur GSM, Sophie est visible immédiatement à l'ouverture. */
    @media (max-width: 768px) {
      .assistant-panel {
        min-height: 430px;
      }

   .assistant-photo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center top;

    background: #0d2343;
}

      .start-overlay {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: flex-end;
        padding: 18px;
      }

      .start-card {
    padding: 14px 18px;
    background: #ffffff;
}

      .start-card > h2,
.start-card > p {
    display: none !important;
}

      .start-button {
        padding: 12px 20px;
      }
    }


    /* V60 : optimisation mobile du panneau Sophie */
    .start-sophie-label {
      display: none;
    }

    @media (max-width: 768px) {
      .assistant-panel {
        min-height: 560px !important;
        padding: 18px 18px 22px !important;
      }

      .assistant-photo {
        object-fit: cover;
    object-position: center top;
    
    transform: scale(0.88);
      }

      .start-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 16px;
      }

      .start-card {
        width: min(420px, calc(100% - 8px));
        padding: 14px 16px 16px;
        border-radius: 18px;
        background: rgba(255,255,255,.94);
      }

      .start-sophie-label {
        display: block;
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 700;
        color: #14213a;
        text-align: center;
      }

      .start-button {
        width: 100%;
      }

      .assistant-card {
        margin-bottom: 12px;
      }

      .assistant-actions {
        position: relative;
        z-index: 6;
        margin-bottom: 2px;
        gap: 22px;
      }
    }

    @media (max-width: 560px) {
      .assistant-panel {
        min-height: 610px !important;
      }
    }


    /* 20260718-V76 : interface mobile épurée et photo plein écran */
    .start-sophie-label { display: none; }

    /* CORRECTION MOBILE — compte connecté visible */
@media (max-width: 768px) {

    .chat-panel > .topbar {
        display: block !important;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 9999 !important;
        width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .chat-panel > .topbar .brand {
        display: none !important;
    }

    .chat-panel > .topbar .top-actions {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        overflow: visible !important;
    }

    .chat-panel > .topbar #helpButton {
        display: none !important;
    }

    .chat-panel > .topbar .login-access-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .chat-panel > .topbar .menu-utilisateur {
        display: block !important;
        position: relative !important;
        z-index: 10000 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .chat-panel > .topbar .menu-utilisateur-bouton {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

      .assistant-panel {
        min-height: 100svh !important;
        height: 100svh !important;
        padding: 18px 18px 22px !important;
        box-sizing: border-box;
        overflow: hidden !important;
      }

      .assistant-photo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        object-position: center top;
      }

      .start-overlay {
        height: 100%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: flex-end;
        justify-content: center;
        padding: 16px;
      }

      .start-card {
        width: min(420px, calc(100% - 8px));
        margin-bottom: 15px;
        padding: 14px 16px 16px;
        border-radius: 18px;
        background: #ffffff;
        opacity:0.8;
      }

      .start-card > h2,
.start-card > p {
    display: none !important;
}

      .start-sophie-label {
        display: block;
        margin-bottom: 10px;
        font-size: 17px;
        font-weight: 700;
        color: #14213a;
        text-align: center;
      }

      .start-button {
        width: 100%;
      }

      .assistant-actions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 18px;
        z-index: 8;
        gap: 22px;
      }
    }


    /* V75 : après démarrage sur GSM, la photo se réduit pour faire remonter la conversation. */
    @media (max-width: 768px) {
     .assistant-panel.conversation-active {
    height: 50svh !important;
    min-height: 320px !important;
    transition:
        height .45s ease,
        min-height .45s ease;
}

      .assistant-panel.conversation-active .assistant-photo {
        object-position: center 8%;
      }

      .assistant-panel.conversation-active .start-overlay {
        display: none !important;
      }

      .assistant-panel.conversation-active + .chat-panel {
        margin-top: 0;
      }
    }


    /* V79 : formulaire complet de contrôle en fin de questionnaire */
    .controle-formulaire {
      width: min(780px, calc(100% - 62px));
      margin: 0 0 30px 62px;
      padding: 22px;
      border: 1px solid #dce3ee;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(30,45,70,.08);
    }
    .controle-formulaire h3 { margin: 0 0 8px; font-size: 21px; }
    .controle-formulaire .controle-intro { margin: 0 0 20px; color: var(--gris); line-height: 1.45; }
    
    .controle-champ { display: grid; gap: 7px; margin-bottom: 17px; }
    .controle-champ label { font-weight: 700; color: var(--texte); line-height: 1.35; }
    .controle-champ input,
    .controle-champ textarea,
    .controle-champ select {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #ccd6e4;
      border-radius: 12px;
      background: #fff;
      color: var(--texte);
      font: inherit;
      font-weight: 400;
      outline: none;
      min-height: 56px;
    }
    .controle-champ textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
    .controle-champ input:focus,
    .controle-champ textarea:focus,
    .controle-champ select:focus { border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(33,102,216,.10); }
    .controle-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
    .controle-actions button {
      border: 0; border-radius: 999px; padding: 12px 19px; cursor: pointer;
      font-weight: 700; background: var(--bleu); color: #fff;
    }
    .controle-actions button.secondaire { background: #e9eef6; color: var(--texte); }
    @media (max-width: 560px) {
      .controle-formulaire { width: calc(100% - 61px); margin-left: 61px; padding: 16px; }
    }

/* MENU UTILISATEUR CONNECTÉ */

.menu-utilisateur {
    position: relative;
    z-index: 300;
}

.menu-utilisateur-bouton {
    width: auto !important;
    min-width: 210px;
    min-height: 52px;
    padding: 6px 14px 6px 7px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #dbe3ef !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #17233a !important;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(24, 43, 75, .10);
}

.menu-utilisateur-bouton:hover {
    background: #f6f9fd !important;
}

.menu-utilisateur-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 50%;
    background: #2166d8;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.menu-utilisateur-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.menu-utilisateur-identite {
    min-width: 0;
    display: grid;
    flex: 1;
    text-align: left;
    line-height: 1.2;
}

.menu-utilisateur-identite strong {
    overflow: hidden;
    color: #17233a;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-utilisateur-identite small {
    overflow: hidden;
    margin-top: 3px;
    color: #748096;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-utilisateur-liste {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 500;
    display: none;
    width: 270px;
    padding: 58px 9px 9px;
    border: 1px solid #e0e6ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(21, 36, 65, .20);
    max-height: calc(100dvh - 100px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.compteur-menu-module {
    margin-left: auto;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #dc2626;
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.menu-utilisateur.ouvert .menu-utilisateur-liste {
    display: grid;
}

.menu-utilisateur-liste a {
    min-height: 46px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 11px;
    color: #25324a;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.menu-utilisateur-liste a:hover {
    background: #f0f5fc;
}

.menu-utilisateur-separateur {
    height: 1px;
    margin: 7px 5px;
    background: #e7ebf2;
}

.menu-utilisateur-groupe {
    padding: 5px 14px 3px;
    color: #7b8799;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.menu-role {
    width: 100%;
   
}

.menu-role-entete {
    width: calc(100% + 18px) !important;
    min-height: 42px;

    margin-left: -9px !important;
    margin-right: -9px !important;

    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 0;
border-bottom: 2px solid #ffffff !important;
border-radius: 0 !important;

    background: #e8f2ff !important;
    color: #245b9e !important;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-role-entete > span:first-child {
    font-size: 13px;
    color: #245b9e !important;
}

.menu-role-fleche {
    color: #245b9e !important;
    font-size: 16px;
    transition: transform .2s ease;
}



.menu-role.entree-fermee .menu-role-fleche {
    transform: rotate(-90deg);
}

.menu-role-contenu {
    display: grid;
}

.menu-role.entree-fermee .menu-role-contenu {
    display: none;
}

.menu-utilisateur-liste .deconnexion {
    color: #b42318;
}


/* ===================================== */
/* GSM */
/* ===================================== */


@media (max-width: 768px) {

    .menu-utilisateur-bouton {
        min-width: 0;
        width: 52px !important;
        height: 52px;
        padding: 2px;
        justify-content: center;
    }

    .menu-utilisateur-identite,
    .menu-utilisateur-bouton > span:last-child {
        display: none;
    }

      .top-actions .menu-utilisateur-bouton {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        padding: 2px !important;

        border: 1px solid #dbe3ef !important;
        border-radius: 50% !important;

        background: #ffffff !important;

        box-shadow: 0 3px 10px rgba(24, 43, 75, .10) !important;
    }

    .top-actions .menu-utilisateur-avatar {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        border: 1px solid #ffffff;
    }
    
    .menu-utilisateur-liste {
        position: fixed;
        top: 70px;
        right: 14px;
        left: 14px;
        bottom: 14px;

        width: auto;
        max-height: none;

        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
align-content: start;
grid-auto-rows: max-content;
row-gap: 6px !important;
        touch-action: pan-y;

    }

   .menu-role {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden;
   
}

/* Bordure discrète uniquement lorsque le bloc est ouvert */
.menu-role:has(.menu-role-contenu:not([hidden])) {
    border-color: #b8d2f0 !important;
}

   .menu-role-entete {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-height: 44px !important;

    padding: 0 14px !important;
    margin: 0 !important;

    background: #e8f2ff !important;
    color: #245b9e !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}
    .menu-utilisateur-fermer {
    position: fixed !important;
    top: 84px !important;
    right: 28px !important;

    width: 40px !important;
    height: 40px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    font-size: 32px !important;
    line-height: 1 !important;

    background: #ffffff !important;
    color: #26354f !important;

    border-radius: 50%;
    z-index: 10001 !important;
}


.menu-role-entete > span:first-child {
    display: block !important;
    visibility: visible !important;
    color: #245b9e !important;
    font-size: 12px !important;
}

.menu-role {
    margin: 0 !important;
    padding: 0 !important;
}

.menu-role + .menu-role {
    margin-top: 0 !important;
}

.menu-role-contenu {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

    body.menu-utilisateur-ouvert {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}


/* ===================================== */
/* FEUILLE MODALE STANDARD DE SECRÉTAIRE */
/* ===================================== */

.feuille-modale {
    position: fixed;
    inset: 0;
    z-index: 20000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 17, 35, .64);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.feuille-modale.ouvert {
    display: flex;
}

.feuille-modale-carte {
    position: relative;
    z-index: 20001;
    width: min(860px, 100%) !important;
    max-width: 860px;
    max-height: calc(100dvh - 40px);
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

/* Agrandir / réduire la feuille modale standard */

.feuille-modale.mode-plein-ecran {
    padding: 0 !important;
}

.feuille-modale.mode-plein-ecran .feuille-modale-carte {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.feuille-modale-commandes {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.feuille-modale-affichage {
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;

    border: 1px solid #aac4f2;
    border-radius: 7px;

    background: #ffffff;
    color: #2166d8;

    cursor: pointer;
}

.feuille-modale-affichage:hover {
    background: #eef4ff;
}

.feuille-modale-affichage svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feuille-modale-entete {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 22px 24px;
    border-bottom: 1px solid #e5eaf1;
    background: #ffffff;
}

.feuille-modale-contenu {
     flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
}

@media (max-width: 768px) {
    .feuille-modale {
        padding: 0 !important;
    }

    .feuille-modale-carte {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .feuille-modale-entete {
        padding:
            max(16px, env(safe-area-inset-top))
            18px
            16px;
    }

    .feuille-modale-contenu {
        padding:
            18px
            18px
            max(18px, env(safe-area-inset-bottom));
    }
}

/* RÉSUMÉ DANS LA FEUILLE MODALE */

.resume-informations {
    display: grid;
    gap: 14px;
}

.resume-information {
    padding: 16px 18px;
    border: 1px solid #dce3ee;
    border-radius: 14px;
    background: #f8fafd;
}

.resume-information strong {
    display: block;
    margin-bottom: 7px;
    color: #17233a;
    line-height: 1.4;
}

.resume-information p {
    margin: 0;
    color: #536078;
    line-height: 1.5;
    white-space: pre-wrap;
}

.resume-actions {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.bouton-secondaire-standard {
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #e8eef7;
    color: #17233a;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 768px) {
    .resume-actions {
        grid-template-columns: 1fr;
    }

    .bouton-secondaire-standard {
        width: 100%;
    }
}

.feuille-modale-contenu .controle-formulaire {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 560px) {
    .feuille-modale-contenu .controle-formulaire {
        width: 100%;
        margin-left: 0;
        padding: 0;
    }
}


/* ================================= */
/* CENTRE DE PARTAGE                 */
/* ================================= */

.centre-partage {
    display: grid;
    gap: 18px;
}

.centre-partage-introduction {
    margin: 0;
    color: #536078;
    line-height: 1.5;
}

.centre-partage h3 {
    margin: 8px 0 0;
    font-size: 18px;
    color: #17233a;
}

.partage-cartes {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.partage-carte {
    position: relative;
    min-height: 112px;
    padding: 16px;
    display: grid;
    grid-template-columns:
        24px 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #dce3ee;
    border-radius: 15px;
    background: #ffffff;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.partage-carte:hover {
    border-color: #9ebcf2;
    box-shadow:
        0 7px 18px rgba(33, 102, 216, .10);
}

.partage-carte input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.partage-carte-pastille {
    width: 20px;
    height: 20px;
    border: 2px solid #aeb9ca;
    border-radius: 50%;
    background: #ffffff;
}

.partage-carte:has(input:checked) {
    border-color: #2166d8;
    background: #f2f6ff;
    box-shadow:
        0 0 0 3px rgba(33, 102, 216, .10);
}

.partage-carte:has(input:checked)
.partage-carte-pastille {
    border: 6px solid #2166d8;
}

.partage-carte-icone {
    font-size: 27px;
    text-align: center;
}

.partage-carte-textes {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.partage-carte-textes strong {
    color: #17233a;
}

.partage-carte-textes small {
    color: #748096;
    line-height: 1.35;
}

.partage-carte.desactive {
    opacity: .48;
    cursor: not-allowed;
}

.partage-zone-coordonnees {
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid #dce3ee;
}

.partage-formulaire {
    display: grid;
    gap: 4px;
}

.partage-formulaire .login-submit {
    margin-top: 8px;
}

.partage-information {
    margin: 0 0 14px;
    color: #657188;
    line-height: 1.5;
}

.bouton-partage-resume {
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #e8eef7;
    color: #17233a;
    font-weight: 800;
    cursor: pointer;
}

.bouton-partage-resume:hover {
    background: #dce6f5;
}

@media (max-width: 768px) {
    .partage-cartes {
        grid-template-columns: 1fr;
    }

    .partage-carte {
        min-height: 92px;
    }

    .bouton-partage-resume {
        width: 100%;
    }
}


.bouton-partage-resume {
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #e8eef7;
    color: #17233a;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
/* =========================================
   09 - DOCUMENTATION DANS LA FEUILLE MODALE
   ========================================= */

.documentation-iframe {
    display: block;
    width: 100%;
    height: 72dvh;
    min-height: 560px;
    border: 0;
    background: #ffffff;
}

@media (max-width: 768px) {
    .documentation-iframe {
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
    }

    .feuille-modale-contenu:has(.documentation-iframe) {
        display: flex;
        flex-direction: column;
        padding: 12px;
        overflow: hidden;
    }
}

.assistant-titre {
    font-weight: 400;
}

.assistant-compte {
    display: inline-block;
    margin-top: 4px;
    font-size: 1.05em;
    font-weight: 700;
    color: #163875;
}
.message-erreur-date {
    display: none;
    margin: 5px 0 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.message-erreur-date.visible {
    display: block;
}

.assistant-titre-section {
    width: 100%;
    margin: 28px 0 20px;
    padding: 0 10px;
    text-align: center;
}

.assistant-titre-section h2 {
    margin: 0;
    padding: 12px 8px;
    color: #163875;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid #163875;
}

/*****************************************************************

* RÉSUMÉ 1218
  *****************************************************************/

.resume-document {
background: #ffffff;
border: 1px solid #dbe3ee;
border-radius: 14px;
padding: 24px;
}

.resume-entete {
text-align: center;
margin-bottom: 30px;
}

.resume-logo {
font-size: 34px;
font-weight: 800;
color: #163875;
letter-spacing: 1px;
}

.resume-sous-titre {
margin-top: 4px;
color: #6b7280;
font-size: 15px;
}

.resume-date {
margin-top: 8px;
color: #9ca3af;
font-size: 13px;
}

.resume-titre-section {
margin: 32px 0 18px;
padding: 0 0 8px;
color: #163875;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 2px solid #163875;
}

.resume-information {
margin-bottom: 18px;
padding: 12px 0;
}

.resume-information:not(:last-child) {
padding-bottom: 14px;
border-bottom: 1px solid #edf2f7;
}

.resume-information:hover {
background: #f8fbff;
border-radius: 8px;
}

.resume-libelle {
margin-bottom: 5px;
padding-left: 10px;
color: #1f2937;
font-size: 15px;
font-weight: 700;
}

.resume-reponse {
margin: 0;
padding-left: 10px;
color: #4b5563;
font-size: 15px;
line-height: 1.6;
white-space: pre-line;
}

.resume-pied {
margin-top: 40px;
padding-top: 18px;
border-top: 1px solid #dbe3ee;
text-align: center;
color: #6b7280;
font-size: 13px;
}


/* Bandeau technique réservé au super administrateur */
.reference-technique {
    margin-top: 24px;
    padding: 10px 14px;
    border-top: 1px dashed #9eabc0;
    border-radius: 8px;
    background: #f1f4f8;
    color: #526078;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.55;
}

.reference-technique strong {
    color: #23344f;
}

.reference-technique-ligne {
    display: block;
}

.reference-technique {
    margin-top: 24px;
    padding: 10px 14px;
    border-top: 1px dashed #9eabc0;
    border-radius: 8px;
    background: #f1f4f8;
    color: #526078;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.55;
}

.reference-technique-ligne {
    display: block;
}

.reference-technique strong {
    color: #23344f;
}

/* =========================================================
   PIÈCE JOINTE — QUESTIONNAIRE
   ========================================================= */

.piece-jointe-bloc {
    width: 100%;
    padding: 18px;
    border: 1px solid #dce3ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(30, 45, 70, .08);
}

.piece-jointe-input {
    display: none;
}

.piece-jointe-entete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.piece-jointe-entete strong {
    display: block;
    color: var(--texte);
    font-size: 16px;
    font-weight: 700;
}

.piece-jointe-entete small {
    display: block;
    margin-top: 3px;
    color: var(--gris);
    font-size: 13px;
}

.piece-jointe-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(33, 102, 216, .10);
    font-size: 21px;
}

.piece-jointe-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    border: 2px dashed #b9c7da;
    border-radius: 15px;
    background: #f8faff;
    text-align: center;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.piece-jointe-zone:hover,
.piece-jointe-zone:focus {
    border-color: var(--bleu);
    background: #f1f6ff;
    outline: none;
    transform: translateY(-1px);
}

.piece-jointe-zone.drag-actif {
    border-color: var(--bleu);
    background: rgba(33, 102, 216, .08);
}

.piece-jointe-zone-icone {
    margin-bottom: 10px;
    color: var(--bleu);
    font-size: 30px;
}

.piece-jointe-zone-texte {
    color: var(--texte);
    font-size: 15px;
    font-weight: 700;
}

.piece-jointe-ou {
    margin: 8px 0;
    color: var(--gris);
    font-size: 13px;
}

.piece-jointe-bouton {
    border: 0;
    border-radius: 999px;
    padding: 11px 18px;
    background: var(--bleu);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.piece-jointe-selection {
    padding: 16px;
    border: 1px solid #dce3ee;
    border-radius: 14px;
    background: #f8faff;
}

.piece-jointe-fichier {
    display: flex;
    align-items: center;
    gap: 12px;
}

.piece-jointe-fichier-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(33, 102, 216, .10);
    font-size: 23px;
}

.piece-jointe-fichier-infos {
    min-width: 0;
}

.piece-jointe-fichier-infos strong {
    display: block;
    overflow: hidden;
    color: var(--texte);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.piece-jointe-fichier-infos small {
    display: block;
    margin-top: 3px;
    color: var(--gris);
    font-size: 13px;
}

.piece-jointe-statut {
    margin-top: 14px;
    color: #16834c;
    font-size: 14px;
    font-weight: 700;
}

.piece-jointe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 15px;
}

.piece-jointe-actions button {
    border: 0;
    border-radius: 999px;
    padding: 9px 15px;
    background: var(--bleu);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.piece-jointe-actions button.secondaire {
    background: #e9eef6;
    color: var(--texte);
}

@media (max-width: 560px) {
    .piece-jointe-bloc {
        padding: 14px;
    }

    .piece-jointe-zone {
        min-height: 155px;
        padding: 18px 12px;
    }
}

.resume-en-attente {
    color: #d97706;
    font-weight: 700;
    font-style: italic;
}

.bandeau-client{
    padding:16px 28px;
    background:#eef5ff;
    border-bottom:1px solid #d7e5fb;
}

.bandeau-client-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#6b7b92;
    font-weight:700;
}

.bandeau-client-nom{
    margin-top:3px;
    font-size:24px;
    font-weight:700;
    color:#173c7a;
}

.bandeau-formulaire{
    margin-top:5px;
    font-size:15px;
    color:#4d5f78;
}

.asterisque-obligatoire {
    color: #ff9800;
    font-weight: 800;
    margin-left: 4px;
    font-size: 1.1em;
}



body > #installerApp {
    position: fixed !important;

    top: 10px !important;
left: 20px !important;
right: auto !important;
bottom: auto !important;

    z-index: 1500 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto !important;
    height: 44px !important;
    min-width: 0 !important;

    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background: #2166d8 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 800;

    cursor: pointer;
}



.topbar {
    position: relative;
}

.accueil-formulaire{
    margin:22px 0;

    padding:18px;

    border-radius:16px;

    background:#f5f9ff;

    border:1px solid #d7e5ff;
}

.accueil-formulaire-label{

    color:#7b8798;

    font-size:11px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:8px;
}

.accueil-formulaire-titre{

    color:#1b4fa8;

    font-size:24px;

    font-weight:800;

    line-height:1.3;
}

.accueil-logo{
    text-align:center;
    margin-bottom:20px;
  
}

.accueil-logo img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:0 auto;
    border:4px solid #ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.accueil-invitant-photo{
    text-align:center;
    margin-bottom:15px;
}

.accueil-invitant-photo img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #fff;

    box-shadow:0 10px 25px rgba(0,0,0,.18);
}

.presentation-modal{
    position:fixed;
    inset:0;
    z-index:7000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(8,17,35,.68);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.presentation-modal.ouverte{
    display:flex;
}

.presentation-fenetre{
    position:relative;
    width:min(760px,100%);
    max-height:92vh;
    overflow:auto;
    padding:30px;
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(0,0,0,.28);
}

.presentation-entete{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
}

.presentation-entete h2{
    margin:0;
    font-size:25px;
}

.presentation-fermer{
    width:42px;
    height:42px;
    flex:0 0 auto;
    border:0;
    border-radius:50%;
    background:#eef2f7;
    color:#34425a;
    font-size:26px;
    cursor:pointer;
}

.presentation-explication{
    margin:0 0 20px;
    color:#6f7c92;
    line-height:1.55;
}

.presentation-texte{
    width:100%;
    min-height:300px;
    padding:18px;
    border:1px solid #ccd6e4;
    border-radius:15px;
    resize:vertical;
    color:#15213a;
    background:#fff;
    font:inherit;
    line-height:1.55;
    outline:none;
}

.presentation-texte:focus{
    border-color:#2166d8;
    box-shadow:0 0 0 4px rgba(33,102,216,.10);
}

.presentation-compteur{
    margin-top:8px;
    text-align:right;
    color:#6f7c92;
    font-size:13px;
}

.presentation-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:20px;
}

.presentation-annuler,
.presentation-analyser{
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    font-weight:800;
    cursor:pointer;
}

.presentation-annuler{
    border:1px solid #ccd6e4;
    background:#fff;
    color:#34425a;
}

.presentation-analyser{
    border:0;
    background:#2166d8;
    color:#fff;
}

@media(max-width:600px){
    .presentation-fenetre{
        padding:22px;
    }

    .presentation-actions{
        flex-direction:column-reverse;
    }

    .presentation-annuler,
    .presentation-analyser{
        width:100%;
    }
}

.installation-client-qr {
    position: absolute;
    top: 15px;
    left: 15px;

    z-index: 30;

    background: rgba(255,255,255,0.96);

    border: 1px solid #dcdcdc;

    border-radius: 14px;

    padding: 10px;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);

    text-align: center;

    width: 140px;
}

.installation-client-qr-titre {

    font-size: 11px;

    font-weight: 700;

    color: #333;

    margin-bottom: 6px;

    line-height: 1.15;
}

#qrCodeInstallationClient{

    display:flex;

    justify-content:center;

    margin:auto;
}

#qrCodeInstallationClient img,
#qrCodeInstallationClient canvas{

    width:110px !important;

    height:110px !important;

    display:block;
}

.installation-client-qr-aide{

    font-size:9px;

    color:#777;

    margin-top:5px;
}

.installation-client-bouton {
    width: 100%;
    margin-top: 7px;
    padding: 7px 6px;
    border: 0;
    border-radius: 8px;
    background: #2166d8;
    color: #ffffff;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
}

.installation-client-bouton:hover {
    background: #1854b7;
}
@media (max-width: 768px) {
    .installation-client-qr {
        top: 10px;
        left: 10px;
        width: 126px;
        padding: 9px;
    }

    #qrCodeInstallationClient img,
    #qrCodeInstallationClient canvas {
        width: 96px !important;
        height: 96px !important;
    }

    .installation-client-qr-titre {
        font-size: 11px;
    }

    .installation-client-qr-aide {
        display: none;
    }
}

.installation-client-bouton {
    width: 100%;
    margin-top: 7px;
    padding: 7px 8px;
    border: 0;
    border-radius: 8px;
    background: #2166d8;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.installation-client-bouton:hover {
    background: #1854b7;
}
.lien-qr-installation {
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-decoration: none;
    cursor: pointer;
}

.lien-qr-installation img,
.lien-qr-installation canvas {
    cursor: pointer;
}

.login-submit + .login-submit {
    margin-top: 12px;
}

.login-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    background: var(--bleu);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.login-mot-de-passe-oublie {
    display: block;
    width: auto;
    margin: 2px 0 15px auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bleu);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.login-mot-de-passe-oublie:hover {
    text-decoration: underline;
}

.login-explication {
    margin: 0 0 20px;
    color: var(--gris);
    font-size: 14px;
    line-height: 1.5;
}

.accueil-modules {
    padding: 34px clamp(22px, 5vw, 64px);
    overflow: auto;
}

.accueil-modules-entete {
    margin-bottom: 24px;
}

.accueil-modules-entete h2 {
    margin: 0 0 6px;
    font-size: 27px;
}

.accueil-modules-entete p {
    margin: 0;
    color: var(--gris);
}

.grille-modules {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}
 .carte-module {
    min-height: 118px;
    padding: 16px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    position: relative;
overflow: visible;
    border: 1px solid #dce3ee;
    border-radius: 16px;
    background: #ffffff;
    color: var(--texte);
    text-align: left;
    cursor: pointer;
    touch-action: none;
    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

@media (min-width: 769px) {
    .carte-module-texte {
        transform: translateX(-10px);
    }
}

.carte-module:hover {
    transform: translateY(-2px);
    border-color: var(--bleu);
    box-shadow: 0 12px 30px rgba(28, 42, 70, .10);
}



.carte-module.module-en-deplacement {
    opacity: .48;
    transform: scale(.98);
    border-color: var(--bleu);
    box-shadow: 0 16px 34px rgba(28, 42, 70, .18);
    cursor: grabbing;
    z-index: 20;
    pointer-events: none;
}

.carte-module.module-cible-deplacement {
    border-color: var(--bleu);
    box-shadow: 0 0 0 3px rgba(33, 102, 216, .12);
}
.carte-module-icone {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bleu-clair);
}

.carte-module-image {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    display: block;
    object-fit: cover;
    border-radius: 14px;
}

.carte-module-texte {
    min-width: 0;
    overflow: hidden;
    display: grid;
    gap: 5px;
}

.carte-module-texte strong {
    font-size: 14px;
    line-height: 1.2;
}

.carte-module-texte strong,
.carte-module-texte small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.carte-module-texte strong,
.carte-module-texte small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aucun-module {
    padding: 20px;
    border: 1px dashed #dce3ee;
    border-radius: 14px;
    color: var(--gris);
    text-align: center;
}


@media (max-width: 768px) {

    .accueil-modules {
        padding: 24px 14px 30px;
    }

    .accueil-modules-entete {
        margin-bottom: 18px;
    }

    .accueil-modules-entete h2 {
        font-size: 22px;
    }

    .accueil-modules-entete p {
        font-size: 13px;
    }

   .grille-modules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .carte-module {
        min-width: 0;
        min-height: 125px;
        padding: 14px 6px 12px;

        display: flex;
        flex-direction: column;
        align-items: center;
      justify-content: flex-start;

        gap: 2px;

        border-radius: 18px;
        text-align: center;

        box-shadow:
            0 5px 18px rgba(24, 40, 72, 0.08);
    }

  .carte-module-colonne-image {
    position: static;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .carte-module-image {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
}

    .carte-module-texte {
        width: 100%;
        display: block;
        overflow: visible;
    }

    .carte-module-texte strong {
        display: block;
        width: 100%;

        font-size: 12px;
        line-height: 1.15;
        font-weight: 700;

        text-align: center;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* MODALE DOCUMENT INDÉPENDANTE */
.modale-document-independante {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(20, 31, 49, .34);
}

.modale-document-independante.ouverte {
    display: flex;
}

.modale-document-independante-carte {
    width: min(1050px, calc(100vw - 44px));
   height: min(860px, calc(100dvh - 44px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce3ee;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(20, 31, 49, .22);
    max-height: calc(100dvh - 44px);
}

.modale-document-independante-entete {
    min-height: 58px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #dce3ee;
    background: #ffffff;
}

.modale-document-independante-entete h2 {
    margin: 0;
    font-size: 18px;
    color: #17233a;
}

.modale-document-independante-fermer {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #17233a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.modale-document-independante-fermer:hover {
    background: #f1f4f8;
}

.iframe-document-independante {
    width: 100%;
    min-height: 0;
    flex: 1;
    border: 0;
    background: #ffffff;
}


.actions-module {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.bouton-module-liste,
.bouton-module-ajouter {
    position: static;

    width: 24px;
    height: 24px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;
    padding: 0;

    color: #ffffff;

    cursor: pointer;
}

.bouton-module-liste {
    background: #2166d8;
}

.bouton-module-ajouter {
    background: #16a34a;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}


.compteur-module-rappels {
    position: absolute;
    top: -9px;
    right: -9px;

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #dc2626;
    color: #ffffff;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
 border: 0;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

.poignee-module {
    position: absolute;
    top: 8px;
    right: 9px;
    z-index: 10;

    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 7px;
    background: #f3f6fa;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;

    /* masque le caractère ⠿ */
    font-size: 0;
}


.poignee-module::before {
    content: "";

    width: 3px;
    height: 3px;

    border-radius: 50%;
    background: #7b8799;

    box-shadow:
        6px 0 #7b8799,
        0 5px #7b8799,
        6px 5px #7b8799,
        0 10px #7b8799,
        6px 10px #7b8799;

    transform: translate(-3px, -5px);
}
.poignee-module:hover {
    color: var(--bleu);
    background: #eaf1ff;
}

.poignee-module:active {
    cursor: grabbing;
}

@media (max-width: 768px) {

    .poignee-module {
        left: 8px;
        right: auto;
        top: 8px;

        width: 24px;
        height: 24px;
    }
}


@media (min-width: 769px) {

    .carte-module {
        position: relative;
        padding-top: 52px;
    }

    .carte-module-texte {
        position: absolute;
        top: 14px;
        left: 18px;
        right: 52px;

        transform: none;
        display: block;
        text-align: left;
    }

    .carte-module-texte strong {
        font-size: 14px;
        line-height: 1.15;
        text-align: left;
    }

    .poignee-module {
        top: 10px;
        right: 12px;
    }
}

@media (min-width: 769px) {

    .carte-module {
        position: relative;
    }

    .carte-module .actions-module {
        position: absolute !important;

        right: 18px !important;
        bottom: 18px !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 8px !important;
    }
}

.menu-utilisateur {
    position: relative;
}

.menu-utilisateur-fermer {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 34px;
    height: 34px;

    border: 0;
    background: transparent;

    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: #26354f;

    cursor: pointer;
    z-index: 10;
}

.menu-utilisateur-fermer:hover {
    opacity: 0.65;
}