/* =====================================================================
   HOLA SYSTEM · le socle visuel commun de l'ecosysteme
   ---------------------------------------------------------------------
   Un seul fichier, aucune dependance, aucune ressource distante.
   Il ne contient AUCUNE couleur de marque : chaque produit charge
   ensuite son fichier de marque (marques/*.css) qui redefinit la
   couche --br-*, et rien d'autre.

   Ordre de chargement obligatoire :
     1. hola-system.css
     2. marques/<produit>.css
     3. la feuille propre au produit

   Typographie de famille : Poppins (titres) + Inter (texte).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS
   ------------------------------------------------------------------ */
:root{

  /* --- familles ---------------------------------------------------- */
  --f-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:var(--f-text);

  /* --- echelle typographique --------------------------------------
     Un seul rapport, tenu partout. Les tailles fluides se calent sur
     une largeur de reference de 1280 px.                              */
  --t-display: clamp(40px, 5.4vw, 66px);
  --t-h1:      clamp(32px, 3.8vw, 46px);
  --t-h2:      clamp(24px, 2.4vw, 32px);
  --t-h3:      20px;
  --t-h4:      17px;
  --t-lead:    17px;
  --t-body:    15.5px;
  --t-small:   13.5px;
  --t-label:   12px;

  --lh-display:1.02;
  --lh-title:  1.14;
  --lh-body:   1.62;
  --lh-tight:  1.4;

  --ls-display:-.035em;
  --ls-title:  -.025em;
  --ls-body:   -.006em;
  --ls-label:  .06em;

  --w-regular:400;
  --w-medium: 500;
  --w-semi:   600;
  --w-bold:   700;

  /* --- espacement, grille de 8 -------------------------------------
     4 et 12 sont les deux seules valeurs hors grille tolerees, elles
     servent aux ajustements optiques a l'interieur d'un composant.    */
  --sp-4:4px;    --sp-8:8px;    --sp-12:12px;  --sp-16:16px;
  --sp-24:24px;  --sp-32:32px;  --sp-48:48px;  --sp-64:64px;
  --sp-80:80px;  --sp-96:96px;  --sp-128:128px;

  /* Roles d'espacement : on nomme la fonction, pas la valeur. */
  --gap-label-titre:   var(--sp-8);
  --gap-titre-texte:   var(--sp-12);
  --gap-dans-carte:    var(--sp-16);
  --gap-entre-cartes:  var(--sp-24);
  --gap-entre-blocs:   var(--sp-48);
  --gap-entre-sections:clamp(56px, 7vw, 96px);

  /* --- largeurs ---------------------------------------------------- */
  --w-page:1280px;
  --w-texte:70ch;
  --pad-page:40px;
  --pad-page-mobile:20px;

  /* --- rayons, avec regle d'imbrication -----------------------------
     Rayon interieur = rayon exterieur moins la marge interne.         */
  --r-xs:10px;    /* pastilles, petits marqueurs   */
  --r-sm:12px;    /* petits blocs                  */
  --r-md:14px;    /* champs, boutons               */
  --r-lg:16px;    /* boutons larges, images        */
  --r-card:22px;  /* cartes                        */
  --r-xl:30px;    /* grandes surfaces, bandeaux    */
  --r-pill:999px;

  /* --- neutres, une seule rampe ------------------------------------ */
  --n-0:#FFFFFF;
  --n-25:#FBFBFC;
  --n-50:#F6F7F9;
  --n-100:#EFF1F4;
  --n-200:#E3E6EB;
  --n-300:#CDD2DA;
  --n-400:#9BA3AF;
  --n-500:#6B7280;
  --n-600:#4B5563;
  --n-700:#374151;
  --n-800:#232833;
  --n-900:#14171F;

  /* Roles */
  --fond:var(--n-0);
  --fond-2:var(--n-25);
  --surface:var(--n-0);
  --surface-2:var(--n-50);
  --trait:var(--n-200);
  --trait-fort:var(--n-300);
  --encre:var(--n-900);
  --encre-2:var(--n-700);
  --doux:var(--n-500);
  --pale:var(--n-400);

  /* --- etats de sens ----------------------------------------------- */
  --ok:#12805C;      --ok-fond:#E9F6F0;   --ok-trait:#BFE5D6;
  --alerte:#9A6510;  --alerte-fond:#FDF4E4; --alerte-trait:#F0DDB6;
  --refus:#B3261E;   --refus-fond:#FCECEA; --refus-trait:#F1CBC7;
  --etoile:#F5A524;

  /* --- profondeur, trois niveaux, pas un de plus -------------------- */
  --el-1:0 1px 2px rgba(20,23,31,.06);
  --el-2:0 2px 4px -2px rgba(20,23,31,.08), 0 10px 24px -12px rgba(20,23,31,.16);
  --el-3:0 8px 16px -8px rgba(20,23,31,.10), 0 28px 56px -24px rgba(20,23,31,.22);

  /* --- mouvement ---------------------------------------------------- */
  --ease:cubic-bezier(.2,.8,.25,1);
  --ease-doux:cubic-bezier(.4,0,.2,1);
  --d-court:120ms;
  --d-normal:200ms;
  --d-long:340ms;
  --leve:-2px;   /* le seul deplacement au survol, partout */

  /* --- couche de marque, valeurs neutres de secours ------------------
     Un fichier marques/*.css les remplace toutes.                     */
  --br-wash:var(--n-50);
  --br-100:var(--n-100);
  --br-200:var(--n-200);
  --br-400:var(--n-400);
  --br-500:var(--n-600);
  --br-600:var(--n-700);
  --br-ink:var(--n-800);
  --br-sur-fond:var(--n-0);       /* la couleur du texte POSE sur --br-500 */
  --br-grad:linear-gradient(100deg,var(--n-700),var(--n-500));
  --br-anneau:rgba(20,23,31,.18); /* halo de focus */
  --br-ombre:rgba(20,23,31,.20);  /* ombre teintee du bouton principal */
}

