/* ---------- 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,
   les pages des interprètes, celles des dons, Mon espace (sous un ciel court)
   et les écrans de connexion (custom.login.html.twig).
   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);
  /* les boutons : le jaune de l'emblème, écrit en foncé ; un bord un peu plus
     soutenu pour qu'il tienne sur le blanc, un ton plus chaud au survol */
  --sdl-clouds-gold:      #f6d27a;
  --sdl-clouds-gold-edge: #e3b44c;
  --sdl-clouds-gold-deep: #efc35a;
  /* 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 dorée : le noir plein
   pesait trop sur ces pages claires */
.sdl-clouds .sdl-header { border-bottom: 0; }
.sdl-clouds .sdl-btn { border-radius: 999px; border-color: var(--sdl-clouds-gold-edge);
  background: var(--sdl-clouds-gold); color: var(--sdl-ink); }
.sdl-clouds .sdl-btn:hover, .sdl-clouds .sdl-btn:active { filter: none; border-color: var(--sdl-clouds-gold-edge);
  background: var(--sdl-clouds-gold-deep); color: var(--sdl-ink); }
.sdl-clouds .sdl-btn:focus-visible { outline-color: var(--sdl-clouds-link); }
/* app.css écrit en blanc le bouton du menu, fait pour le noir : sur l'or, il s'écrit en foncé */
.sdl-clouds .sdl-nav a.sdl-btn { padding-inline: 20px; color: var(--sdl-ink); }
/* le bouton en contour garde son trait foncé, sans fond ; survolé, il se dore */
.sdl-clouds .sdl-btn--outline { border-color: var(--sdl-ink); background: transparent; }
.sdl-clouds .sdl-btn--outline:hover, .sdl-clouds .sdl-btn--outline:active { border-color: var(--sdl-clouds-gold-edge);
  background: var(--sdl-clouds-gold); }
.sdl-clouds .sdl-btn:disabled, .sdl-clouds .sdl-btn.disabled { border-color: #d8d4ca; background: #d8d4ca; color: #918d84; }

/* ---------- 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; }
/* un titre juste sous le lien de retour (un don) : l'écart qu'y laisse la pastille du jour ailleurs */
.sdl-clouds__back + .sdl-clouds__title { margin-top: clamp(16px, 3vw, 28px); }
.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; box-shadow: inset 0 0 0 1px var(--sdl-clouds-gold-edge);
  background: var(--sdl-clouds-gold); color: var(--sdl-ink); font-size: 14px; font-weight: 600; }
.sdl-clouds__go:hover, .sdl-clouds__go:active { background: var(--sdl-clouds-gold-deep); color: var(--sdl-ink); }
.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 { border-color: var(--sdl-clouds-gold-edge);
  background: var(--sdl-clouds-gold); color: var(--sdl-ink); }
.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, pas même survolé */
.sdl-clouds .sdl-btn--link,
.sdl-clouds .sdl-btn--link:hover { border-radius: 0; border-bottom-color: var(--sdl-clouds-link); background: transparent; 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; }

/* ---------- les dons : les projets, puis un don ---------- */
/* le principe de la page en trois temps, au-dessus des projets ; le texte entier reste plus bas */
.sdl-clouds__principle { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sdl-clouds__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px 32px;
  width: 100%; margin: 0; padding: 0; list-style: none; }
