/* Visuels reels injectes automatiquement par tools/mkassets.swift. Ne pas modifier a la main. */
:root{
  --photo-martin: url("/assets/img/photo-martin.jpg");
  --photo-martin-ratio: 1015 / 1400;
  --shot-watchlist: url("/assets/img/shot-watchlist.jpg");
  --shot-watchlist-ratio: 880 / 1912;
  --shot-film: url("/assets/img/shot-film.jpg");
  --shot-film-ratio: 880 / 1912;
  --shot-stats: url("/assets/img/shot-stats.jpg");
  --shot-stats-ratio: 880 / 1912;
  --shot-ia: url("/assets/img/shot-ia.jpg");
  --shot-ia-ratio: 880 / 1912;
  --icon-seriestracker: url("/assets/img/icon-seriestracker.png");
  --icon-seriestracker-ratio: 400 / 400;
  --crea-peninsula: url("/assets/img/crea-peninsula.jpg");
  --crea-peninsula-ratio: 1280 / 730;
  --crea-conrad-marine: url("/assets/img/crea-conrad-marine.jpg");
  --crea-conrad-marine-ratio: 1600 / 1188;
  --crea-conrad-weddings: url("/assets/img/crea-conrad-weddings.jpg");
  --crea-conrad-weddings-ratio: 1600 / 1194;
  --crea-conrad-iriatai: url("/assets/img/crea-conrad-iriatai.jpg");
  --crea-conrad-iriatai-ratio: 1200 / 1049;
  --crea-airfrance-affiches: url("/assets/img/crea-airfrance-affiches.jpg");
  --crea-airfrance-affiches-ratio: 1600 / 697;
  --crea-airfrance-site: url("/assets/img/crea-airfrance-site.jpg");
  --crea-airfrance-site-ratio: 1120 / 910;
}

/* ==================================================================
   MARTIN LE CUÉ, direction « Verre et lumière »
   Nuit bleutée, plans de verre en suspension, une seule source de
   lumière en haut à droite, un or pâle comme unique accent.

   1. Jetons          2. Base et décor     3. Typographie
   4. Boutons, liens  5. En-tête           6. Progression
   7. Hero            8. Ce que je fais    9. Parcours
   10. Créations      11. Application      12. À propos
   13. Contact        14. Pied de page     15. Animations
   16. Responsive     17. Mouvement réduit
   ================================================================== */

/* --- 1. jetons ---------------------------------------------------- */

/* PALETTE PAR DÉFAUT : « Papier et verre ».
   Lumière chaude de fin d'après-midi, une planche de verre dépoli posée
   sur du beau papier. Toutes les couleurs du document vivent ici, puis
   sont redéfinies plus bas pour la nuit. Aucune couleur n'existe
   uniquement dans un bloc media. */

.page{
  /* papier */
  --void:        #f6f3ec;
  --void-2:      #fbf9f4;
  --void-3:      #efe9de;

  /* verre : panneaux blancs posés sur le papier */
  --glass:       rgba(255,255,255,.50);
  --glass-2:     rgba(255,255,255,.62);
  --glass-3:     rgba(255,255,255,.78);
  --glass-g1:    rgba(255,250,242,.60);
  --glass-g2:    rgba(255,255,255,.58);
  --glass-g3:    rgba(255,252,246,.52);
  --pane-g1:     rgba(255,250,242,.60);
  --pane-g2:     rgba(255,255,255,.60);
  --pane-g3:     rgba(255,251,244,.55);
  --pane2-g1:    rgba(196,150,92,.20);
  --pane2-g2:    rgba(255,255,255,.58);

  /* liserés blancs, en haut à gauche des plans de verre. En plein jour
     l'arête se lit par un contraste asymétrique : blanc pur en haut à
     gauche, ombre chaude en bas à droite. La géométrie est tokenisée
     pour que la nuit conserve son unique liseré horizontal. */
  --inset-1:     rgba(255,255,255,1);
  --inset-2:     rgba(255,255,255,1);
  --inset-3:     rgba(255,255,255,1);
  --inset-4:     rgba(255,255,255,1);
  --inset-lo:    rgba(90,60,30,.10);
  --inset-glass: inset 1px 1px 0 var(--inset-1), inset -1px -1px 0 var(--inset-lo);
  --inset-pane:  inset 1px 1px 0 var(--inset-2), inset -1px -1px 0 var(--inset-lo);
  --inset-card:  inset 1px 1px 0 var(--inset-3), inset -1px -1px 0 var(--inset-lo);

  /* surfaces secondaires */
  --hover-veil:  rgba(255,255,255,.62);
  --chip-fill:   rgba(255,255,255,.66);
  --chip-bg:     rgba(255,255,255,.72);
  --hd-bg:       rgba(246,243,236,.80);
  --ft-wash:     rgba(255,255,255,.60);

  /* filets, toujours chauds */
  --edge:        rgba(58,42,24,.14);
  --edge-2:      rgba(58,42,24,.22);
  --edge-3:      rgba(58,42,24,.10);
  --frame-edge:  rgba(58,42,24,.24);

  /* encre */
  --text:        #1f1a13;
  --text-2:      #574d40;
  --text-3:      #6b6053;
  --ghost-num:   rgba(90,62,30,.08);

  /* l'unique accent : bronze chaud et dense */
  --gold:        #8a5a1e;
  --gold-hi:     #6f4715;
  --gold-line:   rgba(138,90,30,.40);
  --gold-soft:   rgba(138,90,30,.12);
  --gold-glow:   rgba(150,98,34,.11);
  --gold-fade-1: rgba(138,90,30,.20);
  --gold-fade-2: rgba(138,90,30,.26);
  --gold-ring:   rgba(138,90,30,.14);
  --gold-cast:   rgba(120,78,26,.28);
  --gold-cast-2: rgba(120,78,26,.38);
  --gold-grad-1: #9a6420;
  --gold-grad-3: #6f4715;
  --on-gold:     #ffffff;

  /* lumière diffuse : de très larges nappes crème et pêche, aucune lueur */
  --halo-warm-1:   rgba(246,226,198,.46);
  --halo-warm-2:   rgba(244,216,186,.26);
  --halo-warm-3:   rgba(242,208,178,.09);
  --halo-cool-1:   rgba(233,228,214,.46);
  --halo-cool-2:   rgba(233,228,214,.20);
  --halo-scroll-1: rgba(248,226,198,.38);
  --halo-scroll-2: rgba(246,220,190,.14);
  --halo-contact:  rgba(234,198,152,.26);
  --shaft-1:       rgba(214,182,134,.16);
  --shaft-2:       rgba(214,182,134,.05);
  --sweep-1:       rgba(232,206,168,.20);
  --sweep-2:       rgba(255,255,255,.60);
  --shine:         rgba(255,255,255,.50);
  --vig-1:         rgba(120,92,54,.055);
  --vig-2:         rgba(120,92,54,.050);

  /* voiles posés sur les images. En plein jour le détachement se joue par
     le bas, en chaud : un lavis blanc sur le haut délaverait les visuels
     et mangerait leur contraste interne. */
  --veil-hi:     rgba(255,255,255,.10);
  --veil-hi-2:   rgba(255,255,255,.08);
  --veil-lo:     rgba(122,94,56,.18);
  --veil-lo-2:   rgba(122,94,56,.22);
  --refl-op:     .10;
  --refl-op-hi:  .16;
  --shot-refl-op:.08;

  /* grain : très réduit en plein jour */
  --grain-op:    .012;
  --grain-blend: multiply;

  /* ombres : chaudes, douces et longues, jamais grises */
  --sh-1:        6px 18px 44px -30px rgba(90,60,30,.24);
  --sh-2:        10px 30px 72px -42px rgba(90,60,30,.20), 3px 8px 20px -14px rgba(90,60,30,.10);
  --sh-3:        16px 54px 120px -56px rgba(90,60,30,.24), 6px 18px 46px -28px rgba(90,60,30,.13);
  --sh-cast:     rgba(90,60,30,.16);

  /* icônes du bouton de thème : une seule visible */
  --ico-sun:     none;
  --ico-moon:    block;

  /* typographie */
  --serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* opacité du prisme quand il passe en fond, sous 1080 px */
  --prism-op: .85;

  /* rythme */
  --gut:  clamp(20px, 4.4vw, 60px);
  --maxw: 1220px;
  --sect: clamp(96px, 13vh, 190px);

  /* progression du défilement, alimentée par le script */
  --sp: 0;
  --sy: 0;

  /* grain fin, SVG inline */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* PALETTE DE NUIT : la nuit bleutée et l'or pâle d'origine, au jeton près.
   Le même ensemble est redéfini deux fois, pour le réglage de l'appareil
   puis pour le choix explicite de l'utilisateur. */

@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .page{
  /* nuit */
  --void:        #07080a;
  --void-2:      #0a0c10;
  --void-3:      #0d1015;

  /* verre */
  --glass:       rgba(255,255,255,.035);
  --glass-2:     rgba(255,255,255,.055);
  --glass-3:     rgba(255,255,255,.075);
  --glass-g1:    rgba(255,255,255,.062);
  --glass-g2:    rgba(255,255,255,.02);
  --glass-g3:    rgba(255,255,255,.008);
  --pane-g1:     rgba(255,255,255,.085);
  --pane-g2:     rgba(255,255,255,.022);
  --pane-g3:     rgba(255,255,255,.005);
  --pane2-g1:    rgba(226,201,143,.1);
  --pane2-g2:    rgba(255,255,255,.015);

  /* liserés : la nuit garde son unique liseré horizontal */
  --inset-1:     rgba(255,255,255,.07);
  --inset-2:     rgba(255,255,255,.09);
  --inset-3:     rgba(255,255,255,.1);
  --inset-4:     rgba(255,255,255,.12);
  --inset-lo:    transparent;
  --inset-glass: inset 0 1px 0 var(--inset-1);
  --inset-pane:  inset 0 1px 0 var(--inset-2);
  --inset-card:  inset 0 1px 0 var(--inset-3);

  /* surfaces secondaires */
  --hover-veil:  rgba(255,255,255,.028);
  --chip-fill:   rgba(255,255,255,.02);
  --chip-bg:     rgba(7,8,10,.5);
  --hd-bg:       rgba(7,8,10,.66);
  --ft-wash:     rgba(255,255,255,.012);

  /* filets */
  --edge:        rgba(255,255,255,.08);
  --edge-2:      rgba(255,255,255,.14);
  --edge-3:      rgba(255,255,255,.04);
  --frame-edge:  rgba(255,255,255,.08);

  /* encre */
  --text:        #eef1f4;
  --text-2:      #8f979f;
  --text-3:      #7c848d;
  --ghost-num:   rgba(255,255,255,.045);

  /* l'unique accent : or pâle */
  --gold:        #e2c98f;
  --gold-hi:     #f0e0b8;
  --gold-line:   rgba(226,201,143,.34);
  --gold-soft:   rgba(226,201,143,.13);
  --gold-glow:   rgba(226,201,143,.22);
  --gold-fade-1: rgba(226,201,143,.18);
  --gold-fade-2: rgba(226,201,143,.25);
  --gold-ring:   rgba(226,201,143,.1);
  --gold-cast:   rgba(226,201,143,.65);
  --gold-cast-2: rgba(226,201,143,.8);
  --gold-grad-1: #f0e0b8;
  --gold-grad-3: #d5b978;
  --on-gold:     #0a0b0d;

  /* la source de lumière, en haut à droite */
  --halo-warm-1:   rgba(226,201,143,.115);
  --halo-warm-2:   rgba(226,201,143,.055);
  --halo-warm-3:   rgba(226,201,143,.016);
  --halo-cool-1:   rgba(150,175,200,.055);
  --halo-cool-2:   rgba(150,175,200,.022);
  --halo-scroll-1: rgba(226,201,143,.075);
  --halo-scroll-2: rgba(226,201,143,.024);
  --halo-contact:  rgba(226,201,143,.09);
  --shaft-1:       rgba(226,201,143,.18);
  --shaft-2:       rgba(226,201,143,.05);
  --sweep-1:       rgba(255,255,255,.16);
  --sweep-2:       rgba(226,201,143,.22);
  --shine:         rgba(255,255,255,.55);
  --vig-1:         rgba(0,0,0,.55);
  --vig-2:         rgba(0,0,0,.45);

  /* voiles posés sur les images */
  --veil-hi:     rgba(255,255,255,.16);
  --veil-hi-2:   rgba(255,255,255,.13);
  --veil-lo:     rgba(7,8,10,.34);
  --veil-lo-2:   rgba(7,8,10,.4);
  --refl-op:     .16;
  --refl-op-hi:  .26;
  --shot-refl-op:.13;

  /* opacité du prisme en fond */
  --prism-op: .5;

  /* grain */
  --grain-op:    .045;
  --grain-blend: overlay;

  /* ombres */
  --sh-1:        0 24px 60px -34px rgba(0,0,0,.95);
  --sh-2:        0 40px 110px -50px rgba(0,0,0,1), 0 8px 26px -18px rgba(0,0,0,.8);
  --sh-3:        0 70px 160px -60px rgba(0,0,0,1), 0 20px 60px -30px rgba(0,0,0,.85);
  --sh-cast:     rgba(0,0,0,.9);

  /* icônes du bouton de thème */
  --ico-sun:     block;
  --ico-moon:    none;
}

}

