/* ============================================================
   Design system Sujee Design — une seule échelle, une seule casse
   Chargé après site.css et light.css, sur les onze pages.
   ============================================================ */

:root{
  --ds-h1: clamp(38px, 5.9vw, 92px);
  --ds-h2: clamp(27px, 3.35vw, 48px);
  --ds-h3: clamp(17px, 1.45vw, 21px);
  --ds-body: clamp(14px, 1.02vw, 15.5px);
  --ds-label: 11px;
  --ds-radius: 2px;
  --ds-btn-h: 44px;
  --ds-track: -.028em;
}

/* ---------- 1. Casse : tout en bas de casse ---------- */
*{ text-transform: none !important; }
/* exception : les rares blocs qu'on veut laisser tels quels */
.keep, .keep *{ text-transform: none !important; }

/* ---------- 2. Échelle des titres ---------- */
h1, .hero__title, .ab-hero__title, .ia-hero__title, .sv-hero__title,
.sp-hero__title, .rl-hero__title{
  font-family: var(--display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: var(--ds-h1) !important;
  line-height: .94 !important;
  letter-spacing: var(--ds-track) !important;
  font-variation-settings: "opsz" 96;
}

h2{
  font-family: var(--display, "Bricolage Grotesque", sans-serif);
  font-weight: 700;
  font-size: var(--ds-h2) !important;
  line-height: 1.04 !important;
  letter-spacing: -.022em !important;
}

h3{
  font-family: var(--display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  font-size: var(--ds-h3) !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
}

/* les h2 de très gros calibre gardent leur échelle (hero de section) */
.rl-hero h2, .ab-hero h2, .ia-hero h2, .sv-hero h2, .sp-hero h2{
  font-size: var(--ds-h1) !important;
}

/* ---------- 3. Corps de texte et étiquettes ---------- */
body{ font-size: var(--ds-body); }
p{ line-height: 1.62; }

.kicker, .mono, .kick, .side, .nav-in a, .t, footer span,
.hero__kicker, .rl-hero__foot, .ab-hero__lead + *, .sp-hero__meta,
.ia-kick, .sv-kick, .rl-index__head, .ab-fact b, .ab-stats span,
.toolset h3, .skill li, .client span, .school span{
  letter-spacing: .04em !important;
  text-transform: none !important;
}

.mono, .kicker, .kick, .side, .hero__kicker, .ia-kick, .sv-kick,
.ab-fact b, .ab-stats span, .toolset h3{
  font-size: var(--ds-label) !important;
}

/* ---------- 4. Boutons : un seul modèle ---------- */
.nav-cta, .btn, .btn-fill, .btn-line, .btn-fill--light,
.ab-hero__cta, .rate, .rl-svc__card{
  border-radius: var(--ds-radius) !important;
}

.nav-cta, .btn, .btn-fill, .btn-line, .btn-fill--light{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--ds-btn-h);
  padding: 0 20px !important;
  font-family: var(--mono, "Space Mono", monospace) !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.nav-cta svg, .btn svg, .btn-fill svg, .btn-line svg{ width: 15px; height: 15px; }

/* ---------- 5. Rythme et filets ---------- */
.section, .cta-section, .rl-svc, .sv-section{ --s-head: clamp(26px, 2.6vw, 40px); }
.section h2 + p, .section h2 + .lead{ margin-top: 18px; }

/* ---------- 6. Le bandeau d'appel à l'action, identique partout ---------- */
.bandcta--dark{
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(201,52,15,.30), rgba(201,52,15,0) 58%),
    linear-gradient(112deg, #0A0A0B 0%, #141012 46%, #0A0A0B 100%);
  background-size: 100% 100%, 220% 220%;
  animation: dsBand 18s ease-in-out infinite;
}
@keyframes dsBand{
  0%{ background-position: center, 0% 50% }
  50%{ background-position: center, 100% 50% }
  100%{ background-position: center, 0% 50% }
}
.bandcta--dark p{
  font-family: var(--display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 30px) !important;
  line-height: 1.24;
  letter-spacing: -.02em;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce){
  .bandcta--dark{ animation: none }
}

/* ---------- 7. Petits écrans ---------- */
@media (max-width: 1100px){
  :root{ --ds-h1: clamp(34px, 8.4vw, 64px); --ds-h2: clamp(25px, 6.4vw, 38px); }
}
@media (max-width: 560px){
  :root{ --ds-h1: clamp(30px, 9.6vw, 42px); --ds-h2: clamp(23px, 7vw, 30px); --ds-h3: 17px; }
  .nav-cta{ font-size: 10.5px !important; padding: 0 13px !important; }
}

/* header sur mobile : le bouton garde sa phrase mais respire moins */
@media (max-width: 560px){
  .nav-cta{ font-size: 9.5px !important; padding: 0 10px !important; gap: 6px !important; }
  .nav-cta svg{ width: 12px; height: 12px; }
  .nav-burger{ min-width: 40px; min-height: 40px; }
}

/* mobile : le bandeau garde la même hauteur sur toutes les pages */
@media (max-width: 700px){
  .bandcta{ min-height: 186px; }
}

/* header : le burger a la même hauteur que le bouton */
.nav-burger{ width:44px; height:44px; min-width:44px; border-radius:var(--ds-radius); }
@media (max-width:1100px){
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
}
.nav-right{ gap:12px; }

/* footer : un peu plus lisible, et il peut passer à la ligne */
footer{ font-size: 11px; }
footer .foot{ flex-wrap: wrap; gap: 10px 20px; }
footer .foot span{ font-size: 11px !important; letter-spacing: .02em !important; }
footer a{ color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.28); }
footer a:hover{ border-bottom-color: rgba(255,255,255,.7); }

/* menu déroulant Services : le texte reste sombre même sur un hero sombre */
.nav-drop__panel, .nav-drop__panel a, .nav-drop__panel a span{
  color: var(--ink) !important;
}
.nav-drop__panel a span{ color: var(--accent) !important; }
.nav-drop__panel a:hover{ background: var(--bg-2); }
.nav-drop__all{ border-top: 1px solid var(--line-2); }

/* ============================================================
   Casse des projets 16/9 + état actif du menu
   ============================================================ */

/* logo un peu plus présent */
.brand__logo{ height: 41px !important; }
@media (max-width:1100px){ .brand__logo{ height: 34px !important; } }
@media (max-width:420px){ .brand__logo{ height: 29px !important; } }

/* projets de l'accueil au format 16/9 : le visuel suit la hauteur */
@media (min-width:861px){
  .case{ aspect-ratio: 16 / 9; height: auto; max-height: none; min-height: 520px; }
  .case__body{ align-items: center; height: 100%; }
  .case__visual{ height: clamp(420px, 80%, 640px); align-self: center; }
  .case__title{ font-size: clamp(56px, 8vw, 132px); }
}
/* entre 861 et 980 px, la hauteur mini de 520 px force la largeur via
   l'aspect-ratio et fait déborder la carte : on la laisse respirer */
@media (min-width:861px) and (max-width:980px){
  .case{ min-height: 0; }
}

/* état actif : libellé vermillon en gras, sans pastille */
.nav-mid a[aria-current="page"]::after,
.nav-mid a[aria-current]::after{ display: none !important; }
.nav-mid a[aria-current="page"],
.nav-mid a[aria-current]{
  color: var(--accent) !important;
  font-weight: 700 !important;
}
/* sur hero sombre, le vermillon manque de contraste (3,7:1) : orange clair */
body.has-dark-hero .nav:not(.scrolled) .nav-mid a[aria-current],
body.has-dark-hero .nav:not(.scrolled) .nav-drop__btn[aria-current]{
  color: #FF6A3D !important;
}
.nav-drop__btn[aria-current],
.nav-drop__btn.is-current{ color: var(--accent) !important; font-weight: 700 !important; }

/* même repère orange gras dans le menu mobile */
.navpanel__l[aria-current="page"]{ color: var(--accent); }
.navpanel__sub a[aria-current="page"]{ color: var(--accent); font-weight: 700; }
.navpanel__sub a[aria-current="page"] span{ font-weight: 700; }

/* la barre compacte gagne un peu de hauteur pour le logo agrandi */
@media (min-width:1101px){
  .nav.solid, .nav.scrolled{ height: 64px; }
}

/* ============================================================
   Titres de hero : gras, léger, mot en valeur
   ============================================================ */
.hero__title .hl,
.sv-hero__title .hl,
.sp-hero__title .hl{
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -.03em;
}
.ab-hero__title em,
.ia-hero__title em{
  font-style: normal;
  font-weight: 300;
  letter-spacing: -.03em;
}
/* le hero de l'accueil est sombre : l'orange doit s'éclaircir */
.hero__title .hl{ color: #FF6A3D; }

/* ============================================================
   Hero Services : sans quadrillage, animé
   ============================================================ */
.sv-hero{ position: relative; overflow: hidden; }
.sv-hero::before{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -14%; top: -26%; width: 76vw; height: 76vw;
  max-width: 1080px; max-height: 1080px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201,52,15,.16), rgba(201,52,15,.05) 55%, transparent 76%);
  filter: blur(12px);
  animation: svAura 20s ease-in-out infinite alternate;
}
.sv-hero::after{
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,10,11,.16) 22%, rgba(10,10,11,.16) 78%, transparent);
  transform-origin: left center;
  animation: svRule 2.4s cubic-bezier(.22,1,.36,1) both .2s;
}
.sv-hero .wrap{ position: relative; z-index: 1; }
@keyframes svAura{
  from{ transform: translate3d(0,0,0) scale(1); opacity: .85; }
  to  { transform: translate3d(-7%,6%,0) scale(1.16); opacity: 1; }
}
@keyframes svRule{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* le schéma tourne lentement, les points respirent */
.sv-hero__fig .ring--dash,
.sv-hero__fig .ring--in{
  transform-box: view-box; transform-origin: 200px 200px;
}
.sv-hero__fig .ring--dash{ animation: svSpin 72s linear infinite; }
.sv-hero__fig .ring--in{ animation: svSpin 46s linear infinite reverse; }
.sv-hero__fig .spokes path{ animation: svFlow 7s linear infinite; }
.sv-hero__fig .dots circle{ animation: svPulse 3.4s ease-in-out infinite; }
.sv-hero__fig .dots circle:nth-child(2){ animation-delay: .3s; }
.sv-hero__fig .dots circle:nth-child(3){ animation-delay: .6s; }
.sv-hero__fig .dots circle:nth-child(4){ animation-delay: .9s; }
.sv-hero__fig .dots circle:nth-child(5){ animation-delay: 1.2s; }
@keyframes svSpin{ to{ transform: rotate(360deg); } }
@keyframes svFlow{ to{ stroke-dashoffset: -64; } }
@keyframes svPulse{ 0%,100%{ transform: scale(1); opacity: 1; } 50%{ transform: scale(1.45); opacity: .72; } }
.sv-hero__fig .dots circle{ transform-box: fill-box; transform-origin: center; }

/* l'icône du logo remplace « SUJEE DESIGN » au centre */
.sv-hero__fig .core-mark{ animation: svMark 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sv-hero__fig .core-halo{ fill: rgba(201,52,15,.07); animation: svHalo 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes svMark{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
@keyframes svHalo{ 0%,100%{ transform: scale(1); opacity: .9; } 50%{ transform: scale(1.18); opacity: .6; } }

@media (prefers-reduced-motion: reduce){
  .sv-hero::before, .sv-hero::after, .sv-hero__fig .ring--dash, .sv-hero__fig .ring--in,
  .sv-hero__fig .spokes path, .sv-hero__fig .dots circle, .sv-hero__fig .core-mark,
  .sv-hero__fig .core-halo{ animation: none !important; }
}

/* titres des cinq services plus présents */
.sv-row h3{ font-size: clamp(32px, 3.7vw, 58px) !important; font-weight: 700 !important; }
.sv-row__top{ max-width: 640px; }

/* les titres de page service se coupent proprement, sans ligne orpheline */
.sp-hero__title{
  font-size: clamp(34px, 5vw, 84px) !important;
  text-wrap: balance;
  max-width: 15ch;
}
@media (max-width:1100px){ .sp-hero__title{ max-width: none; } }

/* ============================================================
   À propos : frise lisible, une date par ligne
   ============================================================ */
.ab-frise{
  margin-top: clamp(26px, 3.6vw, 44px);
  border-top: 1px solid var(--line);
  max-width: 1080px;
}
.ab-frise__row{
  display: grid;
  grid-template-columns: clamp(90px, 11vw, 150px) 1fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(18px, 2.3vw, 28px) 0;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .3s var(--ease);
}
.ab-frise__row b{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 2.15vw, 32px);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.ab-frise__row span{
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 42ch;
}
.ab-frise__row:hover{ border-bottom-color: var(--line); }
.ab-frise__row:hover b{ color: var(--accent); }

/* les trois repères, plus calmes */
.ab-facts{
  gap: clamp(28px, 4vw, 64px) !important;
  margin-top: clamp(52px, 6vw, 84px) !important;
  max-width: 1180px;
}
.ab-fact{ padding-top: 14px !important; }
.ab-fact b{ margin-bottom: 10px !important; }
.ab-fact span{
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-width: 34ch;
  display: block;
}

@media (max-width:700px){
  .ab-frise__row{ grid-template-columns: 68px 1fr; gap: 16px; }
  .ab-frise__row b{ font-size: 20px; }
}

/* la frise et les repères s'alignent sur le titre, pas sur le numéro de section */
@media (min-width:901px){
  .ab-frise, .ab-facts{ margin-left: calc(70px + clamp(12px, 2vw, 28px)); max-width: none; }
}

/* ============================================================
   Page projet : une seule colonne d'images, ratio d'origine
   ============================================================ */
.pj-gallery{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(30px, 4vw, 56px);
}
.pj-fig{ margin: 0; }
.pj-fig img{
  display: block;
  width: 100%;
  height: auto;      /* le ratio du fichier est conservé, jamais recadré */
  max-width: 100%;
  border-radius: 2px;
  background: var(--bg-2);
}
.pj-fig figcaption{
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: none;
  color: var(--muted);
}
@media (max-width:700px){
  .pj-gallery{ gap: 0; }
  .pj-fig figcaption{ font-size: 9px; }
}

/* empilement sans aucun espace : les filets se superposent au lieu de doubler */
.pj-fig + .pj-fig{ margin-top: 0; }
.pj-fig img{ border-radius: 0; }

/* ============================================================
   Réseaux sociaux : rail fixe à gauche + ligne dans le footer
   ============================================================ */
.social-rail{
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 85;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 5px;
  border-radius: 999px;
  background: rgba(247,247,245,.72);
  border: 1px solid rgba(10,10,11,.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 12px 30px -22px rgba(10,10,11,.5);
}
.social-rail a{
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--muted-2);
  text-decoration: none;
  padding: 9px 3px;
  transition: color .25s var(--ease);
}
.social-rail a:hover, .social-rail a:focus-visible{ color: var(--accent); }

/* dans le footer */
.foot-social{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: 16px 0 4px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 11px;
}
.foot-social__lbl{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.45);
}
.foot-social a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.foot-social a:hover{ color: #fff; border-bottom-color: currentColor; }

@media (max-width:1100px){
  .social-rail{ display: none; }
}

/* ordre de lecture du rail et respiration du footer */
.social-rail{ flex-direction: column; }
.foot-social{ padding: 16px 0 26px; }
.foot-social__lbl{ color: rgba(255,255,255,.55); }

/* ============================================================
   FAQ — état survolé
   Pas de @media (hover:hover) : certains navigateurs tactiles et
   l'émulation rapportent hover:none, l'effet ne partirait jamais.
   ============================================================ */
.faq details{
  position: relative;
  isolation: isolate;
  transition: border-color .35s var(--ease);
}
.faq details::before{
  content: "";
  position: absolute;
  inset: 0 -16px;
  z-index: -1;
  border-radius: 3px;
  background: rgba(10, 10, 11, .03);
  opacity: 0;
  transform: scaleY(.86);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  pointer-events: none;
}
.faq summary{
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.faq summary::after{
  transition: color .3s var(--ease), transform .45s var(--ease);
}
.faq p{ transition: color .35s var(--ease); }

.faq details[open]::before{
  opacity: 1;
  transform: none;
  background: rgba(201, 52, 15, .045);
}

.faq details:hover{ border-color: rgba(201, 52, 15, .3); }
.faq details:hover::before{ opacity: 1; transform: none; }
.faq details:hover summary{ transform: translateX(8px); }
.faq details:hover summary::after{ color: var(--accent); transform: rotate(90deg) scale(1.12); }
.faq details[open]:hover summary::after{ transform: scale(1.12); }
.faq details:hover p{ color: var(--ink); }

.faq summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce){
  .faq details, .faq details::before, .faq summary,
  .faq summary::after, .faq p{ transition: none !important; }
  .faq details:hover summary{ transform: none; }
}

/* ============================================================
   CTA du header : contour vermillon, flèche assortie
   #C9340F sur #F7F7F5 = 4,92:1 — #FF6A3D sur hero = 6,9:1
   ============================================================ */
.nav-cta,
.nav.nav--open .nav-cta{
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid rgba(201, 52, 15, .55) !important;
}
.nav-cta:hover,
.nav.nav--open .nav-cta:hover{
  background: rgba(201, 52, 15, .08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.nav-cta svg{ color: currentColor; }

/* sur le hero sombre, le vermillon ne tient que 3,7:1 */
body.has-dark-hero .nav:not(.scrolled) .nav-cta{
  background: transparent !important;
  color: #FF6A3D !important;
  border: 1px solid rgba(255, 106, 61, .5) !important;
}
body.has-dark-hero .nav:not(.scrolled) .nav-cta:hover{
  background: rgba(255, 106, 61, .12) !important;
  border-color: #FF6A3D !important;
  color: #FF6A3D !important;
}

/* ============================================================
   Zones tactiles confortables sur mobile (48 px de haut minimum)
   ============================================================ */
@media (max-width: 900px){
  footer .foot span{ display: inline-flex; }
  footer .foot a{ display: inline-block; padding: 9px 0; }
  .foot-social a{ padding: 11px 0; }
  .legal .toc a{ display: inline-block; padding: 10px 0; }
}

/* ============================================================
   Fins de mobile : pas de mot orphelin, pas de titre collé
   ============================================================ */
@media (max-width: 900px){
  .bandcta p{ text-wrap: pretty; }
  .rl-p__kicker{ margin-bottom: 12px; }
  .rl-p__info h2{ margin-bottom: 16px; }
}

/* ============================================================
   Burger : couleur héritée, pas de rendu natif iOS
   ============================================================ */
.nav-burger{
  color: var(--ink) !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
}
body.has-dark-hero .nav:not(.scrolled) .nav-burger{ color: #F4F4F1 !important; }
.nav.nav--open .nav-burger,
body.has-dark-hero .nav.nav--open .nav-burger{ color: var(--ink) !important; }

/* ============================================================
   Mobile : le CTA quitte la barre et vit dans le menu
   ============================================================ */
.navpanel__cta{ display: none; }
.navpanel__mail{ display: none; }

@media (max-width: 900px){
  #nav .nav-cta{ display: none !important; }
  .navpanel__cta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: clamp(22px, 5vw, 34px);
    min-height: 56px;
    padding: 0 20px;
    border: 1px solid rgba(201, 52, 15, .55);
    border-radius: var(--ds-radius);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    text-decoration: none;
  }
  .navpanel__cta svg{ width: 16px; height: 16px; flex: none; }
  .navpanel__cta:active{ background: rgba(201, 52, 15, .08); }
  .navpanel__mail{
    display: inline-block;
    margin-top: 14px;
    padding: 10px 0;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--muted-2);
    text-decoration: none;
  }
}

/* ============================================================
   Méthode : les étapes repartent à zéro sur mobile
   (les paddings desktop de light.css écrasaient la règle mobile)
   ============================================================ */
@media (max-width: 900px){
  .steps .step{ padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .steps .step:last-child{ border-bottom: 0; }
}