/* =====================================================================
   OXYDE — NOUVELLE PAGE D'ACCUEIL (direction A « Éditorial »)
   Couleurs pilotées par 5 variables : 4 palettes à l'essai via
   <html data-theme="…">. Mouvement : principes d'Emil Kowalski
   (une seule séquence d'entrée, retours tactiles, survols souris
   uniquement, mouvement réduit respecté).
   ===================================================================== */
:root, [data-theme="graphite"] {
  --fond:#0f1011; --surface:#17191a; --encre:#ecebe7; --texte:#bdb9b1; --discret:#86837d;
  --accent:#d49a50; --accent-encre:#1a120b; --accent-2:#a5532c; --ligne:rgba(236,235,231,.12); --ligne-forte:rgba(236,235,231,.24);
  --ok:#8fcf86; --vendu:#d97c74; --photo:#0a0a0a; --logo-filtre:none;
}
[data-theme="nuit"] {
  --fond:#0c1220; --surface:#131b2c; --encre:#eef1f6; --texte:#b4bccb; --discret:#7e889b;
  --accent:#c9a46a; --accent-encre:#141009; --accent-2:#8fa8d8; --ligne:rgba(220,228,242,.12); --ligne-forte:rgba(220,228,242,.24);
  --ok:#8fd3a8; --vendu:#e08a86; --photo:#080c15; --logo-filtre:none;
}
[data-theme="vert-de-gris"] {
  --fond:#0e1514; --surface:#16201f; --encre:#e9efec; --texte:#b3c0bb; --discret:#7d8c87;
  --accent:#6fbfa6; --accent-encre:#06120e; --accent-2:#c27a4a; --ligne:rgba(225,238,233,.12); --ligne-forte:rgba(225,238,233,.24);
  --ok:#8fd3a8; --vendu:#e08a86; --photo:#080d0c; --logo-filtre:none;
}
[data-theme="beton"] {
  --fond:#ebebe8; --surface:#f6f6f4; --encre:#151515; --texte:#45443f; --discret:#7a786f;
  --accent:#b4532a; --accent-encre:#ffffff; --accent-2:#151515; --ligne:rgba(21,21,21,.12); --ligne-forte:rgba(21,21,21,.26);
  --ok:#2e7d4f; --vendu:#b23b32; --photo:#141414; --logo-filtre:invert(1);
}
:root { --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --display:"Arial","Helvetica Neue",sans-serif; --corps:"Inter",system-ui,sans-serif; }

*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  transition:background-color 300ms ease,color 300ms ease}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
.wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--encre);letter-spacing:-.035em;margin:0}
.surtitre{color:var(--accent);font-size:13px;letter-spacing:.02em;margin:0 0 16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--fond) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:72px}
.nav-logo img{height:34px;width:auto;filter:var(--logo-filtre)}
.nav-liens{display:flex;gap:28px;margin:0 0 0 auto;padding:0;list-style:none;font-size:14px}
.nav-liens a{color:var(--texte);transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){.nav-liens a:hover{color:var(--encre)}}
.nav-langue{font-size:12px;letter-spacing:.08em;color:var(--discret)} .nav-langue b{color:var(--encre);font-weight:500}
.nav-contact{padding:9px 16px;border:1px solid var(--ligne-forte);border-radius:999px;font-size:13px;color:var(--encre);transition:border-color 180ms ease,transform 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-contact:hover{border-color:var(--accent)}}
.nav-contact:active{transform:scale(.97)}
.nav-burger{display:none;width:42px;height:42px;margin-left:auto;padding:0;border:1px solid var(--ligne-forte);border-radius:50%;background:none;color:var(--encre);cursor:pointer;transition:transform 160ms var(--ease-out)}
.nav-burger:active{transform:scale(.95)}
.nav-burger span{display:block;width:16px;height:1.5px;margin:4px auto;background:currentColor;transition:transform 240ms var(--ease-out),opacity 160ms ease}
.nav-ouverte .nav-burger span:first-child{transform:translateY(2.75px) rotate(45deg)}
.nav-ouverte .nav-burger span:last-child{transform:translateY(-2.75px) rotate(-45deg)}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid transparent;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--corps);
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,transform 160ms var(--ease-out)}
.bouton:active{transform:scale(.97)}
.bouton--plein{background:var(--accent);color:var(--accent-encre)}
.bouton--ligne{border-color:var(--ligne-forte);color:var(--encre);background:transparent}
@media (hover:hover) and (pointer:fine){.bouton--plein:hover{filter:brightness(1.08)}.bouton--ligne:hover{border-color:var(--accent)}}
.lien-fleche{font-size:14px;color:var(--encre);border-bottom:1px solid var(--accent);padding-bottom:3px;transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){.lien-fleche:hover{color:var(--accent)}}