:root[data-theme="dark"] .page{
  /* nuit */
  --void:        #07080a;
  --void-2:      #0a0c10;
  --void-3:      #0d1015;

  /* verre */
  --glass:       rgba(255,255,255,.035);
  --glass-2:     rgba(255,255,255,.055);
  --glass-3:     rgba(255,255,255,.075);
  --glass-g1:    rgba(255,255,255,.062);
  --glass-g2:    rgba(255,255,255,.02);
  --glass-g3:    rgba(255,255,255,.008);
  --pane-g1:     rgba(255,255,255,.085);
  --pane-g2:     rgba(255,255,255,.022);
  --pane-g3:     rgba(255,255,255,.005);
  --pane2-g1:    rgba(226,201,143,.1);
  --pane2-g2:    rgba(255,255,255,.015);

  /* liserés : la nuit garde son unique liseré horizontal */
  --inset-1:     rgba(255,255,255,.07);
  --inset-2:     rgba(255,255,255,.09);
  --inset-3:     rgba(255,255,255,.1);
  --inset-4:     rgba(255,255,255,.12);
  --inset-lo:    transparent;
  --inset-glass: inset 0 1px 0 var(--inset-1);
  --inset-pane:  inset 0 1px 0 var(--inset-2);
  --inset-card:  inset 0 1px 0 var(--inset-3);

  /* surfaces secondaires */
  --hover-veil:  rgba(255,255,255,.028);
  --chip-fill:   rgba(255,255,255,.02);
  --chip-bg:     rgba(7,8,10,.5);
  --hd-bg:       rgba(7,8,10,.66);
  --ft-wash:     rgba(255,255,255,.012);

  /* filets */
  --edge:        rgba(255,255,255,.08);
  --edge-2:      rgba(255,255,255,.14);
  --edge-3:      rgba(255,255,255,.04);
  --frame-edge:  rgba(255,255,255,.08);

  /* encre */
  --text:        #eef1f4;
  --text-2:      #8f979f;
  --text-3:      #7c848d;
  --ghost-num:   rgba(255,255,255,.045);

  /* l'unique accent : or pâle */
  --gold:        #e2c98f;
  --gold-hi:     #f0e0b8;
  --gold-line:   rgba(226,201,143,.34);
  --gold-soft:   rgba(226,201,143,.13);
  --gold-glow:   rgba(226,201,143,.22);
  --gold-fade-1: rgba(226,201,143,.18);
  --gold-fade-2: rgba(226,201,143,.25);
  --gold-ring:   rgba(226,201,143,.1);
  --gold-cast:   rgba(226,201,143,.65);
  --gold-cast-2: rgba(226,201,143,.8);
  --gold-grad-1: #f0e0b8;
  --gold-grad-3: #d5b978;
  --on-gold:     #0a0b0d;

  /* la source de lumière, en haut à droite */
  --halo-warm-1:   rgba(226,201,143,.115);
  --halo-warm-2:   rgba(226,201,143,.055);
  --halo-warm-3:   rgba(226,201,143,.016);
  --halo-cool-1:   rgba(150,175,200,.055);
  --halo-cool-2:   rgba(150,175,200,.022);
  --halo-scroll-1: rgba(226,201,143,.075);
  --halo-scroll-2: rgba(226,201,143,.024);
  --halo-contact:  rgba(226,201,143,.09);
  --shaft-1:       rgba(226,201,143,.18);
  --shaft-2:       rgba(226,201,143,.05);
  --sweep-1:       rgba(255,255,255,.16);
  --sweep-2:       rgba(226,201,143,.22);
  --shine:         rgba(255,255,255,.55);
  --vig-1:         rgba(0,0,0,.55);
  --vig-2:         rgba(0,0,0,.45);

  /* voiles posés sur les images */
  --veil-hi:     rgba(255,255,255,.16);
  --veil-hi-2:   rgba(255,255,255,.13);
  --veil-lo:     rgba(7,8,10,.34);
  --veil-lo-2:   rgba(7,8,10,.4);
  --refl-op:     .16;
  --refl-op-hi:  .26;
  --shot-refl-op:.13;

  /* opacité du prisme en fond */
  --prism-op: .5;

  /* grain */
  --grain-op:    .045;
  --grain-blend: overlay;

  /* ombres */
  --sh-1:        0 24px 60px -34px rgba(0,0,0,.95);
  --sh-2:        0 40px 110px -50px rgba(0,0,0,1), 0 8px 26px -18px rgba(0,0,0,.8);
  --sh-3:        0 70px 160px -60px rgba(0,0,0,1), 0 20px 60px -30px rgba(0,0,0,.85);
  --sh-cast:     rgba(0,0,0,.9);

  /* icônes du bouton de thème */
  --ico-sun:     block;
  --ico-moon:    none;
}

/* --- 2. base et décor --------------------------------------------- */

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light dark; }

.page{
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page img{ max-width: 100%; display: block; }

.page ul, .page ol{ margin: 0; padding: 0; list-style: none; }
.page p{ margin: 0; }
.page h1,.page h2,.page h3{ margin: 0; font-weight: 400; }

/* le décor : trois halos très larges, un faisceau qui suit le
   défilement, un grain fin, une vignette. Tout est fixe. */
.deco{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.halo{ position: absolute; border-radius: 50%; }
/* la source : en haut à droite, or pâle */
.halo-1{
  top: -34vh; right: -14vw;
  width: 78vw; height: 78vw;
  background: radial-gradient(circle at 50% 50%,
              var(--halo-warm-1) 0%,
              var(--halo-warm-2) 32%,
              var(--halo-warm-3) 55%,
              transparent 72%);
  filter: blur(14px);
}
/* la réponse froide, très faible, en bas à gauche */
.halo-2{
  bottom: -40vh; left: -22vw;
  width: 86vw; height: 86vw;
  background: radial-gradient(circle at 50% 50%,
              var(--halo-cool-1) 0%,
              var(--halo-cool-2) 38%,
              transparent 68%);
  filter: blur(20px);
}
/* le halo qui suit la progression du défilement */
.halo-3{
  top: 20vh; left: 50%;
  width: 120vw; height: 60vh;
  margin-left: -60vw;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
              var(--halo-scroll-1) 0%,
              var(--halo-scroll-2) 40%,
              transparent 70%);
  filter: blur(30px);
  opacity: calc(.35 + var(--sp) * .65);
  transform: translate3d(calc(var(--sp) * 14vw - 7vw), calc(var(--sp) * 62vh - 18vh), 0);
  will-change: transform, opacity;
}
.grain{
  position: absolute;
  inset: -100px;
  background-image: var(--grain);
  background-repeat: repeat;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
}
.vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 0%, transparent 40%, var(--vig-1) 100%),
    linear-gradient(to bottom, transparent 60%, var(--vig-2) 100%);
}

.shell{ position: relative; z-index: 1; }

.wrap{ width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow{ width: min(940px, 100%); margin-inline: auto; padding-inline: var(--gut); }

.sect{ position: relative; padding-block: var(--sect); overflow: hidden; }

/* le filet qui sépare deux sections, il se trace au défilement */
.rule{
  display: block;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
              transparent, var(--edge-2) 18%, var(--edge-2) 82%, transparent);
  transform-origin: left center;
}

/* --- 3. typographie ------------------------------------------------ */

.h1{
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  line-height: 1.0;
  letter-spacing: -.018em;
  color: var(--text);
}
.h1 .ln{ display: block; }
.h1 .ln-gold{ font-style: italic; color: var(--gold-hi); letter-spacing: -.01em; }

.h2{
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.014em;
  color: var(--text);
}
.h2 em{ font-style: italic; color: var(--gold-hi); }

.h3{
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--text);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 2px var(--gold-glow);
  flex: none;
}
.eyebrow .num{ font-family: var(--serif); font-size: 1.05rem; letter-spacing: .04em; text-transform: none; color: var(--gold); }
.eyebrow .bar{ width: clamp(28px, 5vw, 64px); height: 1px; background: var(--gold-line); transform-origin: left center; }

.lead{ font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.copy{ font-size: 1rem; line-height: 1.72; color: var(--text-2); max-width: 66ch; }
.small{ font-size: .84rem; line-height: 1.6; color: var(--text-3); letter-spacing: .01em; }

.sect-head{ position: relative; }
.sect-head .h2{ margin-top: 22px; max-width: 20ch; }
.sect-head .chapo{ margin-top: 22px; }

/* --- 4. boutons, liens --------------------------------------------- */

.page a{ color: inherit; text-decoration: none; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .012em;
  cursor: pointer;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1),
              box-shadow .45s ease, background-color .45s ease,
              border-color .45s ease, color .45s ease;
}
.btn svg{ flex: none; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.btn:hover{ transform: translateY(-2px); }
.btn:hover svg{ transform: translateX(4px); }
.btn:active{ transform: translateY(0); }

/* la spécificité est relevée d'un cran : sans cela, .page a{color:inherit}
   l'emporte et l'étiquette du bouton n'obtient jamais sa couleur, ce qui
   était le bug de la feuille d'origine. --on-gold porte donc une encre
   franchement contrastée dans les deux thèmes : blanc sur le bronze clair,
   noir sur l'or pâle de la nuit. */
.page .btn-gold{
  background: linear-gradient(200deg, var(--gold-grad-1), var(--gold) 58%, var(--gold-grad-3));
  color: var(--on-gold);
  box-shadow: 0 16px 40px -22px var(--gold-cast);
}
.btn-gold:hover{ box-shadow: 0 22px 60px -22px var(--gold-cast-2); }
.btn-gold::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, var(--shine) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .85s cubic-bezier(.3,.7,.2,1);
}
.btn-gold:hover::after{ transform: translateX(130%); }

