/* ==========================================================================
   Portfolio — Lucile Cazanave
   Feuille de style unique pour tout le site.
   Les couleurs et polices principales sont regroupées ci-dessous (:root)
   pour pouvoir les changer à un seul endroit.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Design tokens — miroir exact des variables du fichier Figma
     "Portfolio — Design System". Même nom de chaque côté :
     Figma  color/text/primary  →  CSS  --color-text-primary
     Modifier une valeur ici ET dans Figma.
     ------------------------------------------------------------------ */

  /* Primitives (valeurs brutes — à ne pas utiliser directement dans les règles) */
  --palette-neutral-white: #ffffff;
  --palette-neutral-black: #000000;
  --palette-neutral-ink: #1a1b1f;
  --palette-neutral-graphite: #32343a;
  --palette-neutral-graphite-40: #32343a66;
  --palette-neutral-slate-dark: #43464d;
  --palette-neutral-slate: #687181;
  --palette-neutral-gray-500: #999999;
  --palette-neutral-gray-200: #e4e4e4;
  --palette-neutral-gray-100: #eeeff1;
  --palette-neutral-gray-50: #f7f8f9;
  --palette-neutral-black-40: #00000066;
  --palette-red-alert: #c62828;
  --palette-blue-royal: #001b85;
  --palette-blue-navy: #00122f;
  --palette-blue-midnight: #000e24;
  --palette-blue-sky: #e5f0fe;
  --palette-blue-ice: #e1f0fb;
  --palette-purple-lavender: #dadbf8;
  --palette-purple-electric: #2600ff;
  --palette-pink-rose: #ffc0d8;
  --palette-purple-lilac: #b9b0ff;
  --palette-purple-mist: #f6f1fb;
  --palette-purple-periwinkle: #c4c6f2; /* pied de page : lavande un cran plus foncée */
  --palette-sand-cream: #fdeac9;
  --palette-sand-beige: #efdecd;
  --palette-sand-line: #e9dccd;
  --palette-sand-blush: #f4e9e2;
  --palette-peach-light: #ffefe3;
  --palette-green-sage: #c2cec2;
  --palette-green-success: #12b878;
  --palette-sand-ivory: #fff4e6;
  --palette-sand-peach: #ffe7c2;
  --palette-sand-linen: #faf6f0;
  --palette-blue-night: #0b1a36;
  --palette-blue-aqua: #dffaff;
  --palette-bambinets-cream: #fdf7ee;
  --palette-bambinets-pollen: #ffc91f;
  --palette-bambinets-pink: #d81e42;
  --palette-bambinets-pine: #0c766c;
  /* couleurs de catégorie (« Fill ») du design system Les Bambinets : encre foncée dessus, jamais de blanc */
  --palette-bambinets-famille: #ff7ba4;
  --palette-bambinets-animaux: #8be1ef;
  --palette-bambinets-emotions: #cc82ff;
  --palette-bambinets-nature: #6fd394;
  --palette-bambinets-alimentation: #ed6b28;
  --palette-bambinets-activites: #8fa9ff;
  --palette-bambinets-sand: #dcd2be; /* fond de la bande d'écrans (section 08) */
  --palette-yellow-note: #fff3b0;
  --palette-blue-deep: #00142f;
  --palette-blue-app: #3563e0;
  --palette-blue-haze: #bdd2f0;   /* filets sur le bleu ciel */
  --palette-netatmo-imperial-blue: #08247e;
  --palette-netatmo-orange: #ff7c00;
  --palette-netatmo-aerospace-orange: #ff4900;
  --palette-netatmo-light-grey: #d6d5d4;
  --palette-netatmo-beige: #d0b49f;
  --palette-promo-hero-blue-grey: #c9d6e3;
  --palette-promo-french-blue: #2f6fc4;
  --palette-promo-black: #0d0d0f;
  --palette-promo-bf-blue: #16237e;
  --palette-promo-bf-violet: #7a4cd0;
  --palette-promo-bf-pink: #f24fb0;
  --palette-promo-bf-orange: #ff5a36;
  --palette-promo-bf-glow: #f3b4da;
  --palette-cordons-sand: #faf1e6;
  --palette-cordons-sand-deep: #eed7bd;
  --palette-cordons-night: #0e2546;
  --palette-cordons-cobalt: #1a4d8c;
  --palette-cordons-olive: #aab536;
  --palette-cordons-tomato: #c4471e;
  --palette-cordons-lemon: #ffd552;
  --palette-cordons-sky: #d3e6fb;
  --palette-cordons-apricot: #ec925d;
  --palette-cordons-teal: #61aab0;
  --palette-cordons-teal-deep: #1f6469;
  --palette-cordons-mustard: #e9ae1d;
  /* Emoving : nouvelle identité (univers « Violet épuré », 15/10/2026) */
  --palette-emoving-night: #10003d;
  --palette-emoving-violet: #4700df;
  --palette-emoving-lilac: #ede7ff;
  --palette-emoving-mist: #f4f0ff;
  --palette-emoving-apricot: #ffe6d5;
  --palette-emoving-apricot-deep: #ffb88a;
  --palette-neutral-white-70: #ffffffb3;
  --palette-neutral-white-40: #ffffff66;
  --palette-neutral-white-20: #ffffff33;
  --palette-neutral-white-10: #ffffff1a;
  --palette-neutral-white-06: #ffffff0f;
  /* Planche « Colors portfolio » (Figma Ressources, 07/10/2026) : orange du monogramme, crème, sauge, lavande, beige,
     + neutres chauds et nuances d'orange calculées pour le contraste WCAG AA */
  --palette-orange-signature: #e8673f; /* monogramme LC, favicon */
  --palette-orange-burnt: #bf3f17;     /* action : texte blanc dessus 5,3:1 */
  --palette-orange-ember: #9f3413;     /* survol de l'action */
  --palette-orange-apricot: #f5b59c;
  --palette-yellow-sun: #ffd447;       /* autocollants du haut de l'accueil (exploration, 19/10/2026) */
  --palette-turquoise-lagoon: #84d3c6;
  --palette-green-lichen: #bcc4a7;
  --palette-sand-taupe: #e1d4c5;
  --palette-warm-ink: #221e1b;
  --palette-warm-graphite: #3b3531;
  --palette-warm-slate: #4f4843;       /* texte secondaire : AA sur blanc, sur la planche et sur les fonds clairs des projets */
  --palette-warm-gray-500: #7a716b;    /* texte d'exemple des champs : 4,8:1 */
  --palette-warm-gray-400: #8f867f;    /* contour des champs : 3,6:1 */
  --palette-warm-gray-100: #efeae4;
  --palette-warm-ink-70: #221e1bb3;   /* étiquette sur image : texte blanc lisible même sur une photo claire */
  --palette-green-forest: #1e7a4f;
  --palette-sand-greige: #d6ccc2;      /* fond du dégradé vivant (d'après « inspo blur ») */
  --palette-purple-orchid: #c6a9e9;    /* lilas vif du dégradé vivant */     /* message envoyé : texte blanc dessus */

  /* Couleurs sémantiques (à utiliser dans les règles) */
  --color-text-primary: var(--palette-warm-ink);
  --color-text-strong: var(--palette-neutral-black);
  --color-text-inverse: var(--palette-neutral-white);
  --color-text-placeholder: var(--palette-warm-gray-500);
  --color-text-muted: var(--palette-warm-slate);
  --color-bg-page: var(--palette-neutral-white);
  --color-bg-badge: var(--palette-neutral-white-40); /* étiquette « Projet de formation » : blanc voilé, se détache moins (19/10/2026) */
  --color-bg-contact: var(--palette-purple-lavender);
  --color-bg-contact-hover: var(--palette-sand-taupe); /* bandeau contact au survol : se remplit de beige (21/10/2026, choix de Lucile) */
  --color-text-contact-hover: var(--palette-warm-ink);
  --color-action-contact-hover: var(--palette-orange-signature); /* bouton du bandeau au survol, encre dessus (5:1) */
  --color-bg-footer: var(--palette-purple-periwinkle);
  --color-text-footer: var(--palette-warm-ink);
  --color-bg-field: var(--palette-neutral-white);
  --color-bg-nav-hover: var(--palette-sand-linen);
  --color-bg-menu: var(--palette-orange-signature); /* menu Projets plein écran (mode Vivid : encre dessus) */
  --color-bg-next-project: var(--palette-sand-taupe);
  --color-bg-project-nav-hover: var(--palette-sand-linen); /* cartes projet précédent / suivant au survol */
  --color-bg-overlay: var(--palette-neutral-black-40);
  --color-bg-caption-overlay: var(--palette-warm-ink-70); /* légende posée sur un visuel pleine largeur */
  --color-text-on-image: var(--palette-neutral-white);
  --color-border-swatch: var(--palette-neutral-white); /* contour blanc des planches de couleurs */
  --color-bg-swatch: var(--palette-neutral-white);
  --color-device-bezel: var(--palette-neutral-ink); /* bord des téléphones : reste foncé même sur les sections sombres */ /* fond sous les planches de couleurs (blanc aussi sur fond sombre) */
  --color-bg-subtle: var(--palette-sand-linen);
  --color-bg-placeholder: var(--palette-warm-gray-100); /* images manquantes : simple fond gris */
  --color-bg-takeaway: var(--palette-sand-cream);
  --color-bg-annotation: var(--palette-yellow-note);
  --color-action-primary: var(--palette-orange-burnt);
  --color-action-primary-hover: var(--palette-orange-ember);
  --color-text-link: var(--palette-orange-ember); /* liens dans le texte : plus foncé que les boutons, lisible aussi sur les fonds clairs des projets */
  --color-focus-ring: var(--palette-orange-burnt); /* contour de focus clavier */
  --color-accent-signature: var(--palette-orange-signature); /* orange du monogramme : décor uniquement, jamais pour du texte sur blanc */
  --color-border-field: var(--palette-warm-gray-400);
  --color-border-field-focus: var(--palette-warm-ink);
  --color-border-card: var(--palette-sand-line);
  --color-border-image: var(--palette-neutral-gray-500);
  --color-border-strong: var(--palette-warm-ink);
  --color-feedback-success: var(--palette-green-forest);
  --color-feedback-error: var(--palette-red-alert); /* ex. étape d'abandon dans un parcours */
  --color-hero-base: var(--palette-sand-greige);
  --color-hero-blob-orange: var(--palette-orange-signature);
  --color-hero-blob-orchid: var(--palette-purple-orchid);
  --color-hero-blob-lavender: var(--palette-purple-lavender);
  --color-hero-blob-cursor: var(--palette-sand-cream); /* tache claire qui suit la souris : bien visible sur l'orange et le lilas */
  /* Dégradé vivant de la page À propos : même planche, autre dominante (lilas et sauge, touche d'abricot, fond lavande) */
  --color-hero-about-base: var(--palette-purple-lavender);
  --color-hero-about-blob-orchid: var(--palette-purple-orchid);
  --color-hero-about-blob-sage: var(--palette-green-lichen);
  --color-hero-about-blob-apricot: var(--palette-orange-apricot);
  --color-hero-about-blob-cursor: var(--palette-sand-cream);
  /* Accueil (depuis le 19/10/2026) : fond qui change au défilement, orange du monogramme → orchidée → lavande ;
     ruban = calque en mode « Écran » de cette couleur, à 70 %, toujours plus clair que le fond ; bandeau contact orange */
  --color-home-bg-start: var(--palette-orange-signature);
  --color-home-bg-middle: var(--palette-purple-orchid);
  --color-home-bg-end: var(--palette-purple-lavender);
  --color-home-ribbon-screen: var(--palette-orange-signature);
  /* À propos (21/10/2026, choix de Lucile) : même fond qui change au défilement, dans l'autre sens (lavande → orchidée → orange) */
  --color-about-bg-start: var(--palette-purple-lavender);
  --color-about-bg-end: var(--palette-orange-signature);
  /* Cartes en blanc voilé posées sur ce fond (À propos : logos du parcours, outils) : blanc à 40 %, filet blanc à 70 % */
  --color-bg-veil: var(--palette-neutral-white-40);
  --color-border-veil: var(--palette-neutral-white-70);
  /* Autocollants du haut de l'accueil (page de travail /explorations/hero-stickers/) : couleurs ajoutées au design system, encre dessus */
  --color-sticker-yellow: var(--palette-yellow-sun);
  --color-sticker-turquoise: var(--palette-turquoise-lagoon);
  --color-project-rebranding-cream: var(--palette-sand-cream);
  --color-project-rebranding-navy: var(--palette-blue-navy);
  --color-project-rebranding-blush: var(--palette-sand-blush);
  --color-project-rebranding-sky: var(--palette-blue-sky);
  --color-project-rebranding-imperial: var(--palette-netatmo-imperial-blue);
  --color-project-rebranding-orange: var(--palette-netatmo-orange);
  --color-project-rebranding-night: var(--palette-blue-deep);
  --color-project-rebranding-peach: var(--palette-sand-peach);
  --color-project-segmentation-night: var(--palette-blue-deep);
  --color-project-segmentation-orange: var(--palette-netatmo-aerospace-orange);
  --color-project-segmentation-initial: var(--palette-netatmo-light-grey);
  --color-project-segmentation-original: var(--palette-netatmo-beige);
  --color-project-lancement-night: var(--palette-blue-deep);
  --color-project-lancement-beige: var(--palette-netatmo-beige);
  --color-project-lancement-orange: var(--palette-netatmo-orange);
  --color-project-lancement-sky: var(--palette-blue-sky);
  --color-project-lancement-sky-line: var(--palette-blue-haze); /* filets sur le fond sky (le filet beige des cartes s'y voyait mal) */
  --color-project-lancement-app: var(--palette-blue-app); /* bleu de l'app Home + Control (écrans reconstitués), texte blanc dessus 5,2:1 */
  --color-project-lancement-app-bg: var(--palette-neutral-white);      /* écrans de l'app : fond, textes, filets (restent clairs sur fond sombre) */
  --color-project-lancement-app-text: var(--palette-neutral-ink);
  --color-project-lancement-app-text-secondary: var(--palette-warm-graphite);
  --color-project-lancement-app-line: var(--palette-sand-line);
  --color-project-promo-night: var(--palette-blue-deep);
  --color-project-promo-french-blue: var(--palette-promo-french-blue);
  --color-project-promo-black-friday: var(--palette-promo-black);
  /* Black Friday 2026 : lumières vues à travers un verre cannelé, sur fond noir */
  --color-project-promo-bf-blue: var(--palette-promo-bf-blue);
  --color-project-promo-bf-violet: var(--palette-promo-bf-violet);
  --color-project-promo-bf-pink: var(--palette-promo-bf-pink);
  --color-project-promo-bf-orange: var(--palette-promo-bf-orange);
  --color-project-promo-bf-glow: var(--palette-promo-bf-glow);
  /* Cordons Bleus : nouvelle identité « tomate en action » (refonte d'octobre 2026). Emoving : palette provisoire */
  --color-project-cordons-sand: var(--palette-cordons-sand);
  --color-project-cordons-sand-deep: var(--palette-cordons-sand-deep);
  --color-project-cordons-night: var(--palette-cordons-night);
  --color-project-cordons-cobalt: var(--palette-cordons-cobalt);
  --color-project-cordons-olive: var(--palette-cordons-olive);
  --color-project-cordons-tomato: var(--palette-cordons-tomato);
  --color-project-cordons-lemon: var(--palette-cordons-lemon);
  --color-project-cordons-sky: var(--palette-cordons-sky);
  --color-project-cordons-apricot: var(--palette-cordons-apricot); /* couleurs secondaires du design system Cordons Bleus */
  --color-project-cordons-teal: var(--palette-cordons-teal);
  --color-project-cordons-teal-deep: var(--palette-cordons-teal-deep);
  --color-project-cordons-mustard: var(--palette-cordons-mustard);
  --color-project-emoving-night: var(--palette-emoving-night);
  --color-project-emoving-violet: var(--palette-emoving-violet);
  --color-project-emoving-lilac: var(--palette-emoving-lilac);
  --color-project-emoving-mist: var(--palette-emoving-mist);
  --color-project-emoving-apricot: var(--palette-emoving-apricot);
  --color-project-emoving-apricot-deep: var(--palette-emoving-apricot-deep);
  --color-project-segmentation-peach: var(--palette-peach-light);
  --color-project-segmentation-sage: var(--palette-green-sage);
  --color-project-segmentation-ice: var(--palette-blue-ice);
  --color-project-segmentation-slate: var(--palette-neutral-slate);
  --color-project-segmentation-midnight: var(--palette-blue-midnight);
  --color-project-promo-seasons: var(--palette-sand-ivory);
  --color-project-promo-hero: var(--palette-promo-hero-blue-grey); /* fond bleu gris du hero (piste C, choix de Lucile, 14/10/2026 ; avant : vert du mockup « Scene 11 ») */
  --color-project-promo-beige: var(--palette-netatmo-beige); /* fond de la frise du calendrier (Temps forts 02) */
  --color-project-promo-french-days: var(--palette-blue-night);
  --color-project-promo-fathers-day: var(--palette-blue-aqua);
  --color-project-bambinets-cream: var(--palette-bambinets-cream);
  --color-project-bambinets-pollen: var(--palette-bambinets-pollen);
  --color-project-bambinets-pink: var(--palette-bambinets-pink);
  --color-project-bambinets-pine: var(--palette-bambinets-pine);
  --color-project-bambinets-famille: var(--palette-bambinets-famille);
  --color-project-bambinets-animaux: var(--palette-bambinets-animaux);
  --color-project-bambinets-emotions: var(--palette-bambinets-emotions);
  --color-project-bambinets-nature: var(--palette-bambinets-nature);
  --color-project-bambinets-alimentation: var(--palette-bambinets-alimentation);
  --color-project-bambinets-activites: var(--palette-bambinets-activites);
  --color-project-bambinets-sand: var(--palette-bambinets-sand);

  /* Espacements (Figma : Spacing) */
  --space-5: 5px;   --space-8: 8px;    --space-10: 10px;  --space-12: 12px;
  --space-16: 16px;  --space-20: 20px;
  --space-24: 24px; --space-30: 30px;  --space-40: 40px;  --space-48: 48px;
  --space-60: 60px; --space-80: 80px;  --space-100: 100px; --space-140: 140px;

  /* Arrondis (Figma : Radius) */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 40px;

  /* Mise en page (Figma : Layout — modes Desktop / Tablet / Mobile,
     redéfinis plus bas dans les media queries) */
  --gutter: 140px;
  --section-y: 80px;
  --header-x: 50px;
  --header-h: 100px; /* hauteur du menu transparent */

  /* Ombres (Figma : effect styles) */
  --shadow-menu: 0 10px 20px #0000000d;
  --shadow-dropdown: 0 12px 32px #1a1b1f1f;
  --shadow-card: 0 20px 40px -24px #1a1b1f59;
  --shadow-card-hover: 0 30px 50px -24px #1a1b1f73;
  --shadow-card-soft: 0 18px 36px -26px #1a1b1f40; /* survol discret (cartes projet précédent / suivant) */

  /* Polices (Figma : text styles) */
  --font-body: "Montserrat", sans-serif;
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-ui: "Varela", sans-serif;
  /* polices des autocollants de l'accueil (une par badge ; chargées par stickerFonts sur l'accueil seulement) */
  --font-sticker-serif: "Fraunces", serif;
  --font-sticker-italic: "Instrument Serif", serif;
  --font-sticker-mono: "Space Mono", monospace;
  --font-sticker-grotesk: "Space Grotesk", sans-serif;
  --font-sticker-hand: "Caveat", cursive;
}

/* Mode « Dark » (Figma : collection Color, mode Dark) — sections sur fond bleu nuit.
   Ajouter la classe .tone-dark à une section : tous les tokens de couleur basculent. */
.tone-dark, .tone-saturated {
  --color-text-primary: var(--palette-neutral-white);
  --color-text-strong: var(--palette-neutral-white);
  --color-text-inverse: var(--palette-blue-deep);
  --color-text-muted: var(--palette-neutral-white-70);
  --color-text-placeholder: var(--palette-neutral-white-70);
  --color-bg-page: var(--palette-blue-deep);
  --color-bg-badge: var(--palette-blue-deep);
  --color-bg-subtle: var(--palette-neutral-white-06);
  --color-bg-placeholder: var(--palette-neutral-white-10);
  --color-bg-takeaway: var(--palette-neutral-white-06);
  --color-bg-field: var(--palette-neutral-white-06);
  --color-bg-nav-hover: var(--palette-neutral-white-06);
  --color-action-primary: var(--palette-orange-signature);
  --color-action-primary-hover: var(--palette-orange-apricot);
  --color-text-link: var(--palette-orange-signature);
  --color-focus-ring: var(--palette-neutral-white);
  --color-border-card: var(--palette-neutral-white-20);
  --color-border-strong: var(--palette-neutral-white);
  --color-border-field: var(--palette-neutral-white-20);
  --color-border-field-focus: var(--palette-neutral-white);
  --color-border-image: var(--palette-neutral-white-20);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

/* Mode « Saturated » (Figma : collection Color, mode Saturated) : fonds francs moyens (vert sapin, rose, tomate, bleu French Days).
   Comme Dark, mais même le blanc n'y atteint que ~5:1 : texte secondaire, liens et chiffres passent en blanc plein. */
.tone-saturated {
  --color-text-muted: var(--palette-neutral-white);
  --color-text-placeholder: var(--palette-neutral-white);
  --color-action-primary: var(--palette-neutral-white);
  --color-action-primary-hover: var(--palette-purple-lavender);
  --color-text-link: var(--palette-neutral-white);
  --color-focus-ring: var(--palette-neutral-white);
}

/* Mode « Vivid » (Figma : collection Color, mode Vivid) — fond franc clair (ex. orange Netatmo, dégradé vivant) :
   texte foncé, texte secondaire renforcé pour garder un bon contraste. */
.tone-vivid {
  --color-text-muted: var(--palette-warm-ink); /* le graphite n'atteint que 3,6:1 sur les oranges francs */
  --color-text-placeholder: var(--palette-warm-ink);
  --color-action-primary: var(--palette-warm-ink);
  --color-action-primary-hover: var(--palette-warm-graphite);
  --color-text-link: var(--palette-warm-ink);
  --color-focus-ring: var(--palette-warm-ink);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 28px;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Typographie ---------- */

.heading-jumbo {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 80px;
  margin: 10px 0 0;
}

.heading-section {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
}

.subtitle {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 10px;
}

.text-lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text-strong);
  margin: 0 0 5px;
}

.label {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .6;
}

/* ---------- Navigation ---------- */

/* Menu transparent, posé sur le visuel du haut de chaque page (choix de Lucile, 07/10/2026).
   --header-h = sa hauteur : l'accueil et l'À propos la rajoutent en haut de leur dégradé. */
.site-header {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--header-x);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
}
/* Couleur du menu choisie page par page selon le visuel du haut (pas de voile) : encre par défaut, blanc
   (« light ») quand c'est plus lisible. Réglage `heroHeader` / `heroHeaderMobile` dans cases/<projet>.json,
   choisi en mesurant le contraste derrière le logo et les liens (au moins 4,5:1). */
@media (min-width: 768px) and (orientation: landscape) {
  .site-header--d-light { color: var(--color-text-on-image); } .site-header--d-light .site-logo img { filter: brightness(0) invert(1); }
  .site-header--d-dark { color: var(--color-text-strong); } .site-header--d-dark .site-logo img { filter: brightness(0); }
}
@media (max-width: 767px), (orientation: portrait) {
  .site-header--m-light { color: var(--color-text-on-image); } .site-header--m-light .site-logo img { filter: brightness(0) invert(1); }
  .site-header--m-dark { color: var(--color-text-strong); } .site-header--m-dark .site-logo img { filter: brightness(0); }
}

.site-logo { display: block; transition: opacity .2s; }
.site-logo:hover { opacity: .8; }
.site-logo img { width: 240px; }

.site-nav { display: flex; align-items: center; gap: 0; }

/* Liens du menu (et bouton « Works ») */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-10) var(--space-20);
  opacity: .7; /* encre à 70 % : 6:1 sur blanc (AA) */
  transition: opacity .2s, background-color .3s;
}
.nav-link:hover, .nav-projects[aria-expanded="true"] { opacity: .9; }
.nav-link[aria-current="page"], .nav-link.is-current { opacity: 1; font-weight: 600; }

/* Sélecteur de langue EN / FR (Figma : Language Switch) */
.lang-switch { display: flex; align-items: center; margin-left: var(--space-10); }
.lang-switch .nav-link { padding-left: var(--space-5); padding-right: var(--space-5); }
.lang-switch .nav-link[aria-current="true"] { opacity: 1; font-weight: 600; }
.lang-switch__sep { font-size: 12px; opacity: .3; }
/* Bouton « CV ↓ » du menu (Figma : Header ; repris de la proposition 2 de /explorations/accueil-3/) : pastille au contour
   de la couleur du menu (encre, ou blanc sur les visuels sombres), même police que les liens */
.header-cta {
  margin-left: var(--space-16);
  padding: var(--space-5) var(--space-16);
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  color: inherit;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s;
}
.header-cta:hover { opacity: .7; }

/* Menu Projets plein écran (Figma : Nav Dropdown, Variant=Desktop / Mobile ; piste D, choix de Lucile, 16/10/2026) :
   rideau orange du monogramme en mode Vivid (encre dessus, 5:1), titres numérotés en grand, aperçu du projet survolé,
   croix pour fermer sans choisir. Le rideau descend du haut, les titres arrivent en cascade (main.js : « Menu Projets »). */
.nav-dropdown__caret { width: 8px; height: 8px; transition: transform .2s; }
.nav-projects[aria-expanded="true"] .nav-dropdown__caret { transform: rotate(180deg); }