/* ---------- Entrée de page : une seule séquence ---------- */
@keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.entree{animation:entree 700ms var(--ease-out) both}
.d1{animation-delay:60ms}.d2{animation-delay:130ms}.d3{animation-delay:200ms}.d4{animation-delay:270ms}.d5{animation-delay:340ms}

/* ---------- Hero ---------- */
.hero{padding:64px 0 60px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(44px,5.5vw,82px);line-height:.98;font-weight:300}
.hero h1 span{color:var(--accent)}
.hero-intro{max-width:450px;margin:24px 0 32px;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-faits{display:flex;flex-wrap:wrap;gap:34px;margin-top:44px;padding-top:22px;border-top:1px solid var(--ligne);font-size:13px;color:var(--discret)}
.hero-faits strong{display:block;font-family:var(--display);font-size:26px;font-weight:300;color:var(--encre);letter-spacing:-.03em}
.vedette{margin:0}
.vedette-cadre{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--photo);clip-path:inset(0 0 100% 0);animation:revele 1000ms var(--ease-in-out) 160ms forwards}
.vedette-cadre img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:dezoom 1400ms var(--ease-out) 160ms forwards}
@keyframes revele{to{clip-path:inset(0 0 0 0)}} @keyframes dezoom{to{transform:none}}
.vedette figcaption span:last-child{white-space:nowrap}
.vedette figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:13px;color:var(--discret)}
.vedette figcaption b{color:var(--encre);font-weight:500}

/* ---------- Citations qui défilent ---------- */
.citations{overflow:hidden;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.citations-piste{display:flex;width:max-content;animation:defile 70s linear infinite}
/* Pause : seulement au survol d'une vraie souris ou au focus clavier (sur mobile, un toucher figeait le bandeau) */
@media (hover:hover) and (pointer:fine){.citations:hover .citations-piste{animation-play-state:paused}}
.citations:focus-visible .citations-piste{animation-play-state:paused}
@media (max-width:860px){.citations-piste{animation-duration:55s}}
.citations-groupe{display:flex;align-items:center;flex-shrink:0}
.citations-groupe::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-2);flex-shrink:0}
.citation{display:flex;align-items:baseline;gap:12px;margin:0;padding:16px 34px;white-space:nowrap;font-size:14px;color:var(--encre)}
.citation q{font-style:italic;quotes:"« " " »"} .citation q:lang(en){quotes:"“" "”"}
.citation span{color:var(--discret);font-size:12px} .citation span b{color:var(--accent);font-weight:500}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section + .section{border-top:1px solid var(--ligne)}
.section-tete{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:42px}
.section-tete h2,.titre-2{font-size:clamp(34px,4vw,54px);line-height:1.02}
.section-tete p.chapo{max-width:440px;margin:0;font-size:15px}

/* Filtres */
.filtres{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ligne);border-radius:999px}
.filtres button{padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--discret);font:500 13px var(--corps);cursor:pointer;transition:background-color 180ms ease,color 180ms ease,transform 160ms var(--ease-out)}
.filtres button:active{transform:scale(.97)}
.filtres button[aria-pressed="true"]{background:var(--encre);color:var(--fond)}

