/* ===========================================================================
   n° 699 — la feuille de style des sites de presentation de Clip Express et
   de Sakira Captions.

   UNE SEULE FEUILLE POUR LES DEUX PRODUITS. Ils ne sont pas deux entreprises :
   ce sont deux faces du meme service (le meme processus, derriere deux noms).
   Deux feuilles auraient diverge a la premiere retouche, et le parc porte deja
   assez de connaissances recopiees a plusieurs endroits (D-04).

   POURQUOI PAS CELLE DE SONGS. La politique de securite du contenu servie ici
   est `style-src 'self'` : une feuille chargee depuis songs.sakira.fr serait
   bloquee par le navigateur. La recopier aurait fait une deuxieme copie a
   maintenir. Celle-ci est donc ecrite pour ces pages, dans la meme famille
   visuelle -- noir et or -- sans partager une ligne avec l'autre.
   =========================================================================== */

:root {
  color-scheme: dark;
  --fond: #0b0a08;
  --fond-carte: #16150f;
  --bord: #2a2724;
  --texte: #f4f1ea;
  --texte-doux: #a29a90;
  --or: #e8b800;
  --or-sombre: #17150f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* --- Navigation --------------------------------------------------------- */
.nav {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--bord);
}
.nav-marque { font-weight: 800; letter-spacing: -.01em; font-size: 17px; text-decoration: none; color: var(--texte); }
.nav-marque span { color: var(--or); }
.nav-liens { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.nav-liens a { color: var(--texte-doux); text-decoration: none; font-size: 14px; }
.nav-liens a:hover, .nav-liens a.actif { color: var(--texte); }
.nav-cta {
  background: var(--or); color: var(--or-sombre); border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: 14px; text-decoration: none;
}

/* --- Hero --------------------------------------------------------------- */
.hero { padding: 72px 0 56px; display: grid; gap: 26px; max-width: 760px; }
.hero .oeil { color: var(--or); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.hero h1 { margin: 0; font-size: clamp(34px, 6vw, 56px); line-height: 1.08; letter-spacing: -.02em; }
.hero h1 em { color: var(--or); font-style: normal; }
.hero p { margin: 0; font-size: 18px; color: var(--texte-doux); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bouton {
  background: var(--or); color: var(--or-sombre); border-radius: 999px;
  padding: 12px 24px; font-weight: 700; text-decoration: none; font-size: 15px;
}
.bouton.second { background: transparent; color: var(--texte); border: 1px solid var(--bord); }

/* --- Sections ----------------------------------------------------------- */
.section { padding: 56px 0; border-top: 1px solid var(--bord); }
.section h2 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.015em; }
.section > p.chapeau { margin: 0 0 30px; color: var(--texte-doux); max-width: 680px; }

.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.carte {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 16px; padding: 22px;
}
.carte h3 { margin: 0 0 8px; font-size: 17px; }
.carte p { margin: 0; color: var(--texte-doux); font-size: 14px; }

/* --- La chaine de creation ---------------------------------------------- */
/* Elle est numerotee et elle se lit de haut en bas : l'ordre EST l'information
   (D-02). Une grille libre laisserait croire que les etapes sont
   interchangeables ; elles ne le sont pas, chacune a besoin de la precedente. */
.etapes { display: grid; gap: 12px; counter-reset: etape; }
.etape {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 14px; padding: 18px 20px;
}
.etape::before {
  counter-increment: etape; content: counter(etape);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--or); color: var(--or-sombre); font-weight: 800; font-size: 14px;
}
.etape h3 { margin: 0 0 4px; font-size: 16px; }
.etape p { margin: 0; color: var(--texte-doux); font-size: 14px; }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  border-top: 1px solid var(--bord); padding: 34px 0 48px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  color: var(--texte-doux); font-size: 13px;
}
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--texte); }
.pied .famille { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Texte long (conditions, confidentialite) --------------------------- */
.texte { max-width: 720px; padding: 48px 0; }
.texte h1 { font-size: 32px; margin: 0 0 8px; }
.texte h2 { font-size: 19px; margin: 30px 0 8px; }
.texte p, .texte li { color: var(--texte-doux); }
.texte .maj { color: var(--texte-doux); font-size: 13px; margin: 0 0 26px; }

@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav-liens { margin-left: 0; width: 100%; order: 3; }
  .hero { padding: 44px 0 36px; }
}