/* ---------- L'accueil, dessin « Nuages » (index/index.html.twig) ----------
   La direction D de la maquette Claude Design : un ciel au-dessus de la photo,
   un fondu de nuages vers la page puis hors d'elle, de la place entre les blocs,
   et les cinq couleurs de l'emblème plutôt que le seul vert.
   Chargée après app.css par l'accueil seul ; tout part de .sdl-clouds. */

.sdl-clouds {
  /* un bleu de beau temps : franc en haut, presque blanc près des nuages ;
     le bleu du milieu est aussi le ciel du bas de page, sous son petit texte */
  --sdl-clouds-sky-high: #8ecdf7;
  --sdl-clouds-sky-mid:  #b4dffb;
  --sdl-clouds-sky-low:  #dcf0fe;
  --sdl-clouds-on-sky:   #4f5a62;   /* le petit texte posé sur le ciel (pied de page) */
  --sdl-clouds-card:  #f4f7fa;   /* une carte : un peu de ciel sur le blanc */
  --sdl-clouds-link:  #1d3f95;   /* le bleu de l'emblème, pour les liens */
  --sdl-clouds-text:  #3c4246;
  --sdl-clouds-muted: #5d6469;
  --sdl-clouds-pad:   clamp(20px, 5vw, 48px);
  background: #fff;
}

/* l'en-tête : blanc sur blanc, le bouton « Se connecter » en pastille */
.sdl-clouds .sdl-header { border-bottom: 0; }
.sdl-clouds .sdl-nav a.sdl-btn { border-radius: 999px; padding-inline: 20px; }

/* ---------- le ciel ---------- */
.sdl-clouds__sky { position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--sdl-clouds-sky-high) 0%, var(--sdl-clouds-sky-mid) 45%, var(--sdl-clouds-sky-low) 100%); }
.sdl-clouds__drift { position: absolute; height: auto; pointer-events: none; }
.sdl-clouds__drift--high { right: 5%; top: 30px; width: clamp(110px, 11vw, 150px); }
/* posé dans le haut du fondu, sous le texte : plus haut, il passerait derrière la fin du paragraphe */
.sdl-clouds__drift--low { left: 3%; bottom: clamp(70px, 9vw, 130px); width: clamp(120px, 12vw, 170px); transform: scaleX(-1); }

.sdl-clouds__hero { position: relative; display: flex; flex-wrap: wrap; flex-direction: row-reverse;
  justify-content: center; align-items: center; gap: clamp(40px, 6vw, 88px);
  max-width: 1080px; margin: 0 auto; padding: clamp(36px, 7vw, 104px) var(--sdl-clouds-pad) 0; }

/* la photo, bordée de blanc ; un nuage doré déborde sur un coin, un blanc sur l'autre */
.sdl-clouds__photo { position: relative; flex: 1 1 400px; min-width: 0; max-width: 500px; margin: 0; }
.sdl-clouds__frame { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: #d9d4cc;
  box-shadow: 0 0 0 6px #fff; }
.sdl-clouds__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 35% 30%; }
.sdl-clouds__corner { position: absolute; height: auto; pointer-events: none; }
.sdl-clouds__corner--high { left: -7%; top: -11%; width: 40%; }
.sdl-clouds__corner--low { right: -6%; bottom: -9%; width: 37%; transform: scaleX(-1); }

.sdl-clouds__intro { flex: 1 1 400px; min-width: 0; max-width: 500px; }
.sdl-clouds__intro .sdl-flash { margin-bottom: 20px; }
.sdl-clouds__title { margin: 0; font-family: var(--sdl-serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.01em; }
.sdl-clouds__lead { margin: 24px 0 0; max-width: 44ch; font-size: 17px; line-height: 1.7; color: var(--sdl-clouds-text); }

/* le fondu : trois couches de nuages (fade.svg) sur un ciel qui pâlit jusqu'au blanc ;
   retourné, il ramène le ciel en bas de page */
.sdl-clouds__fade { height: clamp(120px, 14vw, 190px);
  background: url("/img/clouds/fade.svg") center bottom / cover no-repeat,
              linear-gradient(to bottom, rgba(255, 255, 255, 0) 45%, #fff); }
.sdl-clouds__sky .sdl-clouds__fade { position: relative; margin-top: clamp(32px, 5vw, 64px); }
.sdl-clouds__fade--end { transform: scale(-1, -1); }

/* ---------- le contenu ---------- */
.sdl-clouds__body { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px);
  max-width: 1080px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--sdl-clouds-pad) clamp(64px, 9vw, 120px); }
/* une section : son titre, puis ce qu'elle offre sur toute la largeur ; le lien « Tous les … »,
   placé après la liste dans la page, remonte ici à côté du titre (au téléphone il reste après) */
/* align-content: étirée à la hauteur de sa voisine (.sdl-clouds__pair), elle ne descend pas son titre */
.sdl-clouds__section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  align-content: start; gap: 28px 16px; min-width: 0; }
.sdl-clouds__section > * { grid-column: 1 / -1; }
.sdl-clouds__section > .sdl-clouds__label { grid-column: 1; }
.sdl-clouds__section > .sdl-clouds__more { grid-column: 2; grid-row: 1; }
.sdl-clouds__label { margin: 0; font-family: var(--sdl-serif); font-weight: 400;
  font-size: clamp(27px, 3vw, 34px); line-height: 1.15; }