.btn-glass{
  background: var(--glass-2);
  border-color: var(--edge);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-1);
}
.btn-glass:hover{
  background: var(--glass-3);
  border-color: var(--gold-line);
  color: var(--gold-hi);
  box-shadow: 0 18px 50px -30px var(--sh-cast), 0 0 34px -14px var(--gold-glow);
}

/* lien texte à filet */
.tlink{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  transition: color .4s ease;
}
.tlink::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--edge-2);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), background-color .4s ease;
}
.tlink:hover{ color: var(--gold-hi); }
.tlink:hover::after{ background: var(--gold); transform: scaleX(1.04); }
.tlink svg{ transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.tlink:hover svg{ transform: translateX(4px); }

.links-row{ display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 46px); align-items: center; }

/* la surface de verre, brique de base de la direction */
.glass{
  position: relative;
  border-radius: 20px;
  background:
    linear-gradient(200deg, var(--glass-g1), var(--glass-g2) 46%, var(--glass-g3));
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  box-shadow: var(--sh-2), var(--inset-glass);
}
/* le liseré qui s'illumine au survol */
.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 1px var(--gold-line), 0 0 60px -18px var(--gold-glow);
  transition: opacity .55s ease;
}
.glass:hover::before{ opacity: 1; }

/* --- 5. en-tête ----------------------------------------------------- */

.hd{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color .5s ease, box-shadow .5s ease, padding .5s ease;
}
.hd::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--edge-2) 22%, var(--edge-2) 78%, transparent);
  opacity: 0;
  transition: opacity .5s ease;
}
.hd-in{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: min(var(--maxw), 100%);
  margin-inline: auto;
  padding: clamp(18px, 2.4vw, 30px) var(--gut);
  transition: padding .5s cubic-bezier(.2,.8,.2,1);
}
.hd.is-stuck{
  background: var(--hd-bg);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
}
.hd.is-stuck::after{ opacity: 1; }
.hd.is-stuck .hd-in{ padding-block: clamp(12px, 1.5vw, 17px); }

.wordmark{
  font-family: var(--serif);
  font-size: 1.14rem;
  letter-spacing: .004em;
  color: var(--text);
  justify-self: start;
  transition: color .4s ease;
}
.wordmark:hover{ color: var(--gold-hi); }

.nav{ display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); justify-self: center; }
.nav a{
  position: relative;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .028em;
  color: var(--text-2);
  padding: 6px 2px;
  transition: color .4s ease;
}
.nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{ color: var(--text); }
.nav a:hover::after{ transform: scaleX(1); transform-origin: left center; }

.lang{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: end;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-3);
}
.lang button{
  background: none;
  border: 0;
  padding: 5px 3px;
  font: inherit;
  color: var(--text-3);
  cursor: pointer;
  transition: color .35s ease;
}
.lang button:hover{ color: var(--text); }
.lang button.on{ color: var(--gold); }

/* la bascule de thème, discrète, posée contre le sélecteur de langue */
#theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-left: 9px;
  padding: 0;
  border: 1px solid var(--edge-3);
  border-radius: 999px;
  background: var(--chip-fill);
  color: var(--text-3);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}
#theme-toggle:hover{ color: var(--gold); border-color: var(--gold-line); background: var(--glass-3); }
#theme-toggle svg{ width: 15px; height: 15px; }
#theme-toggle .i-sun{  display: var(--ico-sun); }
#theme-toggle .i-moon{ display: var(--ico-moon); }

/* --- 6. progression -------------------------------------------------- */

.prog{ position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.prog i{
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--gold-fade-2), var(--gold));
  box-shadow: 0 0 16px 0 var(--gold-glow);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.counter{
  position: fixed;
  left: clamp(16px, 2.2vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--edge-3);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.counter .cnum{ font-family: var(--serif); font-size: 1.02rem; color: var(--gold); line-height: 1; min-width: 1.6em; }
.counter .csep{ width: 16px; height: 1px; background: var(--edge-2); }
.counter .clab{
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

/* --- 7. hero ---------------------------------------------------------- */

.hero{ position: relative; padding-top: clamp(140px, 21vh, 230px); padding-bottom: clamp(60px, 9vh, 120px); overflow: hidden; }
.hero-in{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr);
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}
.hero-copy{ position: relative; z-index: 2; max-width: none; }
.hero .lead{ max-width: 34ch; }
.hero .h1{ margin-top: 26px; }
.hero .lead{ margin-top: clamp(24px, 3vw, 36px); }
.hero .cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 3.4vw, 42px); }
.hero .mention{ display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: .84rem; color: var(--text-3); }
.hero .mention .pulse{ position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.hero .mention .pulse::after{
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  animation: pulse 3.4s ease-out infinite;
}
@keyframes pulse{
  0%   { transform: scale(.5); opacity: .9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* le prisme : trois plans de verre, une lumière qui les traverse */
.prism{ position: relative; height: clamp(320px, 46vw, 560px); z-index: 1; }
.pane{
  position: absolute;
  border-radius: 22px;
  border: 1px solid var(--edge);
  background:
    linear-gradient(200deg, var(--pane-g1), var(--pane-g2) 42%, var(--pane-g3));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--sh-3), var(--inset-pane);
  overflow: hidden;
  transform: translate3d(0, var(--pv, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
}
.pane::after{
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent, var(--sweep-1) 45%, var(--sweep-2) 55%, transparent);
  transform: translateX(-160%) skewX(-14deg);
  animation: sweep 9s cubic-bezier(.5,0,.3,1) infinite;
}
@keyframes sweep{
  0%   { transform: translateX(-160%) skewX(-14deg); }
  55%  { transform: translateX(320%) skewX(-14deg); }
  100% { transform: translateX(320%) skewX(-14deg); }
}
.pane-1{ --rot: -9deg; top: 4%; left: 6%; width: 54%; height: 74%; }
.pane-1::after{ animation-delay: .4s; }
.pane-2{
  --rot: 6deg;
  top: 22%; right: 2%;
  width: 46%; height: 62%;
  background:
    linear-gradient(200deg, var(--pane2-g1), var(--pane2-g2) 48%, transparent);
}
.pane-2::after{ animation-delay: 2.6s; }
.pane-3{ --rot: -3deg; bottom: 0; left: 26%; width: 40%; height: 34%; border-radius: 18px; }
.pane-3::after{ animation-delay: 4.9s; }

/* le trait de lumière qui traverse toute la composition */
.shaft{
  position: absolute;
  top: -30%;
  right: 18%;
  width: clamp(120px, 15vw, 230px);
  height: 160%;
  background: linear-gradient(to bottom,
              var(--shaft-1), var(--shaft-2) 45%, transparent 78%);
  filter: blur(26px);
  transform: rotate(16deg) translate3d(0, var(--pv, 0px), 0);
  pointer-events: none;
}

/* la ligne de références */
.refs{ margin-top: clamp(56px, 8vh, 110px); padding-top: 26px; border-top: 1px solid var(--edge-3); }
.refs ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2.4vw, 30px);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-3);
}
.refs li{ display: inline-flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.refs li + li::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .55; }

/* --- 8. ce que je fais -------------------------------------------------- */

.cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(48px, 6vw, 78px);
}
.card{
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.card:hover{ transform: translateY(-8px); box-shadow: var(--sh-3), var(--inset-card); }
.card .cnum{
  position: absolute;
  top: 14px; right: 22px;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: 1;
  color: var(--ghost-num);
  transition: color .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.card:hover .cnum{ color: var(--gold-soft); transform: translateY(-4px); }
.card .h3{ position: relative; margin-bottom: 14px; }
.card .copy{ position: relative; font-size: .96rem; max-width: 40ch; }
.card .under{
  position: relative;
  display: block;
  width: 34px; height: 1px;
  margin-bottom: 26px;
  background: var(--gold);
  transform-origin: left center;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.card:hover .under{ width: 62px; }

/* --- 9. parcours --------------------------------------------------------- */

.tl{ position: relative; margin-top: clamp(48px, 6vw, 82px); padding-left: clamp(0px, 2vw, 26px); }
.tl-rail{ position: absolute; left: 0; top: 6px; bottom: 40px; width: 1px; background: var(--edge-3); }
.tl-rail i{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--gold), var(--gold-fade-1));
  transform: scaleY(clamp(0, calc((1 - var(--t, -1)) / 2), 1));
  transform-origin: top center;
}
.tl-item{
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(14px, 3.4vw, 60px);
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2.2vw, 30px);
  border-radius: 18px;
  border: 1px solid transparent;
  transition: background-color .55s ease, border-color .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.tl-item + .tl-item{ margin-top: 6px; }
.tl-item::after{
  content: "";
  position: absolute;
  left: clamp(18px, 2.2vw, 30px);
  right: clamp(18px, 2.2vw, 30px);
  bottom: 0;
  height: 1px;
  background: var(--edge-3);
}
.tl-item:last-child::after{ display: none; }
.tl-item:hover{ background: var(--hover-veil); border-color: var(--edge-3); transform: translateX(4px); }
.tl-dot{
  position: absolute;
  left: calc(clamp(0px, 2vw, 26px) * -1 - 4px);
  top: clamp(34px, 3.6vw, 50px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--void);
  border: 1px solid var(--gold-line);
  transition: box-shadow .55s ease, background-color .55s ease;
}
.tl-item:hover .tl-dot{ background: var(--gold); box-shadow: 0 0 0 4px var(--gold-ring), 0 0 22px 2px var(--gold-glow); }
.tl-role{ margin-top: 12px; font-size: .82rem; line-height: 1.6; color: var(--text-3); letter-spacing: .012em; }
.tl-body{ font-size: .98rem; color: var(--text-2); max-width: 68ch; }

/* formation et certifications */
.edu{ margin-top: clamp(40px, 5vw, 66px); padding: clamp(26px, 3vw, 42px); }
.edu h3{
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.edu li{
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--edge-3);
  font-size: .95rem;
  color: var(--text-3);
  transition: color .45s ease;
}
.edu li:last-child{ border-bottom: 0; padding-bottom: 0; }
.edu li strong{ font-weight: 600; color: var(--text); }
.edu li:hover{ color: var(--text-2); }

.sect-foot{ margin-top: clamp(38px, 4.6vw, 60px); }

/* --- 10. créations -------------------------------------------------------- */

.crea-sect{ padding-bottom: clamp(70px, 9vh, 130px); }

.rail-wrap{ position: relative; margin-top: clamp(44px, 5.6vw, 76px); transform: translate3d(0, var(--pv, 0px), 0); }
.rail{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gut);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar{ display: none; }
.rail:focus-visible{ outline-offset: -2px; }

.page .rail-track{
  position: relative;
  display: flex;
  align-items: end;
  gap: clamp(22px, 3.2vw, 54px);
  padding: 10px var(--gut) clamp(78px, 9vw, 120px);
  width: max-content;
}
/* le sol commun sur lequel toutes les planches reposent */
.rail-track::after{
  content: "";
  position: absolute;
  left: var(--gut); right: var(--gut);
  bottom: clamp(78px, 9vw, 120px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--edge-2) 8%, var(--edge-2) 92%, transparent);
}

