/* xdt-forecast/style.css — styles spécifiques prévisions météo (shared.css chargé en premier) */

.app-container {
    max-width:1100px; margin:0 auto; padding:2rem 1.5rem;
    display:flex; flex-direction:column; gap:1.5rem;
}

footer{ margin-top:1rem; }

.finder-card, .calendar-card {
    background:var(--abyss-1);
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.25rem 1.5rem;
}

.finder-title {
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--slate);
    margin-bottom:.9rem;
}

.finder-grid {
    display:flex; flex-wrap:wrap; gap:.6rem;
}

.finder-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--abyss-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.55rem .9rem;
    color:var(--cream);
    font-size:.9rem;
    cursor:pointer;
    transition:border-color .15s, color .15s, transform .15s;
}
.finder-btn:hover { border-color:var(--teal); color:var(--teal); transform:translateY(-1px); }
.finder-btn .emoji { font-size:1.1rem; }

/* ---------- Calendrier ---------- */
.calendar-nav {
    display:flex; align-items:center; justify-content:center; gap:1.5rem;
    margin-bottom:1.1rem;
}
.btn-arrow {
    background:var(--abyss-2);
    border:1px solid var(--line);
    color:var(--cream);
    width:38px; height:38px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:border-color .15s, color .15s;
}
.btn-arrow:hover { border-color:var(--teal); color:var(--teal); }

.month-display { text-align:center; min-width:220px; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.month-title { font-family:'Fraunces', serif; font-size:1.5rem; font-weight:600; text-transform:capitalize; }
.btn-today {
    background:none; border:1px solid var(--line); color:var(--slate);
    font-family:'JetBrains Mono', monospace; font-size:11px;
    padding:.2rem .6rem; border-radius:6px; cursor:pointer;
    transition:border-color .15s, color .15s;
}
.btn-today:hover { border-color:var(--teal); color:var(--teal); }

.weekday-row {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:.4rem;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--slate);
    text-align:center;
    margin-bottom:.4rem;
}

.calendar-grid {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:.4rem;
}

