/* Solstice · charte Golden Hour (v1.1, 04/11/2026 : Inter pour les titres et le texte) — couleurs, polices et formes pour le site, le back-office et les documents.
   Source unique : toute interface Solstice importe ce fichier au lieu de recopier des valeurs. */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap");

:root {
  /* Couleurs de marque */
  --sol-mangue: #FFB347;
  --sol-corail: #FF6B6B;
  --sol-lilas: #7B4BA0;
  --sol-nuit: #2A1A3A;
  --sol-ecume: #FFF6EE;
  --sol-blanc: #FFFFFF;

  /* Dégradé officiel (toujours de haut en bas ou à 160°, jamais inversé) */
  --sol-degrade: linear-gradient(160deg, #FFB347 0%, #FF6B6B 55%, #7B4BA0 100%);
  --sol-degrade-vertical: linear-gradient(180deg, #FFB347 0%, #FF6B6B 50%, #7B4BA0 100%);
  --sol-degrade-ligne: linear-gradient(90deg, #FFB347, #FF6B6B, #7B4BA0);
  --sol-lueur: linear-gradient(180deg, #FFF6EE 0%, #FFE3D3 100%);

  /* Rôles (interfaces) */
  --fond: var(--sol-ecume);
  --surface: var(--sol-blanc);
  --texte: var(--sol-nuit);
  --texte-doux: #7A6170;
  --trait: #F2DCCB;
  --action: var(--sol-nuit);
  --action-texte: var(--sol-blanc);
  --accent: var(--sol-corail);
  --succes: #2E9E6B;
  --alerte: #E0A100;
  --erreur: #D64545;

  /* Polices : Inter pour tout (titres et texte), choix de Hamza du 04/11/2026.
     Syne n'est utilisée que dans le logo, déjà vectorisé : ne jamais l'employer pour du texte. */
  --police-titre: "Inter", Arial, "Segoe UI", sans-serif;
  --police-texte: "Inter", Arial, "Segoe UI", sans-serif;
  --titre-graisse: 700;
  --titre-approche: -0.025em;

  /* Formes */
  --rayon: 14px;
  --rayon-carte: 22px;
  --rayon-bouton: 999px;
  --ombre: 0 10px 30px -12px rgba(42, 26, 58, .25);
}

/* Site solstice.ma — charte Golden Hour (brand/tokens.css est collé avant ce fichier par site/build.mjs). */
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--fond); color:var(--texte); font:17px/1.6 var(--police-texte); -webkit-font-smoothing:antialiased }
img { max-width:100%; display:block }
a { color:inherit }
.wrap { width:min(1180px, 100% - 48px); margin-inline:auto }
h1, h2, h3 { font-family:var(--police-titre); font-weight:var(--titre-graisse); letter-spacing:var(--titre-approche); margin:0; line-height:1.02 }
h1 { font-size:clamp(2.1rem, 7.4vw, 5.2rem); overflow-wrap:break-word }
h2 { font-size:clamp(1.7rem, 5.4vw, 3.1rem); overflow-wrap:break-word }
h3 { font-size:1.3rem; line-height:1.15 }
.surtitre { font:700 .78rem var(--police-texte); letter-spacing:.16em; text-transform:uppercase; color:var(--sol-corail); margin:0 0 14px }
.chapeau { font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--texte-doux); max-width:680px; margin:18px 0 0 }
.btn { display:inline-flex; align-items:center; gap:.5em; padding:.85em 1.4em; border-radius:var(--rayon-bouton); font-weight:700; text-decoration:none; border:1.5px solid var(--sol-nuit); cursor:pointer; font-size:1rem; font-family:inherit; white-space:nowrap; transition:transform .15s, box-shadow .15s }
.btn:hover { transform:translateY(-2px); box-shadow:var(--ombre) }
.btn-plein { background:var(--sol-nuit); color:#fff }
.btn-creux { background:transparent; color:var(--sol-nuit) }
.btn-blanc { background:#fff; color:var(--sol-nuit); border-color:#fff }

/* En-tête */
.entete { position:sticky; top:0; z-index:20; background:rgba(255,246,238,.88); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--trait) }
.entete .wrap { display:flex; align-items:center; gap:28px; height:76px }
.entete .logo img { height:34px; width:auto }
.entete nav { display:flex; gap:26px; margin-left:auto }
.entete nav a { text-decoration:none; font-weight:500; color:var(--texte-doux); white-space:nowrap }
.entete nav a:hover, .entete nav a[aria-current="page"] { color:var(--texte) }
.entete nav a[aria-current="page"] { box-shadow:inset 0 -3px 0 var(--sol-corail) }
.entete .langue { font:700 .8rem var(--police-texte); letter-spacing:.08em; text-decoration:none; padding:.4em .7em; border:1px solid var(--trait); border-radius:999px; color:var(--texte-doux) }
@media (max-width:980px) {
  .entete .wrap { flex-wrap:wrap; height:auto; padding:14px 0 0; gap:12px 18px }
  .entete .langue { margin-left:auto }
  .entete nav { order:3; width:100%; margin:0; overflow-x:auto; padding:6px 0 10px; gap:20px; scrollbar-width:none }
}
@media (max-width:520px) { .entete .btn { display:none } }

/* Héros */
.heros { position:relative; overflow:hidden; padding:110px 0 150px }
.heros.accueil { background:var(--sol-degrade-vertical) }
.heros.accueil .chapeau { color:var(--sol-nuit); opacity:.85 }
.heros.accueil .surtitre { color:var(--sol-nuit) }
.heros.page { background:var(--sol-lueur); padding:90px 0 110px }
.heros .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px }
.bandes { position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none }
.bandes i { position:absolute; left:0; right:0; background:var(--fond) }
.bandes i:nth-child(1) { bottom:46px; height:6px } .bandes i:nth-child(2) { bottom:26px; height:10px } .bandes i:nth-child(3) { bottom:0; height:16px }
.heros.page .soleil { position:absolute; right:-70px; top:50px; width:min(380px, 32vw); opacity:.95 }
.heros.page h1, .heros.page .chapeau { max-width:min(760px, 68%) }
@media (max-width:760px) { .heros.page h1, .heros.page .chapeau { max-width:none } }
@media (max-width:760px) { .heros.page .soleil { display:none } }

/* Sections */
.bloc { padding:96px 0 }
.bloc.sombre { background:var(--sol-nuit); color:var(--sol-ecume) }
.bloc.sombre .chapeau { color:#CDBFD8 }
.bloc.sombre .surtitre { color:var(--sol-mangue) }
.tete { margin-bottom:44px }
.grille3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px }
@media (max-width:900px) { .grille3 { grid-template-columns:1fr } }
.carte { background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon-carte); padding:30px; display:grid; gap:12px; align-content:start; position:relative }
.carte p { margin:0; color:var(--texte-doux) }
a.carte { text-decoration:none; transition:transform .18s, box-shadow .18s }
a.carte:hover { transform:translateY(-4px); box-shadow:var(--ombre) }
.carte .fleche { margin-top:10px; font-weight:700; color:var(--sol-nuit) }
.carte .filet { position:absolute; left:30px; right:30px; top:0; height:4px; border-radius:0 0 4px 4px; background:var(--sol-degrade-ligne) }
.carte .num { font:700 .8rem var(--police-titre); color:var(--sol-lilas); letter-spacing:.04em }

