/* ============================================================
   Études de cas : une page longue par étude, posée sur le même ciel
   que la page d'accueil. Texte à 68 caractères, figures légendées par
   une décision, repères de lecture épinglés en haut.
   Dépend de style.css (polices, couleurs, verre, boutons, visionneuse).
   ============================================================ */

/* le ciel reste visible derrière l'en-tête, puis la page repose sur le même
   indigo uni et grainé que l'accueil (grain : ::before, défini dans style.css) */
.etude{position:relative;z-index:2;padding-bottom:clamp(48px,7vh,88px);background:linear-gradient(rgba(16,13,58,.4) 0,rgba(16,13,58,.7) 40vh,rgba(16,13,58,.92) 70vh,var(--bg) 95vh)}
.etude::before{-webkit-mask-image:linear-gradient(transparent,#000 95vh);mask-image:linear-gradient(transparent,#000 95vh)}
/* même largeur que l’accueil et la barre du haut ; les textes gardent leur mesure (68ch) */
.etude .shell{width:var(--shell)}

/* ---------- en-tête ----------------------------------------- */

.etude__head{padding-top:clamp(80px,12vh,152px)}
.etude__back{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--lavender)}
.etude__back a{text-decoration:none;color:var(--white)}
.etude__back a:hover{color:var(--pink)}
.etude__back span{color:var(--muted)}
.etude__kicker{margin-top:32px;font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
.etude__title{
  margin-top:8px;max-width:22ch;
  font-size:clamp(2rem,5vw,3.9rem);line-height:1.02;letter-spacing:-.03em;color:#fff;
}
.etude__lead{margin-top:24px;max-width:62ch;font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:500;line-height:1.45;color:var(--white)}

/* le bandeau : rôle, équipe, durée, outils, résultat */
.etude__meta{
  margin-top:clamp(24px,4vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:16px 24px;
}
.etude__meta div{min-width:0}
.etude__meta dt{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.etude__meta dd{margin:8px 0 0;font-size:.95rem;line-height:1.5;color:var(--white)}

/* ---------- plan épinglé ------------------------------------ */
/* Un sommaire, pas des étiquettes : chapitres numérotés sur une ligne, filet
   au-dessus et en dessous, le chapitre lu souligné en rose. */

/* Le sommaire (.chapters, défini dans style.css) est un enfant direct de
   <main>, pas de l'en-tête : collé en haut, il reste visible sur toute la
   longueur de l'étude. Ici il prend la largeur de la colonne de lecture. */
.etude .chapters{--bar-w:min(1040px,92vw);margin-top:clamp(24px,4vw,48px)}
/* la barre a sa propre largeur : le corps de l'étude vient juste après */
.chapters + .etude__body{margin-top:clamp(32px,5vw,64px)}

/* les panneaux de verre restent dans la colonne : pas de débordement
   négatif comme sur l'accueil */
.etude .glass{margin-inline:0}

/* ---------- corps ------------------------------------------- */

.etude__body{display:flex;flex-direction:column;gap:clamp(48px,7vw,88px);margin-top:clamp(40px,6vw,72px)}
.etude__section{scroll-margin-top:80px}
.etude__h{
  display:flex;align-items:baseline;gap:12px;
  font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.025em;color:#fff;
}
.etude__h small{font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.12em;color:var(--pink)}
.etude__section > p,.etude__section > ul,.etude__section > ol{max-width:68ch}
.etude__section > p{margin-top:16px;color:var(--lavender)}
.etude__section > p:first-of-type{margin-top:24px}
.etude__section > p b,.etude__section li b{color:#fff;font-weight:700}
.etude__section > ul,.etude__section > ol{margin-top:16px;display:flex;flex-direction:column;gap:8px;color:var(--lavender)}
.etude__section > ul li{position:relative;padding-left:20px}
.etude__section > ul li::before{content:'';position:absolute;left:0;top:.81em;width:9px;height:2px;border-radius:2px;background:var(--magenta-lit);box-shadow:0 0 6px rgba(255,46,166,.55)}
.etude__section > ol{counter-reset:n}
.etude__section > ol li{position:relative;padding-left:32px;counter-increment:n}
.etude__section > ol li::before{content:counter(n);position:absolute;left:0;top:.1em;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;color:#fff;background:rgba(255,46,166,.22);border:1px solid rgba(255,46,166,.6)}
.etude__sub{margin-top:32px;font-size:clamp(1.1rem,1.8vw,1.35rem);color:#fff}

/* « En bref » : trois réponses, verre clair */
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px 24px;margin-top:24px}
.brief b{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.brief p{color:var(--white);font-size:.98rem}

/* chiffres clés */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px;margin-top:24px}
.stats div{padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.stats b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;line-height:1;color:#fff}
.stats span{display:block;margin-top:8px;font-size:.9rem;color:var(--lavender)}

/* encadré « décision » */
.decision{
  margin-top:24px;max-width:68ch;padding:16px 24px;
  border-left:3px solid var(--magenta-lit);border-radius:0 16px 16px 0;
  background:rgba(255,46,166,.08);
}
.decision b{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.decision p{color:var(--white)}
/* plusieurs décisions à la suite : un seul encadré, un paragraphe par décision */
.decision p + p{margin-top:12px}

/* citation (retour de test, collègue) */
.quote{margin:24px 0 0;max-width:62ch;padding-left:24px;border-left:2px solid rgba(255,255,255,.25);font-size:1.05rem;line-height:1.5;color:#fff}
.quote footer{margin-top:8px;font-size:.88rem;color:var(--muted)}

/* ---------- figures ----------------------------------------- */

.figs{display:grid;gap:16px;margin-top:32px}
.figs--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.figs--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* écrans de téléphone : largeur fixe, quatre par rangée sur grand écran, les
   rangées incomplètes restent alignées à gauche à la même taille */
.figs--phones{display:flex;flex-wrap:wrap;gap:16px 24px}
.figs--phones .fig{flex:0 1 228px;width:228px}
/* posts des réseaux : carrousel de cartes qui se retournent (visuel devant, légende
   derrière). Chaque carte garde le format de son post (--ar = largeur / hauteur),
   toutes ont la même hauteur (--h). */
.posts-car{margin-top:28px}
.posts-car__track{--h:420px;list-style:none;margin:0;padding:4px 2px 6px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.posts-car__track::-webkit-scrollbar{display:none}
.posts-car__track:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:18px}
.posts-car__track.is-end{-webkit-mask-image:none;mask-image:none}
@media (hover:hover) and (pointer:fine){.posts-car__track{cursor:grab}.posts-car__track .flip__btn{cursor:pointer}}
.posts-car__track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.posts-car__track.is-drag .flip__btn{cursor:grabbing}
.posts-car__track img{-webkit-user-drag:none;user-select:none}
.flip{flex:0 0 auto;width:calc(var(--h) * var(--ar));scroll-snap-align:start;display:flex;flex-direction:column;gap:10px}
.flip__card{position:relative;height:var(--h);perspective:1600px}
.flip__face{position:absolute;inset:0;margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--edge);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .2s}
.flip__front{background:#150b2e}
.flip__front img{width:100%;height:100%;object-fit:cover;display:block}
.flip__hint{position:absolute;right:10px;bottom:10px;padding:6px 11px;border-radius:999px;font-size:.75rem;font-weight:600;color:#fff;background:rgba(18,14,58,.62);border:.5px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.flip__card:hover .flip__hint{opacity:1;transform:none}
@media (hover:none){.flip__hint{opacity:1;transform:none}}
.flip__back{transform:rotateY(180deg);background:linear-gradient(160deg,#211447,#120a2c);padding:22px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.flip.is-flipped .flip__front{transform:rotateY(-180deg)}
.flip.is-flipped .flip__back{transform:rotateY(0)}
.flip__card:hover .flip__face{border-color:var(--edge-lit)}
.flip__back p{margin:0}
.flip__net{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lavender)}
.flip__text{font-size:.92rem;line-height:1.55;color:#fff}
.flip__tags{font-size:.8rem;line-height:1.5;color:var(--lavender)}
.flip__note{margin-top:auto !important;font-size:.72rem;color:var(--lavender);opacity:.8}
.flip[style*="--ar:.5625"] .flip__back{padding:16px}
.flip[style*="--ar:.5625"] .flip__text{font-size:.85rem}
.flip__btn{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:16px;background:none;cursor:pointer}
.flip__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.flip .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flip__cap{margin:0;font-size:.9rem;line-height:1.5;color:var(--lavender)}
.flip__cap b{color:#fff;font-weight:700}
.flip__zoom{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;margin-left:2px}
.posts-car__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.posts-car__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--edge);background:rgba(255,255,255,.06);color:#fff;font-size:1.05rem;cursor:pointer;transition:background .2s,border-color .2s,opacity .2s}
.posts-car__btn:hover{background:rgba(255,255,255,.12);border-color:var(--edge-lit)}
.posts-car__btn:disabled{opacity:.35;cursor:default}
.posts-car__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.posts-car__track{--h:340px;gap:14px}.flip__back{padding:16px}.flip__text{font-size:.85rem}}
/* version calme et mouvement réduit : la légende apparaît en fondu, sans rotation */
html.calm .flip__face{transition:opacity .25s}
html.calm .flip__back,html.calm .flip.is-flipped .flip__front{transform:none}
html.calm .flip__back{opacity:0}
html.calm .flip.is-flipped .flip__front{opacity:0}
html.calm .flip.is-flipped .flip__back{opacity:1}
@media (prefers-reduced-motion:reduce){
  .flip__face{transition:opacity .25s}
  .flip__back,.flip.is-flipped .flip__front{transform:none}
  .flip__back{opacity:0}
  .flip.is-flipped .flip__front{opacity:0}
  .flip.is-flipped .flip__back{opacity:1}
}
.fig{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fig a,.fig .fig__frame{
  display:block;border-radius:16px;overflow:hidden;
  border:1px solid var(--edge);background:#150b2e;
  transition:transform .35s var(--ease),border-color .2s;
}
.fig a:hover{transform:translateY(-3px);border-color:var(--edge-lit)}
.fig img,.fig video{width:100%;height:auto;display:block}
/* deux figures côte à côte : même format (--ratio, réglé par bloc), l'image
   remplit le cadre et la visionneuse montre l'image entière */
.figs--2 .fig a{display:flex;aspect-ratio:var(--ratio,2/1)}
.figs--2 .fig a img{height:100%;object-fit:cover}
.fig--wide{grid-column:1 / -1}
/* vidéo d’un écran d’outil : toute la largeur, comme les autres visuels larges */
.fig--video{width:100%}
.fig figcaption{font-size:.9rem;line-height:1.5;color:var(--lavender)}
.fig figcaption b{color:#fff;font-weight:700}
/* L’IA dans mes itérations (Klap) : six cartes, chacune un visuel tiré du
   projet puis ce que l’IA a apporté. Deux colonnes, une sur téléphone. */
.ia-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.ia-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ia-card__visual{
  position:relative;height:248px;margin:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:24px;
  background:radial-gradient(circle at 50% 30%,#2a0f52,#150529 72%);border-bottom:1px solid var(--line);
}
.ia-card__body{padding:24px}
.ia-card h3{font-size:1.2rem;line-height:1.2;color:#fff}
.ia-card p{margin-top:8px;font-size:.95rem;line-height:1.6;color:var(--lavender)}
/* trois écrans en éventail, le haut de chaque écran. Seul l’écran du milieu
   d’une série de trois remonte, une série de quatre reste alignée. */
.ia-card__visual--ecrans img{width:30%;max-width:132px;height:100%;object-fit:cover;object-position:top;border-radius:12px;border:1px solid rgba(255,255,255,.16);box-shadow:0 12px 28px rgba(4,2,24,.5)}
.ia-card__visual--ecrans img:nth-child(2):nth-last-child(2){transform:translateY(-12px)}
/* les publications Instagram : la légende est à droite, le cadrage la garde */
.ia-card__visual--ecrans .ia-card__post{object-position:85% top}
/* la palette, en grand */
.ia-card .ia-palette{justify-content:center;gap:16px}
.ia-card .ia-palette span{width:56px;height:56px;border-radius:16px}
.ia-card .ia-palette li{font-size:.75rem}
/* le logo néon, qui respire (règles dans style.css), à côté de la vidéo
   d’accueil, qui s’ouvre dans la visionneuse */
.ia-card .ia-neon{width:min(80%,360px)}
.ia-card__visual--duo{justify-content:space-around}
.ia-card__visual--duo .ia-neon{width:min(52%,240px)}
.ia-card__video{flex:0 0 auto;width:112px}
.ia-card__video a{border-radius:14px;box-shadow:0 12px 28px rgba(4,2,24,.5)}
/* deux cartes en pleine largeur (la vidéo d’accueil, les réseaux) : le
   visuel à gauche, le texte à droite */
.ia-card--large{grid-column:1 / -1;flex-direction:row}
.ia-card--large .ia-card__visual{flex:0 0 60%;height:auto;min-height:360px;border-bottom:0;border-right:1px solid var(--line)}
.ia-card--large .ia-card__body{align-self:center;padding:32px}
.ia-card--large .ia-card__visual--duo .ia-neon{width:min(50%,300px)}
.ia-card--large .ia-card__video{width:168px}
.ia-card--large .ia-card__visual--ecrans img{width:22%;max-width:156px;height:300px}
/* des répliques de l’application, comme des bulles */
.ia-bulles{display:flex;flex-direction:column;gap:8px;width:100%;max-width:340px}
.ia-bulles li{
  align-self:flex-start;max-width:90%;padding:8px 16px;border-radius:16px 16px 16px 4px;
  background:#221040;border:1px solid rgba(239,22,144,.4);color:#F7F4FB;font-size:.88rem;line-height:1.4;
}
.ia-bulles li:nth-child(2){align-self:flex-end;border-radius:16px 16px 4px 16px;background:#EF1690;border-color:transparent;color:#fff;font-weight:700}
@media (max-width:760px){
  .ia-cards{grid-template-columns:minmax(0,1fr)}
  .ia-card__visual{height:216px}
  /* les cinq couleurs tiennent sur une ligne */
  .ia-card .ia-palette{gap:8px}
  .ia-card .ia-palette span{width:44px;height:44px;border-radius:12px}
  .ia-card .ia-palette li{font-size:.68rem}
  .ia-card__video{width:96px}
  .ia-card--large{flex-direction:column}
  .ia-card--large .ia-card__visual{min-height:0;height:auto;padding:24px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .ia-card--large .ia-card__body{padding:24px}
  .ia-card--large .ia-card__video{width:120px}
  .ia-card--large .ia-card__visual--ecrans{gap:8px}
  .ia-card--large .ia-card__visual--ecrans img{width:23%;height:200px}
  /* publications plus étroites : le cadrage recule pour garder le début de la légende */
  .ia-card__visual--ecrans .ia-card__post{object-position:75% top}
}




/* parcours : les étapes en ligne, les étapes de liaison marquées. Les règles
   sont plus précises que celles des listes numérotées de section, qu'elles
   remplacent (pas de puce automatique, pas de retrait). */
.etude__section ol.flow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px;
  max-width:none;margin-top:24px;counter-reset:none;
}
.etude__section ol.flow li{
  position:relative;padding:16px;counter-increment:none;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);
  font-size:.9rem;line-height:1.4;color:var(--white);
}
.etude__section ol.flow li::before{content:none}
.flow li b{
  display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;margin-bottom:8px;
  font:800 .8rem/1 var(--display);color:#fff;
  background:rgba(255,46,166,.22);border:1px solid rgba(255,46,166,.6);
}


/* tableau de mesures (avant / après, ou mesure / valeur) */
.table-wrap{margin-top:24px;overflow-x:auto;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.measures{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;color:var(--lavender)}
.measures th,.measures td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.08)}
.measures th{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);white-space:nowrap}
.measures tbody tr:last-child td{border-bottom:0}
.measures td:first-child{color:var(--white)}

/* résultats en bref : trois cartes sous le bandeau, le chiffre en premier */
.kpis{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr));gap:16px}
.kpis li{padding:20px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:4px}
.kpis small{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.kpis b{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;line-height:1.05;color:#fff}
.kpis b.up{background:linear-gradient(100deg,#ff7a3d,#f53f7e 46%,#d1008a);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpis--facts b{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15}
.kpis span{font-size:.9rem;color:var(--lavender)}

/* avant / après : deux colonnes, un parcours en étapes dans chacune */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:24px}
.compare__col{padding:20px 24px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.compare__label{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.compare__col--after{border-color:rgba(255,46,166,.45)}
.compare__col--after .compare__label{color:var(--pink)}
.compare ol.flow{margin-top:16px;grid-template-columns:1fr;gap:8px}
.compare ol.flow li{display:flex;align-items:center;gap:12px}
.compare ol.flow li b{flex:0 0 auto;margin-bottom:0}
.compare__fact{margin-top:16px;font-size:.95rem;color:var(--lavender)}
.compare__fact b{color:#fff}

/* options comparées (la limite à 50) : trois cartes, la retenue soulignée */
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr));gap:16px;margin-top:24px}
.option{padding:20px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.option small{display:block;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.option--kept{border-color:rgba(255,46,166,.45)}
.option--kept small{color:var(--pink)}
.option b{display:block;margin-top:4px;font-family:var(--display);font-size:1.15rem;line-height:1.2;color:#fff}
.option p{margin-top:8px;font-size:.92rem;line-height:1.5;color:var(--lavender)}

/* les deux parties d'une étude : une lettre en pastille au-dessus du titre */
.part{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.part b{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff7a3d,#f53f7e 46%,#d1008a);color:#fff;font-size:.9rem;letter-spacing:0}

/* plan de mesure (étude bugs) : deux cartes, avant et après la mise en
   ligne, avec le logo de l'outil. Des intentions, pas des résultats. */
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:24px}
.plan__card{display:flex;flex-direction:column;gap:16px;padding:24px 24px 20px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.plan__head{display:flex;align-items:center;gap:16px}
.plan__logo{flex:0 0 auto;box-sizing:border-box;width:48px;height:48px;padding:12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid var(--edge);fill:#fff}
.plan__head small{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.plan__head b{display:block;margin-top:4px;font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.25;color:#fff}
.plan__card > p{font-size:.95rem;line-height:1.5;color:var(--lavender)}
.plan__list{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.plan__list li{position:relative;padding:8px 16px 8px 48px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.92rem;line-height:1.4;color:var(--white)}
.plan__list li::before{position:absolute;top:50%;transform:translateY(-50%)}
.plan__list--tasks{counter-reset:task}
.plan__list--tasks li{counter-increment:task}
.plan__list--tasks li::before{content:counter(task);left:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 .76rem/1 var(--display);color:#fff;background:rgba(255,46,166,.22);border:1px solid rgba(255,46,166,.6)}
/* les questions Hotjar portent le point rouge d'un enregistrement */
.plan__list--rec li::before{content:'';left:18px;width:12px;height:12px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.2),0 0 10px rgba(255,90,90,.7)}
html:not(.calm) .plan__list--rec li::before{animation:rec 2.4s ease-in-out infinite}
html:not(.calm) .plan__list--rec li:nth-child(2)::before{animation-delay:.8s}
html:not(.calm) .plan__list--rec li:nth-child(3)::before{animation-delay:1.6s}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.45}}
.plan__out{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);font-size:.92rem;color:var(--lavender)}
.plan__out b{display:block;margin-bottom:4px;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}

/* ---------- pied : étude suivante, contact ------------------ */

.etude__next{margin-top:clamp(56px,9vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
/* quatre études (page direction artistique) : quatre colonnes */
.etude__next--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,224px),1fr))}
/* le retour à l'accueil : une carte basse sur toute la rangée, dans la grille */
.etude__next .etude__home{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 24px}
.etude__next .etude__home b{font-size:1rem}
.etude__next .etude__home span{color:var(--muted)}
.etude__next a{
  display:flex;flex-direction:column;gap:8px;padding:24px;text-decoration:none;
  border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
  transition:background-color .2s,border-color .2s,transform .35s var(--ease);
}
.etude__next a:hover{background:var(--surface-2);border-color:var(--edge-lit);transform:translateY(-3px)}
.etude__next small{font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.etude__next b{font-family:var(--display);font-size:1.15rem;line-height:1.2;color:#fff}
.etude__next span{font-size:.9rem;color:var(--lavender)}
.etude .outro{margin-top:clamp(48px,7vw,80px)}

/* ---------- mobile ------------------------------------------ */

@media (max-width:900px){
  .etude__head{padding-top:80px}
  .figs--phones{gap:16px}
  .figs--phones .fig{flex:1 1 calc(50% - 8px);width:auto;max-width:calc(50% - 8px)}
}
/* les trois chiffres juste sous l'introduction, puis leur source en une ligne */
.etude__lead + .kpis{margin-top:32px}
.kpis__note{margin-top:8px;font-size:.85rem;line-height:1.5;color:var(--muted)}
/* détails repliables : données secondaires et captures supplémentaires.
   Le résumé est un vrai bouton au clavier, le signe passe de + à − */
.more{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.more > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.4;color:#fff;border-radius:var(--r-card)}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:'+';flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,46,166,.6);background:rgba(255,46,166,.16);color:#fff;font-size:1.1rem;line-height:1}
.more[open] > summary::after{content:'−'}
.more > summary:hover{color:var(--pink)}
.more__body{padding:0 24px 24px}
.more__body > p{margin-top:12px;color:var(--lavender);max-width:68ch}
.more__body > p:first-child{margin-top:0}
.more__body > .figs{margin-top:8px}
/* dans un détail, les captures d’écran vont par deux (ou par trois si le groupe le demande) pour ne pas laisser une image seule */
.more__body > .figs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.more__body > .figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.more__body > .figs--2,.more__body > .figs--3{grid-template-columns:minmax(0,1fr)}}
/* points d'arrivée des anciennes ancres, quand une section a été fusionnée */
.ancre{display:block;scroll-margin-top:80px}

/* « Mon rôle » : un encadré sous l'en bref, une ligne par responsabilité */
.role{margin-top:16px;padding:20px 24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.role b{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.role ul{display:flex;flex-direction:column;gap:8px;color:var(--white)}
.role > p{margin-bottom:12px;color:var(--lavender)}
.role li{position:relative;padding-left:20px}
.role li::before{content:'';position:absolute;left:0;top:.81em;width:9px;height:2px;border-radius:2px;background:var(--magenta-lit);box-shadow:0 0 6px rgba(255,46,166,.55)}

@media print{
  .fig video{display:none !important}
  .etude__title,.etude__h,.brief p,.stats b{color:#14121f !important}
  .etude__section > p,.etude__section li,.fig figcaption{color:#3b3752 !important}
}

/* identité visuelle (Moon3D) : le logo sur sa couleur de fond, puis la palette et les polices */
.marque{margin-top:24px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.marque__logo{
  margin:0;display:flex;align-items:center;justify-content:center;padding:32px;
  border-radius:var(--r-card);border:1px solid var(--line);background:#060609;
}
.marque__logo img{width:min(100%,260px);height:auto}
.marque__regles{
  display:flex;flex-direction:column;gap:12px;padding:24px;
  border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
}
.marque__t{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.marque__t + ul{margin-bottom:8px}
.marque__polices{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:.95rem;color:var(--lavender)}
.marque__polices b{color:#fff;font-weight:700}
@media (max-width:640px){.marque{grid-template-columns:minmax(0,1fr)}}
.etude__section .ia-flow-box{margin-top:24px}
.etude__section .role strong{color:#fff;font-weight:700}

/* En bref : le problème, le rôle, la démarche et le résultat, lisibles en 30 secondes
   avant d'entrer dans l'étude (retours de Natalia et Farouk, novembre 2026). */
.bref{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;margin-top:24px;overflow:hidden}
.bref__item{display:flex;flex-direction:column;gap:8px;padding:var(--glass-pad)}
.bref__item + .bref__item{border-left:1px solid var(--line)}
.bref__t{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.bref__item p:not(.bref__t){font-size:.95rem;line-height:1.5;color:var(--lavender)}
.bref__item:last-child{background:linear-gradient(135deg,rgba(255,46,166,.12),transparent 70%)}
.bref__item:last-child p:not(.bref__t){color:#fff;font-weight:600}
@media (max-width:900px){
  .bref{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bref__item:nth-child(3){border-left:0}
  .bref__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .bref{grid-template-columns:minmax(0,1fr)}
  .bref__item + .bref__item{border-left:0;border-top:1px solid var(--line)}
}

/* Hiérarchie de l’en-tête (retours du 6 novembre) : le titre et une phrase, les
   résultats en grand, « En bref » pour lire l’étude en 30 secondes, puis la fiche
   (rôle, équipe, période, outils) en petit, comme une légende. */
.etude__lead{max-width:56ch}
.etude__head .bref{margin-top:32px}
.etude__head .etude__meta{
  margin-top:20px;padding:0 4px;
  display:flex;flex-wrap:wrap;gap:8px 32px;
}
.etude__head .etude__meta div{display:flex;align-items:baseline;gap:8px}
.etude__head .etude__meta dt{font-size:.68rem}
.etude__head .etude__meta dd{margin:0;font-size:.86rem;line-height:1.45;color:var(--muted)}
.bref__item p:not(.bref__t){font-size:1rem}
.bref__item:last-child p:not(.bref__t){font-family:var(--display);font-size:1.12rem;line-height:1.35;letter-spacing:-.01em}