/* Cartes de pièces */
.pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.piece{display:block;border:1px solid var(--ligne);background:var(--surface);transition:transform 240ms var(--ease-out),border-color 200ms ease}
.piece[hidden]{display:none}
.piece:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.piece:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,transparent)}.piece:hover img{transform:scale(1.03)}}
.piece figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--photo)}
.piece img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.piece-infos{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:16px 20px 20px}
.piece-statut{grid-column:1/-1;font-size:12px;color:var(--ok)} .piece-statut::before{content:"● ";font-size:9px;vertical-align:1px}
.piece-infos h3{font-size:22px} .piece-infos h3 small{margin-left:8px;color:var(--accent);font-family:var(--corps);font-size:12px;letter-spacing:.04em}
.piece-prix{align-self:end;color:var(--encre);font-size:16px;white-space:nowrap}
.piece-desc{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:var(--discret)}
.archives{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:34px;padding-top:22px;border-top:1px solid var(--ligne);font-size:13px;color:var(--discret)}
.archives a{color:var(--encre);border-bottom:1px solid var(--ligne-forte)} .archives a::after{content:" · vendue";color:var(--vendu)}
.archives a:lang(en)::after{content:" · sold"}

/* Séries */
.series{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.serie{display:flex;flex-direction:column;padding:34px;border:1px solid var(--ligne);background:var(--surface)}
.serie--premium{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.serie span{color:var(--accent);font-size:13px} .serie h3{margin:10px 0 14px;font-size:26px;line-height:1.15} .serie p{margin:0 0 12px;font-size:15px}
.serie .lien-fleche{margin-top:auto;align-self:flex-start}

/* Atelier */
.atelier-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}
.atelier-texte p{margin:0 0 18px;font-size:16px;max-width:60ch}
.atelier-photo{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--photo)} .atelier-photo img{width:100%;height:100%;object-fit:cover}
.etapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:72px 0 0;padding:0;list-style:none;counter-reset:etape}
.etape{counter-increment:etape} .etape figure{margin:0 0 16px;aspect-ratio:4/3;overflow:hidden;background:var(--photo)} .etape img{width:100%;height:100%;object-fit:cover}
.etape h3{font-size:19px;margin-bottom:6px} .etape h3::before{content:counter(etape,decimal-leading-zero) "  ";color:var(--accent);font-family:var(--corps);font-size:12px;letter-spacing:.06em}
.etape p{margin:0;font-size:14px;color:var(--discret)}

/* Le son */
.videos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end}
.video{border:1px solid var(--ligne);background:var(--surface)} .video--large{grid-column:span 2}
.video-cadre{aspect-ratio:16/9;background:var(--photo)} .video--vertical .video-cadre{aspect-ratio:9/16}
.video iframe{width:100%;height:100%;border:0;display:block}
.video p{margin:0;padding:14px 16px;font-size:13px;color:var(--discret)} .video p b{display:block;color:var(--encre);font-weight:400;font-size:17px;font-family:var(--display);letter-spacing:-.02em}

/* Avis */
.avis{margin-top:84px;padding-top:36px;border-top:1px solid var(--ligne)}
.avis-tete{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.avis-nav{display:flex;align-items:center;gap:14px}
.avis-nav button{width:40px;height:40px;border:1px solid var(--ligne-forte);border-radius:50%;background:none;color:var(--encre);cursor:pointer;transition:border-color 180ms ease,transform 160ms var(--ease-out)}
.avis-nav button:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.avis-nav button:hover{border-color:var(--accent)}}
.avis-compteur{min-width:42px;text-align:center;font-size:12px;letter-spacing:.1em;color:var(--discret);font-variant-numeric:tabular-nums}
.avis-piste{display:grid}
.avis-slide{grid-area:1/1;margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(28px,5vw,80px);row-gap:20px;align-items:start;
  opacity:0;visibility:hidden;filter:blur(4px);transform:translateY(-6px);transition:opacity 320ms ease,filter 320ms ease,transform 320ms ease,visibility 0s linear 320ms}