/* Chiffres */
.chiffres { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px }
.chiffres div { border-left:3px solid var(--sol-corail); padding-left:18px }
.chiffres b { display:block; font:700 clamp(2rem, 3.4vw, 2.8rem)/1 var(--police-titre); letter-spacing:-.03em; color:var(--sol-mangue); font-feature-settings:"tnum" }
.chiffres span { color:#CDBFD8 }
@media (max-width:820px) { .chiffres { grid-template-columns:1fr 1fr } }

/* Logos clients */
.clients { padding:46px 0 40px; border-bottom:1px solid var(--trait) }
.clients .surtitre { text-align:center; color:var(--texte-doux); letter-spacing:.12em }
.defile { overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); margin-top:18px }
.piste { display:flex; gap:18px; width:max-content; animation:defile 60s linear infinite; padding:0; margin:0; list-style:none }
.defile:hover .piste { animation-play-state:paused }
.piste li { width:150px; height:74px; flex:none; display:grid; place-items:center; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); padding:10px 14px; text-align:center }
.piste img { max-height:38px; width:auto; filter:grayscale(1); opacity:.75 }
.piste b { font:700 .82rem/1.15 var(--police-titre); letter-spacing:-.01em }
@keyframes defile { to { transform:translateX(calc(-50% - 9px)) } }
@media (prefers-reduced-motion:reduce) { .piste { animation:none } }

