/* Page Calendrier — même direction artistique que la page d'accueil.
   Fond ivoire, titre Archivo, texte Chivo. Le calendrier reste celui de
   Google : on lui donne un cadre propre, on ne le réécrit pas. */
.ck-home .ck-calendar, .ck-home .ck-calendar * { box-sizing: border-box; }
.ck-home .ck-calendar {
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem);
    background: var(--ck-ivory);
    color: var(--ck-black);
}
.ck-home .ck-calendar__inner { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }

.ck-home .ck-calendar__eyebrow {
    margin: 0 0 1rem; color: var(--ck-text-dark-secondary);
    font: 600 .875rem/1.5 'Chivo', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.ck-home .ck-calendar__title {
    margin: 0 0 1.25rem; color: var(--ck-black);
    font: 800 clamp(2rem, 8vw, 2.75rem)/1.05 'Archivo', Arial, sans-serif; letter-spacing: -.02em;
}
.ck-home .ck-calendar__lead {
    max-width: 38rem; margin: 0; color: var(--ck-text-dark-secondary);
    font: 400 clamp(1.0625rem, 4vw, 1.125rem)/1.6 'Chivo', Arial, sans-serif;
}

/* Rappel du prochain rendez-vous, en texte : la page reste informative même
   si l'iframe est bloquée, et une synthèse vocale y accède sans entrer dans
   le document Google. */
.ck-home .ck-calendar__next {
    display: grid;
    gap: .25rem;
    padding: 1.125rem 1.25rem;
    background: var(--ck-black);
    color: var(--ck-ivory);
}
.ck-home .ck-calendar__next-label {
    margin: 0 0 .25rem; color: var(--ck-text-light-secondary);
    font: 600 .75rem/1.4 'Chivo', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.ck-home .ck-calendar__next-when { margin: 0; }
.ck-home .ck-calendar__next-when time { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.ck-home .ck-calendar__next-date {
    color: var(--ck-ivory); font: 800 1.375rem/1.1 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em; text-transform: uppercase;
}
.ck-home .ck-calendar__next-time {
    color: var(--ck-text-light-secondary); font: 600 1rem/1.2 'Chivo', Arial, sans-serif;
    font-variant-numeric: tabular-nums;
}
.ck-home .ck-calendar__next-what { display: grid; gap: .125rem; margin: .25rem 0 0; }
.ck-home .ck-calendar__next-title { color: var(--ck-ivory); font: 600 1.0625rem/1.35 'Chivo', Arial, sans-serif; }
.ck-home .ck-calendar__next-place { color: var(--ck-text-light-secondary); font: 400 .9375rem/1.4 'Chivo', Arial, sans-serif; }

/* Le cadre porte la hauteur ; l'iframe la remplit. Aucune largeur fixe, donc
   rien qui puisse pousser la page horizontalement sur un petit écran. */
.ck-home .ck-calendar__frame {
    width: 100%;
    min-width: 0;
    height: clamp(30rem, 78vh, 34rem);
    background: #fff;
    border: 1px solid var(--ck-black);
}
.ck-home .ck-calendar__embed {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;
}

.ck-home .ck-calendar__open { margin: 0; }
.ck-home .ck-calendar__google {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .625rem 1.125rem;
    border: 1px solid var(--ck-black);
    color: var(--ck-black);
    font: 600 1rem/1.3 'Chivo', Arial, sans-serif;
    text-decoration: none;
    transition: background var(--ck-transition), color var(--ck-transition);
}
.ck-home .ck-calendar__google:hover { background: var(--ck-black); color: var(--ck-ivory); }
.ck-home .ck-calendar__google:focus-visible { outline: 2px solid var(--ck-black); outline-offset: 3px; }
/* L'ouverture dans un nouvel onglet reste annoncée — aux lecteurs d'écran
   seulement. Retiré du flux visuel sans `display: none`, qui l'effacerait
   aussi pour eux, et sans quitter le document, pour que le texte suive le
   lien s'il reçoit le focus. */
.ck-home .ck-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ck-home .ck-calendar__back { margin: 0; }
.ck-home .ck-calendar__back a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: var(--ck-text-dark-secondary); font: 400 1rem/1.3 'Chivo', Arial, sans-serif;
    text-decoration: none;
}
.ck-home .ck-calendar__back a:hover { color: var(--ck-black); text-decoration: underline; text-underline-offset: .3em; }

@media (min-width: 768px) {
    .ck-home .ck-calendar__title { font-size: clamp(2.75rem, 5vw, 3.5rem); }
    .ck-home .ck-calendar__frame { height: clamp(36rem, 72vh, 44rem); }
    .ck-home .ck-calendar__next { padding: 1.25rem 1.5rem; }
    .ck-home .ck-calendar__next-date { font-size: 1.625rem; }
}

@media (min-width: 1150px) {
    /* Intro à gauche, rappel du rendez-vous à droite : le calendrier prend
       ensuite toute la largeur, c'est lui qu'on vient consulter. */
    .ck-home .ck-calendar__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: clamp(2rem, 4vw, 3rem);
        align-items: start;
    }
    .ck-home .ck-calendar__intro { grid-column: 1; grid-row: 1; }
    .ck-home .ck-calendar__next  { grid-column: 2; grid-row: 1; align-self: end; }
    .ck-home .ck-calendar__frame { grid-column: 1 / -1; height: clamp(40rem, 76vh, 50rem); }
    .ck-home .ck-calendar__open  { grid-column: 1; }
    .ck-home .ck-calendar__back  { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-home .ck-calendar__google { transition: none; }
}

/* --------------------------------------------------------------------------
   Bloc « clic pour charger ».

   Il occupe le cadre du calendrier, à l'emplacement exact où l'iframe
   apparaîtra : le calendrier ne se déplace pas une fois affiché. Le cadre
   perd sa hauteur imposée tant qu'il n'accueille qu'un texte — un aplat blanc
   de cinquante rem pour trois lignes n'aurait aucun sens.

   Sélecteur à trois classes pour passer devant les hauteurs déclarées plus
   haut dans les media queries, sans dépendre de l'ordre du fichier.
   -------------------------------------------------------------------------- */
.ck-home .ck-calendar__frame.ck-calendar__frame--idle {
    height: auto;
    background: var(--ck-ivory);
}
.ck-home .ck-calendar__consent {
    display: grid;
    gap: .875rem;
    padding: clamp(1.25rem, 5vw, 2rem);
}
.ck-home .ck-calendar__consent-title {
    margin: 0;
    color: var(--ck-black);
    font: 800 clamp(1.25rem, 5vw, 1.5rem)/1.2 'Archivo', Arial, sans-serif;
    letter-spacing: -.01em;
}
.ck-home .ck-calendar__consent-text {
    max-width: 38rem;
    margin: 0;
    color: var(--ck-text-dark-secondary);
    font: 400 1rem/1.6 'Chivo', Arial, sans-serif;
}
/* Bouton et lien sur une ligne dès qu'il y a la place, empilés sinon.
   Le lien reste un lien : il ne se déguise pas en second bouton. */
.ck-home .ck-calendar__consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    margin-top: .25rem;
}
.ck-home .ck-calendar__consent-button { min-height: 2.75rem; }
.ck-home .ck-calendar__consent-button:focus-visible,
.ck-home .ck-calendar__consent-link:focus-visible {
    outline: 2px solid var(--ck-black);
    outline-offset: 3px;
}
.ck-home .ck-calendar__consent-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ck-black);
    font: 400 1rem/1.4 'Chivo', Arial, sans-serif;
    text-decoration: underline;
    text-underline-offset: .25em;
    transition: color var(--ck-transition);
}
.ck-home .ck-calendar__consent-link:hover { color: var(--ck-red); }
.ck-home .ck-calendar__consent-note {
    margin: 0;
    color: var(--ck-text-dark-secondary);
    font: 400 .9375rem/1.6 'Chivo', Arial, sans-serif;
}
/* Le cadre reçoit le focus quand le calendrier vient d'apparaître, pour que la
   navigation clavier reprenne là et non en haut de page. */
.ck-home .ck-calendar__frame:focus-visible { outline: 3px solid var(--ck-black); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .ck-home .ck-calendar__consent-link { transition: none; }
}

/* Tant que le bloc d'information occupe le cadre, il porte déjà son propre
   « Ouvrir dans Google Calendar » : afficher en plus celui du bas donnerait
   deux fois le même lien à quelques centimètres d'écart. Le bouton du bas
   revient dès que le calendrier est affiché — le cadre perd alors sa classe
   --idle et la règle cesse de s'appliquer.
   Sans prise en charge de :has(), les deux liens restent visibles : c'est
   l'état précédent, redondant mais jamais cassé. */
.ck-home .ck-calendar__inner:has(.ck-calendar__frame--idle) .ck-calendar__open { display: none; }