/* ==========================================================================
   CORE — Direction artistique (source unique pour l'appli AURA)
   Couleurs tirees UNIQUEMENT des fichiers de marque (dossier Logo / triangle) :
   swatches officiels + echantillons du logo, du triangle et du degrade.
   Regle de securite : les statuts medicaux restent semantiques (rouge = anormal).
   Logo : mot-symbole CORE et monogramme C officiels (PNG dans img/).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Palette officielle CORE (valeurs exactes des fichiers) */
  --noir:#1D1D1B;          /* Noir de marque (swatch) */
  --noir-2:#14140F;
  --cream:#FFFDF4;         /* creme, texte sur sombre (echantillon triangle) */
  --greige:#AFA99D;        /* greige/taupe (degrade) */
  --copper:#BD6939;        /* cuivre : accent du triangle (echantillon) */
  --copper-2:#a4552b;
  --lime:#CCF778;          /* vert lime : signature (fond du logo) */
  --lime-2:#D5FE7E;        /* lime clair (degrade) */
  --foret:#2F3224;         /* vert foret : ancre de marque (degrade + triangle) */
  --foret-2:#383C2A;       /* filigrane du triangle */
  --bordeaux:#451717;      /* bordeaux (degrade) */

  /* Spectre chaud->vert du triangle (swatches officiels) */
  --spec-1:#BE1622; --spec-2:#E6332A; --spec-3:#E94E1B; --spec-4:#F39200;
  --spec-5:#F9B233; --spec-6:#FCEA10; --spec-7:#DEDC00; --spec-8:#95C11F;
  --spec-9:#3AAA35; --spec-10:#008D36; --spec-11:#006633; --spec-12:#2FAC66;

  /* Roles UI (contenu clair et lisible, chaud) */
  --core-bg:#FFFDF4;                 /* fond general, creme de marque */
  --core-bg-2:#F6F1E6;               /* teinte creme legerement plus dense */
  --core-surface:#FFFFFF;            /* cartes */
  --core-ink:#1D1D1B;                /* texte principal */
  --core-muted:rgba(29,29,27,.58);   /* texte secondaire (derive du noir) */
  --core-line:rgba(29,29,27,.12);    /* filets (derive du noir) */
  --core-head-bg:var(--foret);       /* barre d'en-tete : vert foret de marque */
  --core-head-ink:var(--cream);
  --core-accent:var(--foret);        /* accent de marque : vert foret */
  --core-cta:var(--lime);            /* appels a l'action : lime */
  --core-cta-ink:#1D1D1B;            /* texte sur le lime */
  --core-primary:var(--foret);       /* titres */

  /* Statuts medicaux (couleurs du spectre de marque, semantique preservee) */
  --st-ok:#008D36;    /* vert marque */
  --st-warn:#F39200;  /* orange marque */
  --st-bad:#BE1622;   /* rouge marque */
  --st-info:#6f6a60;

  /* Typo courante de la charte : Avenir. Elle est installée sur les Mac, les
     iPhone et les iPad, donc sur les écrans où l'équipe travaille et où les
     membres lisent. Ailleurs, Manrope prend le relais : c'est la substitution
     web retenue, proche de dessin, et déjà chargée. Cremo reste réservée au
     logo, qui est une image et n'a donc pas besoin d'être appelée ici. */
  --core-font:"Avenir Next","Avenir","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --core-radius:14px;
  --core-shadow:0 1px 2px rgba(29,29,27,.05),0 8px 24px rgba(29,29,27,.07);
  --core-maxw:900px;
  /* Marge laterale unique : meme respiration sur les 20 pages, au lieu des
     12/14/18/20 px qui trainaient page par page. */
  --core-gutter:18px;
  /* Degrade officiel, dans le sens du fichier de marque. */
  --core-gradient:linear-gradient(135deg,#1C0000 0%,#2C2F24 38%,#61512F 62%,#D3FE7B 100%);
}

/* -------- Base -------- */
.core-scope,body.core{background:var(--core-bg);color:var(--core-ink);font-family:var(--core-font);line-height:1.55;-webkit-font-smoothing:antialiased}

/* -------- En-tete de marque (barre noir chaud + logo CORE lime + filet cuivre) -------- */
.core-header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--core-head-bg);color:var(--core-head-ink);
  padding:12px var(--core-gutter);border-bottom:2px solid var(--lime)}
.core-header .core-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.core-header .core-logo{height:24px;width:auto;display:block}
.core-header .core-eyebrow{color:var(--lime)}
.core-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--foret)}

/* -------- Titres -------- */
.core-h,.core-scope h1,.core-scope h2{font-family:var(--core-font);color:var(--core-primary);letter-spacing:-.01em;font-weight:800}

/* -------- Cartes -------- */
.core-card{background:var(--core-surface);border:1px solid var(--core-line);border-radius:var(--core-radius);
  padding:18px 20px;margin:14px 0;box-shadow:var(--core-shadow)}
.core-card > h2{font-size:14px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em;color:var(--core-muted)}

/* -------- Boutons -------- */
.core-btn{cursor:pointer;display:inline-block;border:none;border-radius:10px;font-family:var(--core-font);
  font-weight:700;font-size:14px;padding:11px 20px;text-decoration:none;transition:transform .15s,filter .15s,background .15s}