/* Formats */
.offre { background:var(--surface); border:1px solid var(--trait); border-radius:var(--rayon-carte); padding:30px; display:grid; gap:10px; align-content:start }
.offre .duree { font:700 .75rem var(--police-texte); letter-spacing:.14em; text-transform:uppercase; color:var(--sol-lilas) }
.offre p { margin:0; color:var(--texte-doux) }
.offre.vedette { background:var(--sol-nuit); color:var(--sol-ecume); border-color:var(--sol-nuit) }
.offre.vedette p { color:#CDBFD8 } .offre.vedette .duree { color:var(--sol-mangue) }
.note { text-align:center; margin:34px 0 0; font-weight:700; font-size:1.1rem }

/* Plateforme */
.deux { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:22px }
@media (max-width:900px) { .deux { grid-template-columns:1fr } }
.liste { margin:0; padding:0; list-style:none; display:grid; gap:14px }
.liste li { padding-left:22px; position:relative; color:var(--texte-doux) }
.liste li b { color:var(--texte) }
.liste li::before { content:""; position:absolute; left:0; top:.7em; width:10px; height:3px; border-radius:3px; background:var(--sol-corail) }
.meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.tag { font:700 .7rem var(--police-texte); letter-spacing:.1em; text-transform:uppercase; padding:.3em .8em; border-radius:999px; background:var(--sol-ecume); border:1px solid var(--trait) }
.quand { font-size:.85rem; color:var(--texte-doux) }
.methode { border-left:3px solid var(--sol-corail); padding-left:14px; font-size:.95rem }

/* Résultats */
.kpi { margin:4px 0 0; line-height:1.1 }
.kpi strong { display:block; font:700 2.4rem var(--police-titre); letter-spacing:-.03em; color:var(--sol-lilas) }
.kpi span { font-weight:700; color:var(--texte) }
.carte h4 { margin:0; font-size:.98rem }
.petite-note { margin:26px 0 0; font-size:.88rem; color:var(--texte-doux) }

/* Fondateurs */
.fondateurs { display:grid; grid-template-columns:1fr 1fr; gap:22px }
@media (max-width:900px) { .fondateurs { grid-template-columns:1fr } }
.personne { display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:start }
.personne img { width:120px; height:120px; object-fit:cover; border-radius:999px 999px 22px 22px }
.personne .role { color:var(--sol-lilas); font-weight:700; margin:4px 0 10px }
.personne p { margin:0; color:var(--texte-doux); font-size:.96rem }
@media (max-width:520px) { .personne { grid-template-columns:1fr } }

/* Contact */
.contact { position:relative; overflow:hidden; background:var(--sol-nuit); color:var(--sol-ecume); padding:96px 0 120px }
.contact .chapeau { color:#CDBFD8 } .contact .surtitre { color:var(--sol-mangue) }
.contact .deux { align-items:start }
.contact .direct { display:grid; gap:10px; margin-top:28px }
.contact .direct a { color:#fff; font-weight:700; text-decoration:none; font-size:1.15rem }
.formulaire { background:#fff; color:var(--texte); border-radius:var(--rayon-carte); padding:28px; display:grid; gap:14px }
.formulaire label { display:grid; gap:6px; font-weight:700; font-size:.9rem }
.formulaire input, .formulaire select, .formulaire textarea { font:inherit; font-weight:400; padding:.75em .9em; border:1px solid var(--trait); border-radius:var(--rayon); background:var(--sol-ecume); color:var(--texte) }
.formulaire textarea { min-height:110px; resize:vertical }
.formulaire .ligne { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:520px) { .formulaire .ligne { grid-template-columns:1fr } }
.formulaire .boutons { display:flex; gap:10px; flex-wrap:wrap }
.formulaire .aide { margin:0; font-size:.82rem; color:var(--texte-doux) }
.contact .bandes i { background:var(--sol-corail) }
.contact .bandes { opacity:.9 }
.contact .bandes i:nth-child(1) { background:var(--sol-mangue) } .contact .bandes i:nth-child(3) { background:var(--sol-lilas) }

/* Pied */
.pied { padding:40px 0; font-size:.9rem; color:var(--texte-doux) }
.pied .wrap { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.pied img { height:26px; width:auto }
.pied nav { display:flex; gap:18px; flex-wrap:wrap }
.pied a { text-decoration:none }

/* WhatsApp flottant */
.wa { position:fixed; right:18px; bottom:18px; z-index:30; display:inline-flex; gap:8px; align-items:center; padding:12px 16px; border-radius:999px; background:#25D366; color:#0B3D21; font-weight:700; text-decoration:none; box-shadow:0 12px 30px -10px rgba(0,0,0,.4) }
.wa svg { width:22px; height:22px }
@media (max-width:520px) { .wa span { display:none } }