/* ---------- 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, la cotisation.
   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);
  /* la hauteur du fondu sous le ciel du haut : assez pour ses nuages, pas plus,
     que le contenu paraisse sous l'introduction sans défiler sur un portable */
  --sdl-clouds-fade-height: clamp(120px, 10vw, 140px);
  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 ;
   plus bas, il se perdrait dans le blanc des nuages. Il suit donc la hauteur du fondu. */
.sdl-clouds__drift--low { left: 3%; bottom: calc(var(--sdl-clouds-fade-height) * .6); 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, 4.5vw, 64px) 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, 4.5vw, 64px) var(--sdl-clouds-pad) 0; }
.sdl-clouds__top--narrow { max-width: 760px; }
/* le lien de retour tient lieu de marge : le titre ne descend pas d'autant */
.sdl-clouds__top--narrow:has(> .sdl-clouds__back:first-child) { 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); }
/* plus bas que le dessin, le fondu en rogne une bande : celle du bas, déjà blanche ;
   rognée en haut, la brume s'y couperait net, en une ligne sur le ciel */
.sdl-clouds__sky .sdl-clouds__fade { position: relative; height: var(--sdl-clouds-fade-height); margin-top: clamp(32px, 3.5vw, 48px);
  background-position: center top; }
.sdl-clouds__fade--end { transform: scale(-1, -1); }

/* ---------- le contenu ---------- */
/* collé au fondu : le bas des nuages, déjà blanc, tient lieu de marge */
.sdl-clouds__body { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 88px);
  max-width: 1080px; margin: 0 auto;
  padding: 0 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; }
.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); }

/* qui adhère : un titre de partie, le prénom et le nom côte à côte quand la place le permet */
.sdl-clouds__subtitle { margin: 0; }
.sdl-clouds__fields { display: flex; flex-direction: column; gap: 22px; }
.sdl-clouds__names { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px 16px; }
/* pour soi ou pour quelqu'un d'autre : deux cases larges, et la note juste dessous */
.sdl-clouds__form .sdl-choices { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sdl-clouds__form .sdl-choices .sdl-check { align-items: center; min-height: 52px; margin: 0; font-size: 16px; }
.sdl-clouds__form form > .sdl-help { margin: -12px 0 0; }
/* 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, .sdl-clouds__subtitle { font-family: var(--sdl-serif); font-weight: 400; font-size: 22px; line-height: 1.2; }
.sdl-clouds__legend { margin-bottom: 6px; }
.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; }
/* un bouton en lien reste un lien souligné, pas une pastille */
.sdl-clouds .sdl-btn--link { border-radius: 0; border-bottom-color: var(--sdl-clouds-link); color: var(--sdl-clouds-link); }

/* ---------- la page des interprètes : une carte par webinaire, une ligne par langue ---------- */
.sdl-clouds__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 14px; border-top: 1px solid #dfe6ec; font-size: 14px; line-height: 1.55; color: var(--sdl-clouds-text); }
.sdl-clouds__line-text { flex: 1 1 260px; min-width: 0; }
.sdl-clouds__line-text strong { color: var(--sdl-ink); }
/* la langue sur sa ligne, puis qui la demande, puis où en sont les interprètes : une phrase chacune */
.sdl-clouds__line-name, .sdl-clouds__line-text .sdl-interp-demand, .sdl-clouds__line-text .sdl-interp-coverage { display: block; }
.sdl-clouds__line-name { margin-bottom: 2px; font-size: 15px; }
.sdl-clouds__mine { margin-top: 4px; font-weight: 600; color: var(--sdl-clouds-link); }
.sdl-clouds__line-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* suivre comme panéliste : à part, dans son encart blanc, pour ne pas le prendre pour un engagement */
.sdl-clouds__interp .sdl-clouds__line--foot { margin-top: 4px; padding: 14px 16px; border-top: 0; border-radius: 14px; background: #fff; }

/* comment ça marche : replié, sauf pour qui ne s'est encore engagé nulle part */
.sdl-clouds__how { padding: 0 24px; border-radius: 20px; background: var(--sdl-clouds-card);
  font-size: 15px; line-height: 1.65; color: var(--sdl-clouds-text); }
.sdl-clouds__how > summary { padding: 16px 0; font-weight: 600; color: var(--sdl-clouds-link); cursor: pointer; }
.sdl-clouds__how > ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 22px 20px; }
.sdl-clouds__note a { 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)); }
  /* 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); }
}