.core-btn:hover{transform:translateY(-1px)}
.core-btn-primary{background:var(--lime);color:var(--core-cta-ink)}
.core-btn-primary:hover{background:var(--lime-2)}
.core-btn-copper{background:var(--foret);color:var(--cream)}
.core-btn-copper:hover{background:var(--foret-2)}
.core-btn-dark{background:var(--noir);color:var(--cream)}
.core-btn-ghost{background:var(--core-surface);border:1px solid var(--core-line);color:var(--core-ink)}

/* -------- Pastilles / accents -------- */
.core-pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700}
.core-pill-lime{background:var(--lime);color:var(--core-cta-ink)}
.core-pill-copper{background:var(--foret);color:var(--cream)}
.core-accent-bar{height:3px;background:var(--lime);border-radius:2px}
a{color:var(--foret)}

/* -------- Statuts (points de mesure) -------- */
.core-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.core-dot.ok{background:var(--st-ok)}
.core-dot.warn{background:var(--st-warn)}
.core-dot.bad{background:var(--st-bad)}
.core-dot.info{background:#9ca3af}

/* -------- Pied -------- */
.core-footer{margin-top:32px;padding:18px var(--core-gutter);color:var(--core-muted);font-size:12px;text-align:center;border-top:1px solid var(--core-line)}
.core-footer img{height:18px;opacity:.9;vertical-align:middle;margin-right:8px}

/* -------- Surface de marque : le degrade officiel -------- */
.core-gradient{background:var(--core-gradient);color:var(--cream)}
.core-gradient h1,.core-gradient h2,.core-gradient a{color:var(--cream)}

/* -------- Le Triangle de la Longevite en filigrane --------
   Signature de la Methode CORE. Pose en fond, tres discret : il ne doit jamais
   genrer la lecture d'une donnee de sante. */
.core-tri-watermark{position:relative;overflow:hidden}
.core-tri-watermark::after{content:"";position:absolute;right:-40px;bottom:-60px;
  width:260px;height:268px;background:url('/img/triangle-longevite.svg') center/contain no-repeat;
  opacity:.05;pointer-events:none}

/* ==========================================================================
   MOBILE
   Ce bloc n'existait pas. C'est ce qui rendait l'espace medecin et l'espace
   coach inutilisables au telephone : ils n'avaient AUCUNE regle d'adaptation.
   Tout ce qui suit ne s'applique qu'en dessous de 640px, donc l'affichage sur
   ordinateur ne bouge pas d'un pixel.
   Ce fichier etant charge APRES les styles locaux de chaque page, ces regles
   corrigent les 20 pages d'un coup sans avoir a les rouvrir une par une.
   ========================================================================== */
@media (max-width:640px){
  :root{--core-gutter:14px}

  /* En-tete : le libelle de l'espace passe sous le logo au lieu d'etre coupe. */
  .core-header{flex-wrap:wrap;gap:6px;padding:10px var(--core-gutter)}
  .core-header .core-logo{height:20px}
  .core-header .core-eyebrow{font-size:10px;letter-spacing:.14em}

  /* Conteneurs de page : memes marges partout. */
  .wrap,.core-wrap{padding-left:var(--core-gutter)!important;padding-right:var(--core-gutter)!important}

  /* Cartes : moins de rembourrage, plus de contenu a l'ecran. */
  .core-card,.card{padding:14px 15px!important;margin:10px 0!important;border-radius:12px!important}

  /* Champs : 16px minimum, sinon iOS zoome tout seul au focus et la page part
     de travers. Largeur pleine : les max-width de 300px n'ont aucun sens sur
     un ecran de 360. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px!important;max-width:100%!important;width:100%!important;padding:12px 13px!important}
  /* Cases a cocher et boutons radio : ils ne sont PAS des champs de saisie.
     La regle ci-dessus les etirait sur toute la largeur : la case devenait un
     gros carre, son libelle etait pousse hors de la pastille et la page partait
     en travers sur iPhone. Ils gardent une taille fixe, facile a toucher. */
  input[type=checkbox],input[type=radio]{width:20px;height:20px;min-width:20px;flex:0 0 auto;margin:0;accent-color:var(--foret,#2F3224)}

  /* Boutons : cible tactile confortable, pleine largeur. */
  button,.core-btn{min-height:46px;font-size:15px;width:100%;display:block;text-align:center}
  .core-btn-row button,.core-btn-row .core-btn,.btn-inline{width:auto;display:inline-block}

  /* Rangees : elles s'empilent au lieu d'ecraser le texte contre la pastille. */
  .row{flex-direction:column;align-items:flex-start!important;gap:8px!important}

  /* Tableaux : defilement contenu, plutot que la page entiere en travers. */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Titres : un h1 de 22px mange l'ecran sur 360px. */
  h1,.core-scope h1{font-size:19px!important;line-height:1.25}
  h2,.core-scope h2{font-size:16px!important}

  .core-tri-watermark::after{width:170px;height:175px;right:-30px;bottom:-40px;opacity:.04}
}

/* Ecrans tres etroits : on recupere les derniers pixels. */
@media (max-width:380px){
  :root{--core-gutter:12px}
  .core-header .core-logo{height:18px}
}

/* Grand ecran : le contenu ne s'etire pas indefiniment. */
@media (min-width:1100px){
  .wrap,.core-wrap{max-width:var(--core-maxw)}
}

/* Preferences systeme : pas d'animation pour qui n'en veut pas. */
@media (prefers-reduced-motion:reduce){
  .core-btn:hover{transform:none}
}