/* ---------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-text);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:var(--w-semi);
  line-height:var(--lh-title);
  letter-spacing:var(--ls-title);
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;padding:0;cursor:pointer}
::selection{background:var(--br-100);color:var(--encre)}

/* Le focus se voit toujours, et il porte la couleur de la marque. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--br-500);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

/* Une seule philosophie de mouvement, et un seul interrupteur. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------------------
   3. MISE EN PAGE
   ------------------------------------------------------------------ */
.hs-page{max-width:var(--w-page);margin:0 auto;padding-inline:var(--pad-page)}
@media (max-width:640px){.hs-page{padding-inline:var(--pad-page-mobile)}}

.hs-section{padding-block:var(--gap-entre-sections)}
.hs-section--serre{padding-block:var(--sp-48)}

/* En-tete de section : label, titre, phrase. Trois espaces differents. */
.hs-entete{max-width:var(--w-texte)}
.hs-entete .hs-label{margin-bottom:var(--gap-label-titre)}
.hs-entete h2+p,.hs-entete h1+p{margin-top:var(--gap-titre-texte)}

.hs-label{
  display:inline-block;
  font-size:var(--t-label);
  font-weight:var(--w-semi);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--br-ink);
}
.hs-lead{font-size:var(--t-lead);line-height:var(--lh-body);color:var(--doux);max-width:56ch}
.hs-small{font-size:var(--t-small);color:var(--doux)}

/* La signature editoriale : UN mot du titre en degrade, jamais plus. */
.hs-grad{
  background:var(--br-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------------------------------------------------------------------
   4. BOUTONS
   ------------------------------------------------------------------ */
.hs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  font-family:var(--f-text);
  font-size:14.5px;
  font-weight:var(--w-semi);
  letter-spacing:-.008em;
  line-height:1;
  padding:12px 20px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux),
             color var(--d-court) var(--ease-doux),
             box-shadow var(--d-normal) var(--ease),
             transform var(--d-normal) var(--ease);
}
.hs-btn svg{width:17px;height:17px;flex:none}
.hs-btn:disabled,.hs-btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;
}

