/* ============================================================================
   Ysalio — feuille de styles du site vitrine
   Charte : encre #0F2E3D · ambre #E9A13B · teal #3FA88F · gris-bleu #8FA6BC
            crème #EDE8DC · Inter, police unique, servie en local
   Ordre : 1 tokens · 2 socle · 3 utilitaires · 4 composants · 5 sections
           6 pages légales · 7 responsive · 8 accessibilité
   ========================================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Couleurs de la charte */
  --ink:      #0F2E3D;
  --ink-2:    #173F52;
  --teal:     #3FA88F;
  --teal-d:   #2E8570;
  --teal-s:   #E3F3ED;
  --amber:    #E9A13B;
  --amber-d:  #C07E1E;
  --amber-s:  #FBF0DF;
  --slate:    #8FA6BC;
  --slate-s:  #E8EDF2;
  --cream:    #EDE8DC;
  --paper:    #F7F8F6;
  --white:    #FFFFFF;

  /* Déclinaisons d'opacité (évite les rgba() dispersés) */
  --ink-70:   rgba(15,46,61,.70);
  --ink-60:   rgba(15,46,61,.62);
  --ink-45:   rgba(15,46,61,.45);
  --ink-20:   rgba(15,46,61,.20);
  --ink-10:   rgba(15,46,61,.10);
  --ink-06:   rgba(15,46,61,.06);
  --cream-75: rgba(237,232,220,.75);
  --cream-60: rgba(237,232,220,.60);
  --cream-45: rgba(237,232,220,.45);
  --cream-25: rgba(237,232,220,.25);
  --cream-12: rgba(237,232,220,.12);
  --cream-04: rgba(237,232,220,.045);

  /* Typographie */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Trame */
  --page:   1120px;
  --gutter: 18px;
  --header: 66px;
  --logo:   44px;
  --nav-gap: 12px;

  /* Rayons & ombres */
  /* Rayons repris de l'interface Ysalio App : 9 · 10 · 12 px */
  --r-sm: 9px;
  --r:    10px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-card: 0 10px 26px -20px rgba(15,46,61,.45);
  --shadow-shot: 0 32px 70px -46px rgba(0,0,0,.85);

  /* Transitions */
  --t: .18s ease;
}

@media (min-width: 480px){ :root{ --gutter: 24px; --header: 74px; --logo: 50px } }
@media (min-width: 640px){ :root{ --gutter: 32px; --nav-gap: 24px } }


