/* ============================================================
   SADIS Digital — pages de service
   Film 4K scrubé en fond fixe (frame-scrub.js), voile qui se
   referme à la lecture : on lit, le film passe derrière.
   Charte lisibilité : corps ≥ 17 px, blanc 0.92, ombre de texte
   sur film ; labels ≥ 12 px / 0.78 ; aucune numérotation décorative.
   ============================================================ */

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

:root {
  --fond: #05080a;
  --texte: rgba(255, 255, 255, 0.92);
  --texte-doux: rgba(255, 255, 255, 0.8);
  --filet: rgba(255, 255, 255, 0.12);
  --teal: #47A1AC;
  --teal-txt: #5bbcc8;
  --tx-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 0, 0, 0.55);
  --marge: clamp(20px, 5vw, 72px);
  --mono: 'Space Mono', ui-monospace, monospace;
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { background: var(--fond); overflow-x: clip; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgba(71, 161, 172, 0.85); color: #fff; }
:focus-visible { outline: 2px solid var(--teal-txt); outline-offset: 3px; border-radius: 4px; }

.svc-saut {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1100;
  background: #fff; color: #000; padding: 10px 14px; border-radius: 8px;
  font: 600 15px/1 var(--sans); text-decoration: none;
}
.svc-saut:focus { top: 12px; }

/* ---------- Film et voiles (fixes, plein cadre) ---------- */
.svc-film {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: var(--fond) var(--poster) center / cover no-repeat;
}
#svc-video,
.frames-canvas[data-for="svc-video"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.svc-voile { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* haut de page : sombre à gauche (texte), le film respire à droite */
.svc-voile--hero {
  background:
    linear-gradient(90deg, rgba(4, 7, 9, 0.9) 0%, rgba(4, 7, 9, 0.66) 42%, rgba(4, 7, 9, 0.18) 78%, rgba(4, 7, 9, 0.1) 100%),
    linear-gradient(0deg, rgba(4, 7, 9, 0.85) 0%, rgba(4, 7, 9, 0) 38%);
}
/* lecture : voile uniforme, aucun bord qui glisse */
.svc-voile--lecture { background: rgba(4, 7, 9, 0.84); opacity: 0; }
/* le texte ne défile pas sous la pilule de navigation */
.svc-voile--haut {
  bottom: auto; height: 104px; z-index: 3; opacity: 0;
  background: linear-gradient(180deg, rgba(5, 8, 10, 0.94) 0%, rgba(5, 8, 10, 0.7) 55%, rgba(5, 8, 10, 0) 100%);
}

.svc-page { position: relative; z-index: 2; }

/* ---------- Hero ---------- */
.svc-hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--marge) clamp(56px, 9vh, 104px);
  max-width: 1440px; margin: 0 auto;
}
.svc-fil {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font: 400 13px/1.4 var(--mono);
  color: var(--texte-doux);
  margin-bottom: 28px;
  text-shadow: var(--tx-shadow);
}
.svc-fil a { text-decoration: none; transition: color 0.2s; }
.svc-fil a:hover { color: #fff; }
.svc-fil span[aria-hidden] { opacity: 0.5; }
.svc-fil [aria-current] { color: var(--teal-txt); }
.svc-eyebrow {
  font: 700 13px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-txt);
  margin-bottom: 20px;
  text-shadow: var(--tx-shadow);
}
.svc-h1 {
  font: 600 clamp(40px, 6.2vw, 92px)/1.02 var(--sans);
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.svc-h1 .l { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.svc-h1 .l > span { display: inline-block; }
.svc-lead {
  margin-top: 28px;
  max-width: 40rem;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--texte);
  text-wrap: pretty;
  text-shadow: var(--tx-shadow);
}
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }

.svc-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px 15px 16px;
  border-radius: 999px;
  background: #2F7D86;   /* teinte du logo assombrie : texte blanc à 4,8:1 (WCAG AA, audit du 22/10/2026) */
  color: #fff;
  font: 600 16px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}
