/* ---------- Le dessin « Nuages » (layout.clouds.html.twig) ----------
   La direction D de la maquette Claude Design : un ciel en haut de la page,
   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. Ses pages :
   l'accueil, les webinaires, l'inscription à un webinaire.
   Chargée après app.css par ces pages seules ; 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 ; tout bouton en pastille */
.sdl-clouds .sdl-header { border-bottom: 0; }
.sdl-clouds .sdl-btn { border-radius: 999px; }
.sdl-clouds .sdl-nav a.sdl-btn { 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 haut d'une page sans photo : son titre et sa phrase sur le ciel ; plus étroit
   au-dessus d'un formulaire, avec le retour à la liste et la grande pastille du jour */
.sdl-clouds__top { position: relative; max-width: 1080px; margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--sdl-clouds-pad) 0; }
.sdl-clouds__top--narrow { max-width: 760px; padding-top: clamp(20px, 4vw, 48px); }
.sdl-clouds__top .sdl-clouds__lead { max-width: 58ch; }
.sdl-clouds__back { font-size: 15px; font-weight: 600; color: var(--sdl-clouds-link); }
.sdl-clouds__event { display: flex; align-items: flex-start; gap: 18px; margin-top: clamp(16px, 3vw, 28px); }
.sdl-clouds__title--compact { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.08; overflow-wrap: anywhere; }
.sdl-clouds__dates { margin: 12px 0 0; font-size: 15px; font-weight: 600; 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__date--large { width: 64px; padding: 10px 0 9px; border-radius: 16px; }
.sdl-clouds__date--large .sdl-clouds__day { font-size: 30px; }
.sdl-clouds__date--large .sdl-clouds__month { margin-top: 4px; font-size: 12px; }

/* le prix et le bouton qui y mène, au pied d'une carte */
.sdl-clouds__buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 20px; margin-top: auto; padding-top: 4px; }
.sdl-clouds__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--sdl-ink); color: #fff; font-size: 14px; font-weight: 600; }
.sdl-clouds__go:hover, .sdl-clouds__go:active { background: #000; color: #fff; }
.sdl-clouds__go:focus-visible { outline: 2px solid var(--sdl-clouds-link); outline-offset: 2px; }

/* une retraite en ligne : plusieurs webinaires réunis, une carte sur toute la largeur */
.sdl-clouds__bundle { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 40px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; }
.sdl-clouds__bundle-text { display: flex; flex: 1 1 380px; flex-direction: column; gap: 12px; min-width: 0; }
.sdl-clouds__bundle .sdl-clouds__card-title { font-size: clamp(22px, 2.4vw, 27px); }
.sdl-clouds__bundle .sdl-clouds__buy { flex: none; margin-top: 0; padding-top: 0; }
.sdl-clouds__bundle .sdl-clouds__price { font-size: 30px; }
.sdl-clouds__count { align-self: flex-start; display: inline-flex; align-items: center; min-height: 28px;
  padding: 0 12px; border-radius: 999px; background: #e1eaf8; color: var(--sdl-clouds-link); font-size: 13px; font-weight: 700; }

.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; }

/* ---------- un formulaire (l'inscription à un webinaire) ---------- */
/* une colonne étroite ; la carte du formulaire donne sa marge à la barre d'action (--sdl-card-pad) */
.sdl-clouds__body--narrow { max-width: 760px; gap: 32px; padding-top: clamp(8px, 2vw, 24px); }
.sdl-clouds__notice .sdl-clouds__meta { margin: 0; }
.sdl-clouds__form { --sdl-card-pad: clamp(22px, 4vw, 40px); display: flex; flex-direction: column; gap: 22px;
  padding: var(--sdl-card-pad); border-radius: 24px; background: var(--sdl-clouds-card); }
.sdl-clouds__form form { display: flex; flex-direction: column; gap: 22px; }
.sdl-clouds__fee-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 20px; border-bottom: 1px solid #dfe6ec; font-size: 15px; color: var(--sdl-clouds-muted); }
.sdl-clouds__fee-line .sdl-clouds__price { font-size: 32px; }
.sdl-clouds__form .sdl-clouds__meta { margin: 0; }

/* les champs : blancs, arrondis, 50 px de haut, 16 px de texte (iOS ne zoome pas) */
.sdl-clouds__form .sdl-field { margin: 0; }
.sdl-clouds__form .sdl-field > label { margin-bottom: 8px; font-size: 14px; }
.sdl-clouds__form .sdl-field input:not([type="checkbox"]):not([type="radio"]), .sdl-clouds__form .sdl-field select {
  height: 50px; padding: 0 16px; border: 1px solid #d3dce4; border-radius: 14px; background: #fff; font-size: 16px; }
.sdl-clouds__form .sdl-field input:focus-visible, .sdl-clouds__form .sdl-field select:focus-visible {
  outline: 2px solid var(--sdl-clouds-link); outline-offset: 1px; }
.sdl-clouds__form .sdl-help { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--sdl-clouds-muted); }
/* le montant : un seul cadre pour le nombre et son € */
.sdl-clouds__form .sdl-field .sdl-amount { max-width: 260px; border: 1px solid #d3dce4; border-radius: 14px; background: #fff; }
.sdl-clouds__form .sdl-field .sdl-amount input:not([type="checkbox"]):not([type="radio"]) { border: 0; border-radius: 0;
  font-family: var(--sdl-serif); font-size: 22px; }
.sdl-clouds__form .sdl-amount .sdl-amount__unit { border-left-color: #e3e9ef; background: #fff;
  font-family: var(--sdl-serif); font-size: 20px; }
.sdl-clouds__form div.sdl-interp-pay { display: flex; flex-direction: column; gap: 12px; }
.sdl-clouds__form div.sdl-interp-pay > .sdl-help { margin: 0; }

/* la traduction : une carte blanche dans la carte */
.sdl-clouds__subcard { min-width: 0; margin: 0; padding: 20px; border: 0; border-radius: 18px; background: #fff; }
.sdl-clouds__legend { margin-bottom: 6px; font-family: var(--sdl-serif); font-size: 22px; line-height: 1.2; }
.sdl-clouds__subcard > .sdl-clouds__meta { margin: 0 0 14px; }
.sdl-clouds__form .sdl-check { border-color: #d3dce4; border-radius: 14px; }
.sdl-clouds__form .sdl-check input { accent-color: var(--sdl-clouds-link); }
.sdl-clouds__form .sdl-check:has(input:checked) { border-color: var(--sdl-clouds-link);
  box-shadow: inset 0 0 0 1px var(--sdl-clouds-link); }

/* ce qui arrive ensuite (PayPal, une demande sans paiement) : un encart bleu clair */
.sdl-clouds__form .sdl-locked { border: 0; border-radius: 14px; background: #e6f1fb; color: #2c3e50; }
.sdl-clouds__note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px;
  border-radius: 14px; background: #e6f1fb; font-size: 14px; line-height: 1.55; color: #2c3e50; }
.sdl-clouds__note .bi { color: var(--sdl-clouds-link); }
.sdl-clouds__form .sdl-actionbar .sdl-btn { min-height: 54px; font-size: 16px; }

/* ---------- 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)); }
  /* la barre d'action collée en bas reprend la couleur et les coins de la carte du formulaire */
  .sdl-clouds__form .sdl-actionbar { border-radius: 0 0 24px 24px; background: var(--sdl-clouds-card); }
}