.crea{
  position: relative;
  flex: 0 0 auto;
  width: var(--cw);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.crea-cap{ margin-bottom: clamp(18px, 2vw, 28px); }
.crea-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crea-meta .n{ font-family: var(--serif); font-size: 1rem; letter-spacing: .02em; text-transform: none; color: var(--gold); }
.crea .h3{ margin-top: 12px; font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.crea-desc{ margin-top: 12px; font-size: .88rem; line-height: 1.62; color: var(--text-3); max-width: 42ch; transition: color .5s ease; }
.crea:hover .crea-desc{ color: var(--text-2); }

.crea-stage{ position: relative; }
.crea-frame{
  position: relative;
  width: 100%;
  aspect-ratio: var(--r);
  border-radius: 10px;
  border: 1px solid var(--frame-edge);
  overflow: hidden;
  background-color: var(--void-3);
  box-shadow: var(--sh-3);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s ease, border-color .7s ease;
}
.crea-frame i{
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  /* Aucun agrandissement, a aucun moment : la planche doit etre montree en
     entier. Un facteur superieur a 1 rognerait les bords, un facteur inferieur
     laisserait des bandes vides, et le defilement fait varier --t de -1 a 1.
     Le mouvement de la section est porte par le cadre, pas par l'image. */
  transform: none;
}
/* le voile de verre posé sur la planche */
.crea-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, var(--veil-hi-2), transparent 42%),
              linear-gradient(to top, var(--veil-lo), transparent 55%);
  opacity: .9;
  transition: opacity .7s ease;
  pointer-events: none;
}
.crea:hover .crea-frame{
  transform: translateY(-10px);
  border-color: var(--gold-line);
  box-shadow: var(--sh-3), 0 0 90px -30px var(--gold-glow);
}
.crea:hover .crea-frame::after{ opacity: .45; }

/* le reflet, sous le sol */
.crea-stage::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 26%;
  background-image: var(--img);
  background-size: 100% 385%;
  background-position: center bottom;
  transform: scaleY(-1);
  opacity: var(--refl-op);
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
  pointer-events: none;
  transition: opacity .7s ease;
}
.crea:hover .crea-stage::after{ opacity: var(--refl-op-hi); }

/* largeurs des planches, calées sur les vrais ratios */
.c-marine   { --cw: clamp(276px, 74vw, 620px); --r: var(--crea-conrad-marine-ratio);      --img: var(--crea-conrad-marine); }
.c-weddings { --cw: clamp(276px, 74vw, 616px); --r: var(--crea-conrad-weddings-ratio);    --img: var(--crea-conrad-weddings); }
.c-iriatai  { --cw: clamp(238px, 56vw, 344px); --r: var(--crea-conrad-iriatai-ratio);     --img: var(--crea-conrad-iriatai); }
.c-peninsula{ --cw: clamp(280px, 76vw, 662px); --r: var(--crea-peninsula-ratio);          --img: var(--crea-peninsula); }
.c-affiches { --cw: clamp(284px, 78vw, 700px); --r: var(--crea-airfrance-affiches-ratio); --img: var(--crea-airfrance-affiches); }
.c-site     { --cw: clamp(196px, 46vw, 272px); --r: var(--crea-airfrance-site-ratio);     --img: var(--crea-airfrance-site); }

.page .rail-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: clamp(4px, 1vw, 14px);
}
.rbar{ position: relative; width: min(240px, 40vw); height: 2px; border-radius: 2px; background: var(--edge-3); overflow: hidden; }
.rbar i{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 34%;
  border-radius: 2px;
  background: var(--gold);
  transform: translateX(calc(var(--p, 0) * 194%));
}

/* --- 11. application ------------------------------------------------------ */

.app-sect{ position: relative; }

.app-panel{
  position: relative;
  max-width: 820px;
  margin-top: clamp(44px, 5vw, 70px);
  padding: clamp(28px, 3.4vw, 46px);
  overflow: hidden;
}
.app-id{ display: flex; align-items: center; gap: 18px; }
.app-icon{
  width: clamp(58px, 7vw, 78px);
  aspect-ratio: var(--icon-seriestracker-ratio);
  border-radius: 22%;
  background-image: var(--icon-seriestracker);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--edge);
  box-shadow: var(--sh-1), 0 0 50px -18px var(--gold-glow);
  flex: none;
}
.app-type{ margin-top: 6px; font-size: .84rem; color: var(--text-3); letter-spacing: .014em; }
.app-desc{ margin-top: clamp(22px, 2.6vw, 32px); }
.tags{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(22px, 2.6vw, 30px); }
.tags li{
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge-3);
  background: var(--chip-fill);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-3);
  transition: border-color .45s ease, color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.tags li:hover{ border-color: var(--gold-line); color: var(--gold-hi); transform: translateY(-2px); }
.app-links{ margin-top: clamp(26px, 3vw, 36px); }

.shots{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 40px);
  margin-top: clamp(56px, 7vw, 100px);
}
.shot{
  position: relative;
  flex: 0 0 auto;
  width: clamp(120px, 19vw, 244px);
  transform: translate3d(0, var(--pv, 0px), 0);
  will-change: transform;
}
.shot-frame{
  position: relative;
  aspect-ratio: var(--r);
  border-radius: clamp(16px, 2vw, 28px);
  border: 1px solid var(--edge-2);
  overflow: hidden;
  background-color: var(--void-3);
  background-size: cover;
  background-position: center top;
  box-shadow: var(--sh-3), inset 0 1px 0 var(--inset-4);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .7s ease, border-color .7s ease;
}
.shot-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, var(--veil-hi), transparent 38%);
  pointer-events: none;
  transition: opacity .7s ease;
}
.shot:hover .shot-frame{
  transform: translateY(-10px);
  border-color: var(--gold-line);
  box-shadow: var(--sh-3), 0 0 80px -26px var(--gold-glow);
}
.shot:hover .shot-frame::after{ opacity: .35; }
.shot::after{
  content: "";
  position: absolute;
  left: 4%; right: 4%;
  top: 100%;
  height: 22%;
  margin-top: 10px;
  background-image: var(--img);
  background-size: 100% 455%;
  background-position: center bottom;
  transform: scaleY(-1);
  opacity: var(--shot-refl-op);
  filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 86%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 86%);
  pointer-events: none;
}
.shot-frame{ background-image: var(--img); }
.s-watchlist{ --img: var(--shot-watchlist); --r: var(--shot-watchlist-ratio); }
.s-film     { --img: var(--shot-film);      --r: var(--shot-film-ratio); }
.s-stats    { --img: var(--shot-stats);     --r: var(--shot-stats-ratio); }
.s-ia       { --img: var(--shot-ia);        --r: var(--shot-ia-ratio); }
.shot-1{ margin-top: clamp(0px, 3vw, 44px); }
.shot-2{ margin-top: 0; }
.shot-3{ margin-top: clamp(0px, 4vw, 66px); }
.shot-4{ margin-top: clamp(0px, 1.4vw, 22px); }

/* --- 12. à propos ---------------------------------------------------------- */

.about-in{
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 88px);
  margin-top: clamp(40px, 5vw, 64px);
}
.portrait{ position: relative; transform: translate3d(0, var(--pv, 0px), 0); will-change: transform; }
.portrait-frame{
  position: relative;
  aspect-ratio: var(--photo-martin-ratio);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--frame-edge);
  background-image: var(--photo-martin);
  background-size: cover;
  background-position: center;
  box-shadow: var(--sh-3);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .8s ease;
}
.portrait-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, var(--veil-hi), transparent 40%),
              linear-gradient(to top, var(--veil-lo-2), transparent 58%);
  transition: opacity .8s ease;
}
.portrait:hover .portrait-frame{ transform: translateY(-8px); box-shadow: var(--sh-3), 0 0 100px -34px var(--gold-glow); }
.portrait:hover .portrait-frame::after{ opacity: .5; }
.about-copy .h2{ max-width: 12ch; }
.about-copy .copy{ margin-top: clamp(22px, 2.6vw, 32px); max-width: 62ch; }

/* --- 13. contact ------------------------------------------------------------ */

.contact{ position: relative; overflow: hidden; text-align: center; padding-block: clamp(110px, 16vh, 210px); }
.contact::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(1000px, 130vw);
  height: min(600px, 90vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, var(--halo-contact), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
}
.contact .inner{ position: relative; }
.contact .h2{ margin: 22px auto 0; max-width: 14ch; }
.contact .copy, .contact .lead{ margin: 24px auto 0; max-width: 44ch; text-align: center; }
.contact .btn{ margin-top: clamp(30px, 3.6vw, 42px); }
.contact .mail{ display: block; margin-top: 18px; font-size: .84rem; color: var(--text-3); transition: color .4s ease; }
.contact .mail:hover{ color: var(--gold-hi); }
.contact .eyebrow{ justify-content: center; }

/* --- 14. pied de page -------------------------------------------------------- */

.ft{
  position: relative;
  border-top: 1px solid var(--edge-3);
  padding-block: clamp(40px, 5vw, 66px);
  background: linear-gradient(to bottom, transparent, var(--ft-wash));
}
.ft-in{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.ft-name{ font-family: var(--serif); font-size: 1.1rem; color: var(--text); }
.ft-links{ display: flex; flex-wrap: wrap; gap: 22px; font-size: .88rem; color: var(--text-2); }
.ft-links a{ transition: color .4s ease; }
.ft-links a:hover{ color: var(--gold-hi); }
.ft-line{
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: 22px;
  border-top: 1px solid var(--edge-3);
  font-size: .8rem;
  color: var(--text-3);
}

/* --- 15. animations ----------------------------------------------------------- */

/* RÈGLE DE SÉCURITÉ : sans le script, la classe .anim n'existe pas et
   TOUT est visible. L'état masqué dépend uniquement de .anim. */

.anim .reveal{
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(11px);
  transition:
    opacity .95s cubic-bezier(.22,.72,.2,1) var(--d, 0s),
    transform 1.05s cubic-bezier(.22,.72,.2,1) var(--d, 0s),
    filter .95s cubic-bezier(.22,.72,.2,1) var(--d, 0s);
}
.anim .reveal.in{ opacity: 1; transform: none; filter: none; }
.anim .reveal-lift{ transform: translate3d(0, 56px, 0); }
.anim .reveal-side{ transform: translate3d(34px, 0, 0); }
.anim .reveal-soft{ transform: translate3d(0, 14px, 0); filter: blur(16px); }

/* le filet qui se trace */
.anim .draw{ transform: scaleX(0); transform-origin: left center; transition: transform 1.15s cubic-bezier(.22,.72,.2,1) var(--d, 0s); }
.anim .draw.in{ transform: scaleX(1); }

/* les plans en parallaxe portent chacun leur propre transform,
   pour ne pas écraser la rotation des plans de verre du hero */
.tl{ transform: translate3d(0, var(--pv, 0px), 0); }

/* --- 16. responsive ------------------------------------------------------------ */

@media (max-width: 1080px){
  .hero-in{ grid-template-columns: 1fr; }
  .hero-copy{ max-width: 100%; }
  .prism{ position: absolute; inset: -6% -10% auto auto; width: 78%; height: clamp(300px, 60vw, 460px); opacity: var(--prism-op); z-index: 0; }
  .about-in{ grid-template-columns: 1fr; }
  .portrait{ max-width: 380px; }
  .cards{ grid-template-columns: 1fr; }
  .card .copy{ max-width: 56ch; }
}

@media (max-width: 860px){
  .counter{ display: none; }
  .hd-in{ grid-template-columns: 1fr auto; row-gap: 12px; }
  .nav{ grid-column: 1 / -1; grid-row: 2; justify-self: start; gap: 18px; }
  .nav a{ font-size: .8rem; letter-spacing: .02em; }
  .tl-item{ grid-template-columns: 1fr; gap: 14px; }
  .tl-item::after{ left: 0; right: 0; }
  .tl-item{ padding-inline: 0; }
  .tl-item:hover{ transform: none; background: transparent; border-color: transparent; }
  .tl{ padding-left: 20px; }
  .tl-dot{ left: -25px; top: 30px; }
  .shots{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 5vw, 34px) clamp(14px, 4vw, 26px);
    justify-items: center;
  }
  .shot{ width: 100%; max-width: 220px; }
  .shot-1,.shot-2,.shot-3,.shot-4{ margin-top: 0; }
}