.projects-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto 1fr;
  column-gap: var(--space-60);
  padding: 0 var(--header-x) var(--space-48);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg-menu);
  color: var(--color-text-primary);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s;
}
.projects-menu.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
.menu-locked { overflow: hidden; }

/* barre du haut : logo et liens au même endroit que dans l'en-tête, croix au bout */
.projects-menu__bar { grid-column: 1 / -1; display: flex; align-items: center; padding: 30px 0; }
.projects-menu__logo img { filter: brightness(0); }
.projects-menu__links { display: flex; align-items: center; margin-left: auto; }
.projects-menu__links .nav-link { opacity: 1; } /* encre pleine : 5:1 sur l'orange */
.projects-menu__here { cursor: default; }
.projects-menu__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-left: var(--space-16);
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .3s;
}
.projects-menu__close svg { width: 22px; height: 22px; }
@media (hover: hover) { .projects-menu__close:hover { background: var(--color-text-primary); color: var(--color-bg-menu); transform: rotate(90deg); } }

.projects-menu__list { align-self: center; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.projects-menu__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-5) 0;
  color: inherit;
  text-decoration: none;
  transition: transform .3s;
}
.projects-menu__num { flex: none; width: 2.2em; font-family: var(--font-ui); font-size: 13px; line-height: 20px; letter-spacing: 1px; }
.projects-menu__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vh, 54px);
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 600;
  transition: opacity .25s;
}
/* souris : le projet survolé ressort, les autres passent à 70 % d'encre (3,3:1 sur l'orange, grand texte) ; tactile : tous en encre pleine */
@media (hover: hover) {
  .projects-menu__title { opacity: .7; }
  .projects-menu__item.is-active { transform: translateX(var(--space-10)); }
  .projects-menu__item.is-active .projects-menu__title { opacity: 1; }
}
.projects-menu__item[aria-current="page"] .projects-menu__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
/* projet dont la page n'est pas encore en ligne : visible, mais pas cliquable */
.projects-menu__item--soon { opacity: .5; cursor: default; }

.projects-menu__preview { align-self: center; display: flex; flex-direction: column; gap: var(--space-8); }
.projects-menu__preview img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.projects-menu__cat { margin: var(--space-8) 0 0; font-family: var(--font-ui); font-size: 12px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; }
.projects-menu__hook { margin: 0; font-size: 16px; line-height: 26px; }

/* entrée : titres en cascade, puis l'aperçu */
.js .projects-menu li, .js .projects-menu__preview { opacity: 0; transform: translateY(24px); }
.js .projects-menu.is-open li, .js .projects-menu.is-open .projects-menu__preview {
  opacity: 1; transform: none;
  transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(.25s + var(--i, 7) * .05s);
}
@media (prefers-reduced-motion: reduce) {
  .projects-menu, .projects-menu.is-open { clip-path: none; transition: none; }
  .js .projects-menu li, .js .projects-menu__preview { opacity: 1; transform: none; transition: none !important; }
  .projects-menu__item, .projects-menu__close { transition: none; }
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
  transition: transform .3s, opacity .3s;
}

/* ---------- Fond « dégradé vivant » (Figma : Living Background) ----------
   Taches de couleur floues qui dérivent lentement + grain ; une tache suit le curseur
   (main.js). Utilisé sur l'accueil et la page About. */

.living-bg { position: relative; overflow: hidden; isolation: isolate; background: var(--blob-base, var(--color-hero-base)); }
.living-bg__blobs { position: absolute; inset: -20%; z-index: -2; filter: blur(80px); pointer-events: none; }
.living-bg__blob { position: absolute; border-radius: 50%; opacity: .9; } /* couleurs franches, sans fondu « multiply » (d'après « inspo blur ») */
.living-bg__blob:nth-child(1) { width: 55vw; height: 55vw; left: 5%; top: 10%; background: var(--blob-1, var(--color-hero-blob-orange)); animation: living-1 28s ease-in-out infinite alternate; }
.living-bg__blob:nth-child(2) { width: 45vw; height: 45vw; right: 5%; top: 5%; background: var(--blob-2, var(--color-hero-blob-orchid)); animation: living-2 32s ease-in-out infinite alternate; }
.living-bg__blob:nth-child(3) { width: 40vw; height: 40vw; left: 35%; bottom: 0; background: var(--blob-3, var(--color-hero-blob-lavender)); animation: living-3 30s ease-in-out infinite alternate; }
.living-bg__blob--cursor { width: 32vw; height: 32vw; left: 50%; top: 50%; background: var(--blob-cursor, var(--color-hero-blob-cursor)); opacity: .95; transform: translate(-50%, -50%); }
/* parallaxe : chaque tache s'écarte du curseur à sa vitesse (propriété translate, cumulée avec l'animation de dérive) */
.living-bg__blob:nth-child(1) { translate: calc(var(--mx, 0) * -22vw) calc(var(--my, 0) * -22vh); }
.living-bg__blob:nth-child(2) { translate: calc(var(--mx, 0) * 26vw) calc(var(--my, 0) * 20vh); }
.living-bg__blob:nth-child(3) { translate: calc(var(--mx, 0) * -14vw) calc(var(--my, 0) * 28vh); }
/* Variante À propos (Figma : Living Background, Page=À propos) : autres couleurs, taches placées en miroir de l'accueil */
.living-bg--about { --blob-base: var(--color-hero-about-base); --blob-1: var(--color-hero-about-blob-orchid); --blob-2: var(--color-hero-about-blob-sage);
  --blob-3: var(--color-hero-about-blob-apricot); --blob-cursor: var(--color-hero-about-blob-cursor); }
.living-bg--about .living-bg__blob:nth-child(1) { left: auto; right: 0; top: 15%; }
.living-bg--about .living-bg__blob:nth-child(2) { right: auto; left: 0; top: 0; }
.living-bg--about .living-bg__blob:nth-child(3) { left: 45%; bottom: -10%; }
@keyframes living-1 { to { transform: translate(10vw, 6vh) scale(1.12); } }
@keyframes living-2 { to { transform: translate(-8vw, 12vh) scale(.92); } }
@keyframes living-3 { to { transform: translate(-6vw, -10vh) scale(1.15); } }
.living-bg__grain {
  position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Accueil ---------- */

.home-hero { padding: var(--section-y) var(--gutter) var(--space-100); }

.home-intro .eyebrow {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}
.home-title { font-size: clamp(38px, 5vw, 80px); line-height: 1.06; margin-top: var(--space-10); }

/* Titre révélé ligne par ligne + mots-clés surlignés (main.js ajoute .is-played) */
.title-line { display: block; overflow: hidden; padding-bottom: .06em; }
.title-line > span { display: inline-block; }
.highlight { position: relative; white-space: nowrap; }
.highlight::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .22em; z-index: -1;
  background: linear-gradient(90deg, var(--color-hero-blob-orange), var(--color-hero-blob-orchid));
}
.js .reveal-title .title-line > span { transform: translateY(110%); }
.js .reveal-title .highlight::after { transform: scaleX(0); transform-origin: left; }
.js .reveal-title .eyebrow, .js .reveal-title .work-card { opacity: 0; transform: translateY(40px); }
.js .reveal-title .eyebrow { transform: none; }
.js .reveal-title.is-played .title-line > span { animation: title-up 1s cubic-bezier(.2,.75,.1,1) forwards; }
.js .reveal-title.is-played .highlight::after { animation: title-draw .9s cubic-bezier(.6,0,.2,1) .9s forwards; }
.js .reveal-title.is-played .eyebrow { animation: title-fade .8s ease forwards; }
.js .reveal-title.is-played .work-card { animation: title-rise 1.1s cubic-bezier(.2,.75,.1,1) forwards; }
@keyframes title-up { to { transform: none; } }
@keyframes title-draw { to { transform: scaleX(1); } }
@keyframes title-fade { to { opacity: 1; } }
@keyframes title-rise { to { opacity: 1; transform: none; } }

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);
}

.work-card { text-decoration: none; display: block; }

.work-card__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .6s cubic-bezier(.2,.75,.1,1), box-shadow .6s;
}
.work-card__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.75,.1,1);
}
.work-card:hover .work-card__image { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }
.work-card:hover .work-card__image img { transform: scale(1.05); }

.work-card__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: var(--space-10);
  margin-top: var(--space-16);
  font-size: 18px;
  line-height: 28px;
}
.work-card__title small { font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; opacity: .6; }

/* ---------- Contact ---------- */

.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  row-gap: 10px;
}
.contact-form__full { grid-column: 1 / -1; }

.contact-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.text-field {
  display: block;
  width: 100%;
  border: 1px solid var(--color-border-field);
  border-radius: 0;
  background: var(--color-bg-page);
  margin-bottom: var(--space-20);
  padding: var(--space-8) var(--space-20);
  font: inherit;
  font-size: 14px;
  line-height: 26px;
  transition: border-color .4s;
}
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.text-field:focus { outline: none; border-color: var(--color-border-field-focus); }
.text-field::placeholder { color: var(--color-text-placeholder); }
textarea.text-field { height: 200px; padding-top: 12px; resize: vertical; }

.button {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-24);
  font: inherit;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .4s;
}
.button:hover { background: var(--color-action-primary-hover); }
/* Bouton secondaire : contour, sans fond (Figma : Button, Style=Secondary) */
.button--secondary {
  background: transparent;
  color: var(--color-action-primary);
  box-shadow: inset 0 0 0 1px var(--color-action-primary);
}
.button--secondary:hover { background: var(--color-bg-subtle); }
/* Lien externe (Visiter le site, Voir le prototype) : flèche en diagonale = nouvel onglet ; elle monte un peu au survol */
.button--external { display: inline-flex; align-items: center; gap: var(--space-8); }
.button__ext { flex: none; transition: translate .3s; }
.button--external:hover .button__ext { translate: 2px -2px; }

.form-status {
  margin-top: 20px;
  padding: 9px 30px;
  text-align: center;
  font-size: 14px;
  line-height: 26px;
  color: var(--color-text-inverse);
  background: var(--color-feedback-success);
}

/* ---------- Bandeau contact (Figma : Contact Band) ---------- */
/* Depuis le 21/10/2026 (proposition D, choix de Lucile) : sans fond, contour encre arrondi, sur le fond de la page (blanc sur les projets,
   fond qui change au défilement sur l'accueil et À propos) ; bloc en mode Vivid (bouton encre) pour être le même partout. */

.contact-band-section { padding: var(--section-y) var(--gutter); }
.contact-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-48) var(--space-60);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.contact-band h2 {   /* Figma : Display/Jumbo Tablet */
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 50px;
}
.contact-band p { max-width: 60ch; margin: var(--space-5) 0 0; }
/* Au survol (21/10/2026, demande de Lucile) : tout le bloc est cliquable (le lien du bouton le recouvre), il se remplit de beige depuis la
   gauche (contour encre gardé), texte en encre, bouton orange du monogramme (encre dessus) et flèche qui avance ; même effet au clavier quand le bouton a le focus. */
.contact-band { position: relative; isolation: isolate; overflow: hidden; transition: color .45s, border-color .45s; }
.contact-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-bg-contact-hover);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.contact-band .button { display: inline-flex; align-items: center; gap: var(--space-8); transition: background-color .45s, color .45s; }
.contact-band .button::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.contact-band__arrow { flex: none; transition: translate .45s cubic-bezier(.3, 1.4, .5, 1); }
.contact-band:is(:hover, :has(.button:focus-visible)) {
  color: var(--color-text-contact-hover);
}
.contact-band:is(:hover, :has(.button:focus-visible))::before { transform: scaleX(1); transition-delay: 0s; }
/* le bouton change quand le beige l'atteint */
.contact-band:is(:hover, :has(.button:focus-visible)) { transition-delay: .12s; }
.contact-band:is(:hover, :has(.button:focus-visible)) .button { background: var(--color-action-contact-hover); color: var(--color-text-primary); transition-delay: .3s; }
.contact-band:is(:hover, :has(.button:focus-visible)) .contact-band__arrow { translate: 5px 0; }
@media (prefers-reduced-motion: reduce) { .contact-band::before, .contact-band__arrow { transition: none; } }

/* ---------- Pied de page ---------- */

/* Logo et métier, puis 3 colonnes de raccourcis (Le site, Projets, Contact), et une ligne de bas de page (©, langue) ; 21/10/2026, demande de Lucile */
.site-footer { padding: var(--space-80) var(--gutter) var(--space-30); background: var(--color-bg-footer); color: var(--color-text-footer); }
.site-footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1.3fr 1.2fr; gap: var(--space-40); }
.site-footer__logo { display: inline-block; }
.site-footer__logo img { display: block; width: 220px; height: auto; }
.site-footer__tagline { margin: var(--space-16) 0 0; font-size: 14px; line-height: 24px; color: var(--color-text-muted); }   /* Figma : Body/Small */
.site-footer__title { margin: 0 0 var(--space-16); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }   /* Figma : Label/Tag */
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.site-footer a { font: inherit; font-size: 14px; line-height: 24px; color: inherit; text-decoration: none; text-underline-offset: 4px; }   /* Figma : Body/Small */
.site-footer a:hover, .site-footer a[aria-current="page"] { text-decoration: underline; }
.site-footer__soon { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin-top: var(--space-60); padding-top: var(--space-20); border-top: 1px solid color-mix(in srgb, var(--color-text-footer) 25%, transparent); font-size: 12px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; }   /* Figma : Label/Footer */
.site-footer__bottom p { margin: 0; }
.site-footer__bottom .lang-switch { display: flex; gap: var(--space-8); }
.site-footer__bottom .lang-switch a { font-size: 12px; line-height: 20px; }
.site-footer__bottom .lang-switch a[aria-current="true"] { font-weight: 700; text-decoration: none; }

/* ---------- À propos ---------- */

.about-hero {
  padding: 100px var(--gutter);
}

.about-intro {
  display: grid;
  grid-template-columns: 1.5fr .5fr;
  gap: 80px;
  align-items: center;
  padding: 100px;
  background: #ffffffa8;
  border-radius: var(--radius-md);
}
.about-intro__text { padding-right: 80px; }
.about-intro__text .label { color: var(--color-text-strong); margin-bottom: 10px; }
.about-intro__text p { margin: 0; font-size: 20px; font-weight: 500; line-height: 32px; color: var(--color-text-strong); }
.about-intro__text .heading-jumbo { margin-bottom: 0; }
.about-intro img { border-radius: var(--radius-md); width: 100%; }

.cv {
  display: grid;
  grid-template-columns: .25fr 1fr;
  gap: 80px;
  padding: var(--section-y) var(--gutter) 0;
}

.skills { display: grid; gap: 23px; align-content: start; }

.skill-card {
  border: 1px solid var(--color-border-card);
  border-radius: 20px;
  padding: 20px 20px 20px 40px;
}
.skill-card h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
}
.skill-card ul { list-style: none; margin: 10px 0 0; padding: 0; }
.skill-card li { padding-top: 5px; font-size: 14px; line-height: 22px; }

.timeline { padding: 0 20px; }
.timeline h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}
.timeline > h2 + .job { margin-top: 20px; }
.timeline .job + h2 { margin-top: 60px; }
.job + .job { margin-top: 50px; }

.job__date { font-weight: 700; font-size: 16px; }
.job__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  margin: 4px 0 16px;
}
.job ul { padding-left: 16px; margin: 0; }
.job li { margin-bottom: 10px; font-size: 14px; line-height: 24px; }
.job p { margin: 0; font-size: 14px; line-height: 24px; }

/* ---------- Pages projet (communs) ---------- */

.project-hero img { width: 100%; }

.project-intro { padding: var(--section-y) var(--gutter) 40px; }
.project-intro .heading-jumbo { margin-bottom: 40px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}

.section { padding: var(--section-y) var(--gutter); }
.section--flush-top { padding-top: 0; }
.section--flush-x { padding-left: 0; padding-right: 0; }

.img-full { width: 100%; }

.img-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 0 var(--gutter) var(--section-y);
}
.img-pair img { width: 100%; }
.img-pair .framed { border: 1px solid var(--color-border-image); }
.img-pair .rounded { border-radius: var(--radius-md); background: var(--color-bg-page); }

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Lien vers le projet suivant / précédent */
.next-project {
  background: var(--color-bg-next-project);
  padding: 60px 100px;
  display: flex;
  justify-content: center;
}
.next-project a {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 300px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-inverse);
  font-weight: 500;
  line-height: 24px;
  padding-bottom: 16px;
}
.next-project img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.next-project a::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-bg-overlay);
  z-index: -1;
  transition: background-color .3s;
}
.next-project a { isolation: isolate; }
.next-project a:hover::before { background: #00000029; }
.next-project { gap: var(--space-40); flex-wrap: wrap; }

/* ---------- Page Rebranding ---------- */

.page-rebranding { background: var(--color-project-rebranding-cream); }
.page-rebranding .project-intro { background: var(--color-project-rebranding-cream); }

.logo-animation {
  padding-bottom: 80px;
}
.logo-animation video {
  width: 1100px;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  margin: 0 auto;
}

.about-brand {
  background: var(--color-project-rebranding-navy);
  color: var(--color-text-inverse);
  padding: var(--section-y) var(--gutter) 0;
}
.about-brand h2 { margin-bottom: 20px; }
.about-brand__text {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 48px;
  font-family: var(--font-ui);
}
.about-brand img { margin: 0 auto; }

.reb-film { padding: var(--section-y) var(--gutter); }

.logo-story {
  background: var(--color-bg-page);
  padding: var(--section-y) var(--gutter) 40px;
}
.logo-story__body { width: 70%; margin-top: 40px; }

.logo-timeline {
  background: var(--color-project-rebranding-blush);
  padding: 20px var(--gutter);
}

.logo-details {
  background: var(--color-bg-page);
  padding: 0 var(--gutter);
}
.logo-details > img { width: 100%; padding-bottom: 40px; }
.logo-details .two-col { margin-bottom: 40px; }

.bg-white { background: var(--color-bg-page); }
.bg-sky { background: var(--color-project-rebranding-sky); }

.icon-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg-page);
  padding: 80px var(--gutter) 0;
}

/* ---------- Page Segmentation ---------- */

.page-segmentation .project-intro { background: var(--color-project-segmentation-peach); }

.moods {
  background: var(--color-project-segmentation-peach);
  padding: 0 var(--gutter) 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.moods-wrap { background: var(--color-project-segmentation-peach); }

.bg-sage { background: var(--color-project-segmentation-sage); }
.bg-ice { background: var(--color-project-segmentation-ice); padding: 0 80px; }
.bg-slate { background: var(--color-project-segmentation-slate); }


/* ---------- Écran de téléphone ---------- */

/* Figma : Phone Screen. L'écran fait exactement 390 × 855 (rapport des captures, 780 × 1710) ; le bord sombre
   (--phone-bezel) s'ajoute autour : les largeurs données aux .phone sont celles de l'écran (228 px d'écran = 240 px de
   téléphone). Coins ≈ 13 % de la largeur (réglage de Lucile). */
.phone {
  --phone-bezel: 6px;
  display: block;
  box-sizing: content-box;
  width: calc(100% - 2 * var(--phone-bezel));
  aspect-ratio: 390 / 855;
  object-fit: cover;
  object-position: top;
  border-radius: 13% / 5.9%;
  border: var(--phone-bezel) solid var(--color-text-primary);
  background: var(--color-text-primary);
  box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
  .phone { --phone-bezel: 4px; }
}

/* ---------- Animations d'apparition au scroll ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease, transform .9s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .work-card__image, .work-card__image img { transition: none; }
  .living-bg__blob { animation: none; }
  .js .reveal-title .title-line > span, .js .reveal-title .eyebrow, .js .reveal-title .work-card { opacity: 1; transform: none; animation: none !important; }
  .js .reveal-title .highlight::after { transform: none; animation: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette */
@media (max-width: 991px) {
  :root { --gutter: 40px; --section-y: 60px; --header-x: 30px; --header-h: 90px; }

  .site-header { padding: 25px var(--header-x); }
  .menu-toggle { display: block; color: inherit; }
  /* tablette et mobile : le bouton menu ouvre le rideau Projets, qui porte aussi Accueil, À propos et la langue */
  .site-nav { display: none; }
  .projects-menu { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; padding-bottom: var(--space-30); }
  .projects-menu__bar { display: contents; }
  .projects-menu__logo { grid-column: 1; grid-row: 1; align-self: center; padding: 25px 0; }
  .projects-menu__close { grid-column: 2; grid-row: 1; align-self: center; width: 44px; height: 44px; }
  .projects-menu__list { grid-column: 1 / -1; grid-row: 2; padding: var(--space-20) 0; }
  .projects-menu__links { grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; margin: 0; padding-top: var(--space-16); border-top: 1px solid currentColor; }
  .projects-menu__links .nav-link { padding: var(--space-10) var(--space-16) var(--space-10) 0; }
  .projects-menu__here { display: none !important; }
  .projects-menu__links .lang-switch { margin-left: auto; }
  .projects-menu__links .lang-switch .nav-link { padding: var(--space-10) var(--space-5); }
  .projects-menu__links .lang-switch .nav-link:last-child { padding-right: 0; }
  .projects-menu__preview { display: none; }
  .projects-menu__title { font-size: clamp(26px, 4.4vh, 44px); line-height: 1.15; }

  .heading-jumbo { font-size: 40px; line-height: 50px; }
  .text-lead, .about-intro__text p { font-size: 16px; line-height: 26px; }

  .works-grid { grid-template-columns: 1fr 1fr; }


  .about-hero { padding: 60px var(--gutter); }
  .about-intro { grid-template-columns: 1fr; gap: 30px; padding: 40px; }
  .about-intro__text { padding-right: 0; }
  .about-intro img { width: 40%; margin: 0 auto; }
  .cv { gap: 24px; }

  .two-col, .about-brand__text { grid-template-columns: 1fr; gap: 20px; }
  .logo-story__body { width: 100%; }
  .img-pair { gap: 24px; }
  .logo-timeline { padding-left: 0; padding-right: 0; }
  .next-project { padding: 40px; }
  .promo-pair { gap: var(--space-24); }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 40px; --header-x: 20px; --header-h: 72px; }

  .site-header { padding: 20px var(--header-x); }
  .site-logo img { width: 190px; }
  .projects-menu__logo { padding: 20px 0; }
  .projects-menu__title { font-size: clamp(24px, 3.8vh, 32px); }

  .heading-jumbo { font-size: 32px; line-height: 40px; }
  .heading-section { font-size: 24px; line-height: 34px; }
  .home-intro .eyebrow { font-size: 16px; line-height: 26px; }
  .home-title { font-size: 38px; line-height: 1.08; }

  .works-grid { grid-template-columns: 1fr; gap: var(--space-30); }
  .work-card__title { font-size: 16px; }

  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-band { padding: var(--space-40) var(--space-24); }
  .contact-band h2 { font-size: 32px; line-height: 40px; }   /* Figma : Display/Jumbo Mobile */

  .site-footer { padding: var(--space-48) var(--gutter) var(--space-100); } /* en bas, place pour la flèche « retour en haut » */
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-40) var(--space-24); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__logo img { width: 190px; }
  .site-footer__bottom { margin-top: var(--space-40); }

  .about-hero { padding: 0; }
  .about-intro { border-radius: 0; padding: 30px 20px; }
  .about-intro img { width: 70%; order: -1; }
  .cv { grid-template-columns: 1fr; }
  .timeline { padding: 0; }
  .timeline h2 { font-size: 28px; }
  .job__title { font-size: 22px; }

  .img-pair { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .img-pair .framed { border: 0; padding: 0 20px; }
  .img-pair .rounded { border-radius: 8px; }
  .reb-film, .section.video-block { padding: 20px; }
  .logo-animation video { height: 150px; }

  .moods { grid-template-columns: 1fr; padding: 0 0 20px; }
  .bg-ice { padding: 0 8px; }
  .season-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-40); }
  .promo-pair { grid-template-columns: 1fr; }
  .promo-banner { margin-top: var(--space-40); }
}

/* ==========================================================================
   Nouvelles maquettes (septembre 2026) — Accueil et À propos
   Chaque bloc correspond à un composant du fichier Figma (nom indiqué).
   ========================================================================== */

/* Styles de texte Figma */
.display-hero {              /* Display/Hero */
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.text-muted { color: var(--color-text-muted); }

/* ---------- Accueil : en-tête ---------- */
/* Fond qui change au défilement (accueil et À propos, scrollBg: true ; assets/js/ruban.js) : orange → orchidée → lavande
   (couleur posée par le script ; sans script, un dégradé fixe). */
body.scroll-bg { background-color: var(--color-home-bg-start); }
html:not(.js) body.scroll-bg { background-image: linear-gradient(var(--color-home-bg-start), var(--color-home-bg-middle), var(--color-home-bg-end)); }
.scroll-bg .about-principles { background: transparent; }
/* À propos : le fond va dans l'autre sens (lu par ruban.js sur body) */
body.about-page { --color-home-bg-start: var(--color-about-bg-start); --color-home-bg-end: var(--color-about-bg-end); }
/* Accueil, ruban (partials/home-ribbon.njk) : le monogramme devient un ruban qui serpente derrière les vignettes, dessiné sur deux
   canevas fixés à l'écran, l'un derrière le contenu, l'autre devant (coins de vignettes) */
.home-ribbon main, .home-ribbon .site-footer { position: relative; z-index: 1; }
.home-ribbon__canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.home-ribbon__canvas--back { z-index: 0; }
.home-ribbon__canvas--front { z-index: 5; }
.home-ribbon__src { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (min-width: 992px) { .home-ribbon .home-intro { max-width: 56%; } }
@media (max-width: 991px) { .home-ribbon .home-hero { padding-bottom: 300px; } }
@media (max-width: 767px) { .home-ribbon .home-hero { padding-bottom: 230px; } }
/* Accueil : autocollants (partials/home-stickers.njk, stickers: true ; choix de Lucile, 19/10/2026). Texte à gauche, planche d'autocollants
   à droite ; le titre reste sur 2 lignes, donc la planche passe sous le texte quand la place manque (en dessous de 1 360 px de large).
   Chaque autocollant : forme en aplat, tracé encre, découpe crème autour, ombre douce ; une police par badge. */
.home-stickers .title-line { white-space: nowrap; }
.home-stickers .home-hero { display: grid; grid-template-columns: fit-content(800px) minmax(0, 1fr); align-items: center; gap: var(--space-48); padding-right: var(--space-60); }
@media (max-width: 1359px) { .home-stickers .home-hero { grid-template-columns: 1fr; gap: var(--space-30); padding-right: var(--gutter); } }
.home-stickers .sk-board { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: center; }
@media (max-width: 1359px) { .home-stickers .sk-board { max-width: 420px; margin-inline: auto; } }
.home-stickers .sk { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: calc(var(--w) * 1%); height: auto; overflow: visible;
  translate: -50% -50%; rotate: var(--r);
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--color-text-primary) 22%, transparent));
  transition: scale .35s cubic-bezier(.3, 1.5, .5, 1), rotate .35s, filter .35s; }
