/* =====================================================================
   YD Studio · les sections sous la hero (05/10/2026)
   Avant / après (blanc) · Les 4 étapes (ciel) · Nos apps (blanc) · Appel final (ciel) · pied de page.
   Règles : DESIGN.md, partie « Les sections sous la hero ». Couleurs : css/tokens.css uniquement.
   ===================================================================== */

/* ---------- Réglages propres aux sections (tailles qui suivent la largeur) ---------- */
:root {
  --section-marge: clamp(80px, 9.4vw, 136px);   /* haut et bas de chaque section */
  --gouttiere: 24px;
  --aa-cote-l: 250px;      /* avant / après : téléphones des côtés */
  --aa-milieu-l: 300px;    /* avant / après : téléphone à curseur */
  --bordure-h: 120px;      /* hauteur de la bande de nuages */
}
/* 06/10 : le défilement animé des ancres du menu a été retiré. Il traversait toute la page (jusqu'à 6 000 px) en
   produisant une image par pas, à travers le grain, la plume et les montgolfières : c'est ce qui donnait l'impression
   « ça bug un peu et c'est assez lent ». Le saut est instantané, et chaque section se cale sous le menu. */
:target, .section[id] { scroll-margin-top: 92px; }

/* ---------- Gabarit commun ---------- */
.section { position: relative; padding: var(--section-marge) 0; isolation: isolate; }
.section--blanche { background: var(--nuage); }
.section--ciel {
  background: linear-gradient(180deg, var(--ciel) 0%, var(--ciel) 55%, var(--ciel-clair) 100%);   /* exception 3 : le ciel (foncé jusqu'à 55 % : texte blanc lisible) */
  color: var(--nuage);
  padding: calc(var(--section-marge) + var(--bordure-h) * 0.6) 0;
  overflow: clip;
}
.conteneur { position: relative; z-index: 2; width: min(100%, 1200px); margin: 0 auto; padding: 0 var(--gouttiere); }

.section__tete { max-width: 780px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.etiquette {
  display: inline-flex; align-items: center; height: 32px; margin: 0 0 18px; padding: 0 14px;
  border-radius: var(--rayon);
  background: var(--etiquette-fond); color: var(--ciel-texte);
  font: 600 13px / 1 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase;
}
.etiquette--ciel { background: var(--etiquette-fond-ciel); color: var(--ciel-texte); }
.section__titre {
  margin: 0;
  font: 600 clamp(34px, 4.2vw, 60px) / 1.02 var(--police-titre);
  letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance;
  color: var(--encre);
}
.section--ciel .section__titre { color: var(--nuage); }
.section__texte {
  margin: 18px auto 0; max-width: 640px;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; font-weight: 450; text-wrap: balance;
  color: var(--encre-douce);
}
.section--ciel .section__texte { color: var(--nuage); font-weight: 700; font-size: clamp(19px, 1.5vw, 21px); }   /* grand texte gras (≥ 18,66 px en 700) : seuil 3:1, mesuré de 4,0 à 4,3:1 sur le ciel foncé */

/* Le grain du ciel (exception 9) : le même filtre que la hero (#grain-bruit) */
.section__grain { position: absolute; inset: 0; z-index: 1; opacity: var(--grain-opacite); mix-blend-mode: soft-light; pointer-events: none; }
.section__grain svg { width: 100%; height: 100%; display: block; }

/* La bande de nuages : en haut d'une section bleue elle est retournée (le blanc du dessus pend dans le ciel) */
.bordure { position: absolute; left: 0; right: 0; height: max(var(--bordure-h), 6.3vw);   /* 6,3vw : la bande entière, aucune bosse rognée sur les grands écrans */
  z-index: 0; pointer-events: none; line-height: 0; }
.bordure svg { width: 100%; height: 100%; display: block; }
.bordure--haut { top: -1px; transform: scaleY(-1); }
.bordure--bas { bottom: -1px; }
/* bas de la hero : les téléphones finissent dans les nuages (au-dessus d'eux, sous le texte et le bouton) */
.bordure--hero { bottom: -1px; z-index: 9; height: max(calc(var(--bordure-h) * 0.8), 6.3vw); transform: translateY(28%); }   /* plus bas : le bouton reste au-dessus */
.bordure--hero .f-nuage-ombre { display: none; }   /* dans la hero, seulement les bosses blanches : pas de bleu derrière le bouton */

/* ---------- Le téléphone des sections : le cadre de la hero, à plat ---------- */
.tel { --l: var(--tel-l, 280px); position: relative; width: var(--l); margin: 0; flex: none; }
.tel__cadre {
  position: relative; padding: calc(var(--l) * 0.031);
  border-radius: calc(var(--l) * 0.152);   /* exception 1 : coins physiques */
  background: var(--demo-telephone);
}
.tel__ecran {
  position: relative; aspect-ratio: 393 / 852; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--l) * 0.124);
  background: var(--demo-ilot);
}
.tel__ecran > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tel__barre { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; color: var(--nuage); pointer-events: none; }
.tel--clair .tel__barre { color: var(--encre); }
.tel__ilot {
  position: absolute; z-index: 4; left: 50%; top: calc(var(--l) * 0.058); transform: translateX(-50%);
  width: calc(var(--l) * 0.3); height: calc(var(--l) * 0.088); border-radius: calc(var(--l) * 0.044);
  background: var(--demo-ilot);
}