@media (max-width: 620px){
  .page{ font-size: 15.5px; }
  .hero{ padding-top: clamp(128px, 24vh, 190px); }
  .hero .cta{ gap: 10px; }
  .btn{ padding: 14px 22px; font-size: .89rem; }
  .refs ul{ font-size: .74rem; letter-spacing: .07em; }
  .sect-head .h2{ max-width: 100%; }
  .about-copy .h2, .contact .h2{ max-width: 100%; }
  .ft-in{ flex-direction: column; align-items: flex-start; }
}

/* --- 17. mouvement réduit -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .anim .reveal,
  .anim .reveal.in,
  .anim .draw,
  .anim .draw.in{ opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-par]{ transform: none !important; }
  .halo-3{ transform: none !important; }
  .crea-frame i{ transform: none !important; }
  .tl-rail i{ transform: none !important; }
  .pane{ animation: none !important; transform: rotate(var(--rot, 0deg)) !important; }
  .pane::after{ display: none !important; }
  .shaft{ transform: rotate(16deg) !important; }
  .mention .pulse::after{ animation: none !important; }
  .page *{ transition-duration: .001s !important; }
}

/* --- pages interieures --- */

/* Le lien de la page courante, dans la navigation : son filet reste tracé
   et son encre passe au premier plan. Aucune couleur en dur, uniquement
   les jetons de l'en-tête. */
.nav a[aria-current="page"]{ color: var(--text); }
.nav a[aria-current="page"]::after{
  background: var(--gold-line);
  transform: scaleX(1);
  transform-origin: left center;
}

/* Liste de missions, sous un poste du parcours. Aucun composant existant
   ne portait une liste à puces : la puce est donc un court filet d'or,
   comme les filets du reste du document, et la ligne suit le survol de
   .tl-item exactement comme .tl-body et .tl-dot. */
.mlist{ display: grid; gap: 10px; margin-top: 22px; }
.mlist li{
  position: relative;
  padding-left: 26px;
  max-width: 66ch;
  font-size: .94rem;
  line-height: 1.66;
  color: var(--text-3);
  transition: color .55s ease;
}
.mlist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 12px;
  height: 1px;
  background: var(--gold-line);
  transition: width .55s cubic-bezier(.2,.8,.2,1), background-color .55s ease;
}
.tl-item:hover .mlist li{ color: var(--text-2); }
.tl-item:hover .mlist li::before{ width: 19px; background: var(--gold); }

/* Dans une carte, la ligne de fonction s'intercale entre le titre et le
   texte : elle reprend donc la meme respiration basse que .card .h3. */
.card .tl-role{ margin-bottom: 14px; }

/* Deux cartes de front, pour la formation. La règle est enfermée dans une
   borne haute afin que .cards reprenne la main sur une seule colonne dans
   les paliers responsive déjà écrits plus haut. */
@media (min-width: 1081px){
  .cards-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- pages intérieures ------------------------------------------------------------ */

/* le lien de la page courante, dans la navigation : le filet reste tracé */
.nav a[aria-current="page"]{ color: var(--text); }
.nav a[aria-current="page"]::after{ transform: scaleX(1); background: var(--gold-line); }

/* PLANCHES EN COLONNE. Le composant .crea de l'accueil est repris tel quel,
   cadre, voile, reflet et survol compris : seule sa largeur, calée sur le
   défilé horizontal, est rendue à la grille. align-items: end garde toutes
   les planches d'une même ligne posées sur le même sol. */
.page .works{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: clamp(46px, 5.6vw, 92px) clamp(22px, 3.2vw, 54px);
  margin-top: clamp(52px, 6.2vw, 88px);
}
.works .crea{ width: auto; padding-bottom: clamp(44px, 5vw, 84px); }
.works .crea-desc{ max-width: 46ch; }

/* le sol sous chaque planche, comme le filet commun du défilé de l'accueil :
   caché par le cadre au repos, révélé quand le cadre se soulève au survol */
.works .crea-stage::before{
  content: "";
  position: absolute;
  left: -3%; right: -3%; bottom: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--edge-2) 10%, var(--edge-2) 90%, transparent);
}

/* une planche sur toute la largeur, une planche seule et centrée */
.works .works-full{ grid-column: 1 / -1; }
.works .works-solo{ grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); }

@media (max-width: 760px){
  .page .works{ grid-template-columns: minmax(0, 1fr); }
  .works .works-solo{ width: 100%; }
}

/* Légendes des captures. La planche reprend .shot et .shot-frame du système,
   la légende reprend .small : seuls la remise à zéro de la figure et le calage
   de la légende manquaient. Aucune couleur ici, aucune valeur en dur de thème.
   Le reflet de .shot ne s'affiche pas dans ce cas : --img est porté par le
   cadre et non par la planche, ce qui laisse la place à la légende. */
.shots figure{ margin-inline: 0; margin-block-end: 0; }
.shots figcaption{ margin-top: 16px; text-align: center; }

/* --- logos des references ------------------------------------------------
   Les logos sont poses en masque et non en image : ils prennent ainsi la
   couleur d'encre du theme et restent lisibles en clair comme en sombre.
   Chaque logo a sa propre taille : un embleme carre et un logotype horizontal
   ne se calent pas sur la meme hauteur optique. */
.refs-logos{ gap: clamp(22px, 3.6vw, 54px) !important; text-transform: none; }
.refs-logos li + li::before{ display: none; }
.logo{
  display: block;
  background-color: currentColor;
  color: var(--text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;    mask-size: contain;
  opacity: .72;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.refs-logos li:hover .logo{ opacity: 1; color: var(--text-2); }
.logo-publicis{ -webkit-mask-image: var(--logo-publicis); mask-image: var(--logo-publicis); }
.logo-conrad{   -webkit-mask-image: var(--logo-conrad);   mask-image: var(--logo-conrad); }
.logo-peninsula{-webkit-mask-image: var(--logo-peninsula);mask-image: var(--logo-peninsula); }
.logo-airfrance{-webkit-mask-image: var(--logo-air-france); mask-image: var(--logo-air-france); }
.logo-ndnb{     -webkit-mask-image: var(--logo-nodatanobusiness); mask-image: var(--logo-nodatanobusiness); }


/* accent or en ligne, pour une partie de ligne de titre seulement */
.h1 .em-gold{ font-style: italic; color: var(--gold-hi); letter-spacing: -.01em; }

/* Logos des entreprises du parcours. Utilises en masque CSS, jamais en image :
   ils prennent ainsi la couleur d'encre du theme, clair comme sombre.
   Les tailles different d'un logo a l'autre : un embleme carre et un logotype
   horizontal ne se calent pas sur la meme hauteur. */
:root{
  --logo-publicis: url("/assets/img/logos/publicis.svg");
  --logo-conrad: url("/assets/img/logos/conrad.svg");
  --logo-peninsula: url("/assets/img/logos/peninsula.svg");
  --logo-air-france: url("/assets/img/logos/air-france.svg");
  --logo-nodatanobusiness: url("/assets/img/logos/nodatanobusiness.svg");
  /* Les deux ecoles n'existent qu'en aplat de couleur : les PNG sont des
     masques alpha derives des logos officiels, la matiere opaque et le fond
     transparent, pour qu'ils prennent l'encre du theme comme les autres. */
  --logo-emlyon: url("/assets/img/logos/emlyon.png");
  --logo-cattolica: url("/assets/img/logos/cattolica.png");
}

/* --- page cachee : cartes de restaurants ---------------------------------
   Reprend les composants existants, .works et .crea pour la galerie.
   N'ajoute que ce qui manquait vraiment : une liste de tarifs a pointilles. */
:root{
  --carte-gambettes:      url("/assets/img/cartes/gambettes.jpg");
  --carte-petit-pastis:   url("/assets/img/cartes/petit-pastis.jpg");
  --carte-chez-les-filles:url("/assets/img/cartes/chez-les-filles.jpg");
  --carte-mad-burger:     url("/assets/img/cartes/mad-burger.jpg");
  --carte-punjab:         url("/assets/img/cartes/punjab.jpg");
  --carte-goustous:       url("/assets/img/cartes/goustous.jpg");
  --carte-ratio: 782 / 1100;

  /* documents faits en hotellerie, montres sur la meme page */
  --doc-iriatai:  url("/assets/img/hotel/iriatai-p1.jpg");
  --doc-banyan:   url("/assets/img/hotel/banyan-a-p1.jpg");
  --doc-tamure:   url("/assets/img/hotel/tamure-p1.jpg");
  --doc-brochure: url("/assets/img/hotel/brochure-restaurants-p1.jpg");
  --doc-cocktail: url("/assets/img/hotel/cocktail-day-p1.jpg");
  --doc-soiree:   url("/assets/img/hotel/cocktails-inde-p1.jpg");
  --doc-cocoloco: url("/assets/img/hotel/coco-loco-p1.jpg");
  --doc-festifs:  url("/assets/img/hotel/cocktails-festive-p1.jpg");
  --doc-nouvelan: url("/assets/img/hotel/chinese-ny-p1.jpg");
  --doc-ateliers: url("/assets/img/hotel/ateliers-bar-p1.jpg");
  --doc-portrait: 1400 / 1980;
  --doc-paysage:  1400 / 990;
}
.k-doc-iriatai  { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-iriatai); }
.k-doc-banyan   { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-banyan); }
.k-doc-tamure   { --cw: 100%; --r: var(--doc-paysage);  --img: var(--doc-tamure); }
.k-doc-brochure { --cw: 100%; --r: var(--doc-paysage);  --img: var(--doc-brochure); }
.k-doc-cocktail { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-cocktail); }
.k-doc-soiree   { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-soiree); }
.k-doc-cocoloco { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-cocoloco); }
.k-doc-festifs  { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-festifs); }
.k-doc-nouvelan { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-nouvelan); }
.k-doc-ateliers { --cw: 100%; --r: var(--doc-portrait); --img: var(--doc-ateliers); }
.k-gambettes      { --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-gambettes); }
.k-petit-pastis   { --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-petit-pastis); }
.k-chez-les-filles{ --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-chez-les-filles); }
.k-mad-burger     { --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-mad-burger); }
.k-punjab         { --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-punjab); }
.k-goustous       { --cw: 100%; --r: var(--carte-ratio); --img: var(--carte-goustous); }