.avis-slide.actif{opacity:1;visibility:visible;filter:none;transform:none;transition:opacity 500ms var(--ease-out) 120ms,filter 500ms var(--ease-out) 120ms,transform 500ms var(--ease-out) 120ms,visibility 0s}
.avis-exergue{grid-column:1;grid-row:1/span 2;margin:0}
.avis-exergue::before{content:"“";display:block;height:.5em;margin-bottom:.15em;font-family:Georgia,serif;font-size:clamp(64px,7vw,100px);line-height:1;color:var(--accent)}
.avis-exergue p{margin:0;color:var(--encre);font-family:var(--display);font-weight:300;font-size:clamp(28px,3.3vw,44px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance;
  clip-path:inset(0 100% 0 0);transition:clip-path 200ms ease}
.avis-slide.actif .avis-exergue p{clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease-in-out) 200ms}
.avis-texte{grid-column:2;margin:0;max-width:62ch;font-size:15px;line-height:1.75}
.avis-traduction{color:var(--discret);font-size:12px;font-style:italic}
.avis-slide figcaption{grid-column:2;padding-top:14px;border-top:1px solid var(--ligne);font-size:13px;color:var(--discret)}
.avis-slide:not(:has(.avis-texte)) figcaption{grid-row:1;align-self:end}
.avis-slide figcaption strong{color:var(--accent);font-weight:500} .avis-slide figcaption a{color:var(--encre);border-bottom:1px solid var(--ligne-forte)}
.avis-segments{display:flex;gap:8px;margin-top:32px}
.avis-segments button{position:relative;flex:1 1 0;max-width:140px;height:16px;padding:0;border:0;background:none;cursor:pointer}
.avis-segments button::before{content:"";position:absolute;inset:7px 0 auto;height:2px;background:var(--ligne-forte)}
.avis-segments button.vu::before{background:color-mix(in srgb,var(--accent-2) 60%,transparent)}
.avis-segments i{position:absolute;inset:7px 0 auto;height:2px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--discret),var(--accent) 60%,var(--accent-2))}

/* Sur mesure & contact */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px}
.formulaire{display:grid;gap:14px}
.formulaire .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulaire label{display:grid;gap:6px;font-size:12px;color:var(--discret)}
.formulaire input,.formulaire textarea{width:100%;padding:13px 14px;border:1px solid var(--ligne-forte);border-radius:10px;background:var(--surface);color:var(--encre);font:15px var(--corps);transition:border-color 180ms ease}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--accent)}
.formulaire .note{margin:0;font-size:13px;color:var(--discret)}
.contact-infos{display:grid;gap:28px;align-content:start}
.contact-infos h3{font-size:15px;font-family:var(--corps);font-weight:500;letter-spacing:0;margin-bottom:10px;color:var(--encre)}
.contact-infos a{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ligne);color:var(--texte);transition:color 180ms ease}
@media (hover:hover) and (pointer:fine){.contact-infos a:hover{color:var(--accent)}}
.contact-infos svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.partenaire{display:flex;align-items:center;gap:16px}
.partenaire img{width:96px;height:60px;object-fit:cover;border:1px solid var(--ligne)}

/* Pied de page */
.pied{padding:44px 0;border-top:1px solid var(--ligne);font-size:13px;color:var(--discret)}
.pied .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.pied a{margin-left:18px} .pied a:first-child{margin-left:0}