/* ---------- AVANT / APRÈS ---------- */
.avant-apres { display: flex; justify-content: center; align-items: flex-end; gap: clamp(20px, 3.4vw, 48px); }
.avant-apres figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.legende { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; color: var(--encre-douce); }
.legende b { font: 600 13px / 1 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ciel-texte); }

.comparateur { position: absolute; inset: 0; --pos: 50%; }
.comparateur__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.comparateur__apres { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
/* la barre « 9:41 » de chaque côté du trait : encre sur l'écran vierge, blanche sur l'app (chacune suit son image) */
.comparateur__barre { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--nuage); pointer-events: none; }
.comparateur__barre--sombre { color: var(--encre); }
.comparateur__trait {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 3px; margin-left: -1.5px; background: var(--ciel); pointer-events: none;
}
.comparateur__poignee {
  position: absolute; z-index: 2; top: 50%; left: clamp(22px, var(--pos), calc(100% - 22px)); transform: translate(-50%, -50%);   /* reste entière aux extrémités */
  pointer-events: none;
  width: 44px; height: 44px; border-radius: 50%;   /* la poignée ronde, voulue par la brief */
  display: grid; place-items: center; background: var(--ciel);
}
.comparateur__poignee svg { width: 24px; height: 24px; fill: none; stroke: var(--nuage); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.comparateur__curseur {
  position: absolute; top: 0; bottom: 0; left: -22px; z-index: 3; width: calc(100% + 44px); height: 100%; margin: 0;   /* le centre du pouce va de 0 à 100 % de l'écran */
  opacity: 0; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y;
  pointer-events: none;   /* seul le pouce se saisit : un doigt qui fait défiler la page ne déplace pas le trait */
}
.comparateur__curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; pointer-events: auto; cursor: ew-resize; }
.comparateur__curseur::-moz-range-thumb { width: 44px; height: 100vh; border: 0; pointer-events: auto; cursor: ew-resize; }
.comparateur:not(.comparateur--actif) :is(.comparateur__curseur, .comparateur__poignee) { display: none; }   /* sans JavaScript : avant / après fixe */
.avant-apres__milieu:not(.avant-apres__milieu--actif) .legende--milieu b { display: none; }   /* … et pas de « Glisse » */
/* près d'un bord, la poignée est retenue entière : le pouce invisible s'élargit pour la couvrir toute */
.comparateur--bord .comparateur__curseur { left: -44px; width: calc(100% + 88px); }
.comparateur--bord .comparateur__curseur::-webkit-slider-thumb { width: 88px; }
.comparateur--bord .comparateur__curseur::-moz-range-thumb { width: 88px; }
/* au clavier, la poignée s'écarte de 6 px de plus du bord pour que son contour de focus reste entier */
.comparateur:has(.comparateur__curseur:focus-visible) .comparateur__poignee { left: clamp(28px, var(--pos), calc(100% - 28px)); }
.comparateur:has(.comparateur__curseur:focus-visible) .comparateur__poignee { outline: 3px solid var(--mandarine); outline-offset: 3px; }