/* ── 2. Socle ──────────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(63,168,143,.18);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote{ margin: 0 }
ul, ol{ padding: 0; list-style: none }
img, svg{ display: block; max-width: 100% }
img{ height: auto }
a{ color: inherit; text-decoration: none }
strong{ font-weight: 600 }

button{
  font: inherit; color: inherit;
  margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
}


/* ── 3. Utilitaires ────────────────────────────────────────────────────── */
.wrap{
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  /* max() : respecte l'encoche en paysage sur iOS */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Label : le marqueur typographique de la charte (Inter, capitales espacees) */
.eyebrow{
  margin: 0;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow--teal { color: var(--teal) }
.eyebrow--amber{ color: var(--amber-d) }
.eyebrow--amber-bright{ color: var(--amber) }
.eyebrow--slate{ color: var(--slate) }
.eyebrow--muted{ color: var(--ink-45) }

/* Pastille de tête de section, reprise de la plaquette.
   `currentColor` : la pastille suit la couleur du label. */
.eyebrow--dot{ display: inline-flex; align-items: center; gap: 9px }
.eyebrow--dot::before{
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.eyebrow--cream{ color: var(--cream) }

/* Titrage : Inter serré, à l'image du mot-logo */
.display{
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.display--xl{ font-size: clamp(2rem, 4.8vw, 3.1rem) }
.display--lg{ font-size: clamp(1.6rem, 3.2vw, 2.2rem) }
.display--md{ font-size: clamp(1.5rem, 2.8vw, 1.85rem) }

.lede{
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-60);
}
.lede--light{ color: var(--cream-75) }

.t-teal { color: var(--teal) }
.t-amber{ color: var(--amber) }

.sr-only{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Fond de courbes de niveau, posé en absolu dans les blocs encre.
   img/contours.svg contient de vraies isolignes (boucles imbriquées)
   calculées sur un relief de synthèse — voir tools/generer-contours.py.
   Le motif est un carré ancré dans l'angle haut-droit, estompé en
   diagonale par un masque radial, comme sur la plaquette. */
.contours{
  position: absolute; inset: 0;
  pointer-events: none;
  background: url("img/contours.svg") no-repeat right top;
  background-size: 440px 440px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(460px 460px at 100% 0%, #000 42%, transparent 100%);
          mask-image: radial-gradient(460px 460px at 100% 0%, #000 42%, transparent 100%);
}

/* Pied de page : bloc bas, motif un peu plus petit et plus effacé */
.site-footer .contours{
  background-size: 360px 360px;
  opacity: .17;
  -webkit-mask-image: radial-gradient(380px 380px at 100% 0%, #000 42%, transparent 100%);
          mask-image: radial-gradient(380px 380px at 100% 0%, #000 42%, transparent 100%);
}

@media (max-width: 640px){
  .contours{
    background-size: 300px 300px;
    -webkit-mask-image: radial-gradient(320px 320px at 100% 0%, #000 42%, transparent 100%);
            mask-image: radial-gradient(320px 320px at 100% 0%, #000 42%, transparent 100%);
  }
  .site-footer .contours{ background-size: 250px 250px }
}


/* ── 4. Composants ─────────────────────────────────────────────────────── */

/* 4.1 Boutons ---------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn svg{ width: 15px; height: 15px; flex: none }

.btn--teal { background: var(--teal); color: #fff }
.btn--teal:hover { background: var(--teal-d) }

.btn--ink  { background: var(--ink); color: var(--cream) }
.btn--ink:hover { background: var(--ink-2) }

.btn--outline{ border-color: var(--ink-20); color: var(--ink) }
.btn--outline:hover{ border-color: rgba(15,46,61,.5); background: var(--paper) }

.btn--outline-light{ border-color: var(--cream-25); color: var(--cream) }
.btn--outline-light:hover{ border-color: rgba(237,232,220,.6); background: rgba(237,232,220,.06) }

.btn--sm{ padding: 9px 15px; font-size: 13px }

/* Sous 400 px, le bouton d'accès se réduit à « App » sans perdre sa cible tactile */
.btn__full{ display: inline }
.btn__short{ display: none }
@media (max-width: 399px){
  .site-header .btn--sm{ padding: 10px 14px; font-size: 13px }
  .site-header .btn__full{ display: none }
  .site-header .btn__short{ display: inline }
}

/* Pastille ambre : signe d'accès à l'application */
.dot{
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
}

/* 4.2 En-tête ---------------------------------------------------------- */
.site-header{
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(247,248,246,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-10);
}
.site-header__bar{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  height: var(--header);
  min-width: 0;
}

.brand{ display: flex; align-items: center; gap: 10px; flex: none }
/* Cartouche 512×512 rendu à 50 px (44 px sur mobile) : net en haute densité */
.brand img{ width: var(--logo); height: var(--logo); flex: none }
.brand__name{ font-size: 30px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap }

.nav{ display: none; margin-left: auto; align-items: center; gap: 24px }
.nav a{ font-size: 13.5px; font-weight: 500; color: var(--ink-70); transition: color var(--t) }
.nav a:hover{ color: var(--ink) }

.site-header .btn{ margin-left: auto; flex: none }

.nav-toggle{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin-right: -8px;
  border-radius: 50%;
  transition: background-color var(--t);
}
.nav-toggle:hover{ background: var(--ink-06) }
.nav-toggle svg{ width: 20px; height: 20px }

.nav-mobile{
  border-top: 1px solid var(--ink-10);
  padding: 8px var(--gutter) 16px;
}
.nav-mobile a{
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid rgba(15,46,61,.06);
  font-size: 14px; font-weight: 500;
}
.nav-mobile a:last-child{ border-bottom: 0 }

/* 4.3 Blocs de section ------------------------------------------------- */
.section{ padding-block: 56px }
.section--dark{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.section--white{
  background: var(--white);
  border-block: 1px solid rgba(15,46,61,.08);
}
.section__head{ max-width: 600px }
.section__head .display{ margin-top: 12px }
.section__head .lede{ margin-top: 16px }
.section--dark .section__head .lede{ color: var(--cream-75) }

/* 4.4 Carte de prestation ---------------------------------------------- */
.svc-grid{ display: grid; gap: 16px; margin-top: 36px }

.svc{
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-lg);
  transition: transform var(--t), box-shadow var(--t);
}
.svc:hover{ transform: translateY(-2px); box-shadow: var(--shadow-card) }

.svc__title{ margin-top: 12px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.svc__text{ margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-60) }

/* Le filet de couleur se déploie au survol : rappel du trait de la charte */
.svc__rule{
  display: block;
  width: 24px; height: 2px;
  margin-top: 10px;
  border-radius: var(--r-pill);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.svc:hover .svc__rule{ width: 52px }
.svc__rule--teal { background: var(--teal) }
.svc__rule--amber{ background: var(--amber) }
.svc__rule--slate{ background: var(--slate) }


.note{
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-10);
  font-size: 14px;
  color: var(--ink-60);
}
.note a{
  font-weight: 600; color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.note a:hover{ color: var(--amber-d) }

/* 4.4bis Icône + label de famille sur une ligne ------------------------ */
/* Réutilisé par les cartes de prestation et par les fonctions de la
   plateforme. Les SVG Font Awesome sont intégrés en ligne et héritent de
   la couleur par `fill="currentColor"`. */
.cat{ display: flex; align-items: center; gap: 9px; min-width: 0 }
.cat .eyebrow{ min-width: 0 }
.cat__icon{ flex: none; width: 16px; height: 16px }
.cat__icon--teal { color: var(--teal) }
.cat__icon--amber{ color: var(--amber) }
.cat__icon--slate{ color: var(--slate) }

/* Variante agrandie : sections où le badge porte seul l'identification */
.cat--lg{ gap: 11px }
.cat--lg .cat__icon{ width: 26px; height: 26px }
.cat--lg .eyebrow{ font-size: 12px; letter-spacing: .16em }

/* 4.5 Cartes diverses --------------------------------------------------- */
.feature-grid{ display: grid; gap: 16px; margin-top: 40px }
.feature{
  padding: 22px;
  background: var(--cream-04);
  border: 1px solid var(--cream-12);
  border-radius: var(--r-lg);
}
.feature__title{ margin-top: 12px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.feature__text{ margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--cream-75) }



/* ── 5. Sections de la page d'accueil ──────────────────────────────────── */

/* 5.1 Hero -------------------------------------------------------------- */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: var(--header);
  background: var(--ink);
  color: var(--cream);
}
.hero__grid{
  position: relative;
  display: grid;
  gap: 44px;
  padding-block: 52px 64px;
}
.hero .eyebrow{ margin-bottom: 18px }
.hero .lede{ max-width: 36em; margin-top: 22px; font-size: 16px }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px }
.hero__figure{ width: 100%; max-width: 430px; margin-inline: auto }
/* Le SVG se met à l'échelle : on remonte la taille du texte en unités
   utilisateur pour qu'il reste lisible une fois réduit. */
.hero__figure svg{ width: 100% }
.hero__figure svg text{ font-size: 13.5px }
@media (max-width: 720px){ .hero__figure svg text{ font-size: 15px } }
@media (max-width: 460px){ .hero__figure svg text{ font-size: 17px } }

/* 5.2 Trois entrées ----------------------------------------------------- */
.entries{
  display: grid;
  gap: 30px;
  padding-block: 44px;
  border-bottom: 1px solid rgba(15,46,61,.08);
}
/* Repère de la plaquette : trait vertical terminé par un point plein,
   posé à gauche du texte comme une épingle sur la carte. */
.entry{ display: flex; align-items: flex-start; gap: 14px }

.entry__mark{
  position: relative;
  flex: none;
  width: 11px;
  height: 42px;
  margin-top: 3px;
}
.entry__mark::before{          /* le trait */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 35px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: currentColor;
}
.entry__mark::after{           /* le point */
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: currentColor;
}
.entry__mark--teal { color: var(--teal) }
.entry__mark--amber{ color: var(--amber) }
.entry__mark--slate{ color: var(--slate) }

.entry__q{ font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.entry__a{ margin-top: 3px; font-size: 15.5px; font-style: italic; color: var(--ink-60) }

/* 5.3 Plateforme -------------------------------------------------------- */
.section--dark .wrap{ position: relative }
.platform__head{ display: grid; gap: 26px }
.platform__lede{ max-width: 56em; margin-top: 20px }
/* Galerie : quatre vues de l'application, captures de 665 x 459 px.
   Le cadre reprend leur format paysage : rien n'est rogné. Une colonne sur
   mobile, deux (grille 2 x 2) a partir de la tablette. */
.shots{ display: grid; gap: 18px; margin-top: 36px }

.shot{ margin: 0 }
.shot__frame{
  overflow: hidden;
  aspect-ratio: 665 / 459;
  background: var(--ink-2);
  border: 1px solid rgba(237,232,220,.15);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-shot);
}
.shot__img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.shot__img--top { object-position: top center }   /* panneaux : on garde l'en-tête */
.shot__img--left{ object-position: left center }  /* vue large : on garde le panneau */
.shot:hover .shot__img{ transform: scale(1.02) }

.shot__cap{
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cream-60);
}
.shot__num{
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* 5.4 Méthode ----------------------------------------------------------- */
.steps{ display: grid; gap: 28px; margin-top: 40px }
.step{ padding-top: 16px; border-top: 2px solid rgba(15,46,61,.25) }
.step:first-child{ border-top-color: var(--ink) }
.step__num{ font-size: 12px; font-weight: 600; color: var(--amber) }
.step__title{ margin-top: 10px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em }
.step__text{ margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--ink-60) }

/* 5.5 Profil ------------------------------------------------------------ */
.profile{ display: grid; gap: 36px }
.profile p{ margin-top: 16px; font-size: 15.5px; line-height: 1.62; color: var(--ink-70) }
.profile .display{ margin-top: 12px }
/* Portrait : format 4/5, cadré comme les captures de l'application.
   Plafonné à sa taille native (400 px) pour ne jamais être agrandi. */
.portrait{ margin: 0; align-self: start; max-width: 400px }
.portrait img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--ink);
}
.portrait__cap{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-60);
}
.portrait__nom{
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Secteurs : bandeau pleine largeur sous le profil */
.sectors{ margin-top: 48px }
.sectors__grid{ display: grid; gap: 24px; margin-top: 18px }
.sector{ padding-top: 14px; border-top: 1px solid var(--ink-10) }
.sector__nom{ font-size: 14.5px; font-weight: 600 }
.sector__txt{ margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-60) }

/* 5.6 Contact ----------------------------------------------------------- */
.contact-panel{
  display: grid;
  gap: 32px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
}
.contact-panel .display{ margin-top: 12px }
.contact-panel .lede{ max-width: 34em; margin-top: 16px }
.contact-panel__cta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px }

.login-card{
  display: block;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-lg);
}
.login-card img{ width: 100%; transition: transform .5s ease }
.login-card:hover img{ transform: scale(1.03) }
.login-card__label{
  padding: 11px 16px;
  border-top: 1px solid rgba(237,232,220,.10);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* 5.7 Pied de page ------------------------------------------------------ */
.site-footer{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.site-footer .wrap{ position: relative; padding-block: 52px }
.footer__top{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--cream-12);
}
.footer__brand{ display: flex; align-items: center; gap: 11px }
.footer__brand svg{ width: 36px; height: 36px }
.footer__wordmark{ font-size: 19px; font-weight: 700; letter-spacing: -.02em }

.footer__contact{ font-size: 14px; line-height: 1.6 }
.footer__contact a{ font-weight: 600; transition: color var(--t) }
.footer__contact a:hover{ color: var(--teal) }
.footer__contact p{ color: var(--cream-60) }
.footer__contact .eyebrow{ margin-top: 14px }

.footer__legal{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  font-size: 12px;
  color: var(--cream-45);
}
.footer__legal ul{ display: flex; flex-wrap: wrap; gap: 8px 20px }
.footer__legal a{ display: inline-block; padding-block: 4px }
.footer__legal a{ transition: color var(--t) }
.footer__legal a:hover{ color: var(--cream-75) }


/* ── 6. Pages légales ──────────────────────────────────────────────────── */
.legal-hero{
  padding-top: calc(var(--header) + 48px);
  padding-bottom: 32px;
  background: var(--ink);
  color: var(--cream);
}
.legal-hero .display{ margin-top: 12px }
.legal-hero__meta{
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.legal{ max-width: 700px; padding-block: 40px 64px }
.legal .lede{ margin-bottom: 8px }
.legal h2{
  margin-top: 40px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--header) + 16px);
}
.legal h2:first-of-type{ margin-top: 0 }
.legal h3{ margin-top: 24px; font-size: 15px; font-weight: 600 }
.legal p, .legal li{ font-size: 15px; line-height: 1.68; color: var(--ink-70) }
.legal p{ margin-top: 14px }
.legal ul{ margin-top: 14px; list-style: disc; padding-left: 22px }
.legal ul li{ margin-top: 8px; padding-left: 4px }
.legal ul li::marker{ color: var(--teal) }
.legal a{
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
}
.legal a:hover{ color: var(--teal-d) }

/* Ligne de définition « clé → valeur » des mentions légales */
.legal dl{ margin-top: 20px; display: grid; gap: 2px 24px }
.legal dt{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
  padding-top: 12px;
}
.legal dd{ font-size: 15px; color: var(--ink-70); padding-bottom: 12px; border-bottom: 1px solid var(--ink-06) }

/* Champ à compléter avant mise en ligne */
.fill{
  background: var(--amber-s);
  border-bottom: 1px dashed var(--amber-d);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .88em;
  color: var(--amber-d);
}

.callout{
  margin-top: 24px;
  padding: 15px 18px;
  background: var(--teal-s);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.callout p{ margin-top: 0; font-size: 14px; color: var(--ink-70) }

.toc{
  margin-top: 32px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: var(--r);
}
.toc ol{ counter-reset: toc; margin-top: 10px }
.toc li{ counter-increment: toc; margin-top: 5px; font-size: 14px }
.toc li a::before{
  content: counter(toc, decimal-leading-zero) ' ';
  font-size: 12px;
  color: var(--amber);
  margin-right: 8px;
}
.toc a{ text-decoration: none; color: var(--ink-70) }
.toc a:hover{ color: var(--ink) }

.backlink{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-70);
  transition: color var(--t);
}
.backlink:hover{ color: var(--ink) }
.backlink svg{ width: 15px; height: 15px }


/* ── 7. Responsive ─────────────────────────────────────────────────────
   Approche « mobile d'abord » : la mise en page de base vaut pour 320 px,
   chaque palier n'ajoute que ce que la largeur permet.
   320 · 480 · 640 · 768 · 1024 · 1280
   ------------------------------------------------------------------- */

/* ≥ 480 px — grands téléphones */
@media (min-width: 480px){
  .facts{ grid-template-columns: repeat(3, 1fr) }
  .meta{ grid-template-columns: repeat(2, 1fr) }
  .footer__legal ul{ gap: 20px }
}

/* ≥ 640 px — phablettes et petites tablettes en portrait */
@media (min-width: 640px){
  .section{ padding-block: 72px }
  .contact-panel{ padding: 36px }
  .svc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .sectors__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 32px }
  .shots{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px }
  .footer__nav{ grid-template-columns: repeat(3, minmax(0,1fr)) }
  .footer__legal{ flex-direction: row; align-items: center; justify-content: space-between }
  .legal dl{ grid-template-columns: 190px 1fr }
  .legal dt{ border-bottom: 1px solid var(--ink-06) }
  .legal{ padding-block: 56px 80px }
}

/* ≥ 768 px — tablettes */
@media (min-width: 768px){
  .entries{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px }
  .steps{ grid-template-columns: repeat(2, minmax(0,1fr)) }
  .footer__top{ flex-direction: row; align-items: flex-start; justify-content: space-between }
  .hero__grid{ padding-block: 64px 76px }
}

/* ≥ 1024 px — ordinateurs : la navigation complète apparaît */
@media (min-width: 1024px){
  .section{ padding-block: 88px }
  .nav{ display: flex }
  .nav-toggle{ display: none }
  .nav-mobile{ display: none !important }
  .site-header .btn{ margin-left: 0 }

  .hero__grid{
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 40px;
    padding-block: 76px 90px;
  }
  .svc-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
  /* 7 cartes sur 3 colonnes : la dernière, seule sur sa ligne, cale à droite */
  .svc:last-child{ grid-column: 1 }
  .feature-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
  .steps{ grid-template-columns: repeat(4, minmax(0,1fr)) }

  .platform__head{ grid-template-columns: 1fr auto; align-items: end }
  .platform__head .btn{ justify-self: start; align-self: end }

  .profile{ grid-template-columns: 1.1fr .9fr; gap: 64px }
  .portrait{
    max-width: 280px;
    justify-self: end;
    margin-top: calc(10.5px * 1.55 + 12px);
  }
  .sectors__grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px }

  .contact-panel{ grid-template-columns: 1.15fr .85fr; align-items: center }
}

/* ≥ 1280 px — grands écrans : un peu plus d'air, sans étirer le texte */
@media (min-width: 1280px){
  :root{ --gutter: 40px }
  .hero__grid{ gap: 56px }
}

/* Téléphone en paysage : hauteurs réduites pour éviter le hero à rallonge */
@media (max-height: 520px) and (orientation: landscape){
  .hero__grid{ padding-block: 32px 40px }
  .facts{ margin-top: 24px; padding-top: 18px }
  .legal-hero{ padding-top: calc(var(--header) + 32px); padding-bottom: 28px }
}

/* Écrans très étroits (≤ 340 px) : on desserre encore */
@media (max-width: 340px){
  .display--xl{ font-size: 1.85rem }
  .svc, .feature, .contact-panel{ padding: 18px }
  .brand__name{ font-size: 18px }
  :root{ --logo: 40px }
}

/* ── 8. Mouvement & accessibilité ──────────────────────────────────────── */

/* Révélation au défilement (activée en JS) */
.reveal{ opacity: 0; transform: translateY(16px) }
.reveal.is-in{
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Tracé du schéma de convergence du hero */
.draw{
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: draw 1.5s cubic-bezier(.3,.7,.3,1) forwards;
}
.draw--2{ animation-delay: .18s }
.draw--3{ animation-delay: .36s }
@keyframes draw{ to{ stroke-dashoffset: 0 } }

.pop{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop .6s cubic-bezier(.2,1.4,.4,1) 1.05s forwards;
}
@keyframes pop{ from{ opacity:0; transform: scale(.2) } to{ opacity:1; transform: scale(1) } }

.fade-late{ opacity: 0; animation: fade-in .8s ease 1.35s forwards }
@keyframes fade-in{ to{ opacity: 1 } }

.halo{
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 3.6s ease-out 1.8s infinite;
}
@keyframes halo{
  0%   { opacity: .5; transform: scale(1) }
  70%,
  100% { opacity: 0;  transform: scale(2.4) }
}

:focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto }
  .reveal, .draw, .pop, .fade-late, .halo{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .svc:hover{ transform: none }
  .login-card:hover img{ transform: none }
  .shot:hover .shot__img{ transform: none }
}

@media print{
  .site-header, .nav-mobile, .contours, .login-card{ display: none }
  body{ background: #fff }
  .section{ padding-block: 24px }
}