/* ==========================================================================
   soPharm — feuille de style commune
   Reprend le systeme graphique valide : ampoule a croix, demi-espace,
   Bodoni Moda pour les titres, Poppins pour le nom de marque, Inter pour le texte.
   NE PAS MODIFIER sans accord : ce fichier est partage par les 9 pages.
   ========================================================================== */

:root{
  /* --- marque --- */
  --demi:.13em;                 /* demi-espace entre "so" et "Pharm" */

  /* --- fonds et texte --- */
  --noir:#101017;
  --noir-2:#191922;
  --ligne:#2A2A35;
  --texte:#EDE9F0;
  --texte-doux:#A29BAC;
  --rayon:22px;

  /* --- les 8 couleurs de section (planche "Vue 2") --- */
  --c-photo:#E23E4E;
  --c-produits:#4FBE87;
  --c-substances:#F5A8BC;
  --c-conseil:#4E8FE8;
  --c-articles:#F0C230;
  --c-actualite:#6EB3EE;
  --c-gestion:#F3C170;
  --c-compte:#9B82DE;

  /* --- familles --- */
  --titre:"Bodoni Moda","Bodoni MT",Didot,"Playfair Display",Georgia,serif;
  --marque:Poppins,"Segoe UI",system-ui,sans-serif;
  --courant:Inter,system-ui,"Segoe UI",sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; }
html.splash-actif{ overflow:hidden; }

body{
  background:var(--noir);
  color:var(--texte);
  font:400 16px/1.6 var(--courant);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  /* colonne : le pied reste colle en bas meme quand la page est courte */
  display:flex;
  flex-direction:column;
}

a{color:inherit}

/* ==========================================================================
   Le nom de marque  ("so" leger + "Pharm" gras, separes par le demi-espace)
   ========================================================================== */
.mot{
  font-family:var(--marque);
  font-weight:300;
  color:#fff;
  line-height:1;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.mot .so{margin-right:var(--demi)}
.mot b{font-weight:600}

/* ==========================================================================
   VUE 1 — l'ecran d'ouverture
   Couleur tiree au sort par sopharm.js parmi les 8 aplats profonds.
   Disparait par le bas : le bord inferieur remonte jusqu'en haut.
   ========================================================================== */
.splash{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  align-content:center;
  gap:30px;
  background:var(--splash,#2F9463);
  clip-path:inset(0 0 0 0);
  transition:clip-path 900ms cubic-bezier(.76,0,.24,1);
  will-change:clip-path;
}
.splash.part{clip-path:inset(0 0 100% 0);pointer-events:none}
.splash__logo{
  width:clamp(96px,13vw,180px);
  height:auto;
  color:#fff;
  display:block;
}
.splash .mot{font-size:clamp(30px,4.2vw,52px)}

@media (prefers-reduced-motion:reduce){
  .splash{transition:none}
}

/* ==========================================================================
   La barre des 8 sections — identique sur les 9 pages
   ========================================================================== */
.barre{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:20px;
  height:64px;
  padding:0 18px;
  background:var(--noir);
  border-bottom:1px solid var(--ligne);
}
.barre__marque{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  text-decoration:none;
}
.barre__marque svg{width:26px;height:26px;color:#fff;display:block}
.barre__marque .mot{font-size:19px}

.onglets{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}

.onglet{
  --c:var(--texte-doux);
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--ligne);
  background:transparent;
  color:var(--texte-doux);
  font:600 13.5px/1 var(--courant);
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.onglet::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--c);
  flex:0 0 auto;
}
.onglet:hover{
  color:#fff;
  border-color:var(--c);
}
.onglet[aria-current="page"]{
  background:var(--c);
  border-color:var(--c);
  color:#101017;
}
.onglet[aria-current="page"]::before{background:#101017;opacity:.35}

/* ==========================================================================
   VUE 2 — la grille des 8 univers (page d'accueil)
   ========================================================================== */
.accueil{flex:1 0 auto;padding:52px 20px 90px}

/* Plein ecran : les 8 univers occupent toute la fenetre, sans barre ni pied.
   C'est la page d'accueil telle qu'elle a ete validee sur la planche Vue 2. */
.accueil--plein{padding:0}
.accueil--plein .grille{
  max-width:none;
  border-radius:0;
  height:100vh;
  height:100dvh;          /* evite la barre d'adresse mobile qui rogne l'ecran */
  grid-template-rows:repeat(2,1fr);
}
.accueil--plein .tuile{aspect-ratio:auto}

.grille{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1240px;
  margin:0 auto;
  border-radius:var(--rayon);
  overflow:hidden;
}
.tuile{
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  background:var(--c);
  text-decoration:none;
  position:relative;
  transition:filter .22s ease;
}
.tuile span{
  font:900 clamp(24px,3vw,52px)/1 var(--titre);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.20);
  transition:transform .22s ease;
}
.tuile:hover{filter:brightness(1.07)}
.tuile:hover span{transform:scale(1.045)}
.tuile:focus-visible{outline:3px solid #fff;outline-offset:-6px}

@media (max-width:900px){
  .grille{grid-template-columns:repeat(2,1fr)}
  /* en plein ecran : 2 colonnes sur 4 lignes remplissent toujours la fenetre */
  .accueil--plein .grille{grid-template-rows:repeat(4,1fr)}
}

/* ==========================================================================
   Les 8 pages de section
   ========================================================================== */
.hero{
  background:var(--c);
  color:var(--ink,#101017);
  padding:56px 28px 48px;
}
.hero__dedans{max-width:1100px;margin:0 auto}
.hero h1{
  font:900 clamp(36px,6vw,72px)/1 var(--titre);
  letter-spacing:-.02em;
}
.hero p{
  margin-top:12px;
  max-width:60ch;
  font-size:17px;
  opacity:.78;
}

.contenu{
  flex:1 0 auto;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:46px 28px 100px;
}
.contenu h2{font:600 26px/1.25 var(--courant);color:#fff;margin:34px 0 12px}
.contenu h3{font:600 19px/1.3 var(--courant);color:#fff;margin:26px 0 8px}
.contenu p{margin:0 0 14px;color:var(--texte)}
.contenu ul,.contenu ol{margin:0 0 16px 22px}
.contenu li{margin:0 0 6px}
.contenu a{color:var(--c);text-underline-offset:3px}

/* Bloc temoin : a supprimer par l'agent qui remplit la page */
.a-remplir{
  border:1px dashed var(--ligne);
  border-radius:14px;
  padding:44px 30px;
  text-align:center;
  color:var(--texte-doux);
}
.a-remplir strong{color:#fff;display:block;margin-bottom:6px;font-weight:600}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{
  margin-top:auto;
  border-top:1px solid var(--ligne);
  padding:26px 28px 40px;
  color:var(--texte-doux);
  font-size:13.5px;
}
.pied__dedans{max-width:1100px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}