/* ---------- LES 4 ÉTAPES ---------- */
.etapes { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gouttiere); }
.etape { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--gouttiere); border-radius: var(--rayon); background: var(--nuage); color: var(--encre); overflow: hidden; }   /* sous-grille : en-têtes, visuels et phrases alignés d'une carte à l'autre */
.etape__tete { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 0; }
.etape__col { padding: 0 22px; display: flex; flex-direction: column; gap: 6px; }
.etape__col + .etape__col { border-left: 1px solid var(--trait); }
.etape__etiquette { margin: 0; font: 700 12px / 1.2 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ciel-texte); }
.sans-coupure { white-space: nowrap; }
.etape__etiquette--recois { color: var(--encre-douce); }
.etape__nom { margin: 0; font: 700 17px / 1.25 var(--police-texte); color: var(--encre); }
.etape__visuel {
  --visuel-h: 340px;
  position: relative; height: var(--visuel-h); overflow: hidden; container-type: inline-size;
  background: linear-gradient(180deg, var(--ciel-carte-haut) 0%, var(--nuage) 100%);   /* exception 8 */
}
.etape__texte { margin: 0; padding: 16px 22px 22px; font-size: 16px; line-height: 1.45; color: var(--encre-douce); }
.etapes__note { margin: 4px auto 0; max-width: 640px; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--encre); }   /* encre : posée sur le bas clair du ciel */

/* Étape 1 : deux vraies pages du brief de Voxen, posées à plat l'une sur l'autre (elles s'écartent au survol) */
.feuille { position: absolute; height: auto; border-radius: var(--rayon); }
.feuille--fond { left: 8%; top: 26px; width: 52%; border: 1px solid var(--trait); }   /* la page 2 derrière, à gauche : son titre reste lisible */
.feuille--devant { left: 46%; top: 62px; width: 47%; }                                  /* la couverture devant, à droite */