.day-cell {
    /* position:relative + z-index:0 (pas juste position:relative) : établit
       un contexte d'empilement propre à CHAQUE cellule. Sans z-index ici, le
       ::before à z-index:-1 (voir plus bas) remonte au contexte d'empilement
       du parent commun (.calendar-grid) au lieu de rester "juste derrière le
       texte de sa propre cellule" — il finissait alors peint tout en bas,
       sous le fond opaque de toutes les cellules, invisible... sauf au survol
       (:hover applique un transform, qui crée SON PROPRE contexte d'empilement
       et corrigeait le rendu par accident, d'où le "seulement en hover"). */
    position:relative; z-index:0;
    aspect-ratio:1/1;
    min-height:76px;
    background:var(--abyss-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.35rem;
    display:flex; flex-direction:column;
    cursor:pointer;
    overflow:hidden;
    transition:border-color .15s, transform .15s;
}
.day-cell:hover { border-color:var(--teal); transform:translateY(-1px); }
.day-cell.empty { visibility:hidden; cursor:default; }
/* Plus de bordure orange générique ici : chaque jour spécial a maintenant
   son propre liseré coloré (voir .fx/.fx-rainbow plus bas), qui suffit. */
.day-cell.today { border-color:var(--teal); background:var(--teal-dim); }
.day-cell.overridden { border-color:var(--violet); border-style:dashed; }
/* ══════════ Jours spéciaux : lavis + liseré + effet animé sur-mesure ═════
   Voir SPECIAL_FX/fxMarkupFor dans app.js. Chaque catégorie a son accent
   (--accent, posé en inline style par jour) ; lavis + liseré communs à
   toutes via .fx, l'arc-en-ciel remplace juste le liseré uni par un dégradé.
   Conçu et vérifié empiriquement dans un artifact de maquette avant portage
   ici (sens de chute des gouttes/traits, positionnement dans le coin). */
.day-cell.fx {
    background:
        radial-gradient(circle at 110% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
        var(--abyss-2);
    border-top-width:2px; border-top-color:var(--accent);
    padding-top:calc(.35rem - 1px);
}
/* Le trompe-l'œil (bordures gauche/droite teintées) rendait très mal sur la
   pleine hauteur de la case en usage réel (contour rose/rouge criard sur
   tout le pourtour) — retour à une bordure normale sur les côtés. */
/* border-top-width:0 (pas juste transparent) + padding-top normal : le
   pseudo-élément ci-dessous est ancré au padding-box (inset:0), donc s'il y
   avait encore 2px de bordure réservés, sa bande visible (les 2 premiers px
   du masque) tombait 2px trop bas, sous cette bordure invisible au lieu
   d'être pile dessus. Sans bordure réservée, padding-box = border-box. */
.day-cell.fx-rainbow { border-top-width:0; border-top-color:transparent; padding-top:.35rem; }
/* La barre pleine largeur suit la courbe des coins arrondis via mask-image
   plutôt que clip-path : clip-path round sur une bande de 2px de haut ne
   pouvait géométriquement pas afficher un rayon de 8-9px (le rayon max
   d'un coin est plafonné à la moitié de la hauteur de la boîte clippée,
   donc ~1px sur 2px de haut) — d'où le coin resté carré malgré le round
   demandé. Le pseudo-élément a maintenant SA PROPRE taille pleine (donc son
   border-radius de 10px, identique à .day-cell, se calcule normalement),
   et un mask-image coupe tout sauf les 2 premiers pixels du haut — le rayon
   du coin, lui, est déjà correctement calculé avant d'être masqué. */
.day-cell.fx-rainbow::before {
    content:""; position:absolute; inset:0; z-index:2; border-radius:10px;
    background:linear-gradient(to right, #ff5e6c,#ffb648,#ffe066,#7bdc7e,#49c9e8,#7f8cf2,#d17fe8);
    -webkit-mask-image: linear-gradient(to bottom, black 0, black 2px, transparent 2px);
    mask-image: linear-gradient(to bottom, black 0, black 2px, transparent 2px);
}

/* ══════════ Combos (2 catégories spéciales le même jour, sans arc-en-ciel) ═
   Liseré bicolore (--lise, calculé par liseGrad() dans app.js — peut
   contenir le dégradé arc-en-ciel compressé dans une moitié) + lavis double
   (--wash1 en bas-droite, --wash2 en haut-gauche) + les deux effets animés
   dans les mêmes zones (voir fxMarkupFor, appelé deux fois). Même technique
   mask-image que .fx-rainbow pour le même problème de coin arrondi. */
.day-cell.fx-combo-a {
    border-top-width:0; padding-top:.35rem;
    background:
        radial-gradient(circle at 110% 110%, color-mix(in srgb, var(--wash1) 20%, transparent), transparent 60%),
        radial-gradient(circle at -10% -10%, color-mix(in srgb, var(--wash2) 18%, transparent), transparent 55%),
        var(--abyss-2);
}
.day-cell.fx-combo-a::before {
    content:""; position:absolute; inset:0; z-index:2; border-radius:10px;
    background: var(--lise);
    -webkit-mask-image: linear-gradient(to bottom, black 0, black 2px, transparent 2px);
    mask-image: linear-gradient(to bottom, black 0, black 2px, transparent 2px);
}

/* Zone pour les effets DE SURFACE (halo arc-en-ciel, flash d'orage) : couvre
   toute la case, masquée par le même dégradé radial que le lavis. */
.fx-zone {
    position:absolute; inset:0; z-index:1;
    -webkit-mask-image:radial-gradient(circle at 110% 110%, black 0%, black 38%, transparent 65%);
    mask-image:radial-gradient(circle at 110% 110%, black 0%, black 38%, transparent 65%);
    pointer-events:none;
}
/* Zone pour les effets PONCTUELS (traits, gouttes, étincelles, pétales) :
   boîte ancrée physiquement dans le coin bas-droit (pas juste un masque sur
   toute la case) — tout élément posé dedans (0-100% de CETTE boîte, pas de
   la case) reste garanti dans le coin. */
.fx-zone-pts {
    position:absolute; z-index:1; bottom:0; right:0; width:56%; height:56%;
    -webkit-mask-image:radial-gradient(circle at 100% 100%, black 0%, black 65%, transparent 100%);
    mask-image:radial-gradient(circle at 100% 100%, black 0%, black 65%, transparent 100%);
    pointer-events:none;
}

/* Étoiles filantes : traits qui partent du centre-droit et filent vers le
   centre-bas de la case. Rotation POSITIVE : le dégradé transparent→plein
   tombe vers la gauche (dx négatif) — l'angle qui oriente la partie pleine
   ("tête") dans le sens du mouvement a été vérifié empiriquement. */
.streak {
    position:absolute; bottom:36%; width:2px; height:14px;
    background:linear-gradient(to bottom, transparent, #fff, #fff);
    border-radius:2px; transform:rotate(38deg); opacity:0;
    animation:streak-fall 2.4s linear infinite;
    box-shadow:0 0 4px 1px rgba(255,255,255,.6);
}
.streak:nth-child(1) { left:60%; animation-delay:0s; }
.streak:nth-child(2) { left:80%; animation-delay:.9s; }
.streak:nth-child(3) { left:96%; animation-delay:1.7s; }
@keyframes streak-fall {
    0%   { transform:translate(0,0) rotate(38deg); opacity:0; }
    8%   { opacity:1; }
    55%  { opacity:1; }
    75%  { transform:translate(-18px,30px) rotate(38deg); opacity:0; }
    100% { transform:translate(-18px,30px) rotate(38deg); opacity:0; }
}

/* Arc-en-ciel : halo conique multicolore qui tourne dans le coin du lavis —
   pas d'icône ajoutée, celle du jour (🌈) suffit. */
.rainbow-glow {
    position:absolute; z-index:-1; bottom:-25%; right:-25%; width:75%; height:75%;
    background:conic-gradient(from 0deg,
        #ff5e6c, #ffb648, #ffe066, #7bdc7e, #49c9e8, #7f8cf2, #d17fe8, #ff5e6c);
    filter:blur(13px); opacity:.32;
    animation:rainbow-spin 7s linear infinite;
}
@keyframes rainbow-spin { to { transform:rotate(360deg); } }

/* Pluie soleil : gouttes qui partent du centre-droit et tombent vers le
   centre-bas de la case, sur le lavis bleu ciel. */
.drop {
    position:absolute; bottom:36%; width:2px; height:9px;
    background:linear-gradient(to bottom, transparent, rgba(126,200,242,.9));
    border-radius:2px; opacity:0; transform-origin:center;
    animation:drop-fall 1.1s linear infinite;
}
.drop:nth-child(1) { left:60%; animation-delay:0s;   animation-duration:1.05s; }
.drop:nth-child(2) { left:75%; animation-delay:.3s;  animation-duration:.95s; }
.drop:nth-child(3) { left:88%; animation-delay:.15s; animation-duration:1.15s; }
.drop:nth-child(4) { left:97%; animation-delay:.45s; animation-duration:1s; }
@keyframes drop-fall {
    0%   { transform:translate(0,0) rotate(20deg); opacity:0; }
    15%  { opacity:1; }
    90%  { opacity:.7; }
    100% { transform:translate(-16px,32px) rotate(20deg); opacity:0; }
}

/* Nuage de chance : étincelles qui scintillent (échelle + rotation), bien
   ancrées dans le coin du lavis vert, décalées dans le temps. */
.sparkle {
    position:absolute; width:6px; height:6px; background:#bff7c9;
    clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%);
    opacity:0; box-shadow:0 0 6px 1px rgba(191,247,201,.75);
    animation:sparkle-pulse 2.4s ease-in-out infinite;
}
.sparkle:nth-child(1) { left:20%; top:22%; animation-delay:0s; }
.sparkle:nth-child(2) { left:62%; top:28%; animation-delay:.7s; }
.sparkle:nth-child(3) { left:32%; top:58%; animation-delay:1.4s; }
.sparkle:nth-child(4) { left:72%; top:62%; animation-delay:.35s; }
.sparkle:nth-child(5) { left:48%; top:82%; animation-delay:1.9s; }
.sparkle:nth-child(6) { left:85%; top:85%; animation-delay:1.05s; }
@keyframes sparkle-pulse {
    0%, 100% { transform:scale(0) rotate(0deg); opacity:0; }
    50%      { transform:scale(1) rotate(50deg); opacity:1; }
}

/* Pluie de pétales : pétales qui dérivent en tombant (translation +
   rotation), plus organique qu'une chute droite. */
.petal-fx {
    position:absolute; top:12%; width:7px; height:7px;
    border-radius:70% 0 70% 0; background:#ff9fc9; opacity:0;
    animation:petal-drift 3.4s ease-in infinite;
}
.petal-fx:nth-child(1) { left:25%; animation-delay:0s; }
.petal-fx:nth-child(2) { left:52%; animation-delay:1.1s; }
.petal-fx:nth-child(3) { left:78%; animation-delay:2.1s; }
@keyframes petal-drift {
    0%   { transform:translate(0,0) rotate(0deg); opacity:0; }
    10%  { opacity:.9; }
    50%  { transform:translate(9px,20px) rotate(160deg); }
    90%  { opacity:.6; }
    100% { transform:translate(6px,40px) rotate(300deg); opacity:0; }
}

/* Orage : éclair qui s'abat + flash bleuté, confinés au coin du lavis
   ardoise — très bref et espacé, comme un vrai coup de foudre. */
.storm-flash {
    position:absolute; z-index:-1; bottom:-30%; right:-30%; width:80%; height:80%;
    border-radius:50%; background:#dfe8ff; opacity:0; filter:blur(2px);
    animation:storm-flash 3.4s ease-in-out infinite;
}
.bolt {
    position:absolute; bottom:-8%; right:11%; width:14px; height:52%;
    opacity:0; animation:bolt-flash 3.4s ease-in-out infinite;
}
.bolt svg { width:100%; height:100%; display:block; filter:drop-shadow(0 0 3px #fff); }
@keyframes storm-flash {
    0%, 89%, 100% { opacity:0; }
    90%           { opacity:.55; }
    91%           { opacity:.1; }
    92%           { opacity:.4; }
    94%           { opacity:0; }
}
@keyframes bolt-flash {
    0%, 89%, 100% { opacity:0; }
    90%           { opacity:1; }
    91%           { opacity:.3; }
    92%           { opacity:1; }
    94%           { opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
    .streak, .rainbow-glow, .drop, .storm-flash, .bolt, .sparkle, .petal-fx { animation:none; opacity:.4; }
}

.override-badge { font-size:10px; line-height:1; flex-shrink:0; }
.override-badge-full { background:var(--violet); color:#04140f; }
.day-cell.highlight { border-color:var(--violet); box-shadow:0 0 0 2px var(--violet), 0 0 16px 2px #8f83f280; animation:highlight-pulse 1.6s ease-in-out 2; }

@keyframes highlight-pulse {
    0%, 100% { box-shadow:0 0 0 2px var(--violet), 0 0 16px 2px #8f83f280; }
    50% { box-shadow:0 0 0 2px var(--violet), 0 0 4px 0 #8f83f200; }
}

.day-cell-head { display:flex; align-items:center; justify-content:space-between; gap:.3rem; }
.day-num { font-size:.75rem; color:var(--cream); font-family:'JetBrains Mono', monospace; }
.day-cell.today .day-num { color:var(--teal); font-weight:700; }
.today-badge {
    font-family:'JetBrains Mono', monospace;
    font-size:8px; letter-spacing:.03em;
    background:var(--teal); color:#04140f;
    border-radius:4px; padding:1px 4px;
    white-space:nowrap;
}
.day-icon {
    flex:1;
    min-height:0;
    position:relative;
    display:flex; align-items:center; justify-content:center;
}
.day-icon img { width:70%; height:70%; object-fit:contain; }

.detail-hint {
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-size:9px; letter-spacing:.02em;
    color:var(--violet);
    white-space:nowrap;
}
/* ---------- Mobile Portrait (<= 600px) ---------- */
@media (max-width: 600px) {
    /* 1. Libération de l'espace horizontal sur l'écran */
    .app-container {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }

    .finder-card, .calendar-card {
        padding: 0.85rem 0.5rem;
        border-radius: 10px;
    }

    /* 2. Boutons "Trouver la météo" (2 par ligne pour être lisibles) */
    .finder-btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
        flex: 1 1 calc(50% - 0.6rem);
        justify-content: center;
    }

    /* 3. Spacing compact pour la grille 7 colonnes */
    .weekday-row, .calendar-grid {
        gap: 3px;
    }

    .weekday-row {
        font-size: 10px;
        margin-bottom: 0.25rem;
    }

    /* 4. Cellule jour compacte */
    .day-cell {
        aspect-ratio: auto;
        min-height: 52px;
        padding: 0.2rem 0.1rem;
        border-radius: 6px;
    }

    .day-cell-head {
        justify-content: center;
    }

    .day-num {
        font-size: 0.7rem;
    }

    /* Masquage des badges/textes encombrants sur mobile */
    .today-badge,
    .detail-hint {
        display: none;
    }

    /* 5. Fixation de la taille du GIF Météo (notoemoji) */
    .day-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .select-hint {
        font-size: 0.75rem;
        margin-top: 0.5rem;
    }

    /* 6. Adaptation de la modale sur mobile */
    .modal-content {
        padding: 1rem;
    }

    .slots-grid {
        gap: 0.45rem;
    }

    .slot-cell {
        padding: 0.5rem;
    }

    .slot-cell .slot-emoji {
        font-size: 1.3rem;
        margin: 0.15rem 0;
    }

    .hours-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

    .hour-cell {
        padding: 0.4rem;
    }

    .hour-cell .hour-emoji {
        font-size: 1.1rem;
        margin: 0.15rem 0;
    }

    .day-icon-quad span {
        font-size: 0.65rem;
    }
}

.select-hint {
    text-align:center;
    font-size:.8rem;
    color:var(--violet);
    min-height:1.2em;
    margin-top:.75rem;
}

/* ---------- Modal ---------- */
.modal {
    display:none;
    position:fixed; inset:0; z-index:1000;
    background:rgba(3,5,10,.7);
    align-items:center; justify-content:center;
    padding:1rem;
}
.modal.open { display:flex; }
.modal-content {
    background:var(--abyss-1);
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.5rem;
    max-width:460px; width:100%;
}
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.modal-date { font-family:'Fraunces', serif; font-size:1.3rem; font-weight:600; }
.modal-weekday { font-size:.85rem; color:var(--slate); margin-top:.15rem; text-transform:capitalize; }
.modal-close {
    background:none; border:none; color:var(--slate);
    font-size:1.6rem; line-height:1; cursor:pointer;
    transition:color .15s;
}
.modal-close:hover { color:var(--cream); }

.modal-badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.day-badge {
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--teal-dim); border:1px solid var(--teal);
    color:var(--teal);
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase;
    border-radius:20px; padding:.25rem .65rem;
}

.detail-toggle {
    display:flex; gap:.4rem;
    margin-top:1.1rem;
    background:var(--abyss-2);
    border:1px solid var(--line);
    border-radius:20px;
    padding:.25rem;
}
.toggle-btn {
    flex:1;
    background:none; border:none;
    font-family:inherit; font-size:.78rem; color:var(--slate);
    padding:.4rem .5rem;
    border-radius:16px;
    cursor:pointer;
    transition:background .15s, color .15s;
}
.toggle-btn.active {
    background:var(--teal-dim);
    color:var(--teal);
}

#calendarViewToggle {
    margin-top:0;
    margin-bottom:1.1rem;
    max-width:280px;
    margin-left:auto; margin-right:auto;
}

.day-icon-quad {
    width:100%; height:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
}
.day-icon-quad span {
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
}
.day-icon-quad span:nth-child(1) { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.day-icon-quad span:nth-child(2) { border-bottom:1px solid var(--line); }
.day-icon-quad span:nth-child(3) { border-right:1px solid var(--line); }

.slots-grid {
    display:grid; grid-template-columns:repeat(2, 1fr);
    gap:.6rem;
    margin-top:1.1rem;
}

.hours-grid {
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:.5rem;
    margin-top:1.1rem;
}
.hour-cell {
    background:var(--abyss-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.5rem;
    text-align:center;
}
.hour-cell .hour-range { font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--slate); }
.hour-cell .hour-emoji { font-size:1.3rem; margin:.25rem 0; }
.hour-cell .hour-name { font-size:.68rem; color:var(--cream); line-height:1.2; }
.slot-cell {
    background:var(--abyss-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:.7rem;
    text-align:center;
}
.slot-cell .slot-range { font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--slate); }
.slot-cell .slot-emoji { font-size:1.6rem; margin:.3rem 0; }
.slot-cell .slot-name { font-size:.8rem; color:var(--cream); }

.types-label {
    font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--slate); margin-top:1.1rem; margin-bottom:.5rem;
}
.types-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.type-pill {
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--abyss-2); border:1px solid var(--line);
    border-radius:20px; padding:.3rem .65rem;
    font-size:.8rem; color:var(--cream);
}