/* ConnectLène — bandeau d'installation.
   Fichier séparé : le gabarit Blade ne doit contenir aucune règle CSS,
   « @media » et « @keyframes » y étant pris pour des directives. */

#cl-installer {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #0E1320;
    color: #F4F5F7;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: .9rem;
    animation: cl-i-monte .32s ease both;
}

@keyframes cl-i-monte {
    from { transform: translateY(130%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #cl-installer { animation: none; }
}

#cl-installer img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex-shrink: 0;
}

.cl-i-texte { flex: 1; min-width: 0; line-height: 1.35; }
.cl-i-texte b { display: block; font-size: .93rem; }
.cl-i-texte span { color: #9FB8C8; font-size: .82rem; }

#cl-i-oui {
    border: 0;
    border-radius: 99px;
    padding: 9px 20px;
    cursor: pointer;
    background: #00B0F7;
    color: #06202E;
    font-weight: 700;
    font-size: .86rem;
    font-family: inherit;
    flex-shrink: 0;
}

#cl-i-non {
    border: 0;
    background: none;
    color: #7E9AAB;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    #cl-installer {
        left: auto;
        right: 20px;
        bottom: 20px;
        max-width: 420px;
    }
}

/* ------------------------------------------------------------------------
   Fenêtre d'aide à l'installation
   ------------------------------------------------------------------------ */

#cl-aide {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(6, 12, 20, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cl-aide-boite {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    background: #0E1320;
    color: #F4F5F7;
    border-radius: 20px 20px 0 0;
    padding: 26px 24px 30px;
    animation: cl-aide-monte .3s ease both;
}

@keyframes cl-aide-monte {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cl-aide-boite { animation: none; }
}

@media (min-width: 620px) {
    #cl-aide { align-items: center; }
    .cl-aide-boite { border-radius: 20px; }
}

.cl-aide-tete {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.cl-aide-tete img {
    width: 52px;
    height: 52px;
    border-radius: 13px;
}

.cl-aide-tete b {
    display: block;
    font-size: 1.08rem;
}

.cl-aide-tete span {
    color: #9FB8C8;
    font-size: .84rem;
}

#cl-aide-fermer {
    margin-left: auto;
    border: 0;
    background: none;
    color: #7E9AAB;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.cl-aide-intro {
    color: #C4D5E0;
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 18px;
}

.cl-aide-etape {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.cl-aide-num {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(0, 176, 247, .18);
    color: #00B0F7;
    font-size: .8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-aide-etape p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
}

.cl-aide-etape svg {
    width: 19px;
    height: 19px;
    vertical-align: -4px;
    margin: 0 2px;
}

.cl-aide-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.cl-aide-btn {
    flex: 1;
    min-width: 130px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 99px;
    padding: 12px 18px;
    background: transparent;
    color: #F4F5F7;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}

.cl-aide-btn.primaire {
    background: #00B0F7;
    border-color: #00B0F7;
    color: #06202E;
    font-weight: 700;
}

.cl-aide-note {
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: #9FB8C8;
    font-size: .82rem;
    line-height: 1.5;
}

/* Le bandeau devient entièrement cliquable. */
#cl-installer .cl-i-texte { cursor: pointer; }

.cl-pied-installer {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

/* ------------------------------------------------------------------------
   La flèche qui montre le bouton Partager

   Sur iPhone, l'installation passe par un bouton du navigateur que nous ne
   pouvons pas actionner. Nous pouvons en revanche le désigner : une flèche
   qui bat doucement à l'endroit exact, et la recherche devient un regard.
   ------------------------------------------------------------------------ */

#cl-fleche {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    color: #00B0F7;
    filter: drop-shadow(0 4px 14px rgba(0, 176, 247, .55));
}

#cl-fleche svg { width: 46px; height: 62px; display: block; }

/* iPhone : le bouton Partager est au centre de la barre du bas. */
#cl-fleche.bas {
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    animation: cl-fleche-bas 1.25s ease-in-out infinite;
}

/* iPad : Apple l'a placé en haut à droite. */
#cl-fleche.haut {
    right: 14px;
    top: 4px;
    animation: cl-fleche-haut 1.25s ease-in-out infinite;
}

#cl-fleche.haut svg { transform: rotate(180deg); }

@keyframes cl-fleche-bas {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 11px); }
}

@keyframes cl-fleche-haut {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

@media (prefers-reduced-motion: reduce) {
    #cl-fleche.bas, #cl-fleche.haut { animation: none; }
}

/* Le bandeau prend un peu plus de présence : c'est une invitation, pas
   une notification que l'on chasse. */
#cl-installer {
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
    border: 1px solid rgba(0, 176, 247, .22);
}

#cl-i-oui {
    box-shadow: 0 4px 16px rgba(0, 176, 247, .35);
}

.cl-aide-boite {
    border-top: 3px solid #00B0F7;
}

/* ==========================================================================
   cl-zone-sure — vivre avec l'encoche et la barre de gestes

   Dans l'application installée, iOS dessine la page sous la barre d'état :
   l'heure et la batterie flottent par-dessus le haut du site. Deux mesures
   suffisent à s'en accommoder partout.

   Elles valent zéro dans un navigateur ordinaire. Un seul jeu de styles
   sert donc les deux contextes, sans condition à écrire dans chaque page.
   ========================================================================== */

:root {
    --cl-haut: 0px;
    --cl-bas: 0px;
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    :root {
        --cl-haut: env(safe-area-inset-top, 0px);
        --cl-bas: env(safe-area-inset-bottom, 0px);
    }
}

/* Filet de sécurité : les iOS anciens ignorent « display-mode ». La classe
   posée par pwa.js, elle, est toujours là. */
html.cl-application {
    --cl-haut: env(safe-area-inset-top, 0px);
    --cl-bas: env(safe-area-inset-bottom, 0px);
}

html.cl-application body {
    padding-top: var(--cl-haut);
    padding-bottom: var(--cl-bas);
}

/* La bande d'état peinte au bleu nuit du réseau. Sans elle, on verrait le
   contenu défiler derrière l'horloge — l'effet d'une page mal calée. Avec
   elle, l'application a un bandeau, comme toute application native. */
html.cl-application body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--cl-haut);
    background: #06202E;
    z-index: 2147482000;
    pointer-events: none;
}

/* Les en-têtes collants se calent sous la bande, jamais dessous. */
html.cl-application .ml-haut { top: var(--cl-haut); }

/* Le bandeau d'installation remonte au-dessus de la barre de gestes. */
#cl-installer { bottom: calc(12px + var(--cl-bas)); }

@media (min-width: 640px) {
    #cl-installer { bottom: calc(20px + var(--cl-bas)); }
}

/* cl-entetes-releves — en-têtes collants relevés sous la
   bande d'état. Sélecteurs relevés dans les gabarits, non
   devinés : la liste ci-dessous est ce que le code contient
   réellement au jour du déploiement. */
html.cl-application .admin-side { top: var(--cl-haut); }   /* AdminLayout.vue */