.home-stickers .sk:hover { scale: 1.07; rotate: calc(var(--r) * .4); z-index: 20; filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--color-text-primary) 28%, transparent)); }
.home-stickers .sk .cut, .home-stickers .sk .cut * { fill: var(--color-bg-takeaway); stroke: var(--color-bg-takeaway); stroke-width: 16; stroke-linejoin: round; }
.home-stickers .sk .ink { stroke: var(--color-text-primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.home-stickers .sk .thin { stroke: var(--color-text-primary); stroke-width: 1.6; }
.home-stickers .sk .t { font-family: var(--font-display); font-weight: 800; fill: var(--color-text-primary); }
.home-stickers .sk .f-serif { font-family: var(--font-sticker-serif); font-weight: 900; }
.home-stickers .sk .f-italic { font-family: var(--font-sticker-italic); font-style: italic; font-weight: 400; }
.home-stickers .sk .f-mono { font-family: var(--font-sticker-mono); font-weight: 400; }
.home-stickers .sk .f-mono--bold { font-weight: 700; }
.home-stickers .sk .f-grotesk { font-family: var(--font-sticker-grotesk); font-weight: 600; }
.home-stickers .sk .f-hand { font-family: var(--font-sticker-hand); font-weight: 700; }
.home-stickers .sk .f-cond { font-family: var(--font-display); font-weight: 800; font-stretch: 75%; }
.home-stickers .sk .b-ink { stroke: var(--color-text-primary); }
.home-stickers .sk .b-orchid { stroke: var(--color-home-bg-middle); }
.home-stickers .sk .c-yellow { fill: var(--color-sticker-yellow); }
.home-stickers .sk .c-turq { fill: var(--color-sticker-turquoise); }
.home-stickers .sk .c-orchid { fill: var(--color-home-bg-middle); }
.home-stickers .sk .c-lav { fill: var(--color-bg-contact); }
.home-stickers .sk .c-peri { fill: var(--color-bg-footer); }
.home-stickers .sk .c-sage { fill: var(--color-hero-about-blob-sage); }
.home-stickers .sk .c-apricot { fill: var(--color-hero-about-blob-apricot); }
.home-stickers .sk .c-cream { fill: var(--color-bg-takeaway); }
.home-stickers .sk .c-white { fill: var(--color-bg-page); }
.home-stickers .sk .c-orange { fill: var(--color-accent-signature); }
.home-stickers .sk .c-ink { fill: var(--color-text-primary); }
/* à l'arrivée, les autocollants se collent un par un */
.js .home-stickers .sk { animation: sk-in .55s cubic-bezier(.3, 1.4, .5, 1) calc(.5s + var(--i) * 90ms) backwards; }
@keyframes sk-in { from { opacity: 0; scale: 1.4; rotate: calc(var(--r) + 14deg); } 60% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .home-stickers .sk { animation: none; } .home-stickers .sk { transition: none; } }
/* Accueil : monogramme en verre et autocollants qui tombent (assets/js/hero-verre.js, glassHero: true + classe home-glass ; choix de Lucile,
   20/10/2026). La planche sert d'emplacement au monogramme : elle n'est visible que si la 3D ne peut pas s'afficher (.is-fallback). */
.home-glass .home-hero { position: relative; }
.home-glass .home-intro { position: relative; z-index: 2; }
.js .home-glass .sk-board:not(.is-fallback) { opacity: 0; pointer-events: none; }
.glass-canvas { position: absolute; z-index: 0; pointer-events: none; }
.glass-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.glass-draw path { fill: none; stroke: var(--color-bg-takeaway); stroke-linecap: round; stroke-linejoin: round; }
.home-hero { padding: calc(var(--header-h) + var(--space-80)) var(--gutter) var(--space-80); }
.home-intro { display: flex; flex-direction: column; gap: var(--space-24); }
.home-intro .eyebrow { font-size: 18px; line-height: 28px; font-weight: 400; }
/* Nom de Lucile en gras dans la phrase d'accroche */
.eyebrow__name { font-weight: 700; color: var(--color-text-strong); }
.home-title { margin-top: 0; }
.home-lead { max-width: 760px; margin: 0; }

/* ---------- Tag (Figma : Tag — Pill = catégorie, Badge = projet de formation) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-5) var(--space-12);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.tag--badge { border-color: var(--color-border-card); background: var(--color-bg-badge); color: var(--color-text-muted); }

/* ---------- Filtres (Figma : Filter Chip) ---------- */
.home-projects { padding: var(--space-40) var(--gutter) var(--space-100); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); margin-bottom: var(--space-30); }
.filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-12); }
/* titre « Projets » à gauche, filtres et nombre de projets alignés à droite en face (choix de Lucile, 19/10/2026) */
.home-projects .filters { justify-content: space-between; }
.filters__title { margin: 0; }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); }
.filter-chip {
  flex: none;
  height: 44px;
  padding: 0 var(--space-24);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;          /* filtre non sélectionné : contour seul (choix de Lucile, 19/10/2026) */
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.filter-chip:hover { background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); }
.filter-chip.is-active { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-inverse); font-weight: 600; }
.filters__count { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }

/* ---------- Grille des projets : 2 colonnes régulières, cartes 4:3, dans l'ordre de projects.json (Figma : Project Card) ---------- */
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-60) var(--space-40); align-items: start; }

.project-card__link { display: flex; flex-direction: column; gap: var(--space-16); text-decoration: none; color: inherit; }
.project-card__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-placeholder);
  aspect-ratio: 4 / 3;
}
.project-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.75,.1,1); }
a.project-card__link:hover .project-card__media:not(.project-card__media--anim) > img { transform: scale(1.04); }
/* Vignette animée (src/_data/vignettes.json) : calques posés sur l'image fixe, invisibles tant qu'ils ne sont pas chargés ; identiques
   à l'image fixe au repos, certains flottent au survol (main.js) */
.project-card__media--anim { position: relative; }
.vignette-anim { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .25s; pointer-events: none; isolation: isolate; }
.vignette-anim.is-ready { opacity: 1; }
.vignette-anim img { position: absolute; display: block; height: auto; max-width: none; }
.vignette-anim img[data-float], .vignette-anim img[data-vol], .vignette-anim img[data-defile], .vignette-groupe { will-change: transform; }
.vignette-groupe { position: absolute; inset: 0; }
/* visuels qui se remplacent en fondu (vignette Temps forts) */
.vignette-diapo { position: absolute; overflow: hidden; isolation: isolate; }
.vignette-anim .vignette-diapo img { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.vignette-anim .vignette-diapo img.is-on { opacity: 1; z-index: 2; }
.vignette-anim .vignette-diapo img.was-on { opacity: 1; z-index: 1; transition: none; }   /* l'ancien reste dessous pendant le fondu */
/* verre dépoli (Figma : flou d'arrière-plan) : floute ce qui passe derrière, même quand ça bouge ; léger voile blanc comme dans Figma */
.vignette-verre { position: absolute; transform-origin: 0 0; background: rgb(255 255 255 / calc(var(--voile, 0) * 100%));
  -webkit-backdrop-filter: blur(calc(var(--k, .4) * var(--flou, 16) * 1px)); backdrop-filter: blur(calc(var(--k, .4) * var(--flou, 16) * 1px)); }
/* écran d'app en perspective (vue en px de l'app, posée sur le cadre 1600 × 1200 par matrix3d, puis mise à l'échelle de la carte : --k posé par main.js) */
.vignette-ecran { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; transform: scale(var(--k, 0)) var(--m); }
.vignette-ecran__video { position: absolute; display: block; object-fit: cover; will-change: transform; }
.vignette-ecran__barre { border-radius: 28px; box-shadow: 0 6px 20px rgb(22 22 29 / 14%); }
.vignette-ecran img[data-plage] { transition: opacity .25s; }
/* calque en densité linéaire (ombre de Figma qui retranche une quantité à tout ce qui est dessous) : inverser, ajouter la quantité,
   ré-inverser donne exactement base - quantité ; sans « plus-lighter », l'ombre est simplement omise */
.vignette-anim__densite { display: none; }
@supports (mix-blend-mode: plus-lighter) {
  .vignette-anim__densite { display: contents; }
  .vignette-anim__densite i { position: absolute; inset: 0; background: #fff; mix-blend-mode: difference; }
  .vignette-anim__densite img { mix-blend-mode: plus-lighter; }
}
.project-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.project-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 34px; }
.project-card__hook { margin: 0; color: var(--color-text-muted); }
.project-card.is-hidden { display: none; }

/* ---------- Ce que j'apporte (Figma : Skill Column) ---------- */
.home-skills { padding: var(--space-60) var(--gutter) var(--space-140); }
.home-skills .heading-section { margin-bottom: var(--space-48); }
.skill-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.skill-column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: var(--space-24); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-bg-page); }
.skill-column__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.skill-column p { margin: 0; }
.skill-column__link { margin-top: auto; font-size: 14px; font-weight: 600; line-height: 24px; color: var(--color-text-link); text-decoration: none; }   /* liens alignés en bas des cartes */
.skill-column__link:hover { text-decoration: underline; }

@media (max-width: 991px) {
  .display-hero { font-size: 64px; }
  .skill-columns { grid-template-columns: 1fr; gap: var(--space-24); }
}

@media (max-width: 767px) {
  .display-hero { font-size: 48px; letter-spacing: -0.01em; }
  .home-stickers .display-hero { font-size: min(48px, 10.2vw); } /* « marque & produit. » tient sur une ligne */
  .home-hero { padding: calc(var(--header-h) + var(--space-48)) var(--gutter) var(--space-40); }
  .home-intro .eyebrow { font-size: 16px; line-height: 26px; }
  /* taches plus grandes sur mobile : sinon le flou les efface et le dégradé paraît pâle */
  .living-bg__blobs { filter: blur(50px); }
  .living-bg__blob:nth-child(1) { width: 110vw; height: 110vw; left: -30%; top: 5%; }
  .living-bg__blob:nth-child(2) { width: 95vw; height: 95vw; right: -25%; top: 30%; }
  .living-bg__blob:nth-child(3) { width: 80vw; height: 80vw; left: 10%; bottom: -10%; }
  .living-bg--about .living-bg__blob:nth-child(1) { left: auto; right: -30%; top: 10%; }
  .living-bg--about .living-bg__blob:nth-child(2) { right: auto; left: -25%; top: 35%; }
  .living-bg--about .living-bg__blob:nth-child(3) { left: 20%; bottom: -15%; }
  .home-intro { gap: var(--space-16); }
  .home-projects { padding: var(--space-30) var(--gutter) var(--space-80); }
  /* Mobile : les filtres défilent sur une ligne, jusqu'au bord droit de l'écran */
  .filters { flex-direction: column; align-items: flex-start; }
  .filters__group { flex-direction: column; align-items: flex-start; align-self: stretch; }
  .filters__chips {
    flex-wrap: nowrap;
    align-self: stretch;
    overflow-x: auto;
    margin-right: calc(-1 * var(--gutter));
    padding-right: var(--gutter);
    scrollbar-width: none;
  }
  .filters__chips::-webkit-scrollbar { display: none; }
  /* Mobile : une seule colonne, dans l'ordre de projects.json */
  .projects-grid { grid-template-columns: 1fr; gap: var(--space-48); }
  .home-skills { padding: var(--space-40) var(--gutter) var(--space-80); }
  .home-skills .heading-section { margin-bottom: var(--space-30); }
}

/* ---------- À propos : présentation ---------- */
.about-hero { padding: 0; }
/* Photo + texte + autocollants tiennent dans le premier écran (21/10/2026, demande de Lucile) : le portrait (4:5) prend la hauteur
   disponible sous le menu, entre 320 et 420 px de large */
.about-presentation {
  display: grid;
  grid-template-columns: clamp(320px, (100svh - var(--header-h) - var(--space-100)) * .8, 420px) 1fr;
  gap: var(--space-80);
  align-items: center;
  padding: calc(var(--header-h) + var(--space-30)) var(--gutter) var(--space-60);
}
.about-presentation__portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); }
/* Portrait en arche (4:5 : 40 % de la hauteur = la moitié de la largeur), entouré d'autocollants de l'accueil qui arrivent un par un,
   puis se balancent lentement (de droite à gauche et retour) */
.ab-portrait { position: relative; }
.ab-portrait .about-presentation__portrait { display: block; border-radius: 50% 50% var(--radius-md) var(--radius-md) / 40% 40% var(--radius-md) var(--radius-md); }
.ab-pk { position: absolute; left: calc(var(--x) - var(--w) * var(--ox, 0)); top: var(--y); width: var(--w); height: auto; rotate: var(--r); translate: 0 calc(var(--oy, 0) * -100%); pointer-events: none; }
/* --ox / --oy : décalage d'une fraction de la largeur / hauteur de l'autocollant, pour qu'il soit à cheval sur le bord de la photo */
.js .ab-pk { animation: ab-pk-in .6s cubic-bezier(.3, 1.4, .5, 1) calc(.5s + var(--i) * .35s) backwards, ab-pk-sway calc(6s + var(--i) * .9s) ease-in-out calc(1.1s + var(--i) * .35s) infinite; }
@keyframes ab-pk-in { from { opacity: 0; scale: .3; } }
@keyframes ab-pk-sway { 50% { rotate: calc(var(--r) - 9deg); } }
.about-presentation__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.about-presentation__text .text-lead { max-width: 660px; margin: 0; }
@media (min-width: 992px) {
  .about-presentation .display-hero { font-size: 80px; }   /* Display/Hero Small : un peu plus petit, pour tenir dans le premier écran */
}
@media (min-width: 992px) and (max-width: 1365px) {
  .about-presentation { gap: var(--space-60); }
  .about-presentation__text { gap: var(--space-16); }
}
/* écrans bas (portables 13 pouces, fenêtre réduite) : titre et texte à leurs tailles tablette pour que les boutons restent visibles */
@media (min-width: 992px) and (max-height: 760px) {
  .about-presentation .display-hero { font-size: 64px; }
  .about-presentation__text { gap: var(--space-16); }
  .about-presentation__text .text-lead { font-size: 16px; line-height: 26px; }
}
.about-presentation__hello { margin: 0; font-size: 18px; line-height: 28px; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-16); }

/* ---------- À propos : ma façon de travailler (Figma : Info Card) ---------- */
.about-principles { padding: var(--space-100) var(--gutter); background: var(--color-bg-subtle); }
.about-principles .heading-section { margin-bottom: var(--space-48); }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
/* 4 cartes côte à côte (À propos) : titres un peu plus petits pour tenir sur 2 lignes */
@media (min-width: 992px) { .about-principles .info-cards--4 .info-card__title { font-size: 22px; line-height: 30px; } }
.info-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-30) var(--space-24);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
}
.info-card__picto {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-bg-placeholder);
  font-size: 12px; line-height: 20px; letter-spacing: 1px; color: var(--color-text-muted);
}
/* rond avec icône au trait (À propos, « Ma façon de travailler ») : icône orange foncé sur crème (4,5:1) */
.info-card__picto--icon { background: var(--color-bg-takeaway); color: var(--color-action-primary); }
.info-card__picto--icon .icon { display: block; }
/* À propos : un rond de couleur différente par carte (Ma façon de travailler) et par colonne (Compétences), icône en encre */
.about-principles .info-card__picto--icon, .ab-col__head .info-card__picto--icon { color: var(--color-text-primary); }
.about-principles .info-card:nth-child(4n+1) .info-card__picto--icon, .ab-cols > :nth-child(1) .info-card__picto--icon { background: var(--color-sticker-yellow); }
.about-principles .info-card:nth-child(4n+2) .info-card__picto--icon, .ab-cols > :nth-child(2) .info-card__picto--icon { background: var(--color-sticker-turquoise); }
.about-principles .info-card:nth-child(4n+3) .info-card__picto--icon { background: var(--color-home-bg-middle); }
.about-principles .info-card:nth-child(4n+4) .info-card__picto--icon { background: var(--color-hero-about-blob-apricot); }
.ab-cols > :nth-child(3) .info-card__picto--icon { background: var(--color-bg-page); }
.ab-col__head .info-card__picto--icon { box-shadow: inset 0 0 0 1.5px var(--color-text-primary); }   /* contour encre : se détache du fond qui change */
/* rond coloré (champ « color » de la carte) : chiffre en encre foncée, plus lisible */
.info-card__picto--color { background: var(--picto-bg); color: var(--color-text-primary); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0; }
.info-card__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.info-card p { margin: 0; }
.info-card__icon { display: block; width: 64px; height: 64px; } /* icône d'app : carré aux bords arrondis compris dans le SVG */

/* ---------- À propos : parcours (Figma : Experience Item) ---------- */
.about-path { padding: var(--space-140) var(--gutter); }
.about-path .heading-section { margin-bottom: var(--space-48); }
.experiences { display: flex; flex-direction: column; gap: var(--space-48); }
/* logo de l'école ou de l'entreprise dans la colonne de gauche, en face de l'expérience, dans une carte en blanc voilé */
.experience { display: grid; grid-template-columns: 347px 1fr; column-gap: var(--space-48); }
.experience > * { grid-column: 2; }
.experience__logo {
  grid-column: 1; grid-row: 1 / span 6; align-self: start;
  display: grid; place-items: center; width: 100%; max-width: 280px; height: 112px; padding: 0 var(--space-30);
  border: 1px solid var(--color-border-veil); border-radius: var(--radius-md); background: var(--color-bg-veil);
}
.experience__logo img { display: block; max-width: 180px; max-height: 38px; width: auto; height: auto; }
.experience__period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); margin: 0; font-weight: 700; }
/* gélule en contour « Formation » (Figma : Tag, Style=Pill) pour les formations récentes */
.experience__role { margin-top: var(--space-5); font-size: 24px; font-weight: 700; line-height: 34px; }
.experience__intro { margin: var(--space-16) 0 0; font-size: 14px; line-height: 24px; }
.experience__list { margin: var(--space-16) 0 0; padding-left: 18px; font-size: 14px; line-height: 24px; }
.experience__intro + .experience__list { margin-top: var(--space-8); }
.experience__list li + li { margin-top: 6px; }

/* ---------- À propos : atouts, compétences, outils, ce que j'aime (partials/about-more.njk) ---------- */
/* Autocollants dessinés (src/_data/aboutStickers.json) : mêmes couleurs et traits que la planche de l'accueil */
.ab-sk { display: block; width: 132px; height: auto; overflow: visible; rotate: var(--r); filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--color-text-primary) 18%, transparent)); transition: scale .3s, rotate .3s; }
.ab-sk--img { width: var(--iw); max-width: 100%; filter: none; }
.ab-card:hover .ab-sk { scale: 1.06; rotate: calc(var(--r) * .4); }
.ab-sk .cut, .ab-sk .cut * { fill: var(--color-bg-takeaway); stroke: var(--color-bg-takeaway); stroke-width: 16; stroke-linejoin: round; }
.ab-sk .ink { stroke: var(--color-text-primary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ab-sk .thin { stroke: var(--color-text-primary); stroke-width: 1.6; }
.ab-sk .t { font-family: var(--font-display); font-weight: 800; fill: var(--color-text-primary); }
.ab-sk .c-yellow { fill: var(--color-sticker-yellow); } .ab-sk .c-turq { fill: var(--color-sticker-turquoise); }
.ab-sk .c-orchid { fill: var(--color-home-bg-middle); } .ab-sk .c-lav { fill: var(--color-bg-contact); }
.ab-sk .c-sage { fill: var(--color-hero-about-blob-sage); } .ab-sk .c-apricot { fill: var(--color-hero-about-blob-apricot); }
.ab-sk .c-cream { fill: var(--color-bg-takeaway); } .ab-sk .c-white { fill: var(--color-bg-page); }
.ab-sk .c-orange { fill: var(--color-accent-signature); } .ab-sk .c-ink { fill: var(--color-text-primary); }

/* Mes atouts : cartes blanches, l'autocollant dépasse en haut */
.about-me { padding: var(--space-100) var(--gutter); }
.about-me .heading-section { margin-bottom: var(--space-80); }
.ab-qualities { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-80) var(--space-30); }
.ab-card { display: flex; flex-direction: column; align-items: flex-start; }
.ab-qualities .ab-card { position: relative; padding: var(--space-80) var(--space-30) var(--space-30); border-radius: var(--radius-md); background: var(--color-bg-page); }
.ab-qualities .ab-card__art { position: absolute; left: var(--space-24); top: -60px; }
.ab-qualities .ab-sk { width: 112px; }
.ab-qualities .ab-sk--img { width: calc(var(--iw) * .82); }
.ab-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; }   /* Heading/Card Small */
.ab-card p { margin: var(--space-8) 0 0; }

/* Compétences : 3 colonnes (Brand, Product, Lead), rond d'icône coloré, liste à petits tirets */
.ab-skills { padding: var(--space-100) var(--gutter); }
.ab-skills .heading-section { margin-bottom: var(--space-48); }
.ab-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48); }
.ab-col__head { display: flex; align-items: center; gap: var(--space-16); padding-bottom: var(--space-16); margin-bottom: var(--space-8); border-bottom: 1px solid var(--color-border-strong); }
.ab-col__head h3 { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }   /* Heading/Card */
.ab-list { margin: 0; padding: 0; list-style: none; }
.ab-list li { display: flex; gap: var(--space-12); padding: var(--space-10) 0; border-top: 1px solid color-mix(in srgb, var(--color-text-primary) 18%, transparent); }
.ab-list li:first-child { border-top: 0; }
.ab-list li::before { content: ""; flex: none; width: 12px; height: 2px; margin-top: 13px; background: var(--color-text-primary); }

/* Mes outils : 3 cartes en blanc voilé (IA générative, Outils, Langues), chaque outil avec la petite icône de son application */
.ab-tools { display: grid; grid-template-columns: 1.3fr 1.6fr .8fr; gap: var(--space-16) var(--space-24); margin-top: var(--space-60); }
.ab-tools h3 { grid-column: 1 / -1; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }   /* Label/Tag */
.ab-tools__card { padding: var(--space-24) var(--space-30) var(--space-30); border: 1px solid var(--color-border-veil); border-radius: var(--radius-md); background: var(--color-bg-veil); }
.ab-tools strong { display: block; margin-bottom: var(--space-8); font-size: 14px; font-weight: 600; line-height: 24px; }
.ab-tools ul { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-16); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 24px; }   /* Body/Small */
.ab-tools li { display: inline-flex; align-items: center; gap: var(--space-8); }
.ab-tools__ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--c); overflow: hidden; }
.ab-tools__ico i { width: 14px; height: 14px; background: var(--color-bg-page); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ab-tools__ico img { width: 100%; height: 100%; object-fit: cover; }
.ab-tools__ico .ab-tools__logo { width: var(--s); height: var(--s); object-fit: contain; }
.ab-tools__ico--line { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 15%, transparent); }

/* Ce que j'aime : en petit, tout à la fin, légendes manuscrites */
.ab-loves-section { padding: 0 var(--gutter) var(--space-80); }
.ab-loves__title { margin: 0 0 var(--space-24); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }   /* Label/Tag */
.ab-loves { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-24) var(--space-16); padding-top: var(--space-30); border-top: 1px solid var(--color-border-strong); }
.ab-loves .ab-card { align-items: center; text-align: center; }
.ab-loves .ab-card__art { display: flex; align-items: center; height: 84px; margin-bottom: var(--space-10); }
.ab-loves .ab-sk { width: 78px; }
.ab-loves .ab-sk--img { width: calc(var(--iw) * .55); }
.ab-loves h3 { font-family: var(--font-sticker-hand); font-size: 20px; font-weight: 700; line-height: 24px; }   /* Label/Hand */

@media (prefers-reduced-motion: reduce) { .ab-sk { transition: none; } .js .ab-pk { animation: none; } }

/* Listes sobres (Figma : List Item), aussi dans les pages projets */
.list-items { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.list-item {
  display: flex; align-items: flex-start; gap: var(--space-12);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border-card);
}
.list-item::before {
  content: ""; flex: none; width: 12px; height: 2px; margin-top: 13px;
  background: var(--color-action-primary);
}
.list-items .list-item:nth-child(-n+2) { border-top: 0; }
/* Variante drapeaux (ex. marchés du déploiement) : le drapeau remplace le petit tiret */
.list-item--flag::before { display: none; }
.list-item__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; flex: 0 1 auto; min-width: 21px; }
.list-item__flags:has(img:nth-child(3)) { min-width: 46px; } /* 4 drapeaux : en carré de 2 × 2 au plus serré */ /* sur mobile, plusieurs drapeaux passent sur 2 lignes plutôt que de pousser le nom hors de l'écran (Pays nordiques) */
.list-item__flags img { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--color-border-card); object-fit: cover; }