/* Principal : la seule surface pleine de marque de la page. */
.hs-btn--primaire{
  background:var(--br-500);
  color:var(--br-sur-fond);
  box-shadow:0 1px 2px var(--br-ombre);
}
.hs-btn--primaire:hover:not(:disabled){
  background:var(--br-600);
  transform:translateY(var(--leve));
  box-shadow:0 8px 20px -8px var(--br-ombre);
}
.hs-btn--primaire:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px var(--br-ombre)}

/* Secondaire : le contour, pour l'action de second rang. */
.hs-btn--secondaire{
  background:var(--surface);
  color:var(--encre);
  border-color:var(--trait-fort);
}
.hs-btn--secondaire:hover:not(:disabled){border-color:var(--encre);background:var(--surface-2)}
.hs-btn--secondaire:active:not(:disabled){background:var(--n-100)}

/* Fantome : dans une barre, une carte, un tableau. */
.hs-btn--fantome{background:transparent;color:var(--encre-2)}
.hs-btn--fantome:hover:not(:disabled){background:var(--surface-2);color:var(--encre)}

/* Destructif, rare. */
.hs-btn--danger{background:var(--refus);color:#fff}
.hs-btn--danger:hover:not(:disabled){filter:brightness(.92);transform:translateY(var(--leve))}

/* Tailles */
.hs-btn--sm{padding:8px 14px;font-size:13.5px;border-radius:var(--r-sm)}
.hs-btn--lg{padding:15px 26px;font-size:15.5px;border-radius:var(--r-lg)}

/* Bouton icone : carre, jamais un glyphe nu, toujours un aria-label. */
.hs-btn-icone{
  width:40px;height:40px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  color:var(--encre-2);
  border:1px solid transparent;
  transition:background var(--d-court) var(--ease-doux),color var(--d-court) var(--ease-doux);
}
.hs-btn-icone svg{width:20px;height:20px}
.hs-btn-icone:hover{background:var(--surface-2);color:var(--encre)}
.hs-btn-icone--contour{border-color:var(--trait)}

/* ---------------------------------------------------------------------
   5. CHAMPS
   ------------------------------------------------------------------ */
.hs-champ{display:block}
.hs-champ>span{
  display:block;
  font-size:var(--t-small);
  font-weight:var(--w-medium);
  color:var(--encre-2);
  margin-bottom:var(--sp-8);
}
.hs-input,.hs-select,.hs-textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--trait-fort);
  border-radius:var(--r-md);
  padding:11px 14px;
  font-size:var(--t-body);
  color:var(--encre);
  transition:border-color var(--d-court) var(--ease-doux),box-shadow var(--d-court) var(--ease-doux);
}
.hs-input::placeholder,.hs-textarea::placeholder{color:var(--pale)}
.hs-input:hover,.hs-select:hover{border-color:var(--n-400)}
.hs-input:focus-visible,.hs-select:focus-visible,.hs-textarea:focus-visible{
  outline:none;
  border-color:var(--br-500);
  box-shadow:0 0 0 3px var(--br-anneau);
}
.hs-input:disabled,.hs-select:disabled{background:var(--surface-2);color:var(--pale);cursor:not-allowed}
.hs-input[aria-invalid="true"]{border-color:var(--refus);box-shadow:0 0 0 3px var(--refus-fond)}
.hs-aide{font-size:var(--t-small);color:var(--doux);margin-top:var(--sp-8)}
.hs-erreur{font-size:var(--t-small);color:var(--refus);margin-top:var(--sp-8)}

/* Champ de recherche : l'icone dedans, le champ garde son rayon. */
.hs-recherche{
  display:flex;align-items:center;gap:var(--sp-12);
  background:var(--surface);
  border:1px solid var(--trait-fort);
  border-radius:var(--r-md);
  padding:0 14px;
}
.hs-recherche:focus-within{border-color:var(--br-500);box-shadow:0 0 0 3px var(--br-anneau)}
.hs-recherche svg{width:18px;height:18px;color:var(--pale);flex:none}
.hs-recherche input{flex:1;border:none;outline:none;background:transparent;padding:12px 0;font-size:var(--t-body)}