/* Étape 2 : la fenêtre Figma (barre d'outils, calques à gauche) ; le canevas laisse voir le ciel de la carte */
.figma {
  position: absolute; inset: 18px 18px 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--trait); border-bottom: 0; border-radius: var(--rayon) var(--rayon) 0 0;
  --f-l: clamp(66px, 18.5cqw, 98px); --f-ecart: clamp(12px, 3.4cqw, 18px);   /* largeur des écrans posés sur le canevas */
}
.figma__barre {
  flex: none; height: 34px; padding: 0 10px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  background: var(--figma-barre); color: var(--nuage); font: 600 11px / 1 var(--police-texte); white-space: nowrap;
}
.figma__outils { display: flex; align-items: center; gap: 9px; }
.figma__outils svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.figma__outils svg .plein { fill: currentColor; stroke: none; }
.figma__partager { justify-self: end; padding: 5px 8px; border-radius: 3px; background: var(--selection-figma); }
.figma__corps { flex: 1; min-height: 0; display: flex; }
.figma__calques {
  flex: none; width: 31%; padding: 8px 0; overflow: hidden; background: var(--nuage); border-right: 1px solid var(--trait);
  font: 500 11px / 1 var(--police-texte); color: var(--encre-douce);
}
.figma__titre { margin: 6px 12px 4px; font-weight: 700; color: var(--encre); }
.figma__titre + .figma__ligne--page { margin-bottom: 8px; }
.figma__ligne { margin: 0; height: 24px; padding: 0 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.figma__ligne--page { color: var(--encre); font-weight: 600; }
.figma__ligne--choisi { background: var(--etiquette-fond); color: var(--ciel-texte); font-weight: 600; }
.figma__diese { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.figma__canevas { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.figma__rangee { position: absolute; top: 30px; left: calc(50% - 2.5 * var(--f-l) - 2 * var(--f-ecart)); display: flex; gap: var(--f-ecart); }   /* l'écran choisi, au milieu du canevas */
.figma__cadre { position: relative; flex: none; width: var(--f-l); margin: 0; }
.figma__cadre img { display: block; width: 100%; height: auto; }
.figma__cadre figcaption { position: absolute; left: 0; bottom: 100%; margin-bottom: 5px; font: 500 10px / 1 var(--police-texte); color: var(--encre-douce); white-space: nowrap; }
.figma__cadre--choisi figcaption { color: var(--ciel-texte); font-weight: 600; }
.figma__selection { position: absolute; inset: -4px; border: 2px solid var(--selection-figma); pointer-events: none; }
.figma__selection i { position: absolute; width: 8px; height: 8px; background: var(--nuage); border: 2px solid var(--selection-figma); }
.figma__selection i:nth-of-type(1) { left: -5px; top: -5px; }
.figma__selection i:nth-of-type(2) { right: -5px; top: -5px; }
.figma__selection i:nth-of-type(3) { left: -5px; bottom: -5px; }
.figma__selection i:nth-of-type(4) { right: -5px; bottom: -5px; }
.figma__taille {
  padding: 3px 6px; border-radius: 3px; background: var(--selection-figma); color: var(--nuage);
  font: 600 11px / 1.2 var(--police-texte); white-space: nowrap;
}
.figma__selection .figma__taille { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); }   /* sous la sélection, comme sur Figma */

/* Étape 3 : l'écran sur Figma (cadre de 430 × 932) et le même écran dans l'app, sur le téléphone */
.etape__visuel--construction {
  display: flex; justify-content: center; align-items: flex-start; padding-top: 26px;
  /* le téléphone est réglé sur la hauteur du visuel : on voit le haut de l'écran, pas le classement de démonstration du bas */
  --construction-l: min(calc((var(--visuel-h) - 52px) / 0.74 / 2.034), calc((100cqw - 72px) / 1.938));
}
.construction { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.construction--figma { width: calc(var(--construction-l) * 0.938); margin-top: calc(var(--construction-l) * 0.031); }   /* même taille que l'écran du téléphone */
.construction__nom { height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 11px / 1 var(--police-texte); color: var(--ciel-texte); white-space: nowrap; }
.construction--app .construction__nom { margin-bottom: calc(var(--construction-l) * -0.031); padding-left: calc(var(--construction-l) * 0.031); }
.construction__cadre { position: relative; }
.construction__cadre img { display: block; width: 100%; height: auto; }
.construction__fleche { flex: none; width: 24px; height: 24px; margin: 120px clamp(8px, 3cqw, 20px) 0; fill: none; stroke: var(--ciel-texte); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.badge-mesure {
  position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap; max-width: calc(100% - 24px);
  border-radius: var(--rayon); background: var(--nuage); color: var(--encre); font: 600 14px / 1 var(--police-texte);
}
.badge-mesure svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--statut-pret); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Étape 4 : la vraie fiche App Store de BOOXS (icône, nom, notes, puis les aperçus) */
.store {
  position: absolute; inset: 18px 18px 0; padding: 16px 16px 0; overflow: hidden;
  border: 1px solid var(--trait); border-bottom: 0; border-radius: var(--rayon) var(--rayon) 0 0;
  background: var(--nuage); color: var(--encre);
}
.store__tete { display: flex; align-items: flex-start; gap: 12px; }
.store__icone { flex: none; width: 58px; height: 58px; border-radius: 13px; outline: 1px solid var(--trait); outline-offset: -1px; }   /* coins d'une icône iOS */
.store__titres { min-width: 0; }
.store__nom { margin: 0; font: 700 16px / 1.2 var(--police-texte); }
.store__accroche { margin: 2px 0 0; font-size: 13px; line-height: 1.2; color: var(--encre-douce); }
.store__obtenir { margin: 7px 0 0; display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.15; color: var(--encre-douce); }
.store__obtenir b {
  display: inline-grid; place-items: center; height: 24px; padding: 0 14px; border-radius: 12px;   /* le bouton d'Apple (exception 12) */
  background: var(--ciel); color: var(--nuage); font: 700 12px / 1 var(--police-texte); letter-spacing: 0.04em; text-transform: uppercase;
}
.store__infos { margin: 12px -16px 0; padding: 9px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.store__infos > div { text-align: center; }
.store__infos > div + div { border-left: 1px solid var(--trait); }
.store__infos dt { font: 600 9px / 1 var(--police-texte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-douce); }
.store__infos dd { margin: 5px 0 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.store__infos dd b { height: 17px; display: flex; align-items: center; font: 700 17px / 1 var(--police-texte); color: var(--encre-douce); }
.store__infos dd span { font-size: 10px; line-height: 1; color: var(--encre-douce); }
.store__etoiles { display: flex; gap: 1px; }
.store__etoiles svg { width: 9px; height: 9px; fill: var(--encre-douce); }
.store__livre { width: 20px; height: 17px; fill: none; stroke: var(--encre-douce); stroke-width: 2; stroke-linejoin: round; }
.store__apercu { margin: 11px 0 8px; font: 700 15px / 1 var(--police-texte); }
.store__captures { display: flex; gap: 8px; }
.store__captures img { display: block; width: calc(50% - 4px); height: auto; border-radius: var(--rayon); }

/* La montgolfière déborde du cadre (WANDR) */
.deco-montgolfiere { position: absolute; z-index: 3; pointer-events: none; }   /* devant : elle déborde du cadre, comme dans WANDR */
.deco-montgolfiere svg { display: block; width: 100%; height: auto; }
.deco-montgolfiere--etapes { width: clamp(90px, 10vw, 150px); right: -36px; top: 230px; transform: rotate(6deg); }
.deco-montgolfiere--appel { width: clamp(70px, 8vw, 120px); left: 7%; top: 30%; transform: rotate(-7deg); }

/* ---------- NOS APPS ---------- */
/* ---------- RÉALISATIONS : les six cartes ----------
   06/10, 3e lot : essayées un moment en bulles rondes (mauvaise lecture d'une demande de Yoann), elles sont revenues
   telles quelles. Ce qu'il voulait d'Off Menu, c'est seulement l'animation du CLIC : la carte grandit et devient la
   page (le nom « ouverture » est posé en CSS sur .e-hero). Rien au survol : « quand on passe dessus, ça ne fait rien » (06/10). */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.app { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--nuage); }
/* Chaque carte porte la couleur de son app : un voile de sa teinte derrière le haut, son étiquette et son lien
   dans cette teinte, et son trait qui s'allume au survol. 07/10 (Yoann) : « il faudrait quand même garder les
   couleurs en rapport avec Talkana, Books, etc. […] ce qu'il y a au-dessus ne rend pas très bien. » */
.app__tete { padding: 22px 22px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--app) 16%, var(--nuage)), var(--nuage) 84%); }
.app__haut { margin: 0 0 10px; }
.app__categorie { font: 700 12px / 1 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--app-texte); }
.app__nom { margin: 0; font: 600 28px / 1.05 var(--police-titre); text-transform: uppercase; color: var(--encre); }
.app__texte { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--encre-douce); }
/* 06/10 soir (Yoann) : la carte montre DÉJÀ le décor de l'app, le même qu'en grand dans son étude de cas.
   « Comme ça, quand on clique dessus, les visuels qui s'affichent en grand écran seront incroyables. » */