@media (max-width: 991px) {
  .about-presentation { grid-template-columns: 1fr 1.4fr; gap: var(--space-48); }
  .info-cards { grid-template-columns: 1fr; }
  .experience { grid-template-columns: 1fr; }
  .experience > *, .experience__logo { grid-column: 1; grid-row: auto; }
  .experience__logo { width: 220px; height: 88px; margin-bottom: var(--space-16); }
  .ab-qualities { grid-template-columns: repeat(2, 1fr); }
  .ab-loves { grid-template-columns: repeat(4, 1fr); }
  .ab-cols, .ab-tools { grid-template-columns: 1fr; }
  .ab-tools__card { padding: var(--space-24); }
}

@media (max-width: 767px) {
  .about-presentation { grid-template-columns: 1fr; gap: var(--space-30); padding: calc(var(--header-h) + var(--space-24)) var(--gutter) var(--space-60); }
  .about-principles { padding: var(--space-60) var(--gutter); }
  .about-principles .heading-section { margin-bottom: var(--space-30); }
  .info-cards { gap: var(--space-16); }
  .info-card__title { font-size: 24px; line-height: 34px; }
  .about-path { padding: var(--space-80) var(--gutter); }
  .experience__role { font-size: 20px; line-height: 30px; }
  .about-path .heading-section { margin-bottom: var(--space-30); }
  .about-me, .ab-skills { padding: var(--space-60) var(--gutter); }
  .about-me .heading-section { margin-bottom: var(--space-60); }
  .ab-qualities { grid-template-columns: 1fr; gap: var(--space-60); }
  .ab-loves { grid-template-columns: repeat(3, 1fr); }
  /* autocollants du portrait plus petits ; portrait à 80 % de la largeur pour que la fleur dépasse sur le fond */
  .ab-portrait { width: 80%; margin-inline: auto; }
  .about-presentation { overflow-x: clip; } /* très petits écrans (360 px) : la fleur tournée dépassait de 3 px */
  .ab-pk { width: calc(var(--w) * .75); left: clamp(-10px, calc(var(--x) - var(--w) * .75 * var(--ox, 0)), calc(100% - var(--w) * .75 * (1 - var(--ox, 0)) + 10px)); }
}

/* ==========================================================================
   Études de cas (pages projets) — briques de src/_includes/macros/case.njk
   ========================================================================== */

/* Fonds de section tirés de la palette du projet (avec .tone-dark / .tone-vivid si besoin) */
.bg-rebranding-night { background: var(--color-project-rebranding-night); }
.bg-rebranding-imperial { background: var(--color-project-rebranding-imperial); }
.bg-rebranding-sky { background: var(--color-project-rebranding-sky); }
.bg-rebranding-orange { background: var(--color-project-rebranding-orange); }
.bg-rebranding-cream { background: var(--color-project-rebranding-cream); }
.bg-rebranding-peach { background: var(--color-project-rebranding-peach); }

.case-hero-image img { width: 100%; aspect-ratio: 1440 / 600; object-fit: cover; }
picture.case-hero-image, picture.case-hero-image img { display: block; } /* image d'en-tête avec une version mobile (<picture>) */

.case-section { display: flex; flex-direction: column; gap: var(--space-48); padding: var(--space-100) var(--gutter); }
.case-section--top { padding: var(--space-140) var(--gutter) 0; }
.case-section--top-end { padding-bottom: var(--space-100); } /* section du haut suivie d'un fond coloré : marge sous le dernier visuel (Rebranding 01) */
.case-section--tight { padding: var(--space-48) var(--gutter) 0; }
.case-section + .case-section--top { }
.case-head { gap: var(--space-24); padding: var(--space-100) var(--gutter) 0; }
.case-head__title { margin: 0; }
.case-head__hook { max-width: 760px; margin: 0; }
.case-head__cta, .case-cta { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.case-cta { margin-top: calc(var(--space-24) * -1); }
.case-brief { gap: var(--space-32, 32px); padding: var(--space-60) var(--gutter) var(--space-100); }
.case-block { display: flex; flex-direction: column; gap: var(--space-24); }
.case-note { margin: 0; font-size: 14px; line-height: 24px; }
.case-credits { margin-top: calc(var(--space-24) * -1); color: var(--color-text-muted); } /* crédits des images et vidéos de tiers, en bas de page */
.case-credits a { color: inherit; }
/* Page « introuvable » (404), bilingue */
.page-404 { min-height: 70svh; justify-content: center; padding-top: calc(var(--header-h) + var(--space-60)); }
.page-404__code { margin: 0; font-family: var(--font-display); font-size: 160px; font-weight: 800; line-height: 1; color: var(--color-action-primary); }
.page-404__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-60); }
.page-404__cols > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.page-404__cols p { margin: 0; }
@media (max-width: 767px) { .page-404__code { font-size: 96px; } .page-404__cols { grid-template-columns: 1fr; gap: var(--space-40); } }
.eyebrow-tag { margin: 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Section Intro */
.section-intro { display: grid; grid-template-columns: 371px 1fr; gap: 0 122px; align-items: start; }
.section-intro--title-only { grid-template-columns: 1fr; } /* titre seul : sur toute la largeur (maquettes) */
.section-intro__content { display: flex; flex-direction: column; gap: var(--space-16); max-width: 667px; }
.section-intro__content p { margin: 0; }
.section-intro__subtitle { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 34px; }

/* Figure */
.figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.figure__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-placeholder); }
.figure__media img { width: 100%; height: 100%; object-fit: cover; }
.figure__media:has(img) { background: var(--color-bg-subtle); } /* visuels transparents : fond gris clair */
.figure__caption { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }
.figure--narrow { max-width: 760px; }
.figure-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: start; }
.figure-row--single { grid-template-columns: 1fr; }
.figure-grid { display: grid; gap: var(--space-24); }
.figure-grid--4 { grid-template-columns: repeat(4, 1fr); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: stretch; } /* cartes côte à côte : même hauteur */

/* Full Bleed : légende posée sur l'image */
.full-bleed { position: relative; margin: 0; }
.full-bleed__media { background: var(--color-bg-placeholder); }
.full-bleed__media img { width: 100%; height: 100%; object-fit: cover; }
.full-bleed__caption {
  position: absolute; left: var(--gutter); bottom: var(--space-24);
  padding: var(--space-5) var(--space-12);
  border-radius: var(--radius-sm);
  background: var(--color-bg-caption-overlay);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--color-text-on-image);
  font-size: 14px; line-height: 24px;
}

/* Video */
.video { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.video__media { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-placeholder); }
.video__media video, .video__media iframe, .video__media img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play-area { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.video__play {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--color-bg-page); box-shadow: var(--shadow-card);
  transition: transform .3s;
}
.video__play::after {
  content: ""; position: absolute; left: 36px; top: 29px;
  border-style: solid; border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--color-action-primary);
}
.video__play-area:hover .video__play { transform: translate(-50%, -50%) scale(1.06); }

/* Timeline Step (step = numéros, milestone = années) */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.timeline__step { display: flex; flex-direction: column; gap: var(--space-16); }
.timeline__rail { display: flex; align-items: center; }
.timeline__step:not(:last-child) .timeline__rail::after { content: ""; flex: 1; height: 2px; background: var(--color-action-primary); }
.timeline__marker {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border: 2px solid var(--color-action-primary); border-radius: 50%;
  background: var(--color-bg-page); color: var(--color-action-primary); font-weight: 700;
}
.timeline--milestone .timeline__marker { width: 16px; height: 16px; }
.timeline__content { padding-right: var(--space-24); }
.timeline__year { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.timeline__label { margin: 0; }
.timeline--step .timeline__label { font-weight: 700; }
/* Animation d'apparition des frises (main.js ajoute .is-played) */
/* Frise « numbered » : les étapes d'une démarche (trait, grand numéro, titre en gras, explication) */
.timeline--numbered { gap: var(--space-24); }
.timeline--numbered .timeline__step { gap: var(--space-16); }
.timeline--numbered .timeline__rail { height: 2px; background: var(--color-action-primary); }
.timeline--numbered .timeline__rail::after { content: none !important; }
.timeline--numbered .timeline__content { padding: 0; }
.timeline__number { margin: 0 0 var(--space-8); font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 40px; color: var(--color-action-primary); }
.timeline__title { margin: 0 0 var(--space-5); font-weight: 700; }
.timeline--numbered .timeline__label { font-size: 14px; line-height: 22px; color: var(--color-text-muted); }
.js [data-animate-timeline].timeline--numbered .timeline__rail { transform: scaleX(0); transform-origin: left center; transition: transform .45s ease-out; transition-delay: calc(var(--i) * .22s); }
.js [data-animate-timeline].timeline--numbered.is-played .timeline__rail { transform: none; }

/* Vidéo réduite, centrée avec des marges (ex. animation du logo) */
.video--narrow { width: 100%; max-width: 760px; margin: 0 auto; }
.video--narrow .video__media {
  background: none;
  /* bords fondus : la vidéo se confond avec le fond de section, même si le navigateur rend ses couleurs un peu différemment */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.case-section--tight + .full-bleed { margin-top: var(--space-100); }

/* Logo sur différents fonds (Rebranding) : 2 × 2 rectangles qui s'affichent l'un après l'autre, fond puis logo */
.logo-backgrounds { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2304 / 1413.33; overflow: hidden; border-radius: var(--radius-sm); }
.logo-backgrounds__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-bg { position: relative; overflow: hidden; }
.logo-bg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.logo-bg__logo { position: absolute; height: auto; overflow: visible; }
.js .logo-bg { clip-path: inset(0 100% 0 0); }
.js .logo-bg__logo { opacity: 0; transform: translateY(12%); }
.logo-backgrounds.is-played .logo-bg { clip-path: inset(0); transition: clip-path .7s cubic-bezier(.65,0,.35,1) calc(var(--i) * .9s); }
.logo-backgrounds.is-played .logo-bg__logo { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--i) * .9s + .55s), transform .6s cubic-bezier(.2,.75,.1,1) calc(var(--i) * .9s + .55s); }
@media (prefers-reduced-motion: reduce) { .js .logo-bg { clip-path: none; } .js .logo-bg__logo { opacity: 1; transform: none; } }

/* Ancien et nouveau logo (Rebranding) : l'ancien lettre par lettre, puis le trait qui se trace, puis le nouveau logo */
.logo-ba { position: relative; aspect-ratio: 2304 / 706.67; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-subtle); }
.logo-ba__svg { display: block; width: 100%; height: 100%; }
.logo-ba__line { fill: none; stroke: var(--color-project-rebranding-navy); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.logo-ba__label { position: absolute; transform: translate(-50%, -50%); font-size: 14px; line-height: 1; color: var(--color-project-rebranding-imperial); white-space: nowrap; }
.js .logo-ba .logo-ba__letter, .js .logo-ba .logo-ba__label { opacity: 0; }
.js .logo-ba .logo-ba__letter { translate: 0 18px; }
.js .logo-ba .logo-ba__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .logo-ba .logo-ba__emblem { opacity: 0; scale: .85; transform-box: fill-box; transform-origin: center; }
.logo-ba.is-played .logo-ba__letter { opacity: 1; translate: 0 0; transition: opacity .45s ease, translate .6s cubic-bezier(.2,.75,.1,1); }
.logo-ba.is-played .logo-ba__old .logo-ba__letter { transition-delay: calc(var(--i) * 70ms); }
.logo-ba.is-played .logo-ba__label--before { opacity: 1; transition: opacity .5s ease .6s; }
.logo-ba.is-played .logo-ba__line { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) 1.2s; }
.logo-ba.is-played .logo-ba__emblem { opacity: 1; scale: 1; transition: opacity .5s ease 2.1s, scale .7s cubic-bezier(.2,.75,.1,1) 2.1s; }
.logo-ba.is-played .logo-ba__new .logo-ba__letter { transition-delay: calc(2.4s + var(--i) * 70ms); }
.logo-ba.is-played .logo-ba__label--after { opacity: 1; transition: opacity .5s ease 3s; }
@media (max-width: 767px) { .logo-ba__label { font-size: 11px; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .js .logo-ba .logo-ba__letter, .js .logo-ba .logo-ba__label, .js .logo-ba .logo-ba__emblem { opacity: 1; translate: none; scale: none; }
  .js .logo-ba .logo-ba__line { stroke-dashoffset: 0; }
}

/* Signification de l'emblème (Rebranding) : N → + → maison → + → cube → = → emblème ; chaque étape --s dure 0,5 s */
.logo-meaning { position: relative; aspect-ratio: 2304 / 706.67; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-subtle); }
.logo-meaning__svg { display: block; width: 100%; height: 100%; }
.logo-meaning__icon { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo-meaning__op { fill: none; stroke: var(--color-project-rebranding-navy); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.logo-meaning__label { position: absolute; transform: translate(-50%, -50%); font-size: 14px; line-height: 1; color: var(--color-project-rebranding-navy); white-space: nowrap; }
.js .logo-meaning .logo-meaning__icon, .js .logo-meaning .logo-meaning__op { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .logo-meaning .logo-meaning__label { opacity: 0; }
.js .logo-meaning .logo-meaning__emblem { opacity: 0; scale: .8; transform-box: fill-box; transform-origin: center; }
.logo-meaning.is-played .logo-meaning__icon { stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) calc(var(--s) * .5s); }
.logo-meaning.is-played .logo-meaning__op { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease-out calc(var(--s) * .5s + .2s); }
.logo-meaning.is-played .logo-meaning__label { opacity: 1; transition: opacity .5s ease calc(var(--s) * .5s + .5s); }
.logo-meaning.is-played .logo-meaning__emblem { opacity: 1; scale: 1; transition: opacity .5s ease calc(var(--s) * .5s + .2s), scale .8s cubic-bezier(.2,.75,.1,1) calc(var(--s) * .5s + .2s); }
@media (max-width: 767px) { .logo-meaning__label { font-size: 10px; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .js .logo-meaning .logo-meaning__icon, .js .logo-meaning .logo-meaning__op { stroke-dashoffset: 0; }
  .js .logo-meaning .logo-meaning__label, .js .logo-meaning .logo-meaning__emblem { opacity: 1; scale: none; }
}

/* Moodboard + mascottes (Les Bambinets) : moodboard sur 2/3, mascottes sur 1/3 en 3 colonnes, même hauteur (la hauteur est
   donnée par le moodboard ; la grille des mascottes remplit l'espace restant) */
.mood-split { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-24); align-items: stretch; }
.mood-split__side { display: flex; flex-direction: column; }
.mascots { position: relative; flex: 1; border-radius: var(--radius-sm); background: var(--color-bg-page); }
.mascots__grid { position: absolute; inset: var(--space-30); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--space-16); }
.mascots__grid img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
@media (max-width: 767px) {
  .mood-split { grid-template-columns: 1fr; }
  .mascots__grid { position: static; padding: var(--space-24); gap: var(--space-16); grid-template-columns: repeat(3, 1fr); grid-template-rows: none; }
  .mascots__grid img { aspect-ratio: 1; }
}

/* User flow animé (Les Bambinets) : les connexions se dévoilent depuis leur point de départ (cercle de découpe qui grandit),
   les écrans apparaissent quand une connexion les atteint ; --t = moment d'apparition, --d = durée (partials/bambinets-userflow.njk) */
.userflow { background: var(--color-bg-page); }
.userflow__svg { display: block; width: 100%; height: auto; }
/* mobile : le schéma garde une taille lisible et défile horizontalement jusqu'au bord de l'écran */
@media (max-width: 767px) {
  .userflow { overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .userflow::-webkit-scrollbar { display: none; }
  .userflow__svg { width: 920px; max-width: none; }
}
.js .userflow .uf-reveal { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.js .userflow .uf-node { opacity: 0; scale: .85; transform-box: fill-box; transform-origin: center; }
.userflow.is-played .uf-reveal { transform: scale(1); transition: transform var(--d) cubic-bezier(.45,0,.55,1) var(--t); }
.userflow.is-played .uf-node { opacity: 1; scale: 1; transition: opacity .35s ease var(--t), scale .45s cubic-bezier(.2,.75,.1,1) var(--t); }
@media (prefers-reduced-motion: reduce) { .js .userflow .uf-reveal { transform: none; } .js .userflow .uf-node { opacity: 1; scale: none; } }

/* Grille de construction du logo animée (Rebranding) : 1. lignes, 2. symbole + ses diagonales,
   3. logotype + diagonales et cercles, 4. repères 0,5x et x. Lancée quand le visuel arrive à l'écran (main.js). */
.full-bleed__media--svg { background: none; }
.logo-grid { display: block; width: 100%; height: auto; }
/* mobile : visuel peu haut, la légende passe sous le visuel pour ne pas couvrir le logo */
@media (max-width: 767px) {
  .full-bleed--logo-grid .full-bleed__caption { position: static; display: block; margin: var(--space-8) var(--gutter) 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--color-text-muted); }
}
.lg-line { fill: none; stroke: #6DA1FF; stroke-width: 1; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.lg-bar { fill: none; stroke: #6DA1FF; stroke-width: 10.9; }
.lg-label { fill: #3E559C; font-family: var(--font-body); font-size: 24px; font-style: italic; }
.js .logo-grid .lg-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .logo-grid .logo-grid__symbol { opacity: 0; transform: scale(.92); transform-box: fill-box; transform-origin: center; }
.js .logo-grid .lg-letter { opacity: 0; }
.js .logo-grid .lg-bar { transform: scaleX(0); transform-box: fill-box; transform-origin: center; }
.js .logo-grid .lg-label { opacity: 0; }
.logo-grid.is-played .lg-line { stroke-dashoffset: 0; }
.logo-grid.is-played .logo-grid__lines .lg-line { transition: stroke-dashoffset 1s cubic-bezier(.45,0,.2,1) calc(var(--i) * 12ms); }
.logo-grid.is-played .logo-grid__symbol { opacity: 1; transform: none; transition: opacity .6s ease 1.3s, transform .8s cubic-bezier(.2,.75,.1,1) 1.3s; }
.logo-grid.is-played .logo-grid__symbol-guides .lg-line { transition: stroke-dashoffset .8s ease-out calc(1.9s + var(--i) * 120ms); }
.logo-grid.is-played .lg-letter { opacity: 1; transition: opacity .5s ease calc(2.7s + var(--i) * 80ms); }
.logo-grid.is-played .logo-grid__word-guides .lg-line { transition: stroke-dashoffset .7s ease-out calc(3.5s + var(--i) * 25ms); }
.logo-grid.is-played .lg-bar { transform: none; transition: transform .6s cubic-bezier(.2,.75,.1,1) calc(5s + var(--i, 0) * 150ms); }
.logo-grid.is-played .lg-label { opacity: 1; transition: opacity .4s ease calc(5.4s + var(--i, 0) * 150ms); }
@media (prefers-reduced-motion: reduce) {
  .js .logo-grid .lg-line { stroke-dashoffset: 0; }
  .js .logo-grid .logo-grid__symbol { opacity: 1; transform: none; }
  .js .logo-grid .lg-letter, .js .logo-grid .lg-label { opacity: 1; }
  .js .logo-grid .lg-bar { transform: none; }
}

.js [data-animate-timeline] .timeline__marker, .js [data-animate-timeline] .timeline__content { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.75,.1,1); transition-delay: calc(var(--i) * .22s); }
.js [data-animate-timeline] .timeline__rail::after { transform: scaleX(0); transform-origin: left center; transition: transform .45s ease-out; transition-delay: calc(var(--i) * .22s + .15s); }
.js [data-animate-timeline].is-played .timeline__marker, .js [data-animate-timeline].is-played .timeline__content { opacity: 1; transform: none; }
.js [data-animate-timeline].is-played .timeline__rail::after { transform: none; }

/* Key Figure */
.key-figures { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-24); padding: var(--space-30) 0; }
.key-figure p { margin: 0; }
.key-figure__number { font-family: var(--font-display); font-size: 64px; font-weight: 800; line-height: 80px; color: var(--color-action-primary); }

/* Brief Box : une seule ligne en desktop */
.brief-box { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-30); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.brief-box__items { display: grid; grid-template-columns: 1fr 1fr 220px 180px; gap: var(--space-40); margin: 0; }
.brief-box--3 .brief-box__items { grid-template-columns: 1fr 1fr 180px; }
.brief-item { padding-top: var(--space-12); border-top: 1px solid var(--color-border-card); }
.brief-item dt { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }
.brief-item dd { margin: var(--space-5) 0 0; }

/* Netatmo en bref — version longue */
.netatmo-long { display: flex; flex-direction: column; gap: var(--space-40); padding: var(--space-40); border-radius: var(--radius-md); background: var(--color-bg-page); }
.netatmo-long__intro { display: grid; grid-template-columns: 262px 1fr; gap: var(--space-24); }
.netatmo-long__intro p:last-child { margin: 0; }

/* Info cards : variantes de colonnes */
.info-cards--4 { grid-template-columns: repeat(4, 1fr); }

/* Callout et panneau */
.callout, .panel { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-30); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); }
.callout__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 34px; }
.callout p { margin: 0; }
.panel { gap: var(--space-16); }

/* Takeaway */
.takeaway { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-60); padding: var(--space-60); border-radius: var(--radius-md); background: var(--color-bg-takeaway); }
.takeaway__body p { margin: 0; }
.takeaway__body p + p { margin-top: var(--space-16); }

/* Bridge Card */
.bridge-card { display: grid; grid-template-columns: 667px 1fr; border: 1px solid var(--color-border-card); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-page); color: var(--color-text-primary); text-decoration: none; }
.bridge-card__media { background: var(--color-bg-placeholder); aspect-ratio: 4 / 3; }
.bridge-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.75,.1,1); }
.bridge-card:hover .bridge-card__media img { transform: scale(1.04); }
.bridge-card__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-16); padding: var(--space-48); }
.bridge-card__content p { margin: 0; }
.bridge-card__title { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 40px; }

/* Navigation projets (Figma : Project Nav Card) */
.project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); padding: var(--space-100) var(--gutter) var(--space-140); }
.project-nav__card {
  display: flex; align-items: center; gap: var(--space-20); padding: var(--space-20);
  border: 1px solid var(--color-border-card); border-radius: var(--radius-md); text-decoration: none; color: inherit;
  /* au survol, la carte se remplit de beige très clair dans le sens de la flèche */
  background: linear-gradient(var(--color-bg-project-nav-hover), var(--color-bg-project-nav-hover)) no-repeat right / 0% 100%;
  transition: background-size .5s cubic-bezier(.65,0,.35,1), box-shadow .4s;
}
.project-nav__card--next { background-position: left; }
.project-nav__card:hover, .project-nav__card:focus-visible { background-size: 100% 100%; box-shadow: var(--shadow-card-soft); }
.project-nav__card--next { justify-content: space-between; text-align: left; }
.project-nav__thumb { flex: none; width: 144px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-placeholder); }
.project-nav__thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-nav__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.project-nav__direction { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }
.project-nav__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 34px; }

@media (max-width: 991px) {
  .section-intro { grid-template-columns: 1fr; gap: var(--space-16); }
  .key-figures { grid-template-columns: repeat(3, 1fr); }
  .brief-box__items, .brief-box--3 .brief-box__items { grid-template-columns: 1fr 1fr; }
  .figure-grid--4, .info-cards--4 { grid-template-columns: 1fr 1fr; }
  .two-cols, .takeaway, .netatmo-long__intro { grid-template-columns: 1fr; gap: var(--space-24); }
  .bridge-card { grid-template-columns: 1fr; }
  /* Frises : empilées à la verticale */
  .timeline { grid-auto-flow: row; }
  .timeline__step { flex-direction: row; gap: var(--space-16); }
  .timeline__rail { flex-direction: column; align-self: stretch; }
  .timeline__step:not(:last-child) .timeline__rail::after { width: 2px; height: auto; min-height: 12px; }
  .js [data-animate-timeline] .timeline__rail::after { transform: scaleY(0); transform-origin: center top; }
  .js [data-animate-timeline].is-played .timeline__rail::after { transform: none; }
  .timeline__content { padding: 0 0 var(--space-24); }
  .timeline--step .timeline__content { padding-top: 10px; }
  .timeline--milestone .timeline__rail { padding-top: 12px; }
  .timeline--milestone .timeline__rail { width: 16px; }
  .timeline--numbered { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-40); }
  .timeline--numbered .timeline__step { flex-direction: column; }
  .timeline--numbered .timeline__rail { flex-direction: row; align-self: auto; }
  .timeline--numbered .timeline__content { padding: 0; }
  .project-nav { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .case-section { gap: var(--space-30); padding: var(--space-60) var(--gutter); }
  .case-section--top { padding: var(--space-80) var(--gutter) 0; }
  .case-section--top-end { padding-bottom: var(--space-60); }
  .case-section--tight { padding: var(--space-30) var(--gutter) 0; }
  .case-head { padding: var(--space-60) var(--gutter) 0; gap: var(--space-16); }
  .case-brief { padding: var(--space-30) var(--gutter) var(--space-60); }
  .case-hero-image img { aspect-ratio: 390 / 260; }
  .hero-anim, .hero-reb { aspect-ratio: 390 / 260; }
  .key-figures { grid-template-columns: 1fr 1fr; }
  .key-figure__number { font-size: 48px; line-height: 60px; }
  .brief-box { padding: var(--space-20); }
  .brief-box__items, .brief-box--3 .brief-box__items { grid-template-columns: 1fr; gap: var(--space-16); }
  .netatmo-long { padding: var(--space-20); gap: var(--space-30); }
  .figure-row, .figure-grid--4, .info-cards--4 { grid-template-columns: 1fr; }
  .figure-grid--4 { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .full-bleed:not(.full-bleed--keep) .full-bleed__media { aspect-ratio: 390 / 300 !important; }
  .full-bleed__caption { left: var(--space-20); bottom: var(--space-16); }
  .timeline__year { font-size: 24px; line-height: 34px; }
  .timeline--numbered { grid-template-columns: 1fr 1fr; gap: var(--space-30) var(--space-16); }
  .timeline__number { font-size: 28px; line-height: 34px; }
  .case-section--tight + .full-bleed { margin-top: var(--space-60); }
  .takeaway { padding: var(--space-24) var(--space-20); }
  .bridge-card__content { padding: var(--space-24) var(--space-20); }
  .bridge-card__title { font-size: 20px; line-height: 34px; }
  .project-nav { padding: var(--space-60) var(--gutter) var(--space-80); }
  .project-nav__thumb { display: none; }
  .video__play { width: 64px; height: 64px; }
  .video__play::after { left: 26px; top: 20px; border-width: 12px 0 12px 19px; }
}

/* ---------- Segmentation ---------- */
.bg-segmentation-night { background: var(--color-project-segmentation-night); }
.bg-segmentation-orange { background: var(--color-project-segmentation-orange); }
.bg-segmentation-ice { background: var(--color-project-segmentation-ice); }
.bg-segmentation-initial { background: var(--color-project-segmentation-initial); }
.bg-segmentation-original { background: var(--color-project-segmentation-original); }

.case-head--full { padding-bottom: var(--space-100); }
.case-head__subtitle { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 34px; }
.text-link { font-size: 14px; font-weight: 600; line-height: 24px; color: var(--color-text-link); text-decoration: none; }
a.text-link:hover { text-decoration: underline; }

/* Netatmo Box (version courte) */
.netatmo-box { display: grid; grid-template-columns: 262px 1fr; gap: var(--space-24); padding: var(--space-30); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-bg-page); }
.netatmo-box__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.netatmo-box__content p { margin: 0; }