/* galerie des cartes : trois colonnes, la planche au-dessus de sa legende */
.page .cartes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px) clamp(20px, 2.6vw, 38px);
  margin-top: clamp(40px, 5vw, 68px);
  padding: 0;
  list-style: none;
}
.cartes .crea{ width: auto; display: flex; flex-direction: column-reverse; gap: 16px; }
.cartes .crea-cap{ margin-top: 0; }
.cartes .crea-desc{ max-width: none; }
@media (max-width: 900px){ .page .cartes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .page .cartes{ grid-template-columns: minmax(0, 1fr); } }

/* liste de tarifs, lue comme une carte de restaurant */
.tarifs{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(34px, 5vw, 76px);
  margin-top: clamp(34px, 4.5vw, 54px);
}
@media (max-width: 860px){ .tarifs{ grid-template-columns: minmax(0, 1fr); gap: 42px; } }
.tarif-bloc + .tarif-bloc{ margin-top: clamp(32px, 4vw, 46px); }
.tarif-bloc > h3{ padding-bottom: 12px; border-bottom: 1px solid var(--edge-2); }
.tarif-ligne{ padding-block: 14px; border-bottom: 1px solid var(--edge-3); }
.tarif-ligne:last-child{ border-bottom: 0; }
.tarif-row{ display: flex; align-items: baseline; gap: 10px; }
.tarif-nom{ font-weight: 500; color: var(--text); }
.tarif-dots{
  flex: 1 1 auto; min-width: 14px;
  border-bottom: 1px dotted var(--edge-2);
  transform: translateY(-4px);
}
.tarif-prix{ font-family: var(--serif); font-size: 1.45rem; white-space: nowrap; color: var(--text); }
.tarif-prix span{ font-family: var(--sans); font-size: .78rem; color: var(--text-3); letter-spacing: .02em; }
.tarif-ligne > small{
  display: block; margin-top: 5px; max-width: 46ch;
  font-size: .84rem; line-height: 1.55; color: var(--text-3);
}

/* quatre cartes se lisent mieux en deux fois deux qu'en trois plus une */
.page .cards-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){ .page .cards-2{ grid-template-columns: minmax(0, 1fr); } }

/* Sur les cartes de restaurants, pas de reflet sous la planche : le document
   doit se lire tel qu'il est, sans effet de vitrine. Les creations du
   portfolio le gardent. */
.cartes .crea-stage::after{ display: none; }

/* --- parcours : date en repere, bloc entierement cliquable ----------------
   Le lien porte le nom de l'entreprise, donc il reste comprehensible lu seul
   par un lecteur d'ecran, et son ::after couvre toute la carte pour que le
   bloc entier soit cliquable. */
.tl-head{ display: flex; flex-direction: column; gap: 6px; }
.tl-when{
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--gold);
  opacity: .9;
}
.tl-link{ color: inherit; text-decoration: none; }
.tl-link::after{ content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 2; }
.tl-link:focus-visible{ outline: none; }
.tl-link:focus-visible::after{ outline: 2px solid var(--gold); outline-offset: -4px; }
.tl-item:hover .tl-link{ color: var(--gold-hi); }

.tl-body{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.tl-more{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; letter-spacing: .04em;
  color: var(--text-3);
  transition: color .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
/* Visible en permanence : sans cela rien n'indique que le bloc est cliquable. */
.tl-item:hover .tl-more{ color: var(--gold); transform: translateX(4px); }

/* --- formation : trois niveaux distincts --------------------------------- */
.edu-main{ display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.edu-main li{ display: flex; flex-direction: column; gap: 3px; }
.edu-main strong{ font-weight: 500; color: var(--text); }
.edu-main span{ font-size: .88rem; color: var(--text-3); }
.edu-aside{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--edge-3);
}
.edu-aside h4{
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-3);
}
.edu-aside p{ font-size: .86rem; line-height: 1.6; color: var(--text-2); }
@media (max-width: 620px){ .edu-aside{ grid-template-columns: minmax(0, 1fr); } }

/* --- logos des references : plus d'air ----------------------------------- */
.refs-logos{ gap: clamp(30px, 4.6vw, 70px) !important; }
.logo-publicis{ width: 62px;  height: 62px; }
.logo-conrad{   width: 158px; height: 41px; }
.logo-peninsula{width: 168px; height: 34px; }
.logo-airfrance{width: 147px; height: 21px; }
.logo-ndnb{     width: 152px; height: 60px; }

/* --- creations : le defile avance tout seul ------------------------------
   La serie est dupliquee dans le HTML, l'animation la translate d'exactement
   une moitie, donc la boucle est invisible. Elle se met en pause au survol et
   au clavier. Sur un ecran tactile il n'y a pas de survol : on rend la main a
   l'utilisateur en coupant l'animation et en laissant le defilement au doigt. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .crea-sect .rail{ overflow-x: hidden; }
  .crea-sect .rail-track{
    width: max-content;
    animation: defile-creations 96s linear infinite;
    will-change: transform;
  }
  .crea-sect .rail:hover .rail-track,
  .crea-sect .rail:focus-within .rail-track{ animation-play-state: paused; }
  /* la barre de progression suit le defilement manuel, qui n'existe plus ici */
  .crea-sect .rbar{ display: none; }
}
@keyframes defile-creations{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-50%, 0, 0); }
}
/* la copie ne doit exister que pour l'oeil, jamais pour le clavier */
.rail-track [aria-hidden="true"] a{ pointer-events: none; }

/* --- SeriesTracker, sous-titre dans la section Creations ------------------ */
.sect-head-sub{ margin-top: clamp(64px, 8vw, 118px); }
.sect-head-sub .h2{ font-size: clamp(1.9rem, 3.4vw, 3rem); }

/* --- pages d'experience -------------------------------------------------- */
.exp-logo{ margin: 22px 0 6px; opacity: .85; }
.hero .tl-when{ margin-top: 10px; }
.hero .eyebrow .tlink{ font-size: inherit; letter-spacing: inherit; }

/* --- page hotellerie ------------------------------------------------------
   Une rangee horizontale par section. Chaque document est pose a une hauteur
   commune (--sh), sa largeur suit le ratio exact de son fichier (--arn) : rien
   n'est rogne. La presentation depend du format reel du document :
     flat  une feuille ; flip  un recto-verso qui se retourne au survol ;
     fold2 / fold3  un A4 plie en volets, qui se retourne aussi ;
     book  un livret dont la couverture s'entrouvre ; set  un eventail.
   Toutes les pages restent lisibles en entier dans la visionneuse. */

.shelf-sect{ --sh: clamp(250px, 30vw, 380px); overflow: visible; }
.shelf-sect + .shelf-sect{ padding-top: 0; }
.shelf-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.shelf-nav{ display: flex; gap: 10px; flex: none; }
.shelf-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: var(--chip-bg); color: var(--text);
  cursor: pointer; transition: border-color .3s ease, color .3s ease, opacity .3s ease, transform .3s ease;
}
.shelf-btn:hover{ border-color: var(--gold-line); color: var(--gold); transform: translateY(-2px); }
.shelf-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.shelf-btn[disabled]{ opacity: .35; cursor: default; transform: none; }