/* Le visuel de la carte EST la photo de l'étude de cas, cadrée serré sur l'appareil (univers-mobile.webp).
   06/10 au soir, Yoann : « il faudrait que, même sur la page d'avant où on voit les six visuels d'un coup, ils
   soient déjà bien propres. Comme ça, quand on clique dessus, les visuels qui s'affichent en grand écran
   corréleront parfaitement avec le téléphone. » La carte et la hero montrent donc la même photo, au même
   téléphone, au même écran : seul le cadrage change. */
.app__visuel { position: relative; flex: 1 0 400px; overflow: hidden; background: var(--app); }
.app__univers { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* toute la carte se clique (le lien s'étend dessus) et ouvre l'étude de cas */
.app--etude { position: relative; }
.app__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 15px / 1 var(--police-texte); color: var(--app-texte); text-decoration: none; }
.app { transition: border-color 220ms var(--douce); }
.app:hover { border-color: color-mix(in srgb, var(--app-texte) 55%, var(--trait)); }
.app__lien svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app__lien::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--rayon); }
.app__lien:focus-visible { outline: none; }
.app__lien:focus-visible::after { outline: 3px solid var(--mandarine); outline-offset: 3px; }

/* ---------- APPEL FINAL ---------- */
.appel { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* le titre ne se coupe pas n'importe où : le navigateur équilibre ses lignes (06/10 soir) */
.appel__titre { text-wrap: balance; max-width: 16em; }
.appel__texte { margin-bottom: clamp(26px, 3vw, 40px); max-width: 44em; }

/* ---------- PRENDRE RENDEZ-VOUS : l'agenda Cal.com (06/10) ----------
   L'agenda est une fenêtre servie par cal.com : on peut lui passer nos couleurs (js/rendezvous.js lui donne --ciel,
   --encre et --trait), mais PAS notre police — un site ne peut pas imposer sa typographie à une page d'un autre
   domaine. Tout ce qui est autour (titre, phrase, cadre, lien de secours) est à nous.
   06/10 soir : il n'a plus de section à lui, il est DANS l'appel final, posé sur le ciel (demande de Yoann).
   La hauteur minimale évite que la page saute quand l'agenda arrive. */
.agenda {
  width: 100%; min-height: 620px; margin: 0 auto; max-width: 980px;
  border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--nuage);
}
.agenda > * { width: 100%; }
/* Tant que l'agenda arrive, le cadre n'est pas un rectangle gris posé sur le ciel : il reste blanc, avec son trait,
   et trois points qui respirent au milieu. 07/10 (Yoann) : « le rectangle que t'as mis en dessous il est gris : y'a
   pas le cal ». */