/* Cartes-ancres des gammes */
.range-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: start; }
.range-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-12); text-decoration: none; color: inherit; }
/* Moodboard des gammes reconstruit en code (plans de travail Figma « initial », « original », « advance ») :
   cadre coloré 4:5 centré dans la carte, éléments posés en % du cadre et qui débordent comme dans Figma ;
   au survol de la carte, chaque élément bouge légèrement (--move, défini par élément dans segmentation.json). */
.mood { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin-bottom: -6%; } /* le bas du cadre est à 10 % du bloc : textes rapprochés du visuel */
.mood__frame { position: absolute; inset: 10%; container-type: inline-size; isolation: isolate; }
.mood__frame--clip { overflow: hidden; }
.mood__layer { position: absolute; display: block; max-width: none; transition: transform .9s cubic-bezier(.2,.75,.1,1); }
img.mood__layer { object-fit: cover; }
.mood__text { font-family: "IBM Plex Sans", var(--font-body); font-size: 17.5cqw; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.mood__glow { border-radius: 50%; background: rgb(255 255 255 / .15); filter: blur(15cqw); transition: transform .9s cubic-bezier(.2,.75,.1,1), opacity .9s; }
.range-card:hover .mood__layer, .range-card:focus-visible .mood__layer { transform: var(--move); }
@media (prefers-reduced-motion: reduce) { .mood__layer { transition: none; } .range-card:hover .mood__layer { transform: none; } }
.range-card__name { margin-top: var(--space-8); font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.range-card__promise { max-width: 80%; color: var(--color-text-muted); } /* pas plus large que le cadre coloré */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Hérité / propre à chaque gamme */

/* Visuel d'intro de chaque gamme : largeur du contenu, sur fond blanc (l'image a ses bandes blanches) */
.case-section--intro-visual { padding: var(--space-60) var(--gutter); }
.figure--bare .figure__media, .figure--bare .figure__media:has(img) { background: none; border-radius: 0; }

/* Bandeaux d'intro des gammes (plans de travail Figma « Intro … ») : bande colorée 3000 × 938, nom en contour,
   produit qui dépasse vers le haut. Au défilement (--p de -1 à 1, calculé dans main.js) le produit monte plus vite
   que la page (parallaxe) ; son ombre, restée sur le fond, s'éloigne et s'estompe : effet de flottement. */
.range-intro { container-type: inline-size; padding-top: 16%; }
.range-intro__band { position: relative; aspect-ratio: 3000 / 938; }
.range-intro__name {
  position: absolute; left: 0; right: 0; top: 18.87%;
  font-family: "IBM Plex Sans", var(--font-body); font-size: 15cqw; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke-width: max(1px, .1cqw);
}
.range-intro__shadow-clip { position: absolute; inset: 0; overflow: hidden; } /* l'ombre reste sur la bande colorée */
.range-intro__product, .range-intro__shadow { position: absolute; display: block; max-width: none; height: auto; aspect-ratio: 1; }
.range-intro__product { transform: translate3d(0, calc(var(--p, 0) * -5cqw), 0); will-change: transform; }
.range-intro__shadow {
  filter: brightness(0) blur(1.6cqw);
  opacity: calc(var(--shadow) * (1 - var(--p, 0) * .35));
  transform: translate3d(0, calc(3cqw + var(--p, 0) * -2cqw), 0) scale(calc(.97 - var(--p, 0) * .03));
  will-change: transform, opacity;
}
.js .range-intro__name { opacity: 0; transform: translateY(15%); letter-spacing: .08em; transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.75,.1,1), letter-spacing 1.4s cubic-bezier(.2,.75,.1,1); }
.js .range-intro.is-visible .range-intro__name { opacity: 1; transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .js .range-intro__name { opacity: 1; transform: none; letter-spacing: 0; transition: none; } }
.range-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-24); padding-bottom: var(--space-24); border-bottom: 2px solid var(--color-border-strong); }
.range-title .heading-jumbo { margin: 0; }
.range-title__promise { margin: 0; font-size: 20px; line-height: 32px; color: var(--color-text-muted); }
.figure--swatch .figure__media { background: var(--color-bg-swatch); } /* comble les pixels transparents des planches (ex. Advance) */
/* contour : posé sur le cadre arrondi lui-même (et non sur l'image, dont les coins sont rognés) pour suivre les arrondis */
.figure--swatch .figure__media { position: relative; }
.figure--swatch .figure__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--color-border-swatch); pointer-events: none; }

/* Social Cards : visuels réseaux sociaux en colonnes qui défilent en continu (1, 3, 5 vers le bas ; 2, 4 vers le haut),
   dans une bande colorée pleine largeur recadrée à la hauteur de l'écran, coupe franche en haut et en bas,
   colonnes calées sur les marges du site (choix de Lucile).
   Chaque colonne est répétée 4 fois et avance d'une copie (25 %) par tour : la boucle ne se voit pas. */
.social-marquee {
  --marquee-gap: var(--space-24);
  --marquee-speed: 30s;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--marquee-gap);
  height: min(calc(100svh - 80px), 1030px); min-height: 620px; /* hauteur de l'écran moins 80 px (21/10/2026, choix de Lucile : entre l'ancienne, écran moins 160 px, et l'écran entier, trop haut) */
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  overflow: hidden;
}
.social-marquee__col { min-width: 0; }
.social-marquee__track { display: flex; flex-direction: column; will-change: transform; animation: marquee-up var(--marquee-speed) linear infinite; }
.social-marquee__col:nth-child(odd) .social-marquee__track { animation-name: marquee-down; }
/* 3 vitesses légèrement différentes : colonnes 1 et 2, colonne 3, colonnes 4 et 5 */
.social-marquee__col:nth-child(3) .social-marquee__track { animation-duration: calc(var(--marquee-speed) * 1.15); }
.social-marquee__col:nth-child(n+4) .social-marquee__track { animation-duration: calc(var(--marquee-speed) * .87); }
/* section qui ne contient que la bande : collée au visuel du dessus et au contenu du dessous */
.case-section.case-section--flush { padding-top: 0; padding-bottom: 0; }
.social-card { margin-bottom: var(--marquee-gap); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-bg-placeholder); }
.social-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.social-card--rounded { border-radius: 6.1% / 4.9%; } /* arrondis des visuels eux-mêmes (Rebranding) */
/* variante inclinée (Les Bambinets 08, d'après une vidéo de référence Dribbble choisie par Lucile) : grille de 6 colonnes
   penchée de 15° ; les écrans montent, chaque colonne à son rythme, avec des « swipes » au hasard (script dans main.js ;
   l'animation CSS ci-dessous ne sert que si le script ne tourne pas) ;
   écrans aux coins arrondis (390 × 855), ombre douce, sans contour de téléphone */