.svc-btn::before {
  content: ''; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.svc-btn:hover { background: #2C7780; }
.svc-btn:active { transform: translateY(1px) scale(0.99); }
.svc-btn--clair { background: #fff; color: #06090b; }
.svc-btn--clair::before { background-color: rgba(6, 9, 11, 0.9); }
.svc-btn--clair:hover { background: #e8f3f4; }
.svc-lien {
  font: 500 16px/1.2 var(--sans);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.2s;
  text-shadow: var(--tx-shadow);
}
.svc-lien:hover { border-color: var(--teal-txt); }

/* ---------- Corps : sommaire + article ---------- */
.svc-corps {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 720px);
  justify-content: center;
  gap: clamp(40px, 6vw, 110px);
  padding: clamp(64px, 12vh, 140px) var(--marge) 40px;
  max-width: 1440px; margin: 0 auto;
}
.svc-sommaire { position: sticky; top: 110px; align-self: start; }
.svc-label {
  font: 700 12px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 18px;
}
.svc-sommaire ol { list-style: none; border-inline-start: 1px solid var(--filet); }
.svc-sommaire a {
  display: block;
  padding-block: 7px;
  padding-inline: 16px 0;
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font: 400 14.5px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.svc-sommaire a:hover { color: #fff; }
.svc-sommaire a.is-actif { color: #fff; border-inline-start-color: var(--teal); }

.svc-article { min-width: 0; text-shadow: var(--tx-shadow); }
.svc-article > section + section { margin-top: clamp(72px, 10vh, 120px); }
.svc-article h2, .svc-bloc h2 {
  font: 600 clamp(28px, 2.6vw, 40px)/1.12 var(--sans);
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 26px;
  scroll-margin-top: 110px;
}
.svc-article section { scroll-margin-top: 110px; }
.svc-article h3 {
  font: 600 20px/1.35 var(--sans);
  color: #fff;
  margin: 34px 0 10px;
}
.svc-article p { max-width: 68ch; text-wrap: pretty; }
.svc-article p + p { margin-top: 1.1em; }
.svc-article a { color: #fff; text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.svc-article a:hover { text-decoration-color: #fff; }
.svc-article strong { font-weight: 600; color: #fff; }

/* Listes : repère = petite barre du logo, pas de puce ni de numéro */
.svc-article ul, .svc-article ol { list-style: none; margin: 22px 0; display: grid; gap: 16px; }
.svc-article li { position: relative; padding-inline-start: 26px; max-width: 66ch; }
.svc-article li::before {
  content: ''; position: absolute; inset-inline-start: 2px; top: 0.5em;
  width: 4px; height: 0.95em; border-radius: 2px;
  background: var(--teal);
}
.svc-article li > strong:first-child { display: block; margin-bottom: 2px; }

/* Déroulé d'un projet : fil vertical, étapes nommées par un mot */
.svc-article ol.svc-etapes { gap: 0; margin-top: 30px; }
.svc-etapes li { padding-block: 0 30px; padding-inline: 34px 0; border-inline-start: 1px solid var(--filet); margin-inline-start: 6px; }
.svc-etapes li:last-child { padding-bottom: 4px; border-inline-start-color: transparent; }
.svc-etapes li::before {
  inset-inline-start: -6px; top: 0.35em; width: 11px; height: 11px; border-radius: 50%;
  background: var(--fond); border: 2px solid var(--teal);
}

/* Encadré preuve (réalisation vérifiable) */
.svc-preuve {
  margin: 34px 0;
  padding: 26px 28px;
  border-inline-start: 3px solid var(--teal);
  background: rgba(71, 161, 172, 0.1);
  border-start-end-radius: 14px; border-end-end-radius: 14px;
}
.svc-preuve .svc-label { color: var(--teal-txt); margin-bottom: 10px; }
.svc-preuve p { max-width: none; }

/* ---------- Blocs pleine largeur ---------- */
.svc-bloc { max-width: 1200px; margin: 0 auto; padding: clamp(80px, 12vh, 150px) var(--marge) 0; text-shadow: var(--tx-shadow); }

/* FAQ en vis-à-vis : question à gauche, réponse à droite, tout visible */
.svc-faq dl { border-top: 1px solid var(--filet); margin-top: 10px; }
.svc-qr {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px clamp(28px, 5vw, 80px);
  padding: 30px 0;
  border-bottom: 1px solid var(--filet);
}
.svc-qr dt { font: 600 19px/1.4 var(--sans); color: #fff; text-wrap: balance; }
.svc-qr dd { color: var(--texte); text-wrap: pretty; }

/* Autres services : cartes illustrées par leur propre film */
.svc-voir ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.svc-voir a {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none;
  border-radius: 16px; overflow: hidden;
  background: rgba(12, 18, 21, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc-voir a:hover { border-color: rgba(91, 188, 200, 0.55); transform: translateY(-4px); }
.svc-voir img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.3s; }
.svc-voir a:hover img { opacity: 1; }
.svc-voir .t { display: block; padding: 20px 22px 6px; font: 600 19px/1.3 var(--sans); color: #fff; }
.svc-voir .d { display: block; padding: 0 22px 24px; font-size: 16px; line-height: 1.55; color: var(--texte-doux); }

/* Appel final */
.svc-cta { padding-bottom: clamp(90px, 14vh, 160px); }
.svc-cta h2 { font-size: clamp(34px, 4.4vw, 64px); max-width: 16ch; }
.svc-cta p { max-width: 58ch; margin-bottom: 34px; }
.svc-cta .svc-actions { margin-top: 0; }

/* ---------- Pied de page ---------- */
.svc-pied {
  position: relative; z-index: 2;
  background: #030506;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 64px var(--marge) 40px;
}
.svc-pied-grille {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1.6fr 1fr; gap: 40px 56px;
}
.svc-pied-marque { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.svc-pied-marque svg { width: 18px; height: 18px; }
.svc-pied-marque span { font: 600 18px/1 'Cormorant Garamond', serif; letter-spacing: 0.14em; color: #fff; }
.svc-pied p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 34ch; }
.svc-pied h2 { font: 700 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); margin-bottom: 14px; }
.svc-pied-liens { display: grid; gap: 8px; }
.svc-pied-liens--2 { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.svc-pied-liens a { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.2s; }
.svc-pied-liens a:hover, .svc-pied-liens a[aria-current] { color: #fff; }
.svc-pied-bas {
  max-width: 1200px; margin: 48px auto 0; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  font-size: 13px; color: rgba(255, 255, 255, 0.62);
}
.svc-pied-bas a { color: inherit; text-decoration: none; }
.svc-pied-bas a:hover { color: #fff; }

/* ---------- Mouvement (seulement avec JS, jamais en reduced-motion) ---------- */
html.svc-anim .svc-h1 .l > span { transform: translateY(105%); }
html.svc-anim .svc-fil, html.svc-anim .svc-eyebrow, html.svc-anim .svc-lead, html.svc-anim .svc-actions { opacity: 0; transform: translateY(14px); }
html.svc-anim.svc-entree .svc-h1 .l > span { transform: none; transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); }
html.svc-anim.svc-entree .svc-fil,
html.svc-anim.svc-entree .svc-eyebrow,
html.svc-anim.svc-entree .svc-lead,
html.svc-anim.svc-entree .svc-actions { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.svc-anim.svc-entree .svc-eyebrow { transition-delay: 0.1s; }
html.svc-anim.svc-entree .svc-lead { transition-delay: 0.45s; }
html.svc-anim.svc-entree .svc-actions { transition-delay: 0.6s; }

/* sections : chaque famille entre à sa façon */
html.svc-anim [data-rv] { opacity: 0; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), clip-path 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.svc-anim [data-rv="monte"] { transform: translateY(28px); }
html.svc-anim [data-rv="gauche"] { transform: translateX(-26px); }
html.svc-anim [data-rv="rideau"] { clip-path: inset(0 0 100% 0); transform: translateY(12px); }
html.svc-anim [data-rv="echelle"] { transform: scale(0.965); }
html.svc-anim [data-rv].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ---------- Réactif ---------- */
@media (max-width: 1023px) {
  .svc-corps { grid-template-columns: minmax(0, 720px); }
  .svc-sommaire { display: none; }
  .svc-voir ul { grid-template-columns: 1fr 1fr; }
  .svc-voir li:nth-child(3) { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .svc-hero { padding-top: 112px; padding-bottom: 44px; }
  .svc-h1 { font-size: clamp(31px, 8.4vw, 40px); letter-spacing: -0.03em; }
  .svc-lead { margin-top: 20px; font-size: 17px; }
  .svc-actions { margin-top: 26px; }
  .svc-fil { margin-bottom: 20px; }
  .svc-eyebrow { font-size: 12px; margin-bottom: 14px; }
  .svc-film { background-image: var(--poster-p, var(--poster)); }
  .svc-voile--hero {
    background:
      linear-gradient(0deg, rgba(4, 7, 9, 0.94) 0%, rgba(4, 7, 9, 0.72) 48%, rgba(4, 7, 9, 0.25) 100%);
  }
  .svc-voile--lecture { background: rgba(4, 7, 9, 0.86); }
  .svc-qr { grid-template-columns: 1fr; padding: 24px 0; }
  .svc-qr dt { font-size: 18px; }
  .svc-voir ul { grid-template-columns: 1fr; }
  .svc-voir li:nth-child(3) { display: block; }
  .svc-pied-grille { grid-template-columns: 1fr; }
  .svc-pied-liens--2 { grid-template-columns: 1fr; }
  .svc-preuve { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-voir a, .svc-btn { transition: none; }
}

/* ---------- Arabe (dir="rtl") ----------
   Jamais d'espacement de lettres ni de capitales forcées : ils cassent les
   liaisons de l'écriture arabe. Le voile du haut s'assombrit côté texte (droite). */
[dir="rtl"] body { font-family: 'Inter Tight', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif; line-height: 1.85; }
[dir="rtl"] .svc-h1, [dir="rtl"] .svc-article h2, [dir="rtl"] .svc-bloc h2 { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .svc-eyebrow, [dir="rtl"] .svc-label, [dir="rtl"] .svc-pied h2, [dir="rtl"] .svc-fil {
  font-family: inherit; letter-spacing: 0; text-transform: none;
}
[dir="rtl"] .svc-eyebrow { font-size: 15px; }
[dir="rtl"] .svc-voile--hero {
  background:
    linear-gradient(270deg, rgba(4, 7, 9, 0.9) 0%, rgba(4, 7, 9, 0.66) 42%, rgba(4, 7, 9, 0.18) 78%, rgba(4, 7, 9, 0.1) 100%),
    linear-gradient(0deg, rgba(4, 7, 9, 0.85) 0%, rgba(4, 7, 9, 0) 38%);
}
[dir="rtl"] .svc-btn::before { transform: scaleX(-1); }
@media (max-width: 700px) {
  [dir="rtl"] .svc-voile--hero { background: linear-gradient(0deg, rgba(4, 7, 9, 0.94) 0%, rgba(4, 7, 9, 0.72) 48%, rgba(4, 7, 9, 0.25) 100%); }
}