.shelf{
  position: relative;
  margin-top: clamp(28px, 3.6vw, 48px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar{ display: none; }
.shelf:focus-visible{ outline: none; }
.shelf:focus-visible .shelf-track{ outline: 1px dashed var(--gold-line); outline-offset: 6px; }
.page .shelf-track{
  --pad: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
  display: flex; align-items: flex-end;
  gap: clamp(26px, 3.4vw, 54px);
  width: max-content;
  margin: 0; list-style: none;
  padding: 34px var(--pad) 12px;
}
.shelf-bar{ position: relative; width: min(240px, 40vw); height: 2px; margin-top: 22px; border-radius: 2px; background: var(--edge-3); overflow: hidden; }
.shelf-bar i{ position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--gold); opacity: .7; }

.doc{
  position: relative;
  flex: 0 0 auto;
  width: max(200px, calc(var(--sh) * var(--arn)));
  scroll-snap-align: start;
  scroll-margin-inline: var(--gut);
  display: flex; flex-direction: column;
}
.m-set{ width: max(220px, calc(var(--sh) * var(--arn) * 1.3)); }
.doc-obj{
  position: relative;
  height: var(--sh);
  width: calc(var(--sh) * var(--arn));
  max-width: 100%;
  margin-inline: auto;
  perspective: 1400px;
}
.doc-cap{ margin-top: 20px; }
.doc .crea-meta{ display: flex; align-items: center; gap: 12px; font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.doc .crea-meta .n{ font-family: var(--serif); font-size: 1rem; letter-spacing: .02em; text-transform: none; color: var(--gold); }
.doc .h3{ margin-top: 10px; font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.doc .crea-desc{ margin-top: 8px; font-size: .86rem; line-height: 1.58; color: var(--text-3); }
.doc:hover .crea-desc{ color: var(--text-2); }
.doc-pages{ display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; color: var(--text-3); }
.doc-pages svg{ opacity: .7; }
.doc:hover .doc-pages{ color: var(--gold); }

/* toute la planche ouvre la visionneuse */
.doc-open{ color: inherit; text-decoration: none; }
.doc-open::after{ content: ""; position: absolute; inset: 0; z-index: 2; }
.doc-open:focus-visible{ outline: none; }
.doc-open:focus-visible::after{ outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 6px; }
.doc:hover .h3{ color: var(--gold-hi); }

/* le bouton qui retourne un recto-verso, utile au toucher et au clavier */
.doc-turn{
  position: absolute; z-index: 3; top: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: var(--chip-bg); color: var(--text-2);
  cursor: pointer; opacity: 0; transition: opacity .3s ease, color .3s ease, border-color .3s ease;
}
.doc:hover .doc-turn, .doc:focus-within .doc-turn, .doc-turn:focus-visible{ opacity: 1; }
.doc-turn:hover{ color: var(--gold); border-color: var(--gold-line); }
.doc-turn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: none){ .doc-turn{ opacity: 1; } }

/* une image de document : blanche comme le papier, bordee comme sur le reste du site */
.doc-obj img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.sheet, .face, .cover, .leaf{
  position: absolute; inset: 0;
  background: #fff;
  border: 1px solid var(--frame-edge);
  border-radius: 3px;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.sheet{ transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.m-flat:hover .sheet{ transform: translateY(-8px); }

/* recto-verso */
.turn{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2,.75,.2,1);
}
/* Chaque face s'efface a mi-course (visibility, avec un delai egal a la moitie
   de la rotation) : le verso n'apparait jamais en miroir, meme dans les moteurs
   qui ignorent backface-visibility. */
.face{ backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear .42s; }
.face.back{ transform: rotateY(180deg); visibility: hidden; }
@media (hover: hover){
  .doc:not(.is-turned):hover .turn, .doc.is-turned:not(:hover) .turn{ transform: rotateY(180deg); }
  .doc:not(.is-turned):hover .face.front, .doc.is-turned:not(:hover) .face.front{ visibility: hidden; }
  .doc:not(.is-turned):hover .face.back, .doc.is-turned:not(:hover) .face.back{ visibility: visible; }
}
@media (hover: none){
  .doc.is-turned .turn{ transform: rotateY(180deg); }
  .doc.is-turned .face.front{ visibility: hidden; }
  .doc.is-turned .face.back{ visibility: visible; }
}

/* feuilles pliees : chaque volet montre sa part de la meme image, sans perte */
.m-fold2 .face, .m-fold3 .face{ background: transparent; border: 0; box-shadow: none; overflow: visible; }
.fold{ position: absolute; inset: 0; display: flex; transform-style: preserve-3d; filter: drop-shadow(0 26px 30px rgba(40,26,10,.18)); }
.panel{
  --n: 2;
  position: relative; flex: 1 1 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--frame-edge);
  transition: transform .9s cubic-bezier(.2,.75,.2,1);
}
.m-fold3 .panel{ --n: 3; }
.panel img{
  position: absolute; top: 0; height: 100%;
  width: calc(var(--n) * 100%); max-width: none;
  left: calc(var(--i) * -100%);
  object-fit: fill;
}
/* le pli : un volet recule, l'autre aussi, la lumiere tombe dans le creux */
.panel::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
.m-fold2 .panel[style*="--i:0"]{ transform-origin: right center; transform: rotateY(14deg); border-right: 0; }
.m-fold2 .panel[style*="--i:1"]{ transform-origin: left center; transform: rotateY(-14deg); border-left: 0; }
.m-fold2 .panel[style*="--i:0"]::after{ background: linear-gradient(to left, rgba(60,40,20,.16), transparent 30%); }
.m-fold2 .panel[style*="--i:1"]::after{ background: linear-gradient(to right, rgba(60,40,20,.10), transparent 26%); }
.m-fold3 .panel[style*="--i:0"]{ transform-origin: right center; transform: rotateY(-16deg); border-right: 0; }
.m-fold3 .panel[style*="--i:1"]{ border-inline: 0; }
.m-fold3 .panel[style*="--i:2"]{ transform-origin: left center; transform: rotateY(16deg); border-left: 0; }
.m-fold3 .panel[style*="--i:0"]::after{ background: linear-gradient(to left, rgba(60,40,20,.12), transparent 24%); }
.m-fold3 .panel[style*="--i:2"]::after{ background: linear-gradient(to right, rgba(60,40,20,.12), transparent 24%); }
/* au survol, le pli s'accentue legerement pendant qu'il se retourne */
@media (hover: hover){
  .m-fold2:hover .panel[style*="--i:0"]{ transform: rotateY(8deg); }
  .m-fold2:hover .panel[style*="--i:1"]{ transform: rotateY(-8deg); }
}

/* livret : une epaisseur de pages, la couverture s'entrouvre au survol */
.book{ position: absolute; inset: 0; transform-style: preserve-3d; }
.book::before{
  /* la tranche des pages, a droite et en bas */
  content: ""; position: absolute; inset: 4px -6px -6px 4px;
  border-radius: 2px 4px 4px 2px;
  background: repeating-linear-gradient(to right, #fff 0 1px, #e8e2d6 1px 2px);
  box-shadow: var(--sh-3);
}
.leaf{ box-shadow: none; }
.cover{
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.2,.75,.2,1), box-shadow 1s ease;
  box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.25);
}
.cover::after{
  /* le dos du livret, cote reliure */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%;
  background: linear-gradient(to right, rgba(0,0,0,.12), transparent);
  pointer-events: none;
}
@media (hover: hover){
  .m-book:hover .cover{ transform: rotateY(-32deg); box-shadow: 18px 0 40px -18px rgba(0,0,0,.35); }
}

/* eventail : plusieurs visuels poses les uns sur les autres */
.fan{ position: absolute; inset: 0; }
.fan-i{
  position: absolute; inset: 0;
  transition: transform .8s cubic-bezier(.2,.75,.2,1);
}
.fan-i img{ filter: drop-shadow(0 18px 26px rgba(40,26,10,.22)); }
.fan-i[style*="--k:0"]{ z-index: 3; }
.fan-i[style*="--k:1"]{ z-index: 2; transform: translateX(12%) rotate(4deg) scale(.92); }
.fan-i[style*="--k:2"]{ z-index: 1; transform: translateX(-12%) rotate(-4deg) scale(.92); }
@media (hover: hover){
  .m-set:hover .fan-i[style*="--k:0"]{ transform: translateY(-6px); }
  .m-set:hover .fan-i[style*="--k:1"]{ transform: translateX(26%) rotate(7deg) scale(.9); }
  .m-set:hover .fan-i[style*="--k:2"]{ transform: translateX(-26%) rotate(-7deg) scale(.9); }
}

@media (prefers-reduced-motion: reduce){
  .turn, .panel, .cover, .fan-i, .sheet{ transition: none; }
}
@media (max-width: 760px){
  .shelf-sect{ --sh: 250px; }
  .shelf-nav{ display: none; }
}

/* visionneuse : une page (ou une double page) a la fois */
.lb{
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--void);
  color: var(--text);
  overflow: hidden;
}
.lb::backdrop{ background: var(--void); }
.lb-hd{
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  height: 70px; padding: 0 var(--gut);
  background: var(--hd-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-3);
}
.lb-title{ font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count{ font-size: .78rem; letter-spacing: .1em; color: var(--text-3); white-space: nowrap; }
.lb-close, .lb-nav{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--edge-2); background: var(--chip-bg); color: var(--text);
  cursor: pointer; transition: border-color .3s ease, color .3s ease, opacity .3s ease;
}
.lb-close{ margin-left: auto; flex: none; }
.lb-close:hover, .lb-nav:hover{ border-color: var(--gold-line); color: var(--gold); }
.lb-close:focus-visible, .lb-nav:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-nav{ position: absolute; z-index: 3; top: 50%; margin-top: 11px; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev{ left: var(--gut); }
.lb-next{ right: var(--gut); }
.lb-nav[disabled]{ opacity: 0; pointer-events: none; }
.lb-stage{
  position: absolute; inset: 70px 0 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 3vw, 40px) calc(var(--gut) + 64px);
  perspective: 2200px;
  touch-action: pan-y;
}
.lb-view{ display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; transform-style: preserve-3d; }
.lb-view img{
  display: block;
  max-width: none; max-height: none;
  flex: none;
  background: #fff;
  box-shadow: var(--sh-3);
  border: 1px solid var(--frame-edge);
}
.lb-view.duo img:first-child{ border-right: 0; box-shadow: var(--sh-3), inset -14px 0 18px -14px rgba(0,0,0,.25); }
.lb-view.duo img:last-child{ border-left: 0; box-shadow: var(--sh-3), inset 14px 0 18px -14px rgba(0,0,0,.2); }
.lb-view.in-next{ animation: lb-next .7s cubic-bezier(.2,.75,.2,1); transform-origin: left center; }
.lb-view.in-prev{ animation: lb-prev .7s cubic-bezier(.2,.75,.2,1); transform-origin: right center; }
.lb-view.duo.in-next{ transform-origin: center center; }
.lb-view.duo.in-prev{ transform-origin: center center; }
@keyframes lb-next{ from{ opacity: 0; transform: rotateY(-24deg) translateX(40px); } to{ opacity: 1; transform: none; } }
@keyframes lb-prev{ from{ opacity: 0; transform: rotateY(24deg) translateX(-40px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .lb-view.in-next, .lb-view.in-prev{ animation: none; } }
@media (max-width: 760px){
  .lb-stage{ padding: 14px 12px 80px; }
  .lb-nav{ top: auto; bottom: 18px; margin: 0; transform: none; }
}
html.lb-lock{ overflow: hidden; }

/* liste des prestations, sans prix */
.offres{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(34px, 4.5vw, 54px);
}
@media (max-width: 900px){ .offres{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .offres{ grid-template-columns: minmax(0, 1fr); } }

/* Tailles reduites sur petit ecran. Ce bloc doit rester le dernier,
   sinon les tailles de bureau l'ecrasent. */
@media (max-width: 700px){
  .refs-logos{ gap: 20px 26px !important; }
  .logo-publicis{ width: 42px; height: 42px; }
  .logo-conrad{ width: 104px; height: 27px; }
  .logo-peninsula{ width: 112px; height: 23px; }
  .logo-airfrance{ width: 100px; height: 14px; }
  .logo-ndnb{ width: 102px; height: 40px; }
}

/* --- certifications et langues : une ligne par element -------------------
   En enfilade separees par des points, elles etaient illisibles. */
.edu-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.edu-list li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--edge-3);
  font-size: .86rem; line-height: 1.5;
}
.edu-list li:last-child{ border-bottom: 0; }
.edu-list .n{ color: var(--text-2); }
.edu-list .q{ color: var(--text-3); font-size: .78rem; white-space: nowrap; }

/* --- SeriesTracker : les captures font partie de la carte ----------------
   Elles flottaient en dessous, detachees du bloc qu'elles illustrent. */
.app-panel .shots{
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--edge-3);
}
.app-panel .shots{ gap: clamp(10px, 1.6vw, 22px); }
/* Dans la carte, la largeur disponible est bien plus faible qu'en pleine page :
   on renonce au decalage vertical et a la parallaxe, les quatre captures
   forment une ligne nette. */
.app-panel .shot{ width: clamp(96px, 15.5vw, 158px); transform: none; }
.app-panel .shot-1,
.app-panel .shot-2,
.app-panel .shot-3,
.app-panel .shot-4{ margin-top: 0; }
@media (max-width: 700px){
  .app-panel .shot{ width: 100%; max-width: 200px; }
}

/* --- logos dans la frise du parcours -------------------------------------
   Meme technique de masque que la ligne de references, mais a une echelle
   reduite et calee sur la hauteur de capitale plutot que sur la largeur. */
