/* ITSELECTIV — maquette v3
   Une seule famille (Archivo, axe de largeur), textes centrés, rubriques séquencées clair / noir.
   Monde visuel assumé : pas de bascule clair/sombre du lecteur. */

:root {
  --ecru: #f5f5ef;
  --ecru-2: #ebebe3;
  --noir: #0d0d0d;
  --encre: #141414;
  --pale: #66665e;         /* sur écru ≈ 5,5:1 */
  --pale-noir: #a2a29a;    /* sur noir ≈ 7:1 */
  --filet: #d6d6cc;
  --bleu: #0227b3;

  --f: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-texte: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --marge: clamp(20px, 4vw, 72px);
  --entete: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ecru); color: var(--encre); font-family: var(--f-texte); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
::selection { background: var(--encre); color: var(--ecru); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— Le système typographique ——— */
.titre-xl, .titre, .enonce, .petites-caps, .etiquette, .pilule, .nav-menu a, .choix button, .mission h4, .projet-carte h2, .detail li { font-family: var(--f); text-transform: uppercase; font-variation-settings: "wdth" 125; }
.titre-xl { margin: 0; font-weight: 600; font-size: clamp(28px, 4.1vw, 68px); line-height: 1.06; letter-spacing: .01em; text-wrap: balance; }
.titre { margin: 0; font-weight: 600; font-size: clamp(22px, 2.6vw, 42px); line-height: 1.1; letter-spacing: .03em; text-wrap: balance; }
.enonce { margin: 0; font-weight: 500; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.75; letter-spacing: .07em; font-variation-settings: "wdth" 115; text-wrap: balance; }
.petites-caps { margin: 0; font-weight: 500; font-size: 12px; line-height: 1.9; letter-spacing: .14em; font-variation-settings: "wdth" 112; }
.etiquette { display: block; margin: 0; font-weight: 600; font-size: 11px; letter-spacing: .18em; font-variation-settings: "wdth" 112; }
.texte { margin: 0 auto; max-width: 62ch; font-size: 16px; line-height: 1.85; font-weight: 400; letter-spacing: .005em; }
.pale { color: var(--pale); }
.noir .pale { color: var(--pale-noir); }

/* ——— Rubriques séquencées ——— */
.bloc { position: relative; padding: clamp(96px, 16vh, 180px) var(--marge); text-align: center; }
.clair { background: var(--ecru); color: var(--encre); }
.noir { background: var(--noir); color: var(--ecru); }
.bloc > * + * { margin-top: 34px; }
.bloc .enonce, .bloc .petites-caps { margin-inline: auto; max-width: 60ch; }
.filet-centre { display: block; width: 64px; height: 1px; background: currentColor; opacity: .25; margin-inline: auto; }

/* ——— Boutons ——— */
.pilule { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 32px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .16em; font-variation-settings: "wdth" 118; transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.clair .pilule:hover, .pilule.pleine { background: var(--encre); color: var(--ecru); border-color: var(--encre); }
.noir .pilule:hover { background: var(--ecru); color: var(--noir); border-color: var(--ecru); }
.pilule.pleine:hover { background: transparent; color: var(--encre); }

/* ——— En-tête : logo et petites barres ——— */
.entete { position: fixed; inset: 0 0 auto 0; height: var(--entete); z-index: 70; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--marge); color: #fff; transition: color .32s var(--ease) .16s; }
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(245,245,239,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .28s var(--ease); }
.entete[data-ton="sombre"] { color: var(--encre); }
.entete[data-ton="sombre"]::before { opacity: 1; }
.menu-ouvert .entete { color: var(--ecru); }
.menu-ouvert .entete::before { opacity: 0; }
.logo { display: block; width: 130px; padding-block: 12px; }
.logo svg { display: block; width: 100%; height: auto; }
.barres { position: relative; width: 44px; height: 44px; margin-right: -10px; }
.barres i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .6s var(--ease), top .6s var(--ease); }
.barres i:nth-child(1) { top: 17px; }
.barres i:nth-child(2) { top: 25px; }
.barres[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.barres[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ——— Menu : fond noir, typo des titres ——— */
.menu { position: fixed; inset: 0; z-index: 65; background: var(--noir); color: var(--ecru); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--entete) + 4vh) var(--marge) 32px; text-align: center; }
.nav-menu { align-self: center; display: grid; gap: clamp(8px, 2vh, 22px); justify-items: center; }
.nav-menu a { display: block; overflow: hidden; font-weight: 600; font-size: clamp(15px, 2.5vw, 38px); line-height: 1.12; letter-spacing: .04em; }
.nav-menu a span { display: block; transition: opacity .4s; }
.nav-menu:hover a span { opacity: .35; }
.nav-menu a:hover span, .nav-menu a:focus-visible span { opacity: 1; }
.nav-menu a[aria-current="page"] span::after { content: ""; display: block; height: 1.5px; background: currentColor; margin-top: 4px; }
.menu-bas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; }
.menu-bas a { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 112; color: var(--pale-noir); }
.menu-bas a:hover { color: var(--ecru); }
/* Sur ordinateur les rubriques prenaient trop de place : même échelle, divisée
   par 1,4. Le téléphone garde la taille d'origine. */
@media (min-width: 900px) {
  .nav-menu a { font-size: clamp(15px, 1.79vw, 27px); }
}

/* ——— Rideau entre les pages ——— */
.rideau { position: fixed; inset: 0; z-index: 120; background: var(--noir); transform: translateY(101%); pointer-events: none; }
html.rideau-on .rideau { transform: none; }