.social-marquee--tilt { position: relative; display: block; height: min(100vh, 960px); min-height: 640px; } /* assez haute pour voir un écran entier quand il passe au centre */
.social-marquee__tilt {
  --marquee-gap: 56px;
  /* assez grande pour couvrir toute la bande une fois tournée (largeur ≥ L·cos15 + H·sin15) */
  position: absolute; left: 50%; top: 50%; width: 125%; height: 190%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--marquee-gap);
  transform: translate(-50%, -50%) rotate(-15deg);
}
/* chaque colonne = 3 écrans répétés 4 fois : un tour (25 %) = 3 écrans ; chaque écran : dérive lente puis swipe rapide */
.social-marquee--tilt .social-marquee__col .social-marquee__track { animation: screens-swipe 15s infinite; }
/* avec le script (main.js) : chaque colonne est animée séparément, au hasard */
.social-marquee--tilt.is-scripted .social-marquee__col .social-marquee__track { animation: none; }
.social-card--screen { border-radius: 13% / 5.9%; background: var(--color-bg-page); box-shadow: 0 0 64px #80808033; } /* écran seul, sans contour de téléphone */
@keyframes screens-swipe {
  0%      { transform: translateY(0);         animation-timing-function: linear; }
  24%     { transform: translateY(-2.08%);    animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  33.33%  { transform: translateY(-8.33%);    animation-timing-function: linear; }
  57.33%  { transform: translateY(-10.42%);   animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  66.67%  { transform: translateY(-16.67%);   animation-timing-function: linear; }
  90.67%  { transform: translateY(-18.75%);   animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
  100%    { transform: translateY(-25%); }
}
@keyframes marquee-up { from { transform: translateY(0); } to { transform: translateY(-25%); } }
@keyframes marquee-down { from { transform: translateY(-25%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .social-marquee__track, .social-marquee--tilt .social-marquee__col .social-marquee__track { animation: none; } }

@media (max-width: 991px) {
  .netatmo-box { grid-template-columns: 1fr; gap: var(--space-16); }
  .range-cards { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-16); }
  .social-marquee { grid-template-columns: repeat(3, 1fr); }
  .social-marquee__col:nth-child(n+4) { display: none; }
  .social-marquee--tilt .social-marquee__col { display: block; } /* bande inclinée : toutes les colonnes restent */
}

@media (max-width: 767px) {
  .netatmo-box { padding: var(--space-20); }
  .range-cards { grid-template-columns: 1fr; gap: var(--space-40); }
  .range-card__name { font-size: 24px; line-height: 34px; }
  .case-section--intro-visual { padding: var(--space-30) var(--gutter); }
  .range-title__promise { font-size: 16px; line-height: 26px; }
  /* Carrousel qui se coupe au bord droit de l'écran */
  .case-section--bleed-right { padding-right: 0; }
  .case-section--bleed-right .section-intro { padding-right: var(--gutter); }
  .social-marquee { --marquee-gap: var(--space-12); --marquee-speed: 22s; grid-template-columns: 1fr 1fr; height: 80vh; min-height: 0; }
  .social-marquee:not(.social-marquee--tilt) { height: 90svh; } /* Rebranding et Segmentation : 90 % de l'écran (entre les 80 % d'avant et l'écran entier) */
  .social-marquee__col:nth-child(n+3) { display: none; }
  .social-marquee--tilt .social-marquee__col { display: block; } /* bande inclinée : toutes les colonnes restent */
  .social-marquee--tilt { height: 90vh; min-height: 0; }
  .social-marquee__tilt { --marquee-gap: var(--space-24); width: 200%; }
}

/* ---------- Les Bambinets (maquette « Maquette · Les Bambinets ») ---------- */
.bg-bambinets-pine { background: var(--color-project-bambinets-pine); }
.bg-bambinets-pollen { background: var(--color-project-bambinets-pollen); }
.bg-bambinets-cream { background: var(--color-project-bambinets-cream); }
.bg-bambinets-pink { background: var(--color-project-bambinets-pink); }
.bg-bambinets-sand { background: var(--color-project-bambinets-sand); }

.key-figures--3 { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-80); } /* 3 chiffres rapprochés (Les Bambinets 05) */
@media (min-width: 1200px) {
  .section-intro + .key-figures--3 { padding-left: calc(371px + 122px); } /* calés sur le texte de l'intro (colonne de droite) */
}
.case-hero-image--bambinets img { object-position: 50% 55%; } /* visuel 4:3 : le téléphone reste entier dans le bandeau */
/* Hero animé des Bambinets (test) : mêmes cadrage et proportions que l'image fixe (bandeau 1440/600, visuel 4:3 calé à 55 %) */
.hero-anim { position: relative; overflow: hidden; aspect-ratio: 1440 / 600; container-type: inline-size; background: var(--color-project-bambinets-pollen); }
.hero-anim__stage { position: absolute; left: 0; width: 100%; aspect-ratio: 4 / 3; top: calc((100% - 75cqw) * .55); }
.hero-anim__stage > * { position: absolute; display: block; margin: 0; }
.case-hero-image.hero-anim img { aspect-ratio: auto; object-fit: fill; }
.hero-anim .hero-anim__fond, .hero-anim .hero-anim__trait { inset: 0; width: 100%; height: 100%; }
/* main + iPhone 16 Pro (mockup de Lucile, peau réchauffée), remontée : l'app entière et le bas de la main ; l'avant-bras est prolongé
   dans le détourage pour dépasser le bas de la scène (visible seulement sur les écrans très carrés) */
.hero-anim .hero-anim__main { left: 32.1875%; top: 23.4167%; width: 47.6875%; transform-origin: 140% 150%; }
/* abeille réduite de 20 % (centre inchangé) ; le conteneur avance, l'image fait le looping autour d'un point au-dessus d'elle */
.hero-anim .hero-anim__abeille { left: 20.75%; top: 31.5875%; width: 12.5%; }
.hero-anim .hero-anim__abeille-vol { position: static; width: 100%; transform-origin: 50% 6%; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-anim:not(.is-played) .hero-anim__trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .hero-anim:not(.is-played) .hero-anim__main,
  .js .hero-anim:not(.is-played) .hero-anim__abeille { opacity: 0; }
  .hero-anim.is-played .hero-anim__trace { stroke-dasharray: 1; animation: hero-trace 2.8s cubic-bezier(.45, .05, .3, 1) both; }
  .hero-anim.is-played .hero-anim__main { animation: hero-main 1.35s .1s cubic-bezier(.16, 1, .3, 1) both; }
  /* une seule courbe pour l'avancée (pas de cassure de vitesse) ; le looping démarre et finit en douceur */
  .hero-anim.is-played .hero-anim__abeille { animation: hero-abeille 2.6s .3s cubic-bezier(.22, .55, .3, 1) both, hero-apparition .5s .3s ease-out both; }
  .hero-anim.is-played .hero-anim__abeille-vol { animation: hero-looping 2.6s .3s cubic-bezier(.45, 0, .55, 1) both; }
}
/* mobile : bandeau 390/260 comme les autres héros (la règle générale ci-dessus l'écrasait), pour garder la main et le téléphone entiers */
@media (max-width: 767px) { .hero-anim { aspect-ratio: 390 / 260; } }
@keyframes hero-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hero-main { from { opacity: 0; transform: translateY(30%) rotate(16deg); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hero-abeille { from { translate: -260% 40%; } to { translate: 0 0; } }
@keyframes hero-apparition { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-looping { from, 18% { rotate: 0deg; } 74%, to { rotate: -360deg; } }

/* Hero animé de Rebranding (partials/rebranding-hero.njk) : la maison s'allume lampe par lampe, en fondu doux (même photo « allumée »
   révélée par des halos), puis toute la lumière ; le logo blanc se construit en même temps. Sans JS ou si « réduire les
   animations » : image finale directement. Version fixe : heroAnimated false dans cases/rebranding.json. */
.hero-reb { position: relative; overflow: hidden; aspect-ratio: 1440 / 600; background: var(--color-project-rebranding-night); }
.hero-reb__stage { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 2600 / 1083; transform: translateX(-50%); }
.case-hero-image.hero-reb .hero-reb__photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.hero-reb__lampe { -webkit-mask-image: var(--halo); mask-image: var(--halo); }
.hero-reb__lampe--1 { --halo: radial-gradient(22% 46% at 43.5% 30.5%, #000 10%, transparent); }
.hero-reb__lampe--2 { --halo: radial-gradient(20% 46% at 38.5% 48%, #000 10%, transparent); }
.hero-reb__lampe--3 { --halo: radial-gradient(18% 46% at 62.7% 50%, #000 10%, transparent); }
.hero-reb__lampe--4 { --halo: radial-gradient(22% 50% at 83% 27.7%, #000 10%, transparent); }
.hero-reb__logo { position: absolute; left: 21.87%; top: 51.38%; width: 56.25%; --k: 1.3; --t0: .35s; }
.hero-reb__logo svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-reb:not(.is-played) :is(.hero-reb__lampe, .hero-reb__lumiere) { opacity: 0; }
  .hero-reb.is-played .hero-reb__lampe { animation: reb-lampe 1.8s var(--delai) cubic-bezier(.4, 0, .3, 1) both; }
  .hero-reb__lampe--1 { --delai: .3s; }
  .hero-reb__lampe--2 { --delai: .6s; }
  .hero-reb__lampe--3 { --delai: .9s; }
  .hero-reb__lampe--4 { --delai: 1.2s; }
  .hero-reb.is-played .hero-reb__lumiere { animation: reb-lumiere 2s 1.4s ease-in-out both; }
}
@keyframes reb-lampe { from { opacity: 0; } to { opacity: 1; } }
@keyframes reb-lumiere { from { opacity: 0; } to { opacity: 1; } }

/* Logo Netatmo animé (partials/logo-anim-white|color.njk, générés par more/sources/rebranding/logo-anim.py), d'après la vidéo
   d'origine : l'emblème se déplie comme un origami (face gauche, toit, face droite), puis les lettres s'écrivent au trait, pointe
   orange devant. Le parent .nt-anim-host démarre l'animation en recevant .is-played ; --k = lenteur (1 = vitesse de la vidéo), --t0 = départ. */
.nt-anim { overflow: visible; }
.nt-anim g, .nt-anim path { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .js .nt-anim-host .nt-anim__trait { stroke-dasharray: 1 1.01; }
  .js .nt-anim-host:not(.is-played) .nt-anim__trait { stroke-dashoffset: 1; }
  .js .nt-anim-host:not(.is-played) :is(.nt-anim__face, .nt-anim__toit) { opacity: 0; }
  .is-played .nt-anim__face--g { transform-origin: 0% 100%; animation: nt-face-g calc(.24s * var(--k, 1)) var(--t0, 0s) cubic-bezier(.3, .7, .4, 1) both; }
  .is-played .nt-anim__toit { transform-origin: 0% 50%; animation: nt-toit calc(.16s * var(--k, 1)) calc(var(--t0, 0s) + .26s * var(--k, 1)) cubic-bezier(.3, .8, .4, 1) both; }
  .is-played .nt-anim__face--d { transform-origin: 50% 0%; animation: nt-face-d calc(.16s * var(--k, 1)) calc(var(--t0, 0s) + .42s * var(--k, 1)) cubic-bezier(.3, .8, .4, 1) both; }
  .is-played .nt-anim__trait { animation: nt-trait calc(.4s * var(--k, 1)) calc(var(--t0, 0s) + (.7s + var(--i) * .1s) * var(--k, 1)) cubic-bezier(.45, .05, .4, 1) both; }
  .is-played .nt-anim__trait--corps { animation-delay: calc(var(--t0, 0s) + (.82s + var(--i) * .1s) * var(--k, 1)); }
}
@keyframes nt-face-g { from { opacity: 0; transform: scale(.05, .12); } 12% { opacity: 1; } 40% { transform: scale(.14, 1); } 78% { transform: scale(1.05, 1); } to { opacity: 1; transform: none; } }
@keyframes nt-toit { from { transform: scaleX(0); } to { transform: none; } }
@keyframes nt-face-d { from { transform: scaleY(0); } to { transform: none; } }
@keyframes nt-trait { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Hero animé de Segmentation (partials/segmentation-hero.njk) : la scène est la toile du PSD (2487 × 1748), cadrée par une
   fenêtre (--wx, --wy, --ww en pixels du PSD) : celle de l'ancienne image en desktop, recentrée sur les packs en mobile.
   Chaque pack : le conteneur fait l'arrivée, l'image flotte ~7 s (de moins en moins) puis s'arrête ; l'ombre suit (plus claire quand le pack monte). */
.hero-seg { --wx: 53; --wy: 420; --ww: 2434; position: relative; overflow: hidden; aspect-ratio: 1440 / 600; container-type: inline-size; background: #c99a78; }
.hero-seg__stage { position: absolute; width: calc(2487 / var(--ww) * 100cqw); aspect-ratio: 2487 / 1748; left: calc(var(--wx) / var(--ww) * -100cqw); top: calc(var(--wy) / var(--ww) * -100cqw); }
.hero-seg__stage > * { position: absolute; margin: 0; }
.case-hero-image.hero-seg img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
.hero-seg .hero-seg__fond { inset: 0; height: 100%; }
.hero-seg__ombre { mix-blend-mode: multiply; }
.hero-seg__pack--gauche { left: 13.349%; top: 50.572%; width: 24.367%; }
.hero-seg__pack--milieu { left: 38.842%; top: 34.497%; width: 21.23%; }
.hero-seg__pack--droite { left: 63.008%; top: 46.568%; width: 15.48%; }
.hero-seg__ombre--gauche { left: 4.182%; top: 67.563%; width: 43.908%; }
.hero-seg__ombre--milieu { left: 25.613%; top: 67.563%; width: 46.844%; }
.hero-seg__ombre--droite { left: 48.211%; top: 68.135%; width: 46.2%; }
.hero-seg__pack--gauche, .hero-seg__ombre--gauche { --from: translateX(-170%) rotate(-8deg); --t: .1s; --amp: -6.4%; --rot: -2deg; }
.hero-seg__pack--milieu, .hero-seg__ombre--milieu { --from: translateY(-150%) rotate(5deg); --t: .3s; --amp: -5.8%; --rot: 1.8deg; }
.hero-seg__pack--droite, .hero-seg__ombre--droite { --from: translateX(270%) rotate(8deg); --t: .5s; --amp: -7%; --rot: 2.2deg; }
@media (max-width: 767px) { .hero-seg { --wx: 230; --wy: 420; --ww: 1820; aspect-ratio: 390 / 260; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-seg:not(.is-played) :is(.hero-seg__pack, .hero-seg__ombre) { opacity: 0; }
  .hero-seg.is-played .hero-seg__pack { animation: seg-arrivee 2s var(--t) cubic-bezier(.16, .84, .3, 1) both; }
  .hero-seg.is-played .hero-seg__ombre { animation: seg-ombre 2s var(--t) ease-out both; }
  /* flottement pendant l'arrivée puis ~5 s une fois en place, de moins en moins ample, puis arrêt complet */
  .hero-seg.is-played .hero-seg__pack img { animation: seg-flotte 7.2s var(--t) ease-in-out both; }
  .hero-seg.is-played .hero-seg__ombre img { transform-origin: 50% 40%; animation: seg-ombre-flotte 7.2s var(--t) ease-in-out both; }
}
@keyframes seg-arrivee { from { opacity: 0; transform: var(--from); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes seg-ombre { from { opacity: 0; } 40% { opacity: 0; } to { opacity: 1; } }
@keyframes seg-flotte {
  0%, 33%, 66%, 100% { transform: none; }
  16% { transform: translateY(var(--amp)) rotate(var(--rot)); }
  50% { transform: translateY(calc(var(--amp) * .75)) rotate(calc(var(--rot) * -.6)); }
  83% { transform: translateY(calc(var(--amp) * .45)) rotate(calc(var(--rot) * .3)); }
}
@keyframes seg-ombre-flotte {
  0%, 33%, 66%, 100% { transform: none; opacity: 1; }
  16% { transform: scale(.9); opacity: .66; }
  50% { transform: scale(.92); opacity: .74; }
  83% { transform: scale(.965); opacity: .88; }
}
.info-cards--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-16); }
.info-cards--5 .info-card { padding: var(--space-24) var(--space-16); }
.info-cards--5 .info-card__title { font-size: 20px; line-height: 28px; }
.info-cards--5 .info-card p { font-size: 14px; line-height: 22px; }

/* écrans de téléphone posés seuls (hors cadre) : largeur fixe, centrés */
.phone-figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin: 0; text-align: center; }
.phone-placeholder { width: 100%; aspect-ratio: 390 / 855; border-radius: var(--radius-md); background: var(--color-bg-placeholder); }

/* 02 : avant / après (wireframe de départ → écran final) */
.before-after { display: grid; grid-template-columns: repeat(4, 208px); justify-content: center; gap: var(--space-40) var(--space-60); }
.before-after__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }

/* 04 : le rouge rendu lisible, palette, typographies, catégories + icônes */
.red-fix { display: grid; grid-template-columns: 1fr auto; gap: var(--space-40); align-items: center; }
.red-fix__text p { margin: var(--space-12) 0 0; }
.red-fix__swatches { display: flex; align-items: center; gap: var(--space-24); }
.red-swatch {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5);
  width: 200px; padding: var(--space-24) var(--space-16);
  border-radius: var(--radius-md); color: var(--color-text-on-image); font-size: 12px; line-height: 18px; text-align: center;
}
.red-swatch { background: var(--swatch); } /* couleurs de contenu (celles de l'app), passées par le gabarit */
.red-swatch__aa { font-family: "Capriola", var(--font-display); font-size: 40px; line-height: 48px; }
.red-fix__arrow { font-size: 20px; }

.app-palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-16); margin: 0 0 var(--space-12); padding: 0; list-style: none; }
.app-swatch {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-5);
  aspect-ratio: 84 / 96; padding: var(--space-12);
  border-radius: var(--radius-sm); background: var(--swatch);
  color: var(--color-text-on-image); font-size: 11px; line-height: 16px; letter-spacing: .04em;
}
.app-swatch b { font-size: 13px; letter-spacing: 0; }
.app-swatch--light { color: var(--color-text-strong); }
.app-swatch--light span { opacity: .7; }
.app-swatch--border { box-shadow: inset 0 0 0 1px var(--color-border-card); }

.type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.type-card { padding: var(--space-30); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.type-card p { margin: 0; }
.type-card__aa { font-size: 96px; line-height: 110px; }
.type-card__name { margin-top: var(--space-16) !important; font-weight: 700; }
.type-card__sample { margin-top: var(--space-8) !important; color: var(--color-text-muted); font-size: 18px; }
.type-card--capriola .type-card__aa, .type-card--capriola .type-card__name, .type-card--capriola .type-card__sample { font-family: "Capriola", sans-serif; }
.type-card--dmsans .type-card__aa, .type-card--dmsans .type-card__name, .type-card--dmsans .type-card__sample { font-family: "DM Sans", sans-serif; }

/* Catégories (téléphone) + jeu d'icônes (716 × 524) à la même hauteur, à toutes les largeurs :
   largeur du jeu d'icônes L = (largeur du bloc − 40 − 12 × (1 − 390/855)) / (1 + 524/716 × 390/855), au plus 716 px ;
   hauteur du téléphone = L × 524/716 (écran = cette hauteur − 2 × 6 px de bord) */
.categories-row {
  container-type: inline-size;
  display: grid; grid-template-columns: 1fr min(716px, calc((100% - 46.53px) / 1.33382)); gap: 40px; align-items: start;
}
.categories-row .phone { width: auto; max-width: none; height: calc(min(716px, (100cqw - 46.53px) / 1.33382) * 0.73184 - 12px); }

/* 06 et 07 : paires d'écrans centrées */
.phone-pair { display: flex; justify-content: center; gap: var(--space-48); }
.phone-pair .phone { width: 228px; }
.phone-pair--large .phone { width: 248px; }

/* 06 (desktop) : les 2 écrans à gauche, les 5 règles en colonne à droite, en cartes horizontales, à la même hauteur que les
   écrans (largeur des écrans --phone-w et hauteur de la liste --list-h calculées dans main.js, data-equal-height ; valeurs de
   repli sans JS). 07 (desktop) : titre et texte à gauche, écrans à droite, de la même taille que dans 06 (--bamb-phone-w). */
.a11y-split { display: flex; flex-direction: column; gap: var(--space-48); }
.a11y-split .info-cards { order: -1; }
.gamif-split { display: flex; flex-direction: column; gap: var(--space-48); }
@media (min-width: 992px) {
  .a11y-split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-60); align-items: start; }
  .a11y-split .info-cards { order: 0; }
  .a11y-split__phones { gap: var(--space-30); }
  .a11y-split__phones .phone { width: var(--phone-w, 220px); }
  .a11y-split .info-cards--5 { display: flex; flex-direction: column; gap: var(--space-12); min-height: var(--list-h, 0); }
  .a11y-split.is-measuring .info-cards--5 { min-height: 0; }
  .a11y-split .info-card {
    flex: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-16); row-gap: 2px;
    align-content: center; align-items: center; padding: var(--space-16) var(--space-24);
  }
  .a11y-split .info-card__picto { grid-row: span 2; width: 44px; height: 44px; font-size: 18px; }
  .a11y-split .info-card__title { font-size: 20px; line-height: 28px; } /* Figma : Heading/Card Small */
  .a11y-split .info-card p { grid-column: 2; font-size: 14px; line-height: 24px; } /* Figma : Body/Small */

  /* trop étroit pour l'équilibre (main.js) : règles en grille au-dessus, écrans dessous, comme en tablette */
  .a11y-split.is-stacked { display: flex; align-items: stretch; }
  .a11y-split.is-stacked .info-cards { order: -1; }
  .a11y-split.is-stacked .info-cards--5 { display: grid; min-height: 0; }
  .a11y-split.is-stacked .info-card { display: flex; padding: var(--space-24) var(--space-16); }
  .a11y-split.is-stacked .info-card__picto { width: 56px; height: 56px; font-size: 20px; }
  .a11y-split.is-stacked .info-card p { font-size: 14px; }
  .a11y-split.is-stacked .phone { width: 228px; }

  .gamif-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-80); align-items: center; }
  .gamif-split .section-intro { grid-template-columns: 1fr; gap: var(--space-24); }
  .gamif-split .phone-pair { gap: var(--space-30); }
  .gamif-split .phone-pair .phone { width: var(--bamb-phone-w, 220px); }
}

/* 08 : six parcours, 2 par ligne */

/* 09 : prototype (texte + emplacement de la vidéo au format téléphone) */
.prototype { display: grid; grid-template-columns: 1fr 312px; gap: var(--space-100); align-items: center; }
/* prototype Figma dans un téléphone (écran 390 × 855 + bord de 6 px, comme Phone Screen) */
.proto-phone {
  position: relative; box-sizing: content-box; width: calc(100% - 12px); aspect-ratio: 390 / 855;
  border: 6px solid var(--color-device-bezel); border-radius: 13% / 5.9%; overflow: hidden;
  background: var(--color-project-bambinets-cream); box-shadow: var(--shadow-card);
}
.proto-phone__start { position: absolute; inset: 0; display: block; cursor: pointer; }
.proto-phone__start img, .proto-phone__start video { display: block; width: 100%; height: 100%; object-fit: cover; }
.prototype__text { display: flex; flex-direction: column; gap: var(--space-24); }
.prototype__text h2, .prototype__text p { margin: 0; }
.phone-placeholder--video { border-radius: var(--radius-lg); }

@media (max-width: 991px) {
  .before-after { grid-template-columns: repeat(2, 208px); }
  .info-cards--5 { grid-template-columns: repeat(3, 1fr); }
  .app-palette { grid-template-columns: repeat(4, 1fr); }
  .red-fix { grid-template-columns: 1fr; }
  .categories-row { grid-template-columns: 1fr; justify-items: center; }
  .prototype { grid-template-columns: 1fr 240px; gap: var(--space-40); }
}
@media (max-width: 767px) {
  .before-after { grid-template-columns: 1fr 1fr; gap: var(--space-30) var(--space-16); }
  .info-cards--5 { grid-template-columns: 1fr; }
  .key-figures--3 { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--space-24); } /* 3 chiffres rapprochés (Les Bambinets 05), écart réduit pour tenir dans 390 px */
  .red-fix__swatches { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .red-swatch { width: 100%; align-items: flex-start; padding: var(--space-24); }
  .red-fix__arrow { align-self: center; transform: rotate(90deg); }
  .app-palette { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .app-swatch { aspect-ratio: auto; min-height: 72px; }
  .type-cards { grid-template-columns: 1fr; }
  .type-card__aa { font-size: 64px; line-height: 76px; }
  .categories-row .phone { width: 200px; height: auto; }
  .phone-pair { gap: var(--space-16); }
  .phone-pair .phone { width: calc(100% - 2 * var(--phone-bezel)); max-width: 170px; }
  .phone-pair .phone-figure { flex: 1; }
  .prototype { grid-template-columns: 1fr; }
  .phone-placeholder--video { width: 200px; justify-self: center; }
}

/* ---------- Temps forts commerciaux (partials/case-temps-forts.njk, maquette « Maquette · Temps forts ») ---------- */
.bg-promo-night { background: var(--color-project-promo-night); }
.bg-promo-french-blue { background: var(--color-project-promo-french-blue); }
.bg-promo-seasons { background: var(--color-project-promo-seasons); }
.bg-promo-fathers-day { background: var(--color-project-promo-fathers-day); }
.bg-promo-black-friday { background: var(--color-project-promo-black-friday); }
.bg-promo-beige { background: var(--color-project-promo-beige); }

/* 02 : frise du calendrier codée (--x = centre du macaron en % de la frise ; --mw = largeur d'un macaron) */
.promo-cal-scroll { overflow-x: auto; scrollbar-width: none; }
.promo-cal { --mw: 12.4cqw; --duree: 2.6s; position: relative; container-type: inline-size; padding: 0 1cqw var(--space-24); }
.promo-cal__row { position: relative; height: calc(var(--mw) * 233 / 418); }
.promo-cal__macaron { position: absolute; top: 0; left: calc(var(--x) * 1% - var(--mw) / 2); width: var(--mw); height: auto; }
.promo-cal__axis { position: relative; margin: 3.4cqw 0 3cqw; }
.promo-cal__line { display: block; height: 2px; border-radius: 1px; background: var(--color-text-primary); transform-origin: 0 50%; }
.promo-cal__months { display: grid; grid-template-columns: repeat(12, 1fr); margin: 0; padding: 0; list-style: none; }
.promo-cal__months li {
  position: relative; padding-top: var(--space-16); text-align: center;
  font-size: 14px; font-weight: 600; line-height: 18px; letter-spacing: .05em; text-transform: uppercase; /* Figma : Label/Calendar */
}
.promo-cal__months li::before { content: ""; position: absolute; left: 50%; top: -5px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--color-text-primary); }
@media (prefers-reduced-motion: no-preference) {
  .js .promo-cal:not(.is-played) .promo-cal__line { transform: scaleX(0); }
  .js .promo-cal:not(.is-played) :is(.promo-cal__months li, .promo-cal__macaron) { opacity: 0; }
  .promo-cal.is-played .promo-cal__line { animation: promo-cal-line var(--duree) cubic-bezier(.45, .1, .5, 1) both; }
  .promo-cal.is-played .promo-cal__months li { animation: promo-cal-month .5s calc((var(--i) + .5) / 12 * var(--duree)) ease-out both; }
  .promo-cal.is-played .promo-cal__macaron { animation: promo-cal-pop .7s calc(var(--x) / 100 * var(--duree)) cubic-bezier(.3, 1.4, .5, 1) both; }
  .promo-cal.is-played .promo-cal__row--bottom .promo-cal__macaron { animation-name: promo-cal-pop-bas; }
}
@keyframes promo-cal-line { from { transform: scaleX(0); } to { transform: none; } }
@keyframes promo-cal-month { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes promo-cal-pop { from { opacity: 0; transform: translateY(30%) scale(.6); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes promo-cal-pop-bas { from { opacity: 0; transform: translateY(-30%) scale(.6); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
.figure--transparent .figure__media { background: none; } /* image détourée (calendrier) posée sur le fond de la section */
.fdp-carrousel .figure__media img { object-position: 52% 50%; } /* mockup carrousel Fête des pères recadré : téléphone et cartes entiers */
.case-hero-image--placeholder { aspect-ratio: 1440 / 600; background: var(--color-bg-placeholder); } /* visuel d'en-tête à fournir */

/* En-tête de partie (Partie 1 / Partie 2) */
.part-head { display: flex; flex-direction: column; gap: var(--space-8); }
.part-head__title { margin: 0; }
.part-head__badge { margin: var(--space-16) 0 0; }

/* 03 : bento, 3 colonnes ; la tuile media kit occupe 2 colonnes */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.bento__tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-16); padding: var(--space-30); border-radius: var(--radius-md); }
.bento__tile p, .bento__title, .bento__list { margin: 0; }
.bento__tile--figure { justify-content: flex-start; }
.bento__number { font-family: var(--font-display); font-size: 96px; font-weight: 600; line-height: 96px; /* Figma : Display/Figure */ margin-top: var(--space-12) !important; }
.bento__label { margin-top: auto !important; }
.bento__title { margin-top: var(--space-8); font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.bento__list { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-16) !important; padding: 0; list-style: none; font-size: 14px; line-height: 24px; }
.bento__note { color: var(--color-text-muted); font-size: 14px; line-height: 24px; }
.bento__tile--kit { grid-column: span 2; display: grid; grid-template-columns: 300px 1fr; gap: var(--space-40); padding: var(--space-30); }
.bento__tile--kit .bento__note { margin-top: var(--space-16); }
.bento__columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-content: start; }
.bento__columns .bento__list { margin-top: 0 !important; }

/* 04 : en-tête de zoom (titre + objectif) */
.zoom-head { display: flex; flex-direction: column; gap: var(--space-16); }
.zoom-head p { margin: 0; }
.zoom-head__title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; }
.full-bleed--inset .full-bleed__media { border-radius: var(--radius-sm); overflow: hidden; }
.full-bleed--inset .full-bleed__caption { left: var(--space-24); }

/* French Days : bannière + 1:1 + 4:5 à gauche, story 9:16 à droite sur toute la hauteur */
.fd-mosaic { display: grid; grid-template-columns: 371fr 296fr 445fr; grid-template-areas: "banner banner story" "square portrait story"; gap: var(--space-24); align-items: start; }
.fd-mosaic__banner { grid-area: banner; }
.fd-mosaic__square { grid-area: square; }
.fd-mosaic__portrait { grid-area: portrait; }
.fd-mosaic__story { grid-area: story; align-self: stretch; }
/* la story occupe toute la hauteur de la mosaïque : son visuel s'étire (léger recadrage) pour que son bas s'aligne sur le carré et le 4:5 */
.fd-mosaic__story .figure__media { position: relative; flex: 1; min-height: 0; aspect-ratio: auto !important; }
.fd-mosaic__story .figure__media img { position: absolute; inset: 0; }

/* French Days : mosaïque à gauche, mockup du carrousel à droite, même hauteur (le mockup remplit la hauteur de la mosaïque) */
.fd-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); align-items: stretch; }
.fd-split .fd-mosaic { gap: var(--space-16); }
.fd-split--wide { grid-template-columns: 2fr 3fr; } /* Fête des pères : mockup à gauche (plus petit), mosaïque plus large à droite */
.fd-split__mockup { display: flex; flex-direction: column; }
.fd-split__mockup .figure__media { position: relative; flex: 1; min-height: 0; }
.fd-split__mockup .figure__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* French Days : page in-app et e-mail (cadre Figma « FD inapp + email », 2283 × 1224), toute la largeur du contenu. Positions en %
   de la scène, reprises du cadre. Verre des mails = effet « Glass » de Figma (blanc 20 %, flou de ce qui passe dessous). */
.fd-inapp { position: relative; overflow: hidden; aspect-ratio: 2283 / 1224; container-type: inline-size; border-radius: var(--radius-sm); }
.fd-inapp > img, .fd-inapp__mail { position: absolute; }
.fd-inapp__fond { inset: 0; width: 100%; height: 100%; }
.fd-inapp__mail { width: 32.8077%; }
.fd-inapp__mail--haut { left: 34.735%; top: 12.2549%; height: 87.7451%; }
.fd-inapp__mail--bas { left: 61.6294%; top: 0; height: 91.6667%; }
.fd-inapp__verre { position: absolute; inset: 0; background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
  -webkit-backdrop-filter: blur(1.1cqw); backdrop-filter: blur(1.1cqw); }
.fd-inapp__mail--haut .fd-inapp__verre { border-radius: .876cqw .876cqw 0 0; }
.fd-inapp__mail--bas .fd-inapp__verre { border-radius: 0 0 .876cqw .876cqw; }
.fd-inapp__mail img { position: absolute; left: 7.2096%; width: 85.447%; height: auto; }
.fd-inapp__mail--haut img { top: 5.0279%; }
.fd-inapp__mail--bas img { top: 0; }
.fd-inapp .fd-inapp__phone { --phone-bezel: max(2px, .45cqw); left: calc(8.4976% - var(--phone-bezel)); top: calc(16.993% - var(--phone-bezel));
  width: 17.389%; aspect-ratio: 397 / 859; border-color: var(--color-device-bezel); background: var(--color-device-bezel); } /* bord foncé même sur la section sombre */

/* Animation : l'écran in-app apparaît, puis le haut du mail monte du bas, puis le bas du mail descend du haut en passant dessous */
@media (prefers-reduced-motion: no-preference) {
  .js .fd-inapp__phone { transition: opacity .8s ease, translate 1s cubic-bezier(.22, .6, .3, 1), scale 1s cubic-bezier(.22, .6, .3, 1); }
  .js .fd-inapp__mail { transition: translate 1.2s cubic-bezier(.2, .75, .25, 1); }
  .js .fd-inapp__mail--haut { transition-delay: .7s; }
  .js .fd-inapp__mail--bas { transition-delay: 1.5s; }
  .js .fd-inapp:not(.is-played) .fd-inapp__phone { opacity: 0; translate: 0 5%; scale: .96; }
  .js .fd-inapp:not(.is-played) .fd-inapp__mail--haut { translate: 0 102%; }
  .js .fd-inapp:not(.is-played) .fd-inapp__mail--bas { translate: 0 -102%; }
}

/* 06 : l'idée */
.idea-text { display: flex; flex-direction: column; gap: var(--space-16); max-width: 820px; }
.idea-text p { margin: 0; }

/* 07 : tableau Teasing / Révélation */
.compare-table { overflow-x: auto; border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-bg-page); }
.compare-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 24px; }
.compare-table th, .compare-table td { width: 33.33%; padding: var(--space-16) var(--space-24); border-top: 1px solid var(--color-border-card); text-align: left; vertical-align: top; }
.compare-table thead th { border-top: 0; background: var(--color-bg-subtle); font-weight: 600; } /* Figma : Body/Small Strong */
.compare-table tbody th { font-weight: 600; }
.section-note { margin: 0; }

/* 08 : un public par colonne (carte + visuels) */
.publics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: start; }
.publics__col { display: flex; flex-direction: column; gap: var(--space-16); }
.publics__card { background: var(--color-bg-subtle); }
.publics__card .info-card__picto { font-size: 12px; text-transform: uppercase; }

/* 09 : landing page, desktop + mobile côte à côte */
.landing-row { display: grid; grid-template-columns: 876fr 260fr; gap: var(--space-24); align-items: start; }

@media (max-width: 991px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__tile--kit { grid-template-columns: 1fr; }
  .publics { grid-template-columns: 1fr; }
  .fd-split { grid-template-columns: 1fr; }
  .fd-split__mockup .figure__media { flex: none; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .promo-cal { min-width: 860px; } /* mobile : la frise défile horizontalement */
  .bento { grid-template-columns: 1fr; gap: var(--space-16); }
  .bento__tile--kit { grid-column: auto; }
  .bento__number { font-size: 64px; line-height: 68px; }
  .figure-grid--seasons, .figure-grid--situations { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .fd-mosaic { grid-template-columns: 1fr 1fr; grid-template-areas: "banner banner" "story square" "story portrait"; gap: var(--space-16); }
  .landing-row { grid-template-columns: 1fr; }
  .landing-row .figure:last-child { width: 60%; justify-self: center; }
  .compare-table th, .compare-table td { padding: var(--space-12); }
  .full-bleed--inset .full-bleed__caption { left: var(--space-12); bottom: var(--space-12); }
}


/* ========== Les Cordons Bleus ========== */

/* Fonds de section : palette « tomate en action » (tokens color/project/cordons/*) */
.bg-cordons-sand { background: var(--color-project-cordons-sand); }
.bg-cordons-sand-deep { background: var(--color-project-cordons-sand-deep); }
.bg-cordons-sky { background: var(--color-project-cordons-sky); }
.bg-cordons-night { background: var(--color-project-cordons-night); }
.bg-cordons-tomato { background: var(--color-project-cordons-tomato); }
.bg-cordons-lemon { background: var(--color-project-cordons-lemon); }
.bg-cordons-cobalt { background: var(--color-project-cordons-cobalt); }
.bg-cordons-olive { background: var(--color-project-cordons-olive); }

/* Bandeau de chapitre (Part Header sur fond franc) */
.chapter-band { padding-top: var(--space-60); padding-bottom: var(--space-60); scroll-margin-top: 72px; }

/* Chapter Nav : sommaire collant en haut de l'écran, chapitre en cours en surbrillance (main.js, data-chapter-nav) */
.chapter-nav { position: sticky; top: 0; z-index: 5; padding: var(--space-12) var(--gutter); }
.chapter-nav__inner { display: flex; align-items: center; gap: var(--space-8); }
.chapter-nav__label { margin-right: var(--space-8); }
.chapter-nav__link {
  flex: none; padding: var(--space-5) var(--space-16);
  border: 1px solid currentColor; border-radius: var(--radius-full);
  color: var(--color-text-primary); font-size: 14px; font-weight: 600; line-height: 24px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chapter-nav__link:hover { border-color: var(--color-action-primary); }
.chapter-nav__link.is-current { border-color: var(--color-action-primary); background: var(--color-action-primary); color: var(--color-text-inverse); }

/* Findings Table : constats triés par gravité (point de couleur + gravité | constat | détail), filets fins */
.findings { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-card); }
.findings__row { display: grid; grid-template-columns: 160px 280px 1fr; gap: var(--space-8) var(--space-24); align-items: baseline; padding: var(--space-16) 0; border-bottom: 1px solid var(--color-border-card); font-size: 14px; line-height: 24px; }
.findings__level { display: flex; align-items: center; gap: var(--space-8); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.findings__level::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--color-text-muted)); }
.findings__row--bloquant { --dot: var(--color-project-cordons-tomato); }
.findings__row--majeur { --dot: var(--color-project-cordons-lemon); }
.findings__title { font-weight: 600; }
.findings__detail { color: var(--color-text-muted); }

/* Quote Card : question-clé citée */
.quote-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.quote-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); padding-left: var(--space-20); border-left: 2px solid var(--color-action-primary); }
.quote-card__text { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; } /* Heading/Card Small */
.quote-card__label { font-size: 14px; line-height: 24px; color: var(--color-text-muted); }

/* Persona Card : photo 4:5, nom et âge, rôle et besoin */
.persona-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); align-items: stretch; }
.persona-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-30) var(--space-24); border-radius: var(--radius-md); background: var(--color-bg-page); }
.persona-card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-8); }
.persona-card__name { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 40px; } /* Heading/Card */
.persona-card p { margin: 0; } /* Body/Default */

/* Priority Card : fonctionnalité priorisée, intensité de couleur par priorité (P0 bleu nuit, P1 bleu cobalt, P2 blanc) */
.priority-legend { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); margin: 0; padding: 0; list-style: none; }
.priority-legend__item { display: flex; align-items: center; gap: var(--space-8); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.priority-legend__item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-border-card); }
.priority-legend__item--p0::before { background: var(--color-project-cordons-night); }
.priority-legend__item--p1::before { background: var(--color-project-cordons-cobalt); }
.priority-legend__item--p2::before { background: var(--color-bg-page); }
.priority-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); align-items: stretch; }
.priority-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); padding: var(--space-24); border-radius: var(--radius-md); border: 1px solid var(--color-border-card); background: var(--color-bg-page); color: var(--color-text-primary); }
.priority-card--p0 { background: var(--color-project-cordons-night); border-color: transparent; }
.priority-card--p1 { background: var(--color-project-cordons-cobalt); border-color: transparent; }
.priority-card__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-border-card); font-size: 12px; font-weight: 600; }
.priority-card--p2 .priority-card__badge { background: var(--color-project-cordons-sand-deep); }
.priority-card__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; } /* Heading/Card Small */
.priority-card p { margin: 0; font-size: 14px; line-height: 24px; }
.priority-card__cost { margin-top: auto !important; padding-top: var(--space-8); color: var(--color-text-muted); }

/* Site Tree : arborescence (accueil, 4 menus et leurs pages, liens toujours visibles) */
.site-tree { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); padding: var(--space-40) var(--space-30); border-radius: var(--radius-md); background: var(--color-bg-page); }
.site-tree__heading { align-self: flex-start; }
.site-tree__root { margin: 0; padding: var(--space-5) var(--space-30); font-size: 14px; line-height: 24px; border-radius: var(--radius-full); background: var(--color-project-cordons-night); color: var(--color-text-inverse); font-weight: 600; }
.site-tree__branches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); width: 100%; padding-top: var(--space-24); }
.site-tree__branches::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; border-top: 2px solid var(--color-border-card); }
.site-tree__branches::after { content: ""; position: absolute; top: calc(-1 * var(--space-24)); left: 50%; height: var(--space-24); border-left: 2px solid var(--color-border-card); }
.site-tree__branch { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.site-tree__branch::before { content: ""; position: absolute; top: calc(-1 * var(--space-24)); left: 50%; height: var(--space-24); border-left: 2px solid var(--color-border-card); }
.site-tree__branch ul { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0 0 0 var(--space-16); list-style: none; border-left: 2px solid var(--color-border-card); }
.site-tree__node { margin: 0; padding: var(--space-5) var(--space-12); border: 1px solid var(--color-border-card); border-radius: var(--radius-sm); font-size: 14px; line-height: 24px; background: var(--color-bg-page); }
.site-tree__node--main { background: var(--color-project-cordons-sky); border-color: transparent; font-weight: 600; text-align: center; }
.site-tree__extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--color-border-card); width: 100%; }
.site-tree__extras .eyebrow-tag { margin-right: var(--space-8); }
.site-tree__node--cta { background: var(--color-project-cordons-tomato); border-color: transparent; color: var(--color-text-inverse); font-weight: 600; }

/* Divers */
.list-items--3 { grid-template-columns: repeat(3, 1fr); }
.list-items--3 .list-item:nth-child(3) { border-top: 0; }
.key-figures--4 { grid-template-columns: repeat(4, 1fr); }
.section-intro--title-only + .key-figures--3 { padding-left: 0; }
.key-figures--3 .key-figure { max-width: 320px; }
.compare-table--4 th, .compare-table--4 td { width: 25%; }
.figure--white .figure__media:has(img) { background: var(--color-bg-page); }
.figure__media--zoom { display: block; cursor: zoom-in; }
.phone-row { display: flex; justify-content: center; gap: var(--space-40); }
.phone-row .phone-figure { flex: 0 1 220px; }
.phone-row .phone { width: calc(100% - 2 * var(--phone-bezel)); }