/* ---------------------------------------------------------------------
   6. CARTES
   Trois matieres, jamais cumulees : le trait, la teinte, l'image.
   ------------------------------------------------------------------ */
.hs-carte{
  background:var(--surface);
  border-radius:var(--r-card);
  transition:transform var(--d-normal) var(--ease),
             box-shadow var(--d-normal) var(--ease),
             border-color var(--d-court) var(--ease-doux);
}
.hs-carte--trait{border:1px solid var(--trait);padding:var(--sp-24)}
.hs-carte--trait:hover{border-color:var(--trait-fort);box-shadow:var(--el-1)}
.hs-carte--teinte{background:var(--br-wash);border:1px solid var(--br-100);padding:var(--sp-24)}
.hs-carte--posee{box-shadow:var(--el-2);padding:var(--sp-24)}
.hs-carte--posee:hover{box-shadow:var(--el-3);transform:translateY(var(--leve))}
.hs-carte--nue{background:transparent}

/* Carte a image : c'est l'image qui porte la carte, pas une ombre. */
.hs-media{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--surface-2);
  aspect-ratio:4/3;
}
.hs-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-long) var(--ease)}
.hs-carte--nue:hover .hs-media img,a:hover .hs-media img{transform:scale(1.04)}
.hs-media--large{aspect-ratio:16/9}
.hs-media--portrait{aspect-ratio:3/4}
/* Voile de lecture, uniquement quand du texte se pose sur l'image. */
.hs-media--texte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,12,17,.55));
}
.hs-media .hs-sur-image{position:absolute;left:var(--sp-12);bottom:var(--sp-12);z-index:2;color:#fff}

/* ---------------------------------------------------------------------
   7. PASTILLES, ETIQUETTES, FILTRES
   ------------------------------------------------------------------ */
.hs-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:var(--w-semi);line-height:1;
  padding:6px 10px;border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--encre-2);
}
.hs-badge svg{width:13px;height:13px}
.hs-badge--marque{background:var(--br-wash);color:var(--br-ink)}
.hs-badge--ok{background:var(--ok-fond);color:var(--ok)}
.hs-badge--attente{background:var(--alerte-fond);color:var(--alerte)}
.hs-badge--sur-image{background:rgba(255,255,255,.94);color:var(--encre);box-shadow:var(--el-1)}

/* Filtre : un bouton, avec un etat presse lisible sans la couleur seule. */
.hs-filtre{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:var(--w-medium);
  padding:9px 14px;
  border:1px solid var(--trait);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--encre-2);
  transition:border-color var(--d-court) var(--ease-doux),
             background var(--d-court) var(--ease-doux),
             color var(--d-court) var(--ease-doux);
}
.hs-filtre svg{width:15px;height:15px}
.hs-filtre:hover{border-color:var(--trait-fort);color:var(--encre)}
.hs-filtre[aria-pressed="true"]{
  background:var(--br-500);border-color:var(--br-500);color:var(--br-sur-fond);font-weight:var(--w-semi);
}

/* ---------------------------------------------------------------------
   8. EN-TETE
   Le meme composant en deux variantes, pas deux composants.
   ------------------------------------------------------------------ */
.hs-entete-site{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 88%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--d-normal) var(--ease-doux);
}
.hs-entete-site[data-defile="oui"]{border-bottom-color:var(--trait)}
.hs-entete-site .hs-barre{
  display:flex;align-items:center;gap:var(--sp-24);
  height:72px;
}
.hs-logo{
  font-family:var(--f-display);font-size:21px;font-weight:var(--w-semi);
  letter-spacing:-.03em;color:var(--encre);flex:none;
  display:inline-flex;align-items:center;gap:var(--sp-8);
}
.hs-nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.hs-nav a{
  position:relative;
  font-size:14.5px;font-weight:var(--w-medium);
  color:var(--doux);
  padding:9px 14px;border-radius:var(--r-sm);
  transition:color var(--d-court) var(--ease-doux),background var(--d-court) var(--ease-doux);
}
.hs-nav a:hover{color:var(--encre);background:var(--surface-2)}
.hs-nav a[aria-current]{color:var(--encre);font-weight:var(--w-semi)}
.hs-nav a[aria-current]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  border-radius:2px;background:var(--br-500);
}
.hs-actions{display:flex;align-items:center;gap:var(--sp-8);flex:none}

