/* =====================================================================
   Christy — adaptation tablette (≥ 768 px) et ordinateur (≥ 1 024 px)

   Règle d'or : TOUT ce fichier est rangé dans des media queries
   « min-width ». Sous 768 px, aucune ligne ne s'applique :
   la version mobile reste exactement la même.
   ===================================================================== */

:root{
  --colonne: 720px;        /* largeur de la colonne de contenu (tablette) */
  --menu-haut: 64px;       /* hauteur du menu du haut (ordinateur) */
}


/* =====================================================================
   1. TABLETTE — à partir de 768 px
   ===================================================================== */
@media (min-width: 768px){

  /* --- 1a. Une colonne centrée, plus large que sur téléphone --- */
  main{
    width: 100%;
    max-width: var(--colonne);
    margin-left: auto;
    margin-right: auto;
  }
  /* Sur mobile, le contenu était bridé à 448 px (max-w-md) ou 512 px (max-w-lg).
     On libère ces limites : c'est désormais <main> qui fixe la largeur. */
  main .max-w-md,
  main .max-w-lg,
  main .max-w-xl:has(> .cartes-grille){ max-width: none; }
  /* …sauf pour le mini-lecteur flottant (Chants, Louange) : il suit la colonne,
     sans s'étaler sur tout l'écran. */
  main aside.fixed .max-w-md{ max-width: calc(var(--colonne) - 32px); }

  /* Pages de lecture (prière, saint, offices…) : un peu plus étroites,
     pour garder des lignes confortables à lire. */
  body:has(main.cp-page){ --colonne: 680px; }
  main.cp-page{ max-width: var(--colonne); }

  /* --- 1b. Les en-têtes s'alignent sur la colonne de contenu --- */
  /* L'en-tête reste sur toute la largeur (le flou blanc couvre l'écran),
     mais son contenu (retour, titre, avatar) se cale sur la colonne. */
  header.fixed{
    padding-left:  max(0px, calc((100% - var(--colonne)) / 2));
    padding-right: max(0px, calc((100% - var(--colonne)) / 2));
  }
  header.cp-entete{
    padding-left:  max(14px, calc((100% - var(--colonne)) / 2 + 14px));
    padding-right: max(14px, calc((100% - var(--colonne)) / 2 + 14px));
  }

  /* Barre d'action fixée en bas (déposer une grâce, confier une intention) :
     le fond reste pleine largeur, le bouton se cale sur la colonne. */
  .barre-action > *{
    max-width: calc(var(--colonne) - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Chapelet guidé (page plein écran sans <main>) : même colonne centrée. */
  body:not(:has(main)) > .entete,
  body:not(:has(main)) > .actions{
    width: 100%;
    max-width: var(--colonne);
    margin-left: auto;
    margin-right: auto;
  }
  body:not(:has(main)) > .carte{
    width: calc(100% - 32px);
    max-width: calc(var(--colonne) - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  /* --- 1c. Les cartes passent en grille de 2 colonnes --- */
  /* « !important » sur display : certaines zones ont un display écrit
     directement dans le HTML (style="…"), qui l'emporterait sinon.
     « :not(.hidden) » : on ne réaffiche pas une zone masquée par un onglet. */
  main .cartes-grille:not(.hidden){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }
}


/* =====================================================================
   2. ORDINATEUR — à partir de 1 024 px
   ===================================================================== */
@media (min-width: 1024px){

  /* --- 2a. Pages avec des cartes : colonne élargie, grille de 3 --- */
  body:has(.cartes-grille){ --colonne: 1120px; }

  main .cartes-grille:not(.hidden){
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  /* Variantes : les 2 cartes du haut de l'accueil restent côte à côte,
     les 4 tuiles de l'accueil tiennent sur une ligne. */
  main .cartes-grille.grille-2:not(.hidden){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .cartes-grille.grille-4:not(.hidden){ grid-template-columns: repeat(4, minmax(0, 1fr)); }


  /* --- 2b. La navigation du bas devient un menu en haut de page --- */
  /* On repère le menu grâce à son attribut data-active-classes,
     présent sur toutes les pages qui ont la barre du bas. */
  nav[data-active-classes]{
    top: 0;
    bottom: auto;
    height: calc(var(--menu-haut) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 16px 0;
    display: flex;
    align-items: center;
    pointer-events: auto;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(91, 62, 117, .08);
    box-shadow: 0 1px 8px rgba(91, 62, 117, .04);
  }
  /* La « pilule » flottante devient une simple rangée de liens centrée */
  nav[data-active-classes] > div{
    width: auto;
    max-width: none;
    margin: 0 auto;
    padding: 0;
    gap: 4px;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  /* Chaque lien : icône à gauche du texte, au lieu d'au-dessus */
  nav[data-active-classes] a{
    flex-direction: row;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background-color .2s;
  }
  nav[data-active-classes] a > span:last-child{
    font-size: 15px;
    line-height: 20px;
    margin-top: 0;
    letter-spacing: 0;
  }
  nav[data-active-classes] a > .material-symbols-outlined{ font-size: 20px; }
  nav[data-active-classes] a > img{ width: 20px; height: 20px; }

  /* Survol à la souris, et page en cours : pastille lavande */
  nav[data-active-classes] a:hover{ background: rgba(241, 219, 255, .35); }
  nav[data-active-classes] a[aria-current="page"],
  nav[data-active-classes] a.font-semibold{
    background: rgba(241, 219, 255, .65);
    color: #43275D;
  }
  /* Navigation au clavier : contour bien visible */
  nav[data-active-classes] a:focus-visible{
    outline: 2px solid #5B3E75;
    outline-offset: 2px;
  }

  /* --- 2c. On décale la page sous le menu du haut --- */
  body:has(nav[data-active-classes]){ padding-top: var(--menu-haut); }
  body:has(nav[data-active-classes]) header.fixed,
  body:has(nav[data-active-classes]) header.cp-entete{ top: var(--menu-haut); }

  /* La petite bulle d'information de la maquette descend sous le menu */
  body:has(nav[data-active-classes]) #maquette-bulle{
    top: calc(var(--menu-haut) + 72px) !important;
  }

  /* --- 2d. Les éléments qui flottaient au-dessus de la barre du bas
             redescendent, puisque la barre n'est plus là --- */
  body:has(nav[data-active-classes]) .fixed.bottom-24{ bottom: 24px; }
  #bouton-flottant{ bottom: 24px !important; }
}