@media (max-width: 991px) {
  .findings__row { grid-template-columns: 140px 1fr; }
  .findings__detail { grid-column: 2; }
  .persona-cards, .priority-cards { grid-template-columns: 1fr 1fr; }
  .site-tree__branches { grid-template-columns: 1fr 1fr; }
  .site-tree__branches::before, .site-tree__branches::after { display: none; }
  .site-tree__branch::before { display: none; }
  .key-figures--4 { grid-template-columns: 1fr 1fr; }
  .phone-row { flex-wrap: wrap; }
  .phone-row .phone-figure { flex: 0 1 calc(50% - var(--space-20)); max-width: 220px; }
}
@media (max-width: 767px) {
  .chapter-nav__inner { overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .chapter-nav__label { display: none; }
  .findings__row { grid-template-columns: 1fr; gap: var(--space-4, 4px); }
  .findings__detail { grid-column: auto; }
  .quote-cards, .persona-cards, .priority-cards, .list-items--3 { grid-template-columns: 1fr; }
  .list-items--3 .list-item:nth-child(-n+3) { border-top: 1px solid var(--color-border-card); }
  .list-items--3 .list-item:first-child { border-top: 0; }
  .site-tree { padding: var(--space-24) var(--space-16); }
  .site-tree__branches { grid-template-columns: 1fr; }
  .phone-row { gap: var(--space-16); }
  .key-figures-stack .key-figures--3 { grid-template-columns: 1fr; row-gap: var(--space-16); }
  .list-stack-mobile .list-items { grid-template-columns: 1fr; }
  .list-stack-mobile .list-item:nth-child(2) { border-top: 1px solid var(--color-border-card); }
  .case-hero-image--cordons img { aspect-ratio: 2880 / 1200; } /* mobile : le montage ordinateur + téléphone reste entier */
}

/* ---------- Retour en haut (Figma : Back To Top) ---------- */
.back-to-top {
  position: fixed; right: var(--header-x); bottom: var(--space-24); z-index: 30;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-action-primary); color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background-color .3s;
}
.back-to-top svg { width: 22px; height: 22px; }
.back-to-top:hover { background: var(--color-action-primary-hover); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) { .back-to-top { width: 44px; height: 44px; bottom: var(--space-16); } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

/* ---------- Visuels du haut des pages projets : toute la hauteur de l'écran (ordinateur, tablette à l'horizontale) ----------
   Chaque visuel couvre l'écran en gardant son sujet : les scènes animées sont calées sur leur point d'intérêt,
   le montage des Cordons Bleus reste entier sur son fond bleu ciel. Mobile et tablette verticale : bandeau inchangé. */
@media (min-width: 768px) and (orientation: landscape) {
  .case-hero-image { position: relative; height: 100svh; min-height: 560px; overflow: hidden; container-type: size; }
  .case-hero-image > img, picture.case-hero-image img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .case-hero-image--cordons { background: var(--color-project-cordons-sky); }
  .case-hero-image--cordons > img { object-fit: contain; }
  .case-hero-image--placeholder { aspect-ratio: auto; }
  .hero-anim, .hero-reb, .hero-seg, .hero-tf, .hero-cb, .hero-lc, .hero-em { aspect-ratio: auto; }
  .hero-anim__stage {
    --w: max(100cqw, calc(100cqh * 4 / 3));
    width: var(--w); left: calc((100cqw - var(--w)) / 2); top: calc((100cqh - var(--w) * .75) * .55);
  }
  .hero-seg__stage {
    --w: max(100cqw, calc(100cqh * 2487 / 1748)); --h: calc(var(--w) * 1748 / 2487);
    width: var(--w);
    left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * .51), 0px);
    top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--h) * .53), 0px);
  }
}

/* Mobile et tablette verticale : le visuel du haut garde son bandeau ; le menu transparent se pose sur une bande
   de la couleur du haut du visuel (bordure : le cadrage du visuel ne bouge pas). */
@media (max-width: 767px), (orientation: portrait) {
  .case-hero-image { box-sizing: content-box; border-top: var(--header-h) solid var(--hero-top, var(--color-bg-page)); }
  .hero-reb { --hero-top: var(--color-project-rebranding-night); }
  .hero-anim, .case-hero-image--bambinets { --hero-top: var(--color-project-bambinets-pollen); }
  .hero-seg { --hero-top: #b88d6c; }
  .case-hero-image--cordons { --hero-top: var(--color-project-cordons-sky); }
  .case-hero-image--promo { --hero-top: var(--color-project-promo-hero); }
}

/* ---------- Temps forts : hero animé (les cartes se déposent sur le fond) ----------
   Scène du PSD 4500 × 3000 ; --wx --wy --ww --wh = fenêtre cadrée (comme hero.jpg / hero-mobile.jpg), qui couvre le bandeau. */
.hero-tf { --wx: 585; --wy: 390; --ww: 3330; --wh: 2220; position: relative; overflow: hidden; aspect-ratio: 3 / 2; container-type: size; background: var(--color-project-promo-hero); }
.hero-tf__stage {
  --k: max(calc(100cqw / var(--ww)), calc(100cqh / var(--wh)));
  position: absolute; width: calc(4500 * var(--k)); aspect-ratio: 3 / 2;
  left: calc(50cqw - (var(--wx) + var(--ww) / 2) * var(--k)); top: calc(50cqh - (var(--wy) + var(--wh) / 2) * var(--k));
}
.hero-tf__stage > * { position: absolute; margin: 0; }
.case-hero-image.hero-tf img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: fill; }
.hero-tf__ombre { mix-blend-mode: multiply; }
@media (min-width: 768px) and (orientation: landscape) { .hero-tf { --wx: 383.5; --wy: 315; --ww: 3733; --wh: 2100; aspect-ratio: auto; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-tf:not(.is-played) :is(.hero-tf__carte, .hero-tf__ombre) { opacity: var(--o, 0); }
  .js .hero-tf:not(.is-played) .hero-tf__carte { transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(var(--r)); } /* même position qu'au départ de l'animation */
  .hero-tf.is-played .hero-tf__carte { animation: tf-depose var(--t) var(--d) cubic-bezier(.22, .61, .36, 1) both; }
  .hero-tf.is-played .hero-tf__ombre { animation: tf-ombre var(--t) var(--d) cubic-bezier(.22, .61, .36, 1) both; }
}
/* la carte arrive d'un peu au-dessus, agrandie et inclinée, flotte (léger balancement qui dépasse un peu) puis se pose */
@keyframes tf-depose {
  0% { opacity: var(--o, 0); transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(var(--r)); }
  18% { opacity: 1; }
  62% { transform: translate(calc(var(--x) * -.08), calc(var(--y) * .06)) scale(1.012) rotate(calc(var(--r) * -.25)); }
  82% { transform: translate(calc(var(--x) * .03), calc(var(--y) * -.02)) scale(1.003) rotate(calc(var(--r) * .08)); }
  100% { opacity: 1; transform: none; }
}
/* son ombre : floue (pas de traits nets décalés), à peine décalée et pâle tant que la carte est en l'air, puis se précise sous elle */
@keyframes tf-ombre {
  0% { opacity: calc(var(--o, 0) * .6); filter: blur(calc(14px - var(--o, 0) * 8px)); transform: translate(calc(var(--x) * .3), calc(var(--y) * .15)) scale(calc(1 + (var(--s, 1.1) - 1) * .6)); }
  50% { opacity: .55; filter: blur(5px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- Les Cordons Bleus : hero animé (ordinateur sur un socle, partials/cordons-hero.njk) ----------
   Scène du PSD 5366 × 3584 ; --wx --wy --ww --wh = fenêtre cadrée sur l'ordinateur, qui couvre le bandeau (comme .hero-tf).
   Positions en % de la scène (écran : objet dynamique du PSD ; encoche : masque de l'écran). La vidéo de l'écran est la seule animation. */
.hero-cb { --wx: 1030; --wy: 770; --ww: 3300; --wh: 2200; --hero-top: #bdb1a2; position: relative; overflow: hidden; aspect-ratio: 3 / 2; container-type: size; background: #bdb1a2; }
.hero-cb__stage {
  --k: max(calc(100cqw / var(--ww)), calc(100cqh / var(--wh)));
  position: absolute; width: calc(5366 * var(--k)); aspect-ratio: 5366 / 3584;
  left: calc(50cqw - (var(--wx) + var(--ww) / 2) * var(--k)); top: calc(50cqh - (var(--wy) + var(--wh) / 2) * var(--k));
}
.hero-cb__stage > * { position: absolute; display: block; margin: 0; }
.case-hero-image.hero-cb img { aspect-ratio: auto; object-fit: fill; }
.hero-cb .hero-cb__fond { inset: 0; width: 100%; height: 100%; }
.hero-cb__ecran { left: 32.24%; top: 32.42%; width: 34.46%; height: 32.39%; object-fit: fill; background: #0d1b2e; }
.hero-cb .hero-cb__encoche { left: 32.24%; top: 32.31%; width: 34.73%; height: 32.65%; }
@media (min-width: 768px) and (orientation: landscape) { .hero-cb { --wx: 630; --wy: 717; --ww: 4100; --wh: 2306; aspect-ratio: auto; } }

/* ---------- Lancement : hero animé (partials/lancement-hero.njk, calques et valeurs : more/sources/lancement/hero-anime/calques.py) ----------
   Repère = la photo KV (5000 × 3750) ; --wx --wy --ww --wh = cadrage du hero fixe (hero.jpg), qui couvre le bandeau (comme .hero-tf).
   Départ = vignette de l'accueil en miroir : 3 bandes (clip-path) sur le beige, photo réduite (la zone de la vignette remplit la boîte
   des bandes), thermostat flottant posé sur celui de la photo (il le cache). Trois ronds s'allongent en bandes (mouvement inverse du survol de la vignette),
   puis les bandes grandissent jusqu'à couvrir le cadrage pendant que la photo zoome ; le thermostat suit celui de la photo et
   disparaît quand celui-ci devient bien visible. */
.hero-lc { --wx: 625; --wy: 778; --ww: 3750; --wh: 2344; position: relative; overflow: hidden; aspect-ratio: 390 / 260; container-type: size; background: var(--color-project-lancement-beige); }
@media (min-width: 768px) and (orientation: landscape) { .hero-lc { aspect-ratio: auto; } }
.hero-lc__stage {
  --k: max(calc(100cqw / var(--ww)), calc(100cqh / var(--wh)));
  position: absolute; width: calc(5000 * var(--k)); aspect-ratio: 4 / 3;
  left: calc(50cqw - (var(--wx) + var(--ww) / 2) * var(--k)); top: calc(50cqh - (var(--wy) + var(--wh) / 2) * var(--k));
}
.hero-lc__bande { position: absolute; inset: 0; }
.case-hero-image.hero-lc img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }
.hero-lc__photo { transform-origin: 0 0; }
.hero-lc__objet { position: absolute; left: 59.04%; top: 35.485%; width: 18.8%; aspect-ratio: 3701 / 3223; opacity: 0; }
.case-hero-image.hero-lc .hero-lc__objet--ombre img { position: absolute; left: -5.882%; top: 2.142%; width: 98.565%; height: 144.486%; }
.hero-lc__objet--ombre { mix-blend-mode: multiply; }
/* bandes (en % de la photo) : rond du départ (--hr / --br), puis place dans la vignette ; elles grandissent ensuite jusqu'aux bords de
   la photo, coins de plus en plus arrondis (rayon final 2200 unités : le cadrage reste couvert, coins compris) */
.hero-lc__bande--1 { --h: 37.032%; --d: 57.333%; --b: 22.4%; --g: 29.541%; --hr: 60.099%; --br: 22.4%; --rx: 6.563%; --ry: 8.751%; --dec: .05s; }
.hero-lc__bande--2 { --h: 29.6%; --d: 43.386%; --b: 22.4%; --g: 43.44%; --hr: 29.6%; --br: 52.834%; --rx: 6.587%; --ry: 8.783%; --dec: .2s; }
.hero-lc__bande--3 { --h: 46.993%; --d: 29.541%; --b: 22.4%; --g: 57.333%; --hr: 60.099%; --br: 22.4%; --rx: 6.563%; --ry: 8.751%; --dec: .35s; }
@media (min-width: 768px) and (orientation: landscape) {
  /* menu en encre sur le beige du départ, puis blanc quand la photo le recouvre (main.js, data-header-switch) */
  .js .site-header--d-start-dark.is-hero-done { transition: color .5s; }
  .js .site-header--d-start-dark.is-hero-done .site-logo img { transition: filter .5s; }
}
@media (min-width: 768px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  .js .site-header--d-start-dark:not(.is-hero-done) { color: var(--color-text-strong); }
  .js .site-header--d-start-dark:not(.is-hero-done) .site-logo img { filter: brightness(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero-lc .hero-lc__bande { clip-path: inset(var(--hr) var(--d) var(--br) var(--g) round var(--rx) / var(--ry)); }
  .js .hero-lc:not(.is-played) .hero-lc__photo { transform: translate(calc(1138.389 * var(--k)), calc(999.505 * var(--k))) scale(.538); }
  .js .hero-lc:not(.is-played) .hero-lc__objet { opacity: 1; transform: translate(calc(-393 * var(--k)), calc(246 * var(--k))) scale(.851); }
  .hero-lc.is-played .hero-lc__bande { animation: lc-allonge 1.1s var(--dec) cubic-bezier(.65, 0, .35, 1) both, lc-ouvre 2.4s 2.5s cubic-bezier(.65, 0, .35, 1) forwards; }
  .hero-lc.is-played .hero-lc__photo { animation: lc-zoom 2.4s 2.5s cubic-bezier(.3, 0, .25, 1) both; }   /* zoom en avance sur les bandes : la photo couvre toujours ce qu'elles dévoilent */
  .hero-lc.is-played .hero-lc__objet--produit { animation-name: lc-pose, lc-efface; animation-duration: 2.4s, .6s; animation-delay: 2.5s, 3.05s; animation-timing-function: cubic-bezier(.3, 0, .25, 1), ease-in; animation-fill-mode: both; }
  .hero-lc.is-played .hero-lc__objet--ombre { animation-name: lc-pose, lc-efface; animation-duration: 2.4s, .7s; animation-delay: 2.5s, 2.5s; animation-timing-function: cubic-bezier(.3, 0, .25, 1), ease-out; animation-fill-mode: both; }
  .hero-lc.is-played .hero-lc__objet img { animation: lc-flotte 2.6s .1s ease-in-out both; }
}
@keyframes lc-allonge { to { clip-path: inset(var(--h) var(--d) var(--b) var(--g) round var(--rx) / var(--ry)); } }
@keyframes lc-ouvre {
  from { clip-path: inset(var(--h) var(--d) var(--b) var(--g) round var(--rx) / var(--ry)); }
  to { clip-path: inset(0 0 0 0 round 44% / 58.667%); }
}
@keyframes lc-zoom { from { transform: translate(calc(1138.389 * var(--k)), calc(999.505 * var(--k))) scale(.538); } to { transform: none; } }
@keyframes lc-pose { from { transform: translate(calc(-393 * var(--k)), calc(246 * var(--k))) scale(.851); } to { transform: none; } }
@keyframes lc-efface { from { opacity: 1; } to { opacity: 0; } }
@keyframes lc-flotte { 50% { transform: translate(1.4%, -3.7%) rotate(2.5deg); } }

/* ---------- Étapes dépliables (Figma : Process Step / Process Panel ; macros/process.njk) ----------
   Rangée d'étapes résumées en une ligne ; le détail d'une étape s'ouvre dessous, un seul à la fois (main.js, data-process).
   Mobile : chaque détail s'ouvre juste sous son étape (ordre réglé par --i). Sans JavaScript, tout est visible. */
.process { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-16); }
.process--3 { --cols: 3; }
.process--4 { --cols: 4; }
.process__step {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); text-align: left;
  padding: var(--space-24); border: 1px solid var(--color-border-card); border-radius: var(--radius-md);
  background: var(--color-bg-page); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.process__step:hover { border-color: var(--color-action-primary); box-shadow: var(--shadow-card-soft); }
.process__step[aria-expanded="true"] { border-color: var(--color-action-primary); box-shadow: inset 0 0 0 1px var(--color-action-primary); }
.process__num { font-family: var(--font-display); font-size: 14px; font-weight: 700; line-height: 20px; color: var(--color-action-primary); }
.process__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 28px; }
.process__summary { font-size: 15px; line-height: 24px; color: var(--color-text-muted); flex: 1; }
.process__more { display: inline-flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); font-size: 14px; font-weight: 600; line-height: 20px; color: var(--color-text-link); }
.process__plus { position: relative; width: 12px; height: 12px; }
.process__plus::before, .process__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .3s; }
.process__plus::after { transform: rotate(90deg); }
.process__step[aria-expanded="true"] .process__plus::after { transform: rotate(0); }
/* panneau : sous toute la rangée en desktop */
.process__panel { grid-column: 1 / -1; order: 100; display: grid; grid-template-rows: 1fr; }
.process__panel-clip { overflow: hidden; min-height: 0; }
.process__panel-inner {
  display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-30);
  border-radius: var(--radius-md); background: var(--color-bg-page); border: 1px solid var(--color-border-card);
}
.process__panel-inner > p { margin: 0; max-width: 760px; }
.process__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.process__panel-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 32px; }
.process__close { position: relative; flex: none; width: 40px; height: 40px; border: 1px solid var(--color-border-card); border-radius: 50%; background: none; cursor: pointer; color: inherit; }
.process__close span::before, .process__close span::after { content: ""; position: absolute; left: 12px; top: 19px; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.process__close span::after { transform: rotate(-45deg); }
.js .process__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.js .process__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.js .process__panel:not(.is-open) .process__panel-inner { opacity: 0; }
.js .process__panel .process__panel-inner { transition: opacity .3s; }
.js .process__close { display: block; }
.process__close { display: none; }
@media (max-width: 991px) { .process--4 { --cols: 2; } }
@media (max-width: 767px) {
  .process, .process--4 { --cols: 1; gap: var(--space-12); }
  .process__step { order: calc(var(--i) * 2); padding: var(--space-20); }
  .process__panel { order: calc(var(--i) * 2 + 1); }
  .process__panel-inner { padding: var(--space-20); }
}
@media (prefers-reduced-motion: reduce) { .js .process__panel, .js .process__panel.is-open { transition: none; } }

/* ---------- Les Cordons Bleus : bloc texte + visuel « avant », pastilles de contraintes ---------- */
.cb-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-60); align-items: center; }
.cb-split__text { display: flex; flex-direction: column; gap: var(--space-24); }
.cb-split__text .text-lead { margin: 0; }
.cb-split__media { margin: 0; }
.cb-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.cb-chips li { padding: var(--space-5) var(--space-16); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); font-size: 14px; line-height: 24px; }
@media (max-width: 991px) { .cb-split { grid-template-columns: 1fr; gap: var(--space-30); } }

/* ---------- Les Cordons Bleus : logo avant / après ---------- */
.cb-logos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-bottom: var(--space-24); }
.cb-logo { position: relative; margin: 0; display: grid; place-items: center; min-height: 260px; padding: var(--space-60) var(--space-40); border-radius: var(--radius-md); }
.cb-logo--before { background: var(--color-bg-placeholder); }
.cb-logo--before img { width: min(100%, 360px); height: auto; }
.cb-logo--after { background: var(--color-project-cordons-sand); color: var(--color-project-cordons-cobalt); box-shadow: inset 0 0 0 1px var(--color-border-card); }
.cb-logo__label { position: absolute; left: var(--space-20); top: var(--space-16); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.cb-newlogo { display: flex; align-items: center; gap: 14px; }
.cb-newlogo__symbol { width: 74px; height: auto; }
.cb-newlogo__type { display: flex; flex-direction: column; }
.cb-newlogo__name { font-family: "Calistoga", serif; font-size: 34px; line-height: 38px; }
.cb-newlogo__baseline { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 767px) {
  .cb-logos { grid-template-columns: 1fr; }
  .cb-logo { min-height: 180px; padding: var(--space-48) var(--space-20) var(--space-30); }
  .cb-newlogo__symbol { width: 52px; } .cb-newlogo__name { font-size: 24px; line-height: 28px; } .cb-newlogo__baseline { font-size: 10px; }
}

/* ---------- Les Cordons Bleus : synthèse du design system (petite mosaïque) ---------- */
.cb-ds { display: grid; grid-template-columns: 1fr 1fr 0.9fr; grid-template-areas: "colors type card" "row row chef"; gap: var(--space-24); }
.cb-ds__tile { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-30); border-radius: var(--radius-md); overflow: hidden; }
.cb-ds__tile--colors { grid-area: colors; background: var(--color-bg-swatch); border: 1px solid var(--color-border-card); }
.cb-ds__tile--type { grid-area: type; }
.cb-ds__tile--card { grid-area: card; align-items: center; justify-content: center; }
.cb-ds__tile--row { grid-area: row; justify-content: space-between; }
.cb-ds__tile--vitrine { grid-area: chef; margin: 0; padding: 0; min-height: 260px; }   /* mockup vitrine, cadré sur le logo */
.cb-ds__tile--vitrine img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.cb-ds__tile--card img { width: min(100%, 280px); height: auto; border-radius: 14px; box-shadow: var(--shadow-card); }
.cb-ds__tile--row img { width: 100%; max-width: 620px; height: auto; border-radius: 14px; box-shadow: var(--shadow-card-soft); }
.cb-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16) var(--space-12); margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.cb-swatches li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.cb-swatch { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-border-card); }
.cb-type__aa { margin: 0; font-family: "Calistoga", serif; font-size: 120px; line-height: 1; color: var(--color-project-cordons-lemon); }
.cb-type__list { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.cb-type__list li { display: flex; flex-direction: column; font-size: 20px; line-height: 26px; }
.cb-type__list li span { font-family: var(--font-body); font-size: 13px; line-height: 18px; color: var(--color-text-muted); }
@media (max-width: 991px) {
  .cb-ds { grid-template-columns: 1fr 1fr; grid-template-areas: "colors type" "card chef" "row row"; }
}
@media (max-width: 767px) {
  .cb-ds { grid-template-columns: 1fr; grid-template-areas: "colors" "type" "card" "row" "chef"; gap: var(--space-16); }
  .cb-ds__tile { padding: var(--space-20); }
  .cb-type__aa { font-size: 88px; }
  .cb-swatches { grid-template-columns: repeat(4, 1fr); }
  .cb-swatch { width: 44px; height: 44px; }
}

/* ---------- Les Cordons Bleus : emplacement de l'aperçu animé du site (à venir) ---------- */
.cb-preview { margin: 0 0 var(--space-24); }
.cb-preview .figure__caption { margin-top: var(--space-12); }
.cb-preview__window { height: auto; }
.cb-preview__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; background: var(--color-bg-placeholder); }

/* ---------- Les Cordons Bleus : Lou Chef, texte à gauche, démonstration à droite ---------- */
.cb-louchef { display: grid; grid-template-columns: 1fr minmax(0, 400px); gap: var(--space-80); align-items: center; }
.cb-louchef__text { display: flex; flex-direction: column; gap: var(--space-24); }
.cb-louchef__text .text-lead { margin: 0; }
.cb-louchef__steps { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; padding: 0; list-style: none; counter-reset: lc; }
.cb-louchef__steps li { position: relative; padding-left: var(--space-48); line-height: 26px; counter-increment: lc; }
.cb-louchef__steps li::before { content: counter(lc, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; color: var(--color-action-primary); }
.cb-louchef__steps strong { display: block; }
.cb-louchef__demo { justify-self: end; width: 100%; max-width: 400px; }
.cb-louchef__video { display: block; width: 100%; height: auto; aspect-ratio: 772 / 1080; border-radius: 6.2% / 4.4%; box-shadow: 0 30px 60px -30px #00000099; }
@media (max-width: 991px) { .cb-louchef { grid-template-columns: 1fr; gap: var(--space-40); } .cb-louchef__demo { justify-self: center; } }
/* 06 · Mesurer, puis itérer (21/10/2026, choix de Lucile) : fond blanc, gros chiffres en tomate (4,9:1), numéros et titres des étapes en bleu nuit, le reste en encre */
.cb-measure { --color-text-muted: var(--color-text-primary); }
.cb-measure .key-figure__number { color: var(--color-project-cordons-tomato); }
.cb-measure .timeline__number, .cb-measure .timeline__title { color: var(--color-project-cordons-night); }
.cb-measure .timeline--numbered .timeline__rail { background: var(--color-project-cordons-night); }

/* ---------- Les Cordons Bleus 02 : 4 cartes de couleur (sans détail) ---------- */
.cb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.cb-step { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-30) var(--space-24); border-radius: var(--radius-md); color: var(--color-text-primary); }
.cb-step__num { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1; color: var(--color-action-primary); }
.cb-step__title { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 28px; }
.cb-step__text { margin: 0; font-size: 15px; line-height: 24px; color: var(--color-text-muted); }
@media (max-width: 991px) { .cb-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .cb-steps { grid-template-columns: 1fr; gap: var(--space-12); } .cb-step { padding: var(--space-24) var(--space-20); } .cb-step__num { font-size: 36px; } }

/* planche de composants (03) */
.cb-ds__tile--row .cb-ds__sheet { display: block; width: 100%; max-width: 882px; height: auto; border-radius: 0; box-shadow: none; }

/* ---------- Carrousel d'écrans (Figma : Screens Carousel) ----------
   Diapositives de même hauteur (--h), ordinateur 16:10 et mobile dans un téléphone ; commence à la marge du contenu et se coupe
   au bord droit de l'écran ; défilement à la souris, au doigt, au clavier ou avec les flèches (main.js, data-carousel). */
.screens-carousel { --h: 460px; position: relative; margin-right: calc(-1 * var(--gutter)); }
.screens-carousel__nav { display: flex; justify-content: flex-end; gap: var(--space-8); margin: 0 var(--gutter) var(--space-16) 0; }
.screens-carousel__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: transparent; color: inherit; font-size: 18px; cursor: pointer; transition: background-color .25s, color .25s, opacity .25s; }
.screens-carousel__btn:hover { background: var(--color-text-primary); color: var(--color-bg-page); }
.screens-carousel__btn:disabled { opacity: .3; cursor: default; background: transparent; color: inherit; }
.screens-carousel__track { display: flex; gap: var(--space-24); margin: 0 0 calc(-1 * var(--space-24)); padding: 0 var(--gutter) var(--space-40) 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.screens-carousel__track::-webkit-scrollbar { display: none; }   /* marge basse de 40 px : place pour l'ombre des fenêtres (--shadow-card), sinon coupée par le défilement */
.screens-carousel__slide { flex: none; scroll-snap-align: start; }
.screens-carousel__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); }
/* largeur calée pour que la capture (16:10) tienne en entier sous la barre de la fenêtre : rien n'est coupé en bas (bouton Lou Chef) */
.screens-carousel__slide--desktop .screens-carousel__figure { width: calc((var(--h) - 32px) * 1.6 + 12px); }
/* Fenêtre de navigateur sombre autour des écrans ordinateur (Figma : Browser Window) : même ton et même épaisseur de bord que
   les téléphones (.phone), barre du haut avec 3 points */