/* ——— Chargement : le logo, le V ——— */
.chargement { position: fixed; inset: 0; z-index: 130; background: var(--noir); color: var(--ecru); display: grid; place-items: center; }
.chargement .logo-anime { width: min(64vw, 900px); }
.chargement svg { width: 100%; height: auto; overflow: visible; }
.chargement .passer { position: absolute; right: var(--marge); bottom: 24px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pale-noir); padding: 8px 0; }

/* ———————— ACCUEIL : le champ d'attention ———————— */
.hero { position: relative; height: 92svh; min-height: 520px; color: var(--ecru); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(46% 13% at 50% 50%, rgba(8,8,8,.6) 0%, rgba(8,8,8,.26) 56%, rgba(8,8,8,0) 88%); }
.fond-hero { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: #0a0a0a; }
.fond-hero .objet { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* le fond derrière l'objet est remonté d'un cran : en mode écran, seuls les noirs
   s'éclaircissent, la matière garde ses contrastes */
.fond-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(76% 62% at 50% 48%, rgba(168,168,172,.08) 0%, rgba(120,120,126,.05) 46%, rgba(0,0,0,0) 82%); }
/* la souris éclaire l'objet : une lumière douce qui la suit */
.scene-lueur { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(26vmax 26vmax at var(--lx, 50%) var(--ly, 50%), rgba(214,196,168,.30) 0%, rgba(184,170,150,.12) 38%, rgba(0,0,0,0) 72%); }
/* Le chapitre noir : accueil, phrase de l'agence et « We build » partagent le même fond vivant */
.chapitre-noir { position: relative; background: var(--noir); color: var(--ecru); }
.chapitre-noir > section { position: relative; z-index: 2; background: transparent; color: var(--ecru); }
.chapitre-noir .accroche, .chapitre-noir .enonce, .chapitre-noir .phrase-webuild, .chapitre-noir .etiquette, .chapitre-noir .indice-scroll, .chapitre-noir .petites-caps { text-shadow: 0 2px 26px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.8); }
.chapitre-noir .pale { color: var(--pale-noir); }
.sur-fond { min-height: 60svh; display: grid; align-content: center; padding-block: clamp(70px, 10vh, 120px); }
.sur-fond::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 17% at 50% 50%, rgba(8,8,8,.62) 0%, rgba(8,8,8,.28) 55%, rgba(8,8,8,0) 86%); }
.webuild { min-height: 88svh; }

/* ———— La marque qui se compose à la fin de la traversée ———— */
.signature { min-height: 92svh; }
.marque-geante { --rev: 0; position: relative; width: min(85vw, 1050px); margin-inline: auto; line-height: 0; }
.marque-geante svg { display: block; width: 100%; height: auto; }
/* le voile se retire du bas vers le haut, au rythme exact du défilement — jamais de flou */
.marque-geante .socle { color: var(--ecru);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rev) * 135% - 18%), rgba(0,0,0,0) calc(var(--rev) * 135%));
          mask-image: linear-gradient(to top, #000 calc(var(--rev) * 135% - 18%), rgba(0,0,0,0) calc(var(--rev) * 135%));
  filter: none; }
/* une fois révélée, plus aucun filtre : la carte graphique peut alors déplacer le tracé sans le recalculer */
.marque-geante.nette .socle { filter: none; -webkit-mask-image: none; mask-image: none; }
.marque-geante.nette .lueur { display: none; }
/* une bande de lumière court juste devant le voile : c'est elle qui révèle les lettres */
.marque-geante .lueur { position: absolute; inset: 0; color: #f7c9a0; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) calc(var(--rev) * 135% - 25%), #000 calc(var(--rev) * 135% - 13%), #000 calc(var(--rev) * 135% - 3%), rgba(0,0,0,0) calc(var(--rev) * 135% + 4%));
          mask-image: linear-gradient(to top, rgba(0,0,0,0) calc(var(--rev) * 135% - 25%), #000 calc(var(--rev) * 135% - 13%), #000 calc(var(--rev) * 135% - 3%), rgba(0,0,0,0) calc(var(--rev) * 135% + 4%));
  filter: blur(3px); opacity: calc(1 - var(--rev) * var(--rev)); }

/* ———— Le curseur : un point net, la matière s'occupe de la lueur ———— */
.curseur-perso, .curseur-perso a, .curseur-perso button, .curseur-perso [role="button"] { cursor: none; }
.curseur { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; opacity: 0; mix-blend-mode: difference; }
.curseur i { position: absolute; top: 0; left: 0; display: block; border-radius: 50%; }
.curseur .point { width: 8px; height: 8px; background: #fff; }
.curseur .halo { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.6); transition: width .45s var(--ease), height .45s var(--ease), background-color .45s var(--ease); }
.curseur.accroche .halo { width: 64px; height: 64px; background: rgba(255,255,255,.14); }

/* ———— Le bouton flottant : une prise de contact toujours à portée ———— */
/* Le bouton reprend l'objet fermé : au survol il s'ouvre en pilule, comme l'objet lui-même */
.flottant { position: fixed; right: var(--marge); bottom: 26px; z-index: 60; display: flex; align-items: center;
  width: 78px; height: 78px; padding: 0; border-radius: 999px; overflow: hidden;
  background: rgba(13,13,13,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(245,245,239,.22); color: var(--ecru);
  box-shadow: 0 14px 44px rgba(0,0,0,.5); opacity: 0; transform: translateY(18px);
  transition: width .6s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.flottant-objet { flex: 0 0 78px; width: 78px; height: 78px; border-radius: 50%; overflow: hidden; }
.flottant-objet img { display: block; width: 100%; height: 100%; object-fit: cover; }
.flottant-mot { white-space: nowrap; padding: 0 28px 0 16px; opacity: 0; color: var(--ecru);
  font-family: var(--f); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-variation-settings: "wdth" 118; transition: opacity .35s var(--ease); }
.flottant:hover, .flottant:focus-visible { width: 286px; border-color: rgba(245,245,239,.5); box-shadow: 0 18px 56px rgba(0,0,0,.62); }
.flottant:hover .flottant-mot, .flottant:focus-visible .flottant-mot { opacity: 1; transition-delay: .12s; }
.webuild::before { background: radial-gradient(64% 17% at 50% 50%, rgba(8,8,8,.62) 0%, rgba(8,8,8,.28) 55%, rgba(8,8,8,0) 86%); }
.hero-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 1100px); text-align: center; z-index: 2; display: grid; gap: 22px; justify-items: center; pointer-events: none; }
/* l'interlettrage ajoute un blanc APRÈS la dernière lettre : centré, le texte part
   donc de 2 px vers la gauche. Le text-indent rend ce blanc au début et recentre. */
.hero-centre .petites-caps { opacity: .92; font-size: 24px; letter-spacing: .18em; text-indent: .18em; }
.hero > .hero-centre, .hero > .indice-scroll { z-index: 3; }
.hero .accroche span { display: block; }
.indice-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2; }