.agenda::before {
  content: ""; display: block; width: 8px; height: 8px; margin: 300px auto; border-radius: 50%;
  background: var(--ciel); box-shadow: -16px 0 var(--ciel), 16px 0 var(--ciel); opacity: 0.55;
}
.agenda--charge::before, .agenda--vide::before { display: none; }
.agenda--vide { min-height: 0; border: 0; background: none; }
.agenda__secours { margin: 18px 0 0; text-align: center; }

/* ---------- PIED DE PAGE ---------- */
.pied { background: var(--nuage); color: var(--encre); padding: 36px 0 44px; }
.pied__ligne { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pied__logo { display: block; line-height: 0; }
.pied__logo svg { display: block; height: 28px; width: auto; overflow: visible; }   /* overflow : le haut du « S » de Studio n'est plus coupé */
.pied__liens { display: flex; gap: 28px; flex-wrap: wrap; }
.pied__liens a { color: var(--encre); text-decoration: none; font-size: 15px; font-weight: 500; }
.pied__liens a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied__liens a:focus-visible, .pied__logo:focus-visible { outline: 3px solid var(--mandarine); outline-offset: 3px; border-radius: var(--rayon); }
.pied__droits { margin: 0; font-size: 14px; color: var(--encre-douce); }

/* ---------- Mouvement des sections (DESIGN.md « Mouvement ») : rien si « réduire les animations » ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* apparition au défilement (js/apparition.js) */
  .a-apparaitre { opacity: 0; transform: translateY(18px); }
  .a-apparaitre.apparu {
    opacity: 1; transform: none;
    transition: opacity 560ms var(--douce), transform 700ms var(--douce); transition-delay: calc(var(--rang, 0) * 55ms);
  }
  /* 06/10 (Yoann) : plus AUCUNE animation à l'intérieur des 4 étapes. Au survol, leurs visuels de droite
     (les feuilles, la fenêtre Figma, le téléphone, les aperçus App Store) se décalaient : « pas très belles ». */
}

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  :root { --aa-cote-l: 200px; --aa-milieu-l: 260px; }
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deco-montgolfiere--etapes { top: 120px; right: -20px; width: 96px; }
  .deco-montgolfiere--appel { left: 2%; top: 14%; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  :root { --gouttiere: 16px; --aa-milieu-l: min(300px, 78vw); --bordure-h: 80px; }
  .avant-apres__cote { display: none !important; }
  .etapes { grid-template-columns: 1fr; }
  .etape__visuel { --visuel-h: 300px; }
  .etape__col { padding: 0 14px; }
  .etape__etiquette { font-size: 11px; letter-spacing: 0.05em; }
  .figma, .store { inset: 12px 12px 0; }
  .figma__calques { width: 34%; }
  .store { padding: 14px 12px 0; }
  .store__infos { margin-inline: -12px; }
  .store__icone { width: 50px; height: 50px; border-radius: 11px; }
  .store__nom { font-size: 15px; }
  .etape__texte { padding: 14px 16px 18px; }
  .apps { grid-template-columns: 1fr; }
  .agenda { min-height: 560px; }
  .deco-montgolfiere--etapes { right: -22px; top: 104px; width: 64px; }
  .deco-montgolfiere--appel { left: -14px; top: 104px; width: 64px; }
  .pied__ligne { flex-direction: column; align-items: flex-start; }
}

/* ---------- Petits téléphones (380 px et moins) ---------- */
@media (max-width: 380px) {
  .etape__etiquette { letter-spacing: 0.03em; }
  .badge-mesure { font-size: 13px; gap: 6px; padding: 10px 12px; }
  .figma__fichier { display: none; }
  .store__infos dt { letter-spacing: 0.02em; }
}