.tl-logo{
  display: block;
  background-color: currentColor;
  color: var(--text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .58;
  margin-bottom: 6px;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.tl-item:hover .tl-logo{ opacity: 1; color: var(--text-2); }
.tl-logo.logo-publicis{ width: 30px; height: 30px; }
.tl-logo.logo-conrad{   width: 86px; height: 22px; }
.tl-logo.logo-peninsula{width: 94px; height: 19px; }
.tl-logo.logo-airfrance{width: 84px; height: 12px; }
.tl-logo.logo-ndnb{     width: 74px; height: 29px; }
@media (max-width: 700px){
  .tl-logo.logo-publicis{ width: 26px; height: 26px; }
  .tl-logo.logo-conrad{   width: 74px; height: 19px; }
  .tl-logo.logo-peninsula{width: 80px; height: 16px; }
  .tl-logo.logo-airfrance{width: 72px; height: 10px; }
  .tl-logo.logo-ndnb{     width: 64px; height: 25px; }
}

/* Le texte a propos est decoupe en paragraphes : le premier garde son ecart
   avec le titre, les suivants respirent moins fort. */
.about-copy .copy + .copy{ margin-top: clamp(14px, 1.5vw, 20px); }

/* --- planches agrandissables ---------------------------------------------
   Le cadre devient un lien : il doit rester un bloc, et annoncer au curseur
   qu'il y a quelque chose a ouvrir. */
a.crea-frame{ display: block; cursor: zoom-in; }
a.crea-frame:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.crea-zoom{
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(20,18,16,.42);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  color: #fff;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
a.crea-frame:hover .crea-zoom,
a.crea-frame:focus-visible .crea-zoom{ opacity: 1; transform: translateY(0); }
@media (hover: none){ .crea-zoom{ opacity: 1; transform: none; } }

/* --- logos des ecoles ----------------------------------------------------- */
.edu-logo{
  display: block;
  background-color: currentColor;
  color: var(--text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .58;
  margin-bottom: 10px;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.card:hover .edu-logo,
.edu-main li:hover .edu-logo{ opacity: 1; color: var(--text-2); }
.logo-emlyon{ -webkit-mask-image: var(--logo-emlyon); mask-image: var(--logo-emlyon); }
.logo-cattolica{ -webkit-mask-image: var(--logo-cattolica); mask-image: var(--logo-cattolica); }
.edu-logo.logo-emlyon{ width: 46px; height: 46px; }
.edu-logo.logo-cattolica{ width: 113px; height: 46px; }
/* Dans les fiches du parcours, les logos peuvent respirer un peu plus. */
.card .edu-logo.logo-emlyon{ width: 42px; height: 42px; }
.card .edu-logo.logo-cattolica{ width: 122px; height: 50px; }

/* Le lieu vit sur sa propre ligne, sous l'intitule du poste. */
.tl-place{
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--text-3);
  opacity: .82;
}

/* page hotellerie : les deux maisons, sous l'accroche. Photo a son ratio
   d'origine, logo de l'hotel en masque pour prendre la couleur du theme. */
.hotels{ margin-top: clamp(56px, 8vh, 110px); padding-top: 30px; border-top: 1px solid var(--edge-3); }
.hotels-intro{ max-width: none; }
.hotels-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 36px); align-items: stretch; }
.hotel{ border-radius: 18px; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.hotel-photo{ margin: 0; aspect-ratio: var(--r); background: var(--void-3); }
.hotel-photo img{ display: block; width: 100%; height: 100%; }
.hotel-body{ flex: 1 1 auto; padding: clamp(20px, 2.4vw, 30px); }
.hotel .logo{ opacity: .85; color: var(--text); margin-bottom: 22px; }
.logo-cbbn{ width: 150px; height: 42px; -webkit-mask-image: url("img/logos/conrad-bora-bora-nui.png"); mask-image: url("img/logos/conrad-bora-bora-nui.png"); }
.logo-ppr{ width: 190px; height: 39px; -webkit-mask-image: url("img/logos/peninsula-paris.png"); mask-image: url("img/logos/peninsula-paris.png"); }
.hotel-meta{ margin-top: 0; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hotel .copy{ margin-top: 12px; font-size: .92rem; }
@media (max-width: 760px){ .hotels-grid{ grid-template-columns: minmax(0, 1fr); } }

/* --- ce que j'ai cree : un bloc par maison -------------------------------
   Le bandeau defilant ne disait pas d'ou venaient les documents. Chaque
   maison a maintenant sa carte, et l'application vit dans la meme rangee. */
:root{
  --cli-rabanne: url("/assets/img/logos/clients/rabanne.svg");
  --cli-dries: url("/assets/img/logos/clients/dries.svg");
  --cli-loewe: url("/assets/img/logos/clients/loewe.svg");
  --cli-domperignon: url("/assets/img/logos/clients/domperignon.svg");
}
.made{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(34px, 4.4vw, 60px);
}
.made-card{
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
}
.made-vis{
  aspect-ratio: var(--r);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--edge-3);
  flex: none;
}
.made-in{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 2.2vw, 30px);
}
.made-logo{
  display: block;
  background-color: currentColor;
  color: var(--text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .6;
  margin-bottom: 14px;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.made-card:hover .made-logo{ opacity: 1; color: var(--text-2); }
.made-logo.logo-publicis{ width: 38px; height: 38px; }
.made-logo.logo-conrad{   width: 92px; height: 24px; }
.made-logo.logo-peninsula{width: 100px; height: 20px; }
.made-logo.logo-airfrance{width: 90px; height: 13px; }
.made-in .copy{ margin-top: 10px; font-size: .92rem; }
.made-link{ margin-top: auto; padding-top: 22px; align-self: flex-start; }

/* maisons suivies chez Publicis */
.made-clients-t{
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: clamp(20px, 2.2vw, 28px);
}
.made-clients{
  /* Deux colonnes plutot qu'un retour a la ligne au hasard : quatre marques
     aux proportions tres differentes se rangent mieux en carre. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 18px 16px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.cli-logo{
  display: block;
  background-color: currentColor;
  color: var(--text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: contain; mask-size: contain;
  opacity: .5;
  transition: opacity .5s var(--ease-out), color .5s var(--ease-out);
}
.made-clients li:hover .cli-logo{ opacity: 1; color: var(--text-2); }
.cli-rabanne{ -webkit-mask-image: var(--cli-rabanne); mask-image: var(--cli-rabanne); width: 84px; height: 15px; }
.cli-dries{ -webkit-mask-image: var(--cli-dries); mask-image: var(--cli-dries); width: 110px; height: 8px; }
/* Le fichier de Wikimedia etait celui de Loewe Technologies, le fabricant
   allemand de televiseurs. Celui-ci vient du site de la maison espagnole. */
.cli-loewe{ -webkit-mask-image: var(--cli-loewe); mask-image: var(--cli-loewe); width: 84px; height: 19px; }
.cli-domperignon{ -webkit-mask-image: var(--cli-domperignon); mask-image: var(--cli-domperignon); width: 78px; height: 30px; }

/* la carte de l'application occupe deux colonnes : elle porte les captures */
.made .app-panel{
  max-width: none;
  margin-top: 0;
  padding: clamp(20px, 2.2vw, 30px);
}
.made-app{ grid-column: span 2; }
.made-app .app-links{ margin-top: clamp(20px, 2.4vw, 28px); }

@media (max-width: 1000px){
  .made{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .made{ grid-template-columns: minmax(0, 1fr); }
  .made-app{ grid-column: auto; }
}

/* Le chapo d'une rangee de documents a besoin du meme ecart que .chapo. */
.shelf-head .lead{ margin-top: 22px; }

/* --- barre de suggestion de langue ---------------------------------------
   Un visiteur dont le navigateur est dans l'autre langue se voit proposer la
   version correspondante. Jamais de redirection automatique : les deux
   adresses doivent rester atteignables et indexables. */
.barres{
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vw, 30px);
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.barres > *{ pointer-events: auto; }
.langbar{
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--edge-2);
  /* Posee sur le heros, une surface trop transparente ne se lit pas : on
     empile l'opaque du theme sous le voile du fond. */
  background: var(--chip-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: var(--sh-2);
  font-family: var(--sans);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.langbar.in{ opacity: 1; transform: translateY(0); }
.langbar p{ font-size: .86rem; color: var(--text-2); }
.langbar-go{
  font-size: .86rem;
  font-weight: 600;
  color: var(--gold-hi);
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 1px;
  transition: border-color .4s ease;
}
.langbar-go:hover{ border-bottom-color: var(--gold-hi); }
.langbar-x{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background-color .4s ease, color .4s ease;
}
.langbar-x:hover{ background: var(--chip-fill); color: var(--text); }
@media (max-width: 560px){
  .langbar{ gap: 12px; padding: 11px 12px 11px 16px; }
  .langbar p{ font-size: .8rem; }
  .langbar-go{ font-size: .8rem; }
}

/* Le selecteur de langue doit se voir. Le bouton de theme partage le meme
   conteneur dans l'en-tete : on habille les deux liens, pas le groupe. */
.lang a[hreflang]{
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text-3);
  transition: color .4s ease, border-color .4s ease, background-color .4s ease;
}
.lang a[hreflang]:hover{ color: var(--text); border-color: var(--edge-2); }
.lang a[hreflang].on{
  color: var(--text);
  border-color: var(--edge-2);
  background: var(--chip-fill);
}
.lang > span[aria-hidden]{ display: none; }

/* --- mises en situation composees ----------------------------------------
   Les documents du Peninsula et d'Air France n'avaient pas de photo posee.
   Ces deux planches sont composees a partir des documents entiers, sur le
   meme gris neutre que la photo du Conrad. Ajoutees ici et non dans l'entete
   du fichier, qui est engendre par tools/mkassets.swift. */
:root{
  --crea-peninsula-planche: url("/assets/img/crea-peninsula-planche.jpg?v=2");
  --crea-peninsula-planche-ratio: 1600 / 1188;
  --crea-airfrance-planche: url("/assets/img/crea-airfrance-planche.jpg?v=4");
  --crea-airfrance-planche-ratio: 1600 / 1188;
  /* le gris des planches, pour le bandeau de la carte Publicis */
  --planche-fond: #e5e4e0;
}

/* Publicis n'a pas d'imprime a montrer : son bandeau porte les maisons
   suivies, sur le meme gris, pour que la rangee reste d'aplomb. */
.made-vis-brands{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  justify-items: center;
  align-items: center;
  gap: clamp(20px, 3vw, 34px) clamp(14px, 2vw, 24px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--planche-fond);
}
.made-vis-brands .cli-logo{ color: #3a372f; opacity: .72; }
.made-card:hover .made-vis-brands .cli-logo{ opacity: 1; }
.made-vis-brands{ aspect-ratio: 1600 / 1188; }
/* Dans le bandeau, les marques ont la place de respirer. */
.made-vis-brands .cli-rabanne{ width: clamp(96px, 11vw, 128px); height: auto; aspect-ratio: 510 / 89; }
.made-vis-brands .cli-dries{ width: clamp(112px, 13vw, 152px); height: auto; aspect-ratio: 200 / 13; }
.made-vis-brands .cli-loewe{ width: clamp(92px, 10.5vw, 124px); height: auto; aspect-ratio: 477 / 109; }
.made-vis-brands .cli-domperignon{ width: clamp(72px, 8vw, 96px); height: auto; aspect-ratio: 417 / 159; }

/* Bandeau de consentement : deux boutons de meme poids, refuser aussi simple
   qu'accepter. */
.cookiebar{ padding-right: 8px; }
.cookiebar button{
  flex: none;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--edge-2);
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .012em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.cookiebar button:hover{ border-color: var(--gold-line); color: var(--text); }
.cookiebar .ck-oui{
  border-color: var(--gold-line);
  background: var(--chip-fill);
  color: var(--gold-hi);
}
.cookiebar .ck-oui:hover{ border-color: var(--gold-hi); color: var(--gold-hi); }
@media (max-width: 560px){
  .cookiebar{ flex-wrap: wrap; justify-content: flex-end; }
  .cookiebar p{ flex: 1 0 100%; }
  .cookiebar button{ padding: 7px 13px; font-size: .78rem; }
}


/* --- rail : les planches sur une seule ligne, qui defile a l'horizontale ------
   Le conteneur deborde, jamais la page. Chaque element a une largeur fixe pour
   que la ligne reste lisible quelle que soit la hauteur des documents. */
.page .cartes.rail{
  display: flex;
  grid-template-columns: none;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 14px;
  margin-top: clamp(32px, 4vw, 52px);
}
.page .cartes.rail > .crea{
  flex: 0 0 clamp(190px, 23vw, 266px);
  scroll-snap-align: start;
  flex-direction: column;
  gap: 14px;
}
.page .cartes.rail .crea-stage{ order: 0; }
.page .cartes.rail .crea-cap{ order: 1; }
.page .cartes.rail .crea-desc{ max-width: none; }
.page .cartes.rail::-webkit-scrollbar{ height: 6px; }
.page .cartes.rail::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 99px;
}
.page .cartes.rail::-webkit-scrollbar-track{ background: transparent; }
.rail-note{ margin-top: 10px; opacity: .55; }
@media (max-width: 560px){
  .page .cartes.rail > .crea{ flex-basis: 64vw; }
}
@media (hover: hover) and (min-width: 1100px){
  .rail-note{ display: none; }
}