.browser-window { --bw: var(--phone-bezel, 6px); display: flex; flex-direction: column; height: var(--h); padding: 0 var(--bw) var(--bw); box-sizing: border-box; border-radius: 12px; background: var(--color-text-primary); box-shadow: var(--shadow-card); overflow: hidden; }
.browser-window__bar { flex: none; display: flex; align-items: center; gap: 6px; height: 26px; padding-left: 6px; }
.browser-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-bg-page); opacity: .28; }
.browser-window .screens-carousel__img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; border-radius: 4px; }
.screens-carousel__slide--mobile .screens-carousel__figure { width: calc((var(--h) - 2 * var(--phone-bezel, 6px)) * 390 / 855 + 2 * var(--phone-bezel, 6px)); }
.screens-carousel__slide--mobile .screens-carousel__img { height: calc(var(--h) - 2 * var(--phone-bezel)); aspect-ratio: auto; }
.screens-carousel__figure .figure__caption { max-width: 100%; }
@media (max-width: 991px) { .screens-carousel { --h: 380px; } }
@media (max-width: 767px) { .browser-window { --bw: 4px; border-radius: 8px; } .browser-window__bar { height: 16px; gap: 4px; padding-left: 4px; } .browser-window__bar i { width: 5px; height: 5px; } .browser-window .screens-carousel__img { border-radius: 2px; } .screens-carousel__slide--desktop .screens-carousel__figure { width: calc((var(--h) - 20px) * 1.6 + 8px); }
  .screens-carousel { --h: min(200px, calc((100vw - 2 * var(--gutter)) / 1.6)); } .screens-carousel__nav { display: none; } .screens-carousel__track { gap: var(--space-16); } }

/* Couleurs (03) : principales en grand, secondaires en plus petit */
.cb-swatches--secondary { grid-template-columns: repeat(5, 1fr); }
.cb-swatches--secondary .cb-swatch { width: 40px; height: 40px; }
.cb-swatches__label { margin: var(--space-8) 0 0; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 767px) { .cb-swatches--secondary { grid-template-columns: repeat(5, 1fr); } .cb-swatches--secondary .cb-swatch { width: 36px; height: 36px; } }


/* ==========================================================================
   Page projet Emoving (partials/case-emoving.njk)
   ========================================================================== */
.bg-emoving-night { background: var(--color-project-emoving-night); }
.bg-emoving-violet { background: var(--color-project-emoving-violet); }
.bg-emoving-lilac { background: var(--color-project-emoving-lilac); }
.bg-emoving-mist { background: var(--color-project-emoving-mist); }
.bg-emoving-apricot { background: var(--color-project-emoving-apricot); }
@media (max-width: 767px) { .case-hero-image--emoving { --hero-top: #8d7ce1; } }

/* ---------- Emoving : hero animé (partials/emoving-hero.njk, 21/10/2026) ----------
   Même écran que la vignette de l'accueil, ordinateur plus petit dans un décor prolongé (more/sources/emoving/hero-anime/hero.py).
   Scène de 3200 × 2000 unités ; --wx --wy --ww --wh = fenêtre qui couvre le bandeau (comme .hero-cb) : ordinateur à un peu plus de la
   moitié de la largeur sur ordinateur, plus grand en mobile. --s (unités → px, pour l'écran en perspective) est posé par main.js. */
.hero-em { --wx: 707; --wy: 487; --ww: 1800; --wh: 1200; --hero-top: #8d7ce1; position: relative; overflow: hidden; aspect-ratio: 3 / 2; container-type: size; background: #6f68d2; }
.hero-em__stage {
  --k: max(calc(100cqw / var(--ww)), calc(100cqh / var(--wh)));
  position: absolute; width: calc(3200 * var(--k)); aspect-ratio: 3200 / 2000;
  left: calc(50cqw - (var(--wx) + var(--ww) / 2) * var(--k)); top: calc(50cqh - (var(--wy) + var(--wh) / 2) * var(--k));
}
.hero-em__stage > * { position: absolute; display: block; margin: 0; }
.case-hero-image.hero-em img { aspect-ratio: auto; object-fit: fill; }
.hero-em .hero-em__fond { inset: 0; width: 100%; height: 100%; }
.hero-em .hero-em__cadre { height: auto; }
.hero-em__ecran { left: 0; top: 0; overflow: hidden; transform-origin: 0 0; transform: scale(var(--s, 0)) var(--m); }
.hero-em__ecran > * { position: absolute; display: block; max-width: none; will-change: transform; }
.case-hero-image.hero-em .hero-em__ecran img { height: auto; }
.hero-em__ecran video { object-fit: cover; }
.hero-em__ecran img[data-plage] { transition: opacity .25s; }
@media (min-width: 768px) and (orientation: landscape) { .hero-em { --wx: 387; --wy: 392; --ww: 2440; --wh: 1372; aspect-ratio: auto; } }

/* 01 · Deux clients : persona, citation, puis ses blocages (chacun ouvre sa réponse dans le carrousel, data-carousel-goto) */
.em-personas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-bottom: var(--space-48); }
.em-persona { display: flex; flex-direction: column; padding: var(--space-30); border-radius: var(--radius-md); background: var(--color-project-emoving-lilac); color: var(--palette-warm-ink); }
.em-persona__name { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 30px; }
.em-persona__role { margin: 0 0 var(--space-16); font-size: 14px; line-height: 22px; color: var(--color-text-muted); }
.em-persona__quote { margin: 0 0 var(--space-24); padding-left: var(--space-16); border-left: 3px solid var(--color-project-emoving-violet); font-size: 16px; line-height: 26px; font-style: italic; }
.em-persona__label { margin: auto 0 var(--space-12); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.em-persona__list { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.em-persona__goto { display: flex; align-items: center; gap: var(--space-12); width: 100%; padding: var(--space-10) var(--space-12); border: 0; border-radius: var(--radius-sm); background: var(--palette-neutral-white); color: inherit; font: 600 15px/22px var(--font-body); text-align: left; cursor: pointer; transition: color .2s, box-shadow .2s; }
.em-persona__goto:hover { color: var(--color-project-emoving-violet); box-shadow: inset 0 0 0 1px var(--color-project-emoving-violet); }
.em-persona__num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-project-emoving-violet); color: var(--palette-neutral-white); font-size: 12px; }
.em-persona__arrow { margin-left: auto; color: var(--color-project-emoving-violet); }
@media (max-width: 767px) { .em-personas { grid-template-columns: 1fr; gap: var(--space-16); margin-bottom: var(--space-30); } .em-persona { padding: var(--space-20); } }

/* 01 · Réponses avant / après : écran du site codé à gauche (mobile sur téléphone), panneau à droite */
.em-answers { --h: 420px; }
.em-answer { display: grid; grid-template-columns: auto 340px; gap: var(--space-30); align-items: stretch; width: min(1060px, calc(100vw - 2 * var(--gutter) - 80px)); }
.em-answer__screen { min-width: 0; }
.em-answer__desktop { height: auto; }
.em-answer__desktop img { flex: none; width: 100%; height: auto; aspect-ratio: 1600 / 1000; border-radius: 4px; }
.em-answer__mobile { display: none; }
.em-answer__panel { display: flex; flex-direction: column; padding: var(--space-24); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-bg-page); }
.em-answer__count { margin: 0 0 var(--space-12); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; color: var(--color-text-muted); }
.em-answer__title { margin: 0 0 var(--space-8); font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 32px; }
.em-answer__who { margin: 0 0 var(--space-20); font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.em-answer__label { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-12) 0 var(--space-5); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.em-answer__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-feedback-error); }
.em-answer__label--after { margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--color-border-card); }
.em-answer__label--after::before { background: var(--color-project-emoving-violet); }
.em-answer__text { margin: 0; font-size: 15px; line-height: 24px; }
/* écran et texte empilés jusqu'à 1199 px : côte à côte, l'écran devenait trop petit */
@media (max-width: 1199px) {
  .em-answer { grid-template-columns: 1fr; width: min(640px, calc(100vw - 2 * var(--gutter) - 40px)); }
  .em-answer__label--after { margin-top: var(--space-12); }
}
@media (max-width: 767px) {
  .em-answer { width: calc(100vw - 2 * var(--gutter) - 32px); gap: var(--space-16); }
  .em-answer__desktop { display: none; }
  .em-answer__mobile { display: block; width: 62%; margin: 0 auto; border-color: var(--color-device-bezel); background: var(--color-device-bezel); }
  .em-answer__panel { padding: var(--space-20); }
}

/* 03 · De l'esquisse à l'écran : 3 visuels de même taille */
.em-sketch { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.em-sketch .figure__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--palette-neutral-white); box-shadow: var(--shadow-card-soft, var(--shadow-card)); }
.em-sketch .figure__media img { object-position: top; }
@media (max-width: 767px) { .em-sketch { grid-template-columns: 1fr; } }

/* 03 · L'audit et la reprise : l'accueil du site codé (même taille qu'une vue de la section 02), et en face 4 lignes « constat → ma réponse » */
/* 21/10/2026 (choix de Lucile) : constats à gauche, plus serrés et moins larges ; l'accueil du site à droite, « Visiter le site » dessous */
.em-audit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-40) var(--space-80); align-items: center; }
.em-audit__media { display: flex; flex-direction: column; gap: var(--space-24); }
.em-audit .figure__media { border-radius: var(--radius-sm); overflow: hidden; background: var(--palette-neutral-white); box-shadow: var(--shadow-card-soft, var(--shadow-card)); }
.em-audit .figure__media img { object-position: top; }
.em-fixes { max-width: 560px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-card); }
.em-fix { padding: var(--space-16) 0; border-bottom: 1px solid var(--color-border-card); }
.em-fix p { margin: 0; }
.em-fix__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-5) var(--space-12); }
.em-fix__level { display: inline-flex; align-items: center; gap: var(--space-8); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; }
.em-fix__level::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--color-text-muted)); }
.em-fix--bloquant { --dot: var(--color-project-cordons-tomato); }
.em-fix--majeur { --dot: var(--color-project-cordons-lemon); }
.em-fix__finding { font-size: 14px; line-height: 22px; color: var(--color-text-muted); }
.em-fix__answer { position: relative; margin-top: var(--space-5) !important; padding-left: var(--space-24); font-size: 16px; line-height: 26px; font-weight: 600; }
.em-fix__answer::before { content: "→"; position: absolute; left: 0; color: var(--color-project-emoving-violet); }
@media (max-width: 991px) { .em-audit { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-30); } }
@media (max-width: 767px) { .em-audit { grid-template-columns: 1fr; } .em-audit__media { max-width: 440px; } }

/* 05 · Identité : logos avant / après, univers explorés, design system */
.em-logos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin-bottom: var(--space-24); }
.em-logo { position: relative; margin: 0; display: grid; place-items: center; min-height: 240px; padding: var(--space-60) var(--space-40); border-radius: var(--radius-md); background: var(--palette-neutral-white); }
.em-logo img { width: min(100%, 300px); height: auto; }
.em-logo--after { box-shadow: inset 0 0 0 2px var(--color-project-emoving-violet); }
.em-logo__label { position: absolute; left: var(--space-20); top: var(--space-16); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
/* Ce qui change (4 cartes) : visuel avant → après (rendu par more/sources/emoving/page/cartes/), titre, une phrase */
.em-changes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.em-change { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16) var(--space-16) var(--space-24); border-radius: var(--radius-md); background: var(--palette-neutral-white); }
.em-change__visual { display: block; width: 100%; height: auto; margin-bottom: var(--space-8); border-radius: var(--radius-sm); }
.em-change__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; }
.em-change__text { margin: 0; font-size: 15px; line-height: 24px; }
@media (max-width: 991px) { .em-changes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .em-changes { grid-template-columns: 1fr; gap: var(--space-16); } }
@media (max-width: 767px) { .em-logos { grid-template-columns: 1fr; } .em-logo { min-height: 160px; padding: var(--space-48) var(--space-20) var(--space-30); } }
/* chaque bloc : une tuile qui ne contient que le visuel, légende dessous sur le fond de la section (21/10/2026, dans la tuile on la prenait pour le contenu) */
.em-ds { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-30) var(--space-24); }
.em-ds__item { display: flex; flex-direction: column; gap: var(--space-12); margin: 0; }
.em-ds__tile { flex: 1; padding: var(--space-24); border-radius: var(--radius-md); background: var(--palette-neutral-white); }
.em-ds__tile img { display: block; width: 100%; height: auto; }
.em-ds__tile--card { display: flex; align-items: center; }
.em-ds__tile--brand { display: flex; flex-direction: column; justify-content: center; gap: var(--space-16); background: var(--color-project-emoving-night); }   /* fond foncé (mode Dark) */
.em-ds__item--kit { grid-column: 1 / -1; }
/* composants de la fiche produit (captures ×3 du site codé, more/sources/emoving/page/composants/) : 2 colonnes, barre d'achat ordinateur dessous */
.em-kit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24) var(--space-40); align-items: start; }
.em-kit__col { display: flex; flex-direction: column; gap: var(--space-16); }
.em-ds__tile .em-kit__item--barre-achat-mobile { width: 82%; }
.em-ds__tile .em-kit__item--barre-achat { grid-column: 1 / -1; }
@media (max-width: 767px) { .em-kit { grid-template-columns: 1fr; gap: var(--space-16); } .em-ds__tile .em-kit__item--barre-achat-mobile { width: 100%; } .em-ds__tile .em-kit__item--barre-achat { display: none; } }   /* sur mobile, la barre ordinateur serait illisible : la barre mobile suffit */
.em-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12); margin: 0 0 var(--space-8); padding: 0; list-style: none; font-size: 13px; line-height: 18px; }
.em-swatches li { display: flex; flex-direction: column; gap: var(--space-8); }
.em-swatch { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border-swatch, rgb(255 255 255 / 40%)); }
.em-type { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.em-type li { display: flex; align-items: baseline; gap: var(--space-12); font-size: 28px; line-height: 36px; }
.em-type span { font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); }
@media (max-width: 767px) { .em-ds { grid-template-columns: 1fr; } }

/* 05 · Parcours d'achat : étapes à gauche (sous le titre), vidéo du site codé dans un téléphone à droite. L'étape en cours
   (main.js, data-tunnel) est en blanc plein avec une barre qui se remplit pendant sa durée ; les autres sont atténuées. */
.em-tunnel { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-40) 122px; align-items: center; }
.em-tunnel__intro { margin: var(--space-16) 0 var(--space-30); max-width: 560px; }
.em-tunnel__steps { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; max-width: 560px; }
.em-tunnel__step { position: relative; display: flex; gap: var(--space-16); align-items: flex-start; width: 100%; padding: var(--space-12) var(--space-16); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; opacity: .6; transition: opacity .3s, background-color .3s; }
.em-tunnel__step:hover { opacity: 1; }
.em-tunnel__step.is-current { opacity: 1; background: rgb(255 255 255 / 12%); }
.em-tunnel__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font-size: 13px; font-weight: 600; transition: background-color .3s, color .3s; }
.em-tunnel__step.is-current .em-tunnel__num { background: var(--palette-neutral-white); color: var(--color-project-emoving-violet); box-shadow: none; }
.em-tunnel__label { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.em-tunnel__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 24px; }
.em-tunnel__desc { font-size: 15px; line-height: 22px; }
.em-tunnel__bar { position: absolute; left: var(--space-16); right: var(--space-16); bottom: 0; height: 2px; border-radius: 1px; background: var(--palette-neutral-white); transform: scaleX(var(--p, 0)); transform-origin: left; opacity: 0; }
.em-tunnel__step.is-current .em-tunnel__bar { opacity: 1; }
.em-tunnel__phone { width: calc(100% - 2 * var(--phone-bezel)); aspect-ratio: 780 / 1688; overflow: hidden; border-radius: 13% / 6%; border-color: var(--color-device-bezel); background: var(--color-device-bezel); }
.em-tunnel__phone video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .em-tunnel { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-40) var(--space-48); } }
/* mobile : titre et texte au-dessus, puis étapes et téléphone côte à côte pour suivre les deux ; seule l'étape en cours garde sa phrase */
@media (max-width: 767px) {
  .em-tunnel { grid-template-columns: minmax(0, 1fr) 150px; gap: 0 var(--space-12); align-items: start; }
  .em-tunnel__text { display: contents; }
  .em-tunnel__text > .heading-section, .em-tunnel__intro { grid-column: 1 / -1; }
  .em-tunnel__intro { margin-bottom: var(--space-24); }
  .em-tunnel__steps { grid-column: 1; grid-row: 3; }
  .em-tunnel__phone { grid-column: 2; grid-row: 3; }
  .em-tunnel__step { gap: var(--space-10); padding: var(--space-8); }
  .em-tunnel__num { width: 24px; height: 24px; font-size: 12px; }
  .em-tunnel__title { font-size: 16px; line-height: 22px; }
  .em-tunnel__desc { display: none; font-size: 14px; line-height: 20px; }
  .em-tunnel__step.is-current .em-tunnel__desc { display: block; }
  .em-tunnel__bar { left: var(--space-8); right: var(--space-8); }
}

/* ---------- Lancement (Thermostat + Têtes thermostatiques ORIGINAL) ----------
   Fonds : bleu nuit Netatmo (présentation, 06), beige ORIGINAL (01, retenir), orange Netatmo en mode Vivid (03), ciel (05). */
.bg-lancement-night { background: var(--color-project-lancement-night); }
.bg-lancement-beige { background: var(--color-project-lancement-beige); }
.bg-lancement-orange { background: var(--color-project-lancement-orange); }
.bg-lancement-sky { background: var(--color-project-lancement-sky); --color-border-card: var(--color-project-lancement-sky-line); }
@media (max-width: 991px) { .case-hero-image--lancement { --hero-top: #1d1a17; } }   /* haut sombre de la photo (salon) : menu en blanc */

/* 01 · trois situations : cartes blanches à visuel carré, même hauteur */

/* 02 · la publicité clé (4:5) à gauche, à droite « Montrer, puis expliquer » et ses 3 visuels en 2 × 2, même hauteur que la publicité */
.lc-da { display: grid; grid-template-columns: 4fr 5fr; gap: var(--space-24); align-items: stretch; margin-bottom: var(--space-48); }
.lc-da__key { margin: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.lc-da__key img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.lc-da__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-24); align-self: start; aspect-ratio: 1; }   /* 4fr / 5fr : la publicité 4:5 et ce carré ont exactement la même hauteur */
.lc-da__img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius-md); }
.lc-explain { display: flex; flex-direction: column; justify-content: center; gap: var(--space-12); padding: var(--space-24); border-radius: var(--radius-md); background: var(--color-project-lancement-beige); }
.lc-explain .eyebrow-tag { margin: 0; }
.lc-explain__list { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 22px; }

/* 04, 05, 06 · galeries : visuels en 4 colonnes (2 en mobile), bannière en pleine largeur dessous */
.lc-gallery { display: flex; flex-direction: column; gap: var(--space-24); margin: 0; }
.lc-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); }
.lc-gallery__grid--2 { grid-template-columns: 1fr 1fr; }
.lc-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.lc-gallery__grid img, .lc-gallery__wide { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.lc-gallery__video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-bg-placeholder); }   /* vidéo en boucle à la place d'un visuel carré */
.lc-gallery--cards img { background: var(--palette-neutral-white); }
.lc-gallery--framed img { border: 1px solid var(--color-border-card); }   /* packshots sur fond blanc : un filet pour dessiner le bloc */

/* 05 · étapes du parcours client : titre numéroté et phrase, puis les visuels */
.lc-step { display: flex; flex-direction: column; gap: var(--space-24); padding-top: var(--space-40); border-top: 1px solid var(--color-border-card); }
.lc-step + .lc-step { margin-top: var(--space-48); }
.lc-step__head { display: grid; grid-template-columns: 371px 1fr; gap: 0 122px; align-items: baseline; }
.lc-step__head p { margin: 0; max-width: 667px; }
.lc-step__title { display: flex; align-items: center; gap: var(--space-12); margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 36px; }
.lc-step__title span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-text-primary); color: var(--palette-neutral-white); font-size: 16px; line-height: 1; }

/* 04 · vidéo produit : la vidéo à gauche, « Mon rôle » résumé en 3 lignes à droite (pas de frise : la section 02 en a déjà une) */
.lc-video { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-48); align-items: start; }
.lc-role { display: flex; flex-direction: column; gap: var(--space-16); }
.lc-role .eyebrow-tag { margin: 0; }
.lc-role__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lc-role__list li { padding: var(--space-16) 0; border-top: 1px solid var(--color-border-card); font-size: 16px; line-height: 26px; }
.lc-role__list li:first-child { padding-top: 0; border-top: 0; }
.lc-role__list strong { display: block; margin-bottom: var(--space-5); font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; }
@media (max-width: 991px) { .lc-video { grid-template-columns: 1fr; gap: var(--space-30); } }

/* 07 · qui a fait quoi (2 cartes, même hauteur), puis les écrans de l'app reconstitués */
.lc-who { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); margin: 0 0 var(--space-48); padding: 0; list-style: none; }
.lc-who__card { padding: var(--space-24); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); }
.lc-who__card p { margin: var(--space-5) 0 0; }
.lc-who__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 28px; }
.lc-app { margin: 0 0 var(--space-48); display: flex; flex-direction: column; gap: var(--space-12); }
.lc-app__phones { display: grid; grid-template-columns: repeat(3, 248px); justify-content: center; gap: var(--space-48); }
@media (max-width: 991px) { .lc-app__phones { grid-template-columns: repeat(3, minmax(0, 248px)); gap: var(--space-24); } } /* tablette : les 3 téléphones rétrécissent au lieu de déborder */
/* écrans de l'app reconstitués (390 × 855, tailles en cqw : 1 cqw = 3,9 px d'écran) : plan de la vidéo, étape, bouton */
.lc-screen { position: relative; overflow: hidden; border-color: var(--color-device-bezel); background: var(--color-project-lancement-app-bg); container-type: inline-size; }
.lc-screen__inner { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14cqw 5.1cqw 0; color: var(--color-project-lancement-app-text); font-family: var(--font-body); text-align: left; }
.lc-screen__inner p { margin: 0; }
.lc-screen__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 4.1cqw; font-weight: 600; line-height: 1.4; }
.lc-screen__back { font-size: 7.2cqw; line-height: 1; font-weight: 400; }
.lc-screen__progress { display: flex; gap: 1.5cqw; margin: 4cqw 0 5cqw !important; }
.lc-screen__progress span { flex: 1; height: 1cqw; border-radius: 1cqw; background: var(--color-project-lancement-app-line); }
.lc-screen__progress .is-done { background: var(--color-project-lancement-app); }
.lc-screen__video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4.1cqw; background: var(--color-project-lancement-app-line); }
.lc-screen__step { margin-top: 5.6cqw !important; font-size: 3.3cqw; line-height: 1.4; color: var(--color-project-lancement-app); font-weight: 600; }
.lc-screen__title { margin-top: 2cqw !important; font-size: 5.9cqw; line-height: 1.25; font-weight: 700; }
.lc-screen__text { margin-top: 2.6cqw !important; font-size: 3.85cqw; line-height: 1.5; color: var(--color-project-lancement-app-text-secondary); }
.lc-screen__button { position: absolute; left: 5.1cqw; right: 5.1cqw; bottom: 8.7cqw; display: grid; place-items: center; height: 13.3cqw; border-radius: 6.7cqw; background: var(--color-project-lancement-app); color: var(--color-project-lancement-app-bg); font-size: 4.1cqw; font-weight: 600; }

@media (max-width: 991px) {
  .lc-da { grid-template-columns: 1fr; }
  .lc-da__key { max-width: 480px; }
  .lc-step__head { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 767px) {
    .lc-gallery__grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .lc-gallery__grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .lc-gallery__grid--2 { grid-template-columns: 1fr; }
  .lc-da__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); aspect-ratio: auto; grid-template-rows: auto; }
  .lc-da__img { aspect-ratio: 1; height: auto; }
  .lc-explain { grid-column: 1 / -1; }
  .lc-app__phones { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
  .lc-step__title { font-size: 24px; line-height: 32px; }
}