.sdl-clouds__step { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.sdl-clouds__step-number { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; font-family: var(--sdl-serif); font-size: 18px; }
/* les couleurs des pastilles du jour, tour à tour */
.sdl-clouds__step-number--blue { background: #1d3f95; }
.sdl-clouds__step-number--red { background: #b8261c; }
.sdl-clouds__step-number--green { background: #187a3a; }
.sdl-clouds__step-title { display: block; font-family: var(--sdl-serif); font-weight: 500; font-size: 19px; line-height: 1.3; }
.sdl-clouds__step-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--sdl-clouds-muted); }

/* deux projets de front : leur texte est long */
.sdl-clouds__grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.sdl-clouds__project { gap: 16px; }
/* où en est un projet : ce qui est réuni sur quoi, la barre, puis le bouton, à sa taille */
.sdl-clouds__progress { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 4px; }
.sdl-clouds__progress > .sdl-clouds__meta { margin: 0; }
.sdl-clouds__progress > .sdl-btn { align-self: flex-start; margin-top: 8px; }
.sdl-clouds__raised { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sdl-clouds__pct { font-size: 14px; font-weight: 700; color: var(--sdl-clouds-text); }
.sdl-clouds__done { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: #e2f1e7; color: #187a3a; font-size: 13px; font-weight: 700; }
/* le don général : sur toute la largeur, sur un bleu clair où l'or du bouton se détache */
.sdl-clouds__general { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: #e6f1fb; }
.sdl-clouds__general-text { display: flex; flex: 1 1 380px; flex-direction: column; gap: 10px; min-width: 0; }
.sdl-clouds__general .sdl-clouds__card-title { font-size: clamp(22px, 2.4vw, 27px); }
.sdl-clouds__heart { color: #c42a1f; }
/* pourquoi cette page, en entier : deux colonnes de texte, puis le merci */
.sdl-clouds__why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 40px;
  font-size: 15px; line-height: 1.75; color: var(--sdl-clouds-text); }
.sdl-clouds__why p { margin: 0; }
.sdl-clouds__thanks { margin: 0; max-width: 46ch; font-family: var(--sdl-serif); font-style: italic;
  font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--sdl-ink); }

/* un don : où en est le projet, en tête de la carte, puis le montant */
.sdl-clouds__goal { display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid #dfe6ec; }
.sdl-clouds__goal .sdl-clouds__price { font-size: 32px; }
.sdl-clouds__goal > .sdl-clouds__meta { margin: 0; }
.sdl-clouds__form form > .sdl-clouds__meta .bi { color: var(--sdl-clouds-link); }
.sdl-clouds__blessing { max-width: 44ch; margin: 0 auto; font-family: var(--sdl-serif); font-style: italic;
  font-size: 19px; line-height: 1.5; color: var(--sdl-clouds-text); text-align: center; }

/* ---------- Mon espace : un ciel court, ses pages en liste à côté ---------- */
/* une page dont on se sert : une bande de ciel, sans fondu de nuages au-dessus du contenu ni dessous */
.sdl-clouds__sky--quiet { background: linear-gradient(180deg, var(--sdl-clouds-sky-mid) 0%, var(--sdl-clouds-sky-low) 100%); }
.sdl-clouds__sky--quiet .sdl-clouds__top { padding-block: 32px 36px; }
.sdl-clouds__sky--quiet .sdl-clouds__title { font-size: clamp(30px, 3.6vw, 42px); }
.sdl-clouds__sky--quiet .sdl-clouds__lead { margin-top: 14px; }
.sdl-clouds__sky--quiet .sdl-clouds__drift--high { top: 22px; width: clamp(80px, 8vw, 110px); }
.sdl-clouds__sky--quiet + .sdl-clouds__body { padding-top: clamp(32px, 4vw, 48px); }

.sdl-clouds .sdl-account { grid-template-columns: 230px minmax(0, 1fr); gap: 24px 48px; max-width: none; margin: 0; padding: 0; }
.sdl-clouds .sdl-account__link { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  color: var(--sdl-clouds-text); font-size: 15px; font-weight: 500; }
.sdl-clouds .sdl-account__link:hover { background: var(--sdl-clouds-card); color: var(--sdl-ink); }
.sdl-clouds .sdl-account__link.is-active { background: #e6f1fb; color: var(--sdl-clouds-link); font-weight: 600; }
.sdl-clouds .sdl-account__count,
.sdl-clouds .sdl-account__link.is-active .sdl-account__count { background: #e1eaf8; color: var(--sdl-clouds-link); font-weight: 700; }
.sdl-clouds .sdl-account__aside-foot { margin-top: 12px; padding: 12px 0 0; border-top: 1px solid #e4e9ee; }
.sdl-clouds .sdl-account__logout { color: var(--sdl-clouds-muted); }
/* la page : ses blocs espacés, ses cartes sans bord, un peu de ciel */
.sdl-clouds .sdl-account__main { display: flex; flex-direction: column; gap: 32px; }
.sdl-clouds .sdl-account__main .sdl-clouds__label { font-size: clamp(24px, 2.6vw, 30px); }
.sdl-clouds .sdl-account__main .sdl-card { padding: 22px 24px; border: 0; border-radius: 20px;
  background: var(--sdl-clouds-card); box-shadow: none; }
.sdl-clouds .sdl-account__main a.sdl-card:hover { background: #eaf0f5; }
.sdl-account__rows { display: flex; flex-direction: column; gap: 14px; }
/* une ligne : la pastille du jour, ce que c'est, puis ce qu'on peut en faire, à droite */
.sdl-clouds .sdl-row { justify-content: flex-start; gap: 16px 20px; }
.sdl-clouds .sdl-row__meta { flex: 1 1 220px; min-width: 0; }
.sdl-clouds .sdl-row__meta .sdl-clouds__when { margin-top: 6px; }
.sdl-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* les comptes : un grand chiffre bleu chacun */
.sdl-clouds .sdl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sdl-clouds .sdl-stat { display: flex; flex-direction: column; gap: 6px; color: var(--sdl-ink); }
.sdl-clouds .sdl-stat__num { font-size: 40px; color: var(--sdl-clouds-link); }
.sdl-clouds .sdl-stat__label { margin: 0; font-size: 14px; color: var(--sdl-clouds-muted); }
/* l'adresse pas encore confirmée : l'historique attend, on le dit dans un encart bleu clair */
.sdl-account__confirm { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px;
  border-radius: 20px; background: #e6f1fb; color: #2c3e50; font-size: 15px; line-height: 1.6; }
.sdl-account__confirm p { max-width: 60ch; margin: 0; }
.sdl-account__confirm-title { margin: 0; font-family: var(--sdl-serif); font-weight: 500; font-size: 21px; color: var(--sdl-ink); }
.sdl-account__confirm-title .bi { color: var(--sdl-clouds-link); }
/* les réglages : une carte par sujet, le bouton dessous */
.sdl-account__form { display: flex; flex-direction: column; gap: 20px; }
.sdl-account__form > .sdl-btn { align-self: flex-start; }
.sdl-clouds__form .sdl-field textarea { padding: 14px 16px; border: 1px solid #d3dce4; border-radius: 14px; background: #fff;
  font-size: 16px; line-height: 1.5; }
.sdl-clouds__subtitle .bi { color: var(--sdl-clouds-link); font-size: .8em; }
@media (max-width: 820px) {
  .sdl-clouds .sdl-account { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* les pages repliées derrière un bouton qui nomme la page : un peu de ciel, sans bord */
  .sdl-clouds .sdl-account__aside.is-foldable .sdl-account__toggle { min-height: 52px; border: 0; border-radius: 14px;
    background: var(--sdl-clouds-card); color: var(--sdl-clouds-link); font-size: 16px; }
  .sdl-clouds .sdl-account__aside.is-foldable.is-open .sdl-account__nav { border: 0; border-radius: 14px; background: var(--sdl-clouds-card); }
  .sdl-clouds .sdl-stats { gap: 10px; }
  .sdl-clouds .sdl-stats .sdl-card { padding: 16px 14px; }
  .sdl-clouds .sdl-stat__num { font-size: 30px; }
}

/* ---------- la connexion : tout l'écran est ciel, la carte flotte au-dessus d'un banc de nuages ---------- */
/* le décor est peint derrière la carte (isolation) : rien à ajouter aux pages */
.sdl-clouds .sdl-auth { position: relative; isolation: isolate; 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 .sdl-auth::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/img/clouds/cloud-gold.svg") right 9% top 90px / clamp(130px, 14vw, 190px) auto no-repeat,
              url("/img/clouds/cloud-white.svg") left 7% top 44% / clamp(120px, 12vw, 170px) auto no-repeat; }
.sdl-clouds .sdl-auth::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: -1;
  height: clamp(150px, 16vw, 210px); pointer-events: none;
  background: url("/img/clouds/fade.svg") center top / cover no-repeat,
              linear-gradient(to bottom, rgba(255, 255, 255, 0) 45%, #fff); }
.sdl-clouds .sdl-auth__card { max-width: 440px; padding: clamp(26px, 5vw, 40px); border: 0; border-radius: 24px;
  background: #fff; box-shadow: 0 18px 50px rgba(29, 63, 149, .14); }
/* le retour à l'accueil, hors de la carte, en haut à gauche du ciel */
.sdl-clouds .sdl-auth__home { position: absolute; top: 18px; left: var(--sdl-clouds-pad); margin: 0;
  font-size: 15px; font-weight: 600; color: var(--sdl-clouds-link); }
.sdl-clouds .sdl-auth__card h1 { font-family: var(--sdl-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
.sdl-clouds .sdl-auth__card h1::after { content: ""; display: block; width: 84px; height: 4px; margin: 12px auto 0;
  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 .sdl-auth__card .sdl-field input:not([type="checkbox"]):not([type="radio"]) {
  height: 50px; padding: 0 16px; border: 1px solid #d3dce4; border-radius: 14px; background: #fff; font-size: 16px; }
.sdl-clouds .sdl-auth__card .sdl-field input:focus-visible { outline: 2px solid var(--sdl-clouds-link); outline-offset: 1px; }
.sdl-clouds .sdl-auth__card .sdl-btn--block { min-height: 54px; font-size: 16px; }
.sdl-clouds .sdl-auth__card a:not(.sdl-btn) { 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; }
/* sous un ciel court (Mon espace), pas de fondu au-dessus du pied : le ciel reprend tout de suite */
.sdl-clouds__end--quiet .sdl-footer { padding-top: 36px; }
.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); }
  /* la connexion commence sous le retour à l'accueil ; le nuage doré, petit, à côté de lui */
  .sdl-clouds .sdl-auth { padding-top: 76px; }
  .sdl-clouds .sdl-auth::before { background: url("/img/clouds/cloud-gold.svg") right 5% top 14px / 84px auto no-repeat; }
  .sdl-clouds .sdl-auth__card { padding: 26px 20px; box-shadow: 0 12px 32px rgba(29, 63, 149, .12); }
}