/* Hamburger : deux traits, une transition, aucune decoration. */
.hs-burger{display:none}
.hs-burger span{display:block;width:18px;height:1.8px;border-radius:2px;background:var(--encre);
  transition:transform var(--d-normal) var(--ease),opacity var(--d-court) linear}
.hs-burger span+span{margin-top:5px}
.hs-burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.hs-burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}

.hs-tiroir{
  display:none;
  border-top:1px solid var(--trait);
  padding:var(--sp-16) 0 var(--sp-24);
}
.hs-tiroir a{
  display:block;padding:12px 0;font-size:16px;font-weight:var(--w-medium);
  color:var(--encre);border-bottom:1px solid var(--trait);
}
.hs-tiroir a:last-of-type{border-bottom:none}
.hs-tiroir .hs-btn{width:100%;margin-top:var(--sp-16)}

@media (max-width:900px){
  .hs-entete-site .hs-barre{height:62px;gap:var(--sp-12)}
  .hs-nav{display:none}
  .hs-burger{display:flex;flex-direction:column;justify-content:center}
  .hs-actions{margin-left:auto}
  .hs-entete-site[data-ouvert="oui"] .hs-tiroir{display:block}
}

/* ---------------------------------------------------------------------
   9. GRILLES
   ------------------------------------------------------------------ */
.hs-grille{display:grid;gap:var(--gap-entre-cartes)}
.hs-grille--4{grid-template-columns:repeat(4,1fr)}
.hs-grille--3{grid-template-columns:repeat(3,1fr)}
.hs-grille--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1120px){.hs-grille--4{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .hs-grille--4,.hs-grille--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .hs-grille--4,.hs-grille--3,.hs-grille--2{grid-template-columns:1fr}
}
/* Une rangee qui defile, sur mobile, sans jamais faire defiler la page. */
.hs-rangee{display:flex;gap:var(--sp-12);overflow-x:auto;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hs-rangee::-webkit-scrollbar{display:none}
.hs-rangee>*{scroll-snap-align:start;flex:none}
html,body{overflow-x:clip}

/* ---------------------------------------------------------------------
   10. VIDES ET CHARGEMENTS
   Un vide dit ce qu'il attend. Il n'a pas l'air d'une erreur.
   ------------------------------------------------------------------ */
.hs-vide{
  padding:var(--sp-48) var(--sp-24);
  text-align:center;color:var(--doux);
  border:1px dashed var(--trait);
  border-radius:var(--r-card);
}
.hs-vide strong{display:block;color:var(--encre);font-weight:var(--w-semi);margin-bottom:var(--sp-8)}
.hs-squelette{
  background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 37%,var(--n-100) 63%);
  background-size:400% 100%;
  animation:hs-onde 1.4s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes hs-onde{from{background-position:100% 0}to{background-position:0 0}}

/* ---------------------------------------------------------------------
   11. ENTREE EN SCENE
   Une seule animation d'apparition dans tout l'ecosysteme.
   ------------------------------------------------------------------ */
.hs-apparait{
  opacity:0;transform:translateY(10px);
  animation:hs-monte var(--d-long) var(--ease) forwards;
}
.hs-apparait:nth-child(2){animation-delay:60ms}
.hs-apparait:nth-child(3){animation-delay:120ms}
.hs-apparait:nth-child(4){animation-delay:180ms}
@keyframes hs-monte{to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------
   12. UTILITAIRES MESURES
   ------------------------------------------------------------------ */
.hs-invisible{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hs-lien-marque{color:var(--br-ink);font-weight:var(--w-medium)}
.hs-lien-marque:hover{text-decoration:underline;text-underline-offset:2px}
.hs-nombre{font-variant-numeric:tabular-nums}
.hs-filet{height:1px;background:var(--trait);border:0;margin:0}