/* Bandeau cookies : monte du bas, première visite */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:none;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:760px;margin:0 auto;padding:16px 20px;border:1px solid var(--ligne-forte);border-radius:14px;background:var(--surface);font-size:13px;color:var(--texte)}
.cookies.visible{display:flex;transition:transform 400ms var(--ease-drawer),opacity 300ms ease}
@starting-style{.cookies.visible{transform:translateY(120%);opacity:0}}
.cookies p{margin:0} .cookies a{color:var(--accent)} .cookies div{display:flex;gap:8px}
.cookies .bouton{padding:10px 16px;font-size:13px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero .wrap,.atelier-grille,.contact-grille{grid-template-columns:1fr;gap:40px}
  .vedette{max-width:520px}
  .pieces{grid-template-columns:1fr 1fr} .etapes{grid-template-columns:1fr 1fr}
  .videos{grid-template-columns:1fr 1fr} .video--large{grid-column:1/-1}
  .avis-slide{grid-template-columns:1fr} .avis-exergue,.avis-texte,.avis-slide figcaption{grid-column:1;grid-row:auto}
}
@media (max-width:860px){
  .nav-liens,.nav-langue,.nav-contact{display:none}
  .nav-burger{display:block}
  .nav-ouverte .nav-liens{display:flex;position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;margin:0;padding:12px 24px 28px;background:var(--fond);border-bottom:1px solid var(--ligne);
    animation:tiroir 320ms var(--ease-drawer)}
  .nav-ouverte .nav-liens a{display:block;padding:14px 0;border-bottom:1px solid var(--ligne);font-size:20px;color:var(--encre)}
  @keyframes tiroir{from{opacity:0;transform:translateY(-8px)}}
  .section{padding:76px 0} .section-tete{flex-direction:column;align-items:start}
  .series{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pieces,.etapes{grid-template-columns:1fr} .videos{grid-template-columns:1fr} .video--vertical{max-width:340px;justify-self:center;width:100%}
  .formulaire .duo{grid-template-columns:1fr} .citation{padding:13px 24px;font-size:13px}
  .hero{padding:28px 0 48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entree{animation:fondu 300ms ease both!important;animation-delay:0ms!important} @keyframes fondu{from{opacity:0}to{opacity:1}}
  .vedette-cadre{clip-path:none;animation:none} .vedette-cadre img{animation:none;transform:none}
  /* Mouvement réduit : plus de défilement, les citations se relaient en fondu, une à la fois */
  .citations-piste{animation:none;width:auto;display:grid;justify-items:center} .citations-groupe+.citations-groupe{display:none}
  .citations-groupe{display:grid;justify-items:center} .citations-groupe::after{display:none}
  .citation{grid-area:1/1;white-space:normal;justify-content:center;text-align:center;flex-wrap:wrap;opacity:0;transition:opacity 400ms ease}
  .citation.visible{opacity:1}
  .piece,.piece img{transition:none!important;transform:none!important}
  .avis-slide,.avis-slide.actif{filter:none!important;transform:none!important;transition:opacity 200ms ease,visibility 0s!important}
  .avis-exergue p,.avis-slide.actif .avis-exergue p{clip-path:none!important;transition:none!important}
  .cookies.visible{transition:opacity 200ms ease} @starting-style{.cookies.visible{transform:none}}
}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:420ms;animation-timing-function:cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* =====================================================================
   LOGO MIS EN VALEUR + CITATIONS SOUS LA NAVIGATION
   ===================================================================== */
/* Logo blanc sur palettes sombres, noir sur « Béton » */
.logo-sombre{display:none}
[data-theme="beton"] .logo-clair{display:none} [data-theme="beton"] .logo-sombre{display:block}
.nav-logo img{filter:none!important}

/* Le logo de la barre n'apparaît qu'une fois le grand logo sorti de l'écran */
.nav-logo{display:block;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity 220ms ease,transform 220ms var(--ease-out)}
.nav--logo .nav-logo{opacity:1;transform:none;pointer-events:auto}

/* Citations : juste sous la barre de navigation, toujours visibles dès l'arrivée */
.citations{border-top:0}
.citation{padding-top:12px;padding-bottom:12px}

/* Hero : le logo devient le titre principal */
.hero{padding:56px 0 72px}
.hero .wrap{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:72px}
.hero-logo{margin:4px 0 30px;line-height:0}
.hero-logo img{width:min(100%,640px);height:auto}
.hero-accroche{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.03em;color:var(--encre);max-width:20ch}
.hero-accroche span{color:var(--accent)}
.hero-intro{margin-top:18px}

/* Entrée du logo : net, posé, une seule fois */
@keyframes logo-entree{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero-logo img{animation:logo-entree 900ms var(--ease-out) 60ms both;transform-origin:left center}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .hero-logo img{width:min(100%,520px)}
}
@media (max-width:560px){
  .hero{padding:26px 0 48px}
  .hero-logo{margin:0 0 22px}
  .hero-logo img{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hero-logo img{animation:fondu 300ms ease both}
  .nav-logo{transition:opacity 150ms ease;transform:none}
}