.bandeau { padding: clamp(80px, 12vh, 140px) var(--marge) clamp(56px, 8vh, 90px); text-align: center; }

/* Cartes projets qui montent et s'empilent */
.pile { position: relative; background: var(--noir); }
.pile-colle { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.carte-projet { position: absolute; inset: 0; overflow: hidden; background: var(--noir); transform-origin: 50% 100%; will-change: transform; }
.carte-projet canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-projet::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22); }
.carte-projet .nom { position: absolute; left: 50%; top: 50%; z-index: 2; width: 90%; transform: translate(-50%, -50%); color: #fff; text-align: center; }
.carte-projet .num { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; color: #fff; opacity: .85; }
.pile-fin { padding: clamp(56px, 9vh, 100px) var(--marge) clamp(96px, 14vh, 160px); text-align: center; }

/* ——— Pôles : texte, illustration, missions en photos ——— */
.pole { position: relative; padding: clamp(110px, 17vh, 200px) var(--marge); text-align: center; }
.pole-tete { display: grid; gap: 22px; justify-items: center; }
/* V6 : les titres des pôles un peu moins gros que les autres titres du site */
.pole .titre { font-size: clamp(18px, 1.58vw, 25px); }
.pole-tete .texte { margin-top: 6px; }
.illustration { position: relative; width: min(820px, 100%); aspect-ratio: 16 / 10; margin: clamp(56px, 9vh, 100px) auto 0; container-type: size; }
.missions { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 24px; margin: clamp(64px, 10vh, 120px) auto 0; max-width: 1280px; }
.mission { width: 228px; display: grid; gap: 12px; align-content: start; text-align: center; }
.mission canvas { width: 100%; aspect-ratio: 4 / 5; }
.mission h4 { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "wdth" 118; line-height: 1.5; }
.mission p { margin: 0; font-size: 14px; line-height: 1.6; }

/* Illustration 01 · contenu & social media */
.tel { position: absolute; width: 23cqw; aspect-ratio: 9 / 19; background: #0a0a0a; border-radius: 4.4cqw; padding: 1cqw; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.tel .ecran { position: relative; width: 100%; height: 100%; border-radius: 3.6cqw; overflow: hidden; background: #1c1a18; }
.tel-a { left: 24%; top: 4%; }
.tel-b { left: 53%; top: 10%; }
.fil-flux { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 1cqw; padding: 1cqw; }
.fil-flux canvas { width: 100%; aspect-ratio: 4 / 5; border-radius: 1cqw; }
.fil-flux .barre { height: 1.1cqw; border-radius: 1cqw; background: rgba(255,255,255,.18); width: 70%; }
.fil-flux .barre.courte { width: 40%; }
.story canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story .progres { position: absolute; left: 1.6cqw; right: 1.6cqw; top: 2cqw; display: flex; gap: .6cqw; z-index: 2; }
.story .progres i { flex: 1; height: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.story .progres b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.story .legende-story { position: absolute; left: 2cqw; right: 2cqw; bottom: 3cqw; z-index: 2; color: #fff; font-size: 1.5cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 118; text-align: left; line-height: 1.4; }
.calendrier { position: absolute; left: 8%; bottom: 8%; background: #fff; color: var(--encre); border-radius: 1.8cqw; padding: 2cqw 2.4cqw; box-shadow: 0 24px 40px -24px rgba(0,0,0,.4); display: grid; gap: 1.4cqw; text-align: left; }
.calendrier .etiquette { font-size: 1.3cqw; }
.calendrier .jours { display: grid; grid-template-columns: repeat(7, 2.2cqw); gap: .9cqw; }
.calendrier .jours i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: 1px solid #c9c9c0; }

/* Illustration 02 · branding & identité */
.construction { position: absolute; left: 50%; top: 45%; width: 62cqh; aspect-ratio: 1; transform: translate(-50%, -50%); }
.construction svg { width: 100%; height: 100%; overflow: visible; }
.construction .guide { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .45; }
.construction .forme { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.construction .plein { position: absolute; inset: 14%; color: currentColor; }
.nuancier { position: absolute; right: 7%; bottom: 7%; display: flex; gap: 1.2cqw; }
.nuancier i { width: 6cqw; height: 9cqw; border-radius: .8cqw; box-shadow: 0 0 0 1px rgba(128,128,120,.35); }
.specimen { position: absolute; left: 7%; bottom: 7%; text-align: left; font-weight: 600; font-variation-settings: "wdth" 125; font-size: 9cqw; line-height: .9; letter-spacing: -.01em; }
.specimen small { display: block; margin-top: 1.2cqw; font-size: 1.3cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* Illustration 03 · influence & activation */
.carte-talent { position: absolute; left: 58%; top: 52%; width: 22cqw; background: #fff; color: var(--encre); border-radius: 2cqw; padding: 1.4cqw 1.4cqw 2cqw; box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); transform-origin: 50% 120%; text-align: left; }
.carte-talent canvas { width: 100%; aspect-ratio: 4 / 5; border-radius: 1.2cqw; }
.carte-talent b { display: block; margin-top: 1.4cqw; font-size: 1.5cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.carte-talent span { font-size: 1.5cqw; color: var(--pale); }
.invitation { position: absolute; left: 4%; top: 6%; width: 24cqw; aspect-ratio: 5 / 7; background: #1b1b1b; color: var(--ecru); border-radius: .6cqw; padding: 2.8cqw 2.4cqw; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: 0 30px 50px -30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
.invitation strong { font-weight: 600; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: 3cqw; line-height: 1.05; letter-spacing: .02em; }
.invitation .etiquette { font-size: 1.3cqw; color: var(--pale-noir); }
.pastille-ads { position: absolute; right: 6%; bottom: 10%; background: #fff; color: var(--encre); border-radius: 999px; padding: 1.4cqw 2.2cqw; font-size: 1.4cqw; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "wdth" 115; box-shadow: 0 16px 30px -16px rgba(0,0,0,.4); display: flex; align-items: center; gap: 1cqw; }
.pastille-ads i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--bleu); }

/* ———————— PAGES ———————— */
.page-tete { padding: calc(var(--entete) + clamp(90px, 16vh, 180px)) var(--marge) clamp(80px, 12vh, 140px); text-align: center; }
.page-tete > * + * { margin-top: 30px; }
.page-tete .petites-caps { margin-inline: auto; max-width: 62ch; }

/* À propos · Laura */
.laura { padding-top: 0; }
.laura figure { margin: 0 auto; width: min(440px, 82vw); }
.laura canvas { width: 100%; aspect-ratio: 4 / 5; }
.laura figcaption { margin-top: 14px; }
.laura .nom { margin-top: clamp(48px, 7vh, 80px); }
.laura .texte + .texte { margin-top: 1.2em; }

/* Projets : photos et noms */
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 56px 28px; max-width: 1320px; margin: 0 auto; text-align: center; }
.projet-carte { display: grid; gap: 16px; }
.projet-carte .cadre { overflow: hidden; }
.projet-carte canvas { width: 100%; aspect-ratio: 4 / 5; transition: transform 1.2s var(--ease); }
.projet-carte:hover canvas { transform: scale(1.04); }
.projet-carte h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 120; }

/* Contact */
.contact-photo { position: relative; height: 62svh; min-height: 380px; overflow: hidden; background: var(--noir); }
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.contact-photo .etiquette { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: #fff; opacity: .8; white-space: nowrap; }
.coord { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; font-size: 15px; }
.coord a:hover { text-decoration: underline; text-underline-offset: 4px; }
.brief { max-width: 760px; margin: clamp(56px, 9vh, 96px) auto 0; text-align: center; }
.phrase { margin: 0 0 18px; font-size: clamp(18px, 1.7vw, 24px); line-height: 2.1; letter-spacing: .01em; }
.phrase input { font: inherit; color: var(--encre); background: transparent; border: 0; border-bottom: 1px solid var(--pale); border-radius: 0; padding: 0 4px; margin: 0 4px; font-weight: 600; text-align: center; min-width: 4ch; outline: none; transition: border-color .3s; }
.phrase input::placeholder, .phrase-libre textarea::placeholder { color: #a3a39a; font-weight: 400; }
.phrase input:focus, .phrase-libre textarea:focus { border-color: var(--encre); }
.phrase input.erreur { border-color: #b3261e; }
.choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 30px; }
.choix button { min-height: 42px; padding: 0 18px; border: 1px solid var(--filet); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "wdth" 115; color: var(--pale); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.choix button:hover { border-color: var(--encre); color: var(--encre); }
.choix button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--ecru); }
.phrase-libre { display: grid; gap: 10px; margin-top: 30px; }
.phrase-libre textarea { font: inherit; width: 100%; resize: vertical; font-size: 16px; line-height: 1.6; color: var(--encre); background: transparent; border: 1px solid var(--filet); border-radius: 0; padding: 14px 16px; outline: none; }
.brief-envoi { display: grid; justify-items: center; gap: 18px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--filet); }
.brief-envoi p { margin: 0; font-size: 13px; }
/* Le champ piège : hors écran, jamais lu par les lecteurs d'écran, rempli
   par les robots. Une demande qui le renseigne est ignorée en silence. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief-alerte { color: #b3261e; font-weight: 500; max-width: 46ch; }
.merci { display: grid; gap: 22px; justify-items: center; padding-block: 20px; }

/* ———————— PIED ————————
   L'appel et le pied ne font qu'un : le lettrage de la marque prend la place du mot
   ITSELECTIV au milieu de la phrase. Rien n'est posé l'un sur l'autre, c'est la
   même image qui porte les deux. */
.pied { background: var(--noir); color: var(--ecru);
  padding: clamp(56px, 8.5vh, 80px) var(--marge) 26px; text-align: center; }
.pied-appel { display: grid; justify-items: center; gap: clamp(20px, 2.6vh, 30px); }
.pied-appel .titre { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .1em .44em; width: min(100%, 329px);
  font-size: clamp(13px, 1.51vw, 24px); font-weight: 400; }   /* bloc entier réduit de 1,5 */
/* Crème du pied de page : STRICTEMENT celui des bandeaux clairs, var(--ecru),
   hérité du pied. Aucune valeur retouchée ici — le texte et le lettrage sont
   la même couleur que les fonds crème du site. On garde seulement le rendu
   plein du texte : il ne change pas la couleur, il l'empêche de se diluer. */
.pied-appel .titre span { -webkit-font-smoothing: auto; }
.pied-marque { display: block; width: min(100%, 243px); }
.pied-marque svg { display: block; width: 100%; height: auto; }
.pied-logo { display: block; width: min(420px, 70vw); margin: 0 auto; }
.pied-logo svg { width: 100%; height: auto; display: block; }
/* les pages et les coordonnées tiennent sur une seule ligne, séparées par un filet :
   un bloc en moins, et le bandeau raccourcit d'autant */
.pied-rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 30px; margin-top: clamp(32px, 4.8vh, 46px); }
.pied-nav, .pied-infos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 0; }
.pied-rang .pied-infos::before { content: ""; width: 1px; height: 11px; background: currentColor; opacity: .3; }
.pied-nav a, .pied-infos a, .pied-infos span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 112; }
.pied-nav a:hover, .pied-infos a:hover { opacity: .6; }
.pied-infos { color: var(--pale-noir); }
.pied-bas { margin-top: clamp(28px, 4.2vh, 40px); font-size: 12px; color: var(--pale-noir); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }

/* ———————— MOBILE ———————— */
@media (max-width: 860px) {
  :root { --entete: 64px; }
  /* La réduction de 1,5 vaut pour l'ordinateur. Sur téléphone elle rendait le
     titre plus petit que les liens sous lui : on garde la taille d'origine. */
  .pied-appel .titre { font-size: clamp(20px, 2.26vw, 36px); width: min(100%, 494px); }
  .pied-marque { width: min(100%, 260px); }
  .pied-rang .pied-infos::before { display: none; }
  .logo { width: 112px; }
  /* Sur téléphone, la phrase doit être centrée SUR LA BOULE : le décor occupe
     toute la hauteur de l'écran, donc la scène d'accueil aussi, sinon le texte
     se cale sur un autre repère et remonte d'une centaine de pixels. */
  .hero { height: 100svh; }
  .titre-xl { font-size: clamp(26px, 7.4vw, 36px); }
  .titre { font-size: clamp(20px, 6.2vw, 28px); }
  .enonce { font-size: 14px; letter-spacing: .06em; }
  .texte { font-size: 15.5px; }
  .illustration { aspect-ratio: 1; width: calc(100% + var(--marge) * 2); margin-inline: calc(var(--marge) * -1); }
  .tel { width: 34cqw; border-radius: 6cqw; }
  .tel .ecran { border-radius: 5cqw; }
  .tel-a { left: 14%; top: 8%; }
  .tel-b { left: 50%; top: 14%; }
  .calendrier { transform: scale(1.3); transform-origin: left bottom; left: 6%; bottom: 6%; }
  .construction { width: 58cqh; }
  .nuancier i { width: 8cqw; height: 12cqw; }
  .specimen { font-size: 14cqw; }
  .specimen small { font-size: 2.4cqw; }
  .carte-talent { width: 30cqw; }
  .carte-talent b, .carte-talent span { font-size: 2.4cqw; }
  .invitation { width: 32cqw; }
  .invitation strong { font-size: 4.2cqw; }
  .invitation .etiquette, .calendrier .etiquette { font-size: 2cqw; }
  .pastille-ads { font-size: 2.4cqw; padding: 2cqw 3.4cqw; }
  .story .legende-story { font-size: 2.4cqw; }
  .missions { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--marge) * -1); padding: 0 var(--marge) 8px; gap: 16px; scrollbar-width: none; }
  .missions::-webkit-scrollbar { display: none; }
  .mission { flex: 0 0 70%; width: auto; scroll-snap-align: center; }
  .phrase-webuild { font-size: clamp(14px, 4.1vw, 19px); flex-wrap: nowrap; gap: .22em; }
  .marque-geante { width: 92vw; }
  .flottant { right: 14px; bottom: 16px; width: 62px; height: 62px; }
  .flottant-objet { flex-basis: 62px; width: 62px; height: 62px; }
  .flottant:hover { width: 62px; }
  .flottant .flottant-mot { display: none; }
  .grille-projets { gap: 44px 14px; grid-template-columns: 1fr 1fr; }
  .projet-carte h2 { font-size: 11px; letter-spacing: .1em; }
  .phrase { line-height: 2; }
  .phrase input { max-width: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ———————— V4 ———————— */
/* We build … : la phrase et les mots qui défilent */
.webuild { padding-block: clamp(120px, 22vh, 240px); }
.phrase-webuild { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .28em; margin: 0; line-height: 1.08; }
.webuild-mots { position: relative; display: inline-block; height: 1.15em; overflow: hidden; text-align: left; vertical-align: top; }
.webuild-mots span { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; line-height: 1.15; font-variation-settings: "wdth" 125; opacity: 0; }
/* le premier mot est lisible avant même que le script s'en mêle */
.webuild-mots span:first-of-type { opacity: 1; }
/* un double invisible du premier mot : il tient la largeur, donc la phrase ne se déplace jamais */
.webuild-gabarit { display: block; visibility: hidden; white-space: nowrap; font-style: normal; line-height: 1.15; font-variation-settings: "wdth" 125; }

/* Services : le détail apparaît sur la page Services */
/* V6 : plus de contour autour des missions, un gris clair, et le même alignement
   que le texte du pôle — à gauche sur ordinateur, centré sur téléphone. */
/* Une prestation par ligne, les unes sous les autres. */
.detail { list-style: none; margin: 14px auto 0; padding: 0; max-width: 480px;
  display: grid; gap: 10px; justify-items: start; }
.detail li { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  line-height: 1.45; padding: 0; border: 0; opacity: .5; }
.pole.bonus { padding-block: clamp(80px, 12vh, 140px); }
.pole.bonus .titre { font-size: clamp(18px, 1.58vw, 25px); }

/* Illustration : le viseur (production & direction artistique) */
.viseur { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64cqw; aspect-ratio: 4 / 3; }
.viseur .cadre-viseur { position: absolute; inset: 0; overflow: hidden; background: #0a0a0a; }
.viseur .cadre-viseur canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.viseur .coin { position: absolute; width: 5cqw; height: 5cqw; border: 1.5px solid rgba(245,245,239,.9); }
.viseur .coin.tl { left: -1.2cqw; top: -1.2cqw; border-right: 0; border-bottom: 0; }
.viseur .coin.tr { right: -1.2cqw; top: -1.2cqw; border-left: 0; border-bottom: 0; }
.viseur .coin.bl { left: -1.2cqw; bottom: -1.2cqw; border-right: 0; border-top: 0; }
.viseur .coin.br { right: -1.2cqw; bottom: -1.2cqw; border-left: 0; border-top: 0; }
.viseur .viseur-label { position: absolute; left: 0; top: -3.6cqw; font-family: var(--f); font-size: 1.3cqw; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: currentColor; }
.viseur .balayage { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(245,245,239,.55), transparent); }
.bande-photos { position: absolute; left: 50%; bottom: -6cqw; transform: translateX(-50%); display: flex; gap: 1.4cqw; }
.bande-photos canvas { width: 11cqw; aspect-ratio: 4 / 5; }

@media (max-width: 860px) {
  .viseur { width: 82cqw; }
  .viseur .viseur-label { font-size: 2.4cqw; }
  .bande-photos canvas { width: 16cqw; }
  .detail li { font-size: 10px; }
}

/* ———— Les pôles : un visuel photographié du même univers que l'objet d'accueil ———— */
.visuel-pole { position: relative; margin: clamp(48px, 7vh, 88px) calc(var(--marge) * -1) 0; overflow: hidden; background: #060606; }
.visuel-pole img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, rgba(0,0,0,0) 100%); }
@media (max-width: 860px) { .visuel-pole { margin-top: 36px; } .visuel-pole img { aspect-ratio: 4 / 3; } }

/* la marque est une image matricielle : la carte graphique la met à l'échelle sans la recalculer */
.socle img { display: block; width: 100%; height: auto; }
.socle { will-change: transform; }


/* ———— V5 : les visuels de Laura ———— */
/* Derniers projets : les vraies photos, et un titre plus discret */
.carte-projet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-projet .nom { font-family: var(--f); text-transform: uppercase; font-variation-settings: "wdth" 125;
  font-size: clamp(15px, 2.2vw, 26px); font-weight: 600; letter-spacing: .16em; line-height: 1.3; }

/* Page Projets : le chapeau, les filtres, la grille, la chute */
.projets-intro { display: grid; gap: 14px; max-width: 62ch; margin: 26px auto 0; }
.projets-intro .texte { margin: 0; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  padding: 16px var(--marge); background: var(--noir); color: var(--ecru); }
.filtres button { border: 0; background: none; cursor: pointer; padding: 6px 2px; color: inherit;
  font-family: var(--f); font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  font-variation-settings: "wdth" 118; opacity: .5; transition: opacity .3s var(--ease); }
.filtres button:hover { opacity: .85; }
.filtres button.on { opacity: 1; }
/* .projet-carte est en grid : sans cette ligne l'attribut hidden ne masquerait rien */
.projet-carte[hidden] { display: none; }
.projet-carte .cadre { overflow: hidden; }
.projet-carte img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  transition: transform 1.2s var(--ease); }
.projet-carte:hover img { transform: scale(1.04); }
.projet-carte .secteur { margin: -8px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--f); font-variation-settings: "wdth" 112; opacity: .5; }
.et-dautres { margin: clamp(50px, 8vh, 90px) 0 0; font-family: var(--f); text-transform: uppercase;
  font-size: 13px; letter-spacing: .16em; font-variation-settings: "wdth" 118; opacity: .45; }

/* Production & direction artistique : la photo de plateau, montrée entière.
   Comme le dîner, c'est un portrait : la case s'adapte à lui, rien n'est rogné. */
.illustration[data-id="viseur"] { aspect-ratio: auto; container-type: normal; min-height: 0; }
/* Sur téléphone, les deux photos descendent jusqu'au bord de leur section : plus de
   bande claire entre la photo et la section suivante. */
@media (max-width: 899px) {
  .pole:has(> .illustration[data-id="viseur"]),
  .pole:has(> .illustration[data-id="diner"]) { padding-bottom: 0; }
}

/* Le dîner d'influence : le visuel est un portrait, montré entier.
   Cette illustration-là n'est donc pas une boîte figée : c'est l'image qui donne
   sa hauteur à la colonne, et rien n'est rogné. */
.illustration[data-id="diner"] { aspect-ratio: auto; container-type: normal; min-height: 0; }
.affiche { width: 100%; display: grid; justify-items: center; }
.affiche img { display: block; width: min(100%, 467px); height: auto; }

/* Le feed de Laura : quinze publications, trois colonnes sur cinq rangs. */
/* Celle-ci n'est pas une boîte figée : c'est le feed qui donne sa hauteur à la colonne. */
.illustration[data-id="telephones"] { aspect-ratio: auto; container-type: normal; min-height: 0; }
.feed-bloc { display: grid; justify-items: center; gap: 14px; width: 100%; }
.feed { width: min(100%, 430px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 900px) { .feed { width: 100%; } }
/* l'aperçu flou est le fond de la case : il n'y a jamais de rectangle vide */
.feed .tuile { position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background-size: cover; background-position: center; background-color: #1a1a1a; }
.feed .tuile img, .feed .tuile video { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; }
.feed .tuile img { opacity: 0; transition: opacity .5s var(--ease); }
.feed .tuile img.vu { opacity: 1; }
/* la vidéo part invisible : c'est la photo qu'on voit, jusqu'à ce que son tour vienne */
.feed .tuile video { opacity: 0; }
.feed-tete { margin: 0; font-family: var(--f); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; font-variation-settings: "wdth" 112; opacity: .45; }

/* Sur ordinateur : le texte à gauche, le contenu associé à droite */
@media (min-width: 900px) {
  .detail { margin-inline: 0; }
  /* V6 : le texte à gauche, l'animation à droite — et surtout l'animation EXACTEMENT
     à la hauteur du texte qui la décrit. C'est la colonne de gauche qui donne la
     hauteur de la ligne, l'animation s'y étire. */
  /* L'écran se partage en deux moitiés égales : le texte dans la gauche, le visuel
     dans la droite, chacun centré dans la sienne. Les marges se répondent donc des
     deux côtés, quelle que soit la largeur de l'écran. */
  /* L'écran se partage en deux moitiés égales. Le texte se centre dans la sienne,
     le visuel dans la sienne — et tous les visuels font la même largeur, si bien
     qu'ils tombent sur la même colonne d'une section à l'autre. */
  .pole { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 700px);
    justify-content: center; align-items: center; --ecart: clamp(26px, 3.2vw, 56px);
    gap: var(--ecart); text-align: left; }
  /* la colonne de texte est assez large pour que le titre et le sous-titre tiennent
     chacun sur une ligne ; le paragraphe, lui, garde une longueur de ligne lisible */
  .pole-tete { justify-items: start; justify-self: center; width: min(100%, 620px); }
  /* le paragraphe est plus étroit que la colonne, mais il reste calé à gauche :
     sans cette ligne ses marges automatiques le recentreraient dans la colonne. */
  .pole-tete .texte { max-width: 480px; margin-inline: 0; }
  .pole .illustration { justify-self: center; width: min(100%, 467px); margin: 0;
    align-self: center; aspect-ratio: auto; min-height: 0; }
  .pole .illustration[data-id="construction"] { aspect-ratio: 5 / 4; min-height: 0; }
  /* 02 et 04 : la photo prend la moitié droite en entier, bord à bord et du haut
     jusqu'en bas. La section n'a donc plus de marge à elle : c'est le texte qui
     porte la sienne, et la colonne de l'image va jusqu'au bord de l'écran. */
  /* 02 et 04 gardent la grille commune — leur texte tombe donc exactement sur la
     même verticale que celui de 01 et 03. Seule la marge du haut et du bas passe
     au bloc de texte, pour que la photo puisse aller d'un bord à l'autre. */
  .pole:has(> .illustration[data-id="viseur"]),
  .pole:has(> .illustration[data-id="diner"]) {
    padding-block: 0; align-items: stretch; min-height: clamp(560px, 76vh, 840px); }
  .pole:has(> .illustration[data-id="viseur"]) .pole-tete,
  .pole:has(> .illustration[data-id="diner"]) .pole-tete {
    align-self: center; padding-block: clamp(110px, 17vh, 200px); }
  /* Pas de plafond de hauteur : la photo s'affiche à ses propres proportions, donc
     elle n'est jamais rognée, quelle que soit la hauteur de l'écran. C'est elle qui
     donne sa hauteur à la section. */
  .pole .illustration[data-id="viseur"],
  .pole .illustration[data-id="diner"] { justify-self: stretch; align-self: stretch;
    width: auto; max-width: none;
    /* jusqu'au bord de l'écran : on rattrape la marge de page ET le jeu laissé par
       le centrage de la grille, qui varie avec la largeur de la fenêtre */
    margin-right: calc(-1 * (var(--marge)
      + max(0px, (100vw - var(--marge) * 2 - 1400px - var(--ecart)) / 2))); }
  .illustration[data-id="viseur"] .affiche,
  .illustration[data-id="diner"] .affiche { width: 100%; height: 100%; }
  .illustration[data-id="viseur"] .affiche img,
  .illustration[data-id="diner"] .affiche img { width: 100%; height: 100%;
    max-width: none; object-fit: cover; }
}

/* Sur téléphone la barre des secteurs défile au doigt plutôt que d'empiler six lignes */
@media (max-width: 760px) {
  .filtres { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filtres::-webkit-scrollbar { display: none; }
  .filtres button { flex: 0 0 auto; }
}

/* ———— Brand identity : le logo au trait qui se remplit ———— */
.trace { --r: 0; --a: 0; --b: 0; --t: 0; position: absolute; left: 50%; top: 50%; width: min(86%, 620px);
  transform: translate(-50%, -50%); color: var(--ecru); cursor: crosshair; }
.trace svg { display: block; width: 100%; height: auto; }
/* le trait : le logo se dessine, de gauche à droite */
.trace-fil g { fill: none; stroke: currentColor; stroke-width: 52; stroke-linejoin: round; opacity: .55; }
.trace-fil { -webkit-mask-image: linear-gradient(to right, #000 calc(var(--a) * 116% - 9%), rgba(0,0,0,0) calc(var(--a) * 116%));
                     mask-image: linear-gradient(to right, #000 calc(var(--a) * 116% - 9%), rgba(0,0,0,0) calc(var(--a) * 116%)); }
/* le plein : il suit, une fois le trait posé */
.trace-plein { position: absolute; inset: 0; }
.trace-plein g { fill: currentColor; }
.trace-plein { -webkit-mask-image: linear-gradient(to right, #000 calc(var(--b) * 116% - 9%), rgba(0,0,0,0) calc(var(--b) * 116%));
                       mask-image: linear-gradient(to right, #000 calc(var(--b) * 116% - 9%), rgba(0,0,0,0) calc(var(--b) * 116%)); }
/* la ligne de lumière qui court juste devant le remplissage */
.trace-bord { position: absolute; top: -14%; bottom: -14%; width: 1px; left: calc(var(--t) * 107%);
  background: linear-gradient(to bottom, rgba(245,245,239,0), rgba(245,245,239,.75), rgba(245,245,239,0));
  opacity: calc(var(--t) * (1 - var(--t)) * 2.6); pointer-events: none; }
.trace-note { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font-family: var(--f); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  font-variation-settings: "wdth" 112; opacity: calc(.34 * (1 - var(--r))); white-space: nowrap; }
/* Le V occupe toute la case : c'est lui le visuel, pas une vignette dans un cadre.
   Le trait est bien plus fin qu'avec le mot entier, puisque la fenêtre est sept fois
   plus serrée : on le ramène à l'épaisseur qu'il avait à l'œil. */
.trace-v { width: 48%; }      /* taille inchangée, centrée dans la colonne commune */
.trace-v .trace-fil g { stroke-width: 11; }
.illustration[data-id="construction"] { aspect-ratio: 5 / 4; container-type: normal; min-height: 0; }
@media (max-width: 760px) { .trace { width: 84%; } .trace-v { width: 48%; } .trace-note { display: none; } }

/* ———— Production : la caméra, moniteur ouvert ———— */
/* les bords de l'image sont déjà fondus dans l'ecru : « contain » ne laisse donc
   aucune limite visible, quelle que soit la forme du bloc */
.illustration .visuel { position: absolute; inset: 0; }
.illustration .visuel img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* le dîner est une vraie photo : elle remplit son cadre au lieu de flotter */
.illustration .visuel.cadre img { object-fit: cover; }

/* Le portrait publié depuis l'espace d'administration */
.laura figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ———— V6 : sur téléphone, la page Services est alignée à gauche ———— */
@media (max-width: 899px) {
  [data-page="services"] .pole { text-align: left; }
  [data-page="services"] .pole-tete { justify-items: start; }
  [data-page="services"] .pole .detail { margin-inline: 0; }
  [data-page="services"] .pole.bonus { text-align: left; }
  [data-page="services"] .pole.bonus .pole-tete { justify-items: start; }
}

/* ———— Pages légales : le seul endroit du site où l'on lit vraiment ———— */
.legal { padding-top: clamp(20px, 3vh, 40px); }
.legal-corps { max-width: 68ch; margin: 0 auto; text-align: left;
  font-size: 15px; line-height: 1.85; color: var(--encre); }
.legal-corps h2 { margin: 46px 0 14px; font-family: var(--f); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; font-variation-settings: "wdth" 118; color: var(--pale); }
.legal-corps > *:first-child { margin-top: 0; }
.legal-corps p { margin: 0 0 1.1em; font-weight: 300; }
.legal-corps ul { margin: 0 0 1.4em; padding-left: 1.15em; }
.legal-corps li { margin-bottom: .45em; font-weight: 300; }
.legal-corps strong { font-weight: 500; }
.legal-corps a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-corps a:hover { opacity: .6; }
.legal-chapeau { font-size: 16px; }
.legal-date { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--filet);
  font-size: 12px; color: var(--pale); }
/* Ce qui attend encore les informations de la société : visible, impossible à oublier. */
.a-completer { display: inline-block; font-family: var(--f); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #b3261e; background: rgba(179, 38, 30, .07);
  border: 1px dashed rgba(179, 38, 30, .45); border-radius: 3px; padding: 2px 8px; vertical-align: 1px; }

/* ———— Le mot sur les cookies : discret, en bas à gauche, jamais en travers ———— */
.cookies { position: fixed; left: var(--marge); bottom: 22px; z-index: 90;
  width: min(380px, calc(100vw - var(--marge) * 2));
  background: var(--ecru); color: var(--encre); border: 1px solid var(--filet);
  padding: 22px 24px 20px; text-align: left;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cookies.vu { opacity: 1; transform: none; pointer-events: auto; }
.cookies .etiquette { display: block; margin-bottom: 10px; }
.cookies p { margin: 0 0 16px; font-size: 13px; line-height: 1.65; font-weight: 300; }
.cookies p a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookies-choix { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies-choix .pilule { min-height: 36px; padding: 0 18px; font-size: 10px; }
.pied-bas button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pied-bas a:hover, .pied-bas button:hover { opacity: .6; }
@media (max-width: 599px) {
  .cookies { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
}