/* sous chaque titre, les cinq couleurs de l'emblème */
.sdl-clouds__label::after { content: ""; display: block; width: 84px; height: 4px; margin-top: 10px;
  background: linear-gradient(90deg, #1d3f95 0 20%, #fff 20% 40%, #c42a1f 40% 60%, #1d8a43 60% 80%, #f0bf2a 80%);
  box-shadow: inset 0 0 0 1px rgba(32, 35, 37, .08); }
.sdl-clouds__more { display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--sdl-clouds-link); }

.sdl-clouds__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.sdl-clouds__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 64px); }

/* une carte : pas de bordure, un peu de ciel, des coins ronds */
.sdl-clouds__card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px;
  border-radius: 20px; background: var(--sdl-clouds-card); color: var(--sdl-ink); }
a.sdl-clouds__card { transition: background .15s; }
a.sdl-clouds__card:hover { background: #eaf0f5; color: var(--sdl-ink); }
a.sdl-clouds__card:active { background: #e2eaf1; }
a.sdl-clouds__card:focus-visible { outline: 2px solid var(--sdl-clouds-link); outline-offset: 2px; }
.sdl-clouds__teaching { gap: 16px; }
.sdl-clouds__card-head { display: flex; align-items: flex-start; gap: 16px; }
.sdl-clouds__heading { flex: 1; min-width: 0; }
.sdl-clouds__card-title { margin: 0; font-family: var(--sdl-serif); font-weight: 500; font-size: 21px; line-height: 1.25; }
.sdl-clouds__when { margin: 6px 0 0; font-size: 14px; color: var(--sdl-clouds-muted); }
.sdl-clouds__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sdl-clouds-text); }

/* la pastille du jour, aux couleurs de l'emblème tour à tour */
.sdl-clouds__date { flex: none; width: 56px; padding: 9px 0 8px; border-radius: 14px;
  color: #fff; text-align: center; line-height: 1; }
.sdl-clouds__date--blue { background: #1d3f95; }
.sdl-clouds__date--red { background: #b8261c; }
.sdl-clouds__date--green { background: #187a3a; }
.sdl-clouds__day { display: block; font-family: var(--sdl-serif); font-size: 26px; font-variant-numeric: tabular-nums; }
.sdl-clouds__month { display: block; margin-top: 3px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; }

.sdl-clouds__ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.sdl-clouds__way { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--sdl-ink); border-radius: 999px; color: var(--sdl-ink); font-size: 14px; font-weight: 600; }
.sdl-clouds__way:hover, .sdl-clouds__way:active { background: var(--sdl-ink); color: #fff; }
.sdl-clouds__way:focus-visible { outline: 2px solid var(--sdl-clouds-link); outline-offset: 2px; }

.sdl-clouds__divider { display: block; width: 128px; height: auto; margin: 0 auto; }

.sdl-clouds__row-title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.sdl-clouds__meta { font-size: 14px; color: var(--sdl-clouds-muted); }
.sdl-clouds__bar { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: #e4e9ee; }
.sdl-clouds__bar > span { display: block; height: 100%; min-width: 5px; background: #c98a1c; }
.sdl-clouds__fee { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding-block: 0; }
.sdl-clouds__price { flex: none; font-family: var(--sdl-serif); font-size: 26px; line-height: 1; color: var(--sdl-clouds-link); }
.sdl-clouds__empty { margin: 0; padding: 26px; border-radius: 20px; background: var(--sdl-clouds-card); color: var(--sdl-clouds-muted); }
.sdl-clouds__hint { margin: 0; font-size: 14px; line-height: 1.65; color: var(--sdl-clouds-muted); }
.sdl-clouds__hint a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sdl-clouds-link); font-weight: 600; }

/* ---------- le bas de page : le ciel revient, et le pied ne redit pas le menu ---------- */
/* sous le fondu retourné, le ciel reprend du bleu jusqu'à celui du pied de page */
.sdl-clouds__end { background: linear-gradient(180deg, var(--sdl-clouds-sky-low) 0, var(--sdl-clouds-sky-mid) 190px); }
.sdl-clouds .sdl-footer { padding: 12px var(--sdl-clouds-pad) 44px; border-top: 0; background: transparent; }
.sdl-clouds__footer { display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 1080px; margin: 0 auto; text-align: center; }
.sdl-clouds__about { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.65; color: var(--sdl-clouds-on-sky); }
.sdl-clouds__copyright { margin: 12px 0 0; font-size: 12px; color: var(--sdl-clouds-on-sky); }

/* ---------- téléphone ---------- */
@media (max-width: 767.98px) {
  /* les nuages qui passent couvriraient le texte : seuls restent ceux de la photo */
  .sdl-clouds__drift { display: none; }
  /* « Tous les webinaires » après la liste, en bouton large : à côté du titre, il flottait */
  .sdl-clouds__section > .sdl-clouds__more { grid-column: 1 / -1; grid-row: auto; justify-content: center;
    min-height: 48px; border-radius: 999px; background: var(--sdl-clouds-card); }
  /* pas de pied de page (app.css) : le ciel finit la page, au-dessus de la barre d'accueil */
  .sdl-clouds__end { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}