/* Huit thèmes pour l'École HIGH-TECH.
   Une encre sourde, une couleur vive pour les boutons.
   Les luminosités sont celles du thème d'origine. */

/* Bleu nuit (origine) */
:root{
  --ht-encre:#15283D;
  --ht-encre-2:#38516C;
  --ht-gris:#597798;
  --ht-trait:#CADBE8;
  --ht-trait-2:#C0D4E3;
  --ht-clair:#E4F0F9;
  --ht-clair-2:#EEF3F7;
  --ht-accent:#15283D;
  --ht-sur-accent:#FFFFFF;
}

/* Marine du logo */
:root[data-theme="marine"]{
  --ht-encre:#0E2944;
  --ht-encre-2:#38526C;
  --ht-gris:#597898;
  --ht-trait:#C6D8EC;
  --ht-trait-2:#BBD1E8;
  --ht-clair:#E1EEFC;
  --ht-clair-2:#EDF2F8;
  --ht-accent:#0E2944;
  --ht-sur-accent:#FFFFFF;
}

/* Avaliance */
:root[data-theme="avaliance"]{
  --ht-encre:#430A4B;
  --ht-encre-2:#66386C;
  --ht-gris:#915998;
  --ht-trait:#E2E7CB;
  --ht-trait-2:#DBE2C1;
  --ht-clair:#F1F6DC;
  --ht-clair-2:#F0F3E7;
  --ht-accent:#AEBF38;
  --ht-sur-accent:#1A1F1A;
}

/* Vert profond */
:root[data-theme="vert"]{
  --ht-encre:#11412F;
  --ht-encre-2:#315F4E;
  --ht-gris:#4A7E6A;
  --ht-trait:#CBE7DA;
  --ht-trait-2:#C2E1D2;
  --ht-clair:#E2F5EC;
  --ht-clair-2:#EBF4F0;
  --ht-accent:#28865B;
  --ht-sur-accent:#FFFFFF;
}

/* Prune */
:root[data-theme="prune"]{
  --ht-encre:#36133F;
  --ht-encre-2:#61386C;
  --ht-gris:#8B5998;
  --ht-trait:#E0CAE8;
  --ht-trait-2:#DAC0E3;
  --ht-clair:#F5E7FA;
  --ht-clair-2:#F6F0F8;
  --ht-accent:#C0407E;
  --ht-sur-accent:#FFFFFF;
}

/* Beige */
:root[data-theme="beige"]{
  --ht-encre:#3A3026;
  --ht-encre-2:#6C5238;
  --ht-gris:#8B6E51;
  --ht-trait:#E7DCCB;
  --ht-trait-2:#E1D5C2;
  --ht-clair:#F3EADC;
  --ht-clair-2:#F1ECE6;
  --ht-accent:#AB6336;
  --ht-sur-accent:#FFFFFF;
}

/* Crème */
:root[data-theme="creme"]{
  --ht-encre:#2E2A24;
  --ht-encre-2:#655235;
  --ht-gris:#856F4E;
  --ht-trait:#E9DEC9;
  --ht-trait-2:#E4D8BF;
  --ht-clair:#FBF5E9;
  --ht-clair-2:#F9F7F2;
  --ht-accent:#916C2F;
  --ht-sur-accent:#FFFFFF;
}

/* Pastel */
:root[data-theme="pastel"]{
  --ht-encre:#3B2C3A;
  --ht-encre-2:#6C3869;
  --ht-gris:#985994;
  --ht-trait:#EBC7D1;
  --ht-trait-2:#E7BCC7;
  --ht-clair:#FDEEF2;
  --ht-clair-2:#FCF7F8;
  --ht-accent:#F2789F;
  --ht-sur-accent:#2E1F2C;
}

/* ⭐ La couleur vive ne s'applique qu'aux boutons. Framer les nomme
   « Dark Blue » et « Blue » : c'est le seul repère fiable du thème. */
[data-framer-name="Dark Blue"],[data-framer-name="Blue"]{
  background-color:var(--ht-accent) !important;
}
[data-framer-name="Dark Blue"] *,[data-framer-name="Blue"] *{
  color:var(--ht-sur-accent) !important;
}


/* ---- Cartes de même hauteur : DEUX LIGNES RÉSERVÉES AU TITRE ----
   Une carte dont le titre tient sur une ligne était 32 px plus courte que sa
   voisine dont le titre passait à la ligne : la rangée faisait un escalier.
   On réserve deux lignes à tous les titres — « 2lh », soit exactement deux
   interlignes de l'élément, sans toucher à la typographie. */
[data-framer-name="Teacher"] [data-framer-component-type="RichTextContainer"] h4,
[data-framer-name="White"] [data-framer-component-type="RichTextContainer"] h4,
/* les cartes « lauréats » de l'accueil : c'est le NOM qui passe à la ligne.
   ⚠️ On vise le h4 et pas son conteneur : le conteneur a une police de
   12 px, « 2lh » y vaudrait 27 px au lieu des 64 px du titre. */
.framer-1p4x0gi h4{
  display:block;
  min-height:2.5em;
  min-height:2lh;
}


/* ---- RANGÉES DE CARTES ----
   Une carte dont le texte fait une ligne de plus était plus haute que ses
   voisines : la rangée faisait un escalier. On étire toutes les cartes à la
   hauteur de la plus haute. Le blanc en bas des cartes courtes est voulu.
   ⛔ On ne vise que les rangées vraiment faites de cartes, mesurées une par
   une. Les mises en page à deux colonnes et le pied de page gardent leurs
   hauteurs libres : les aligner casserait le dessin. */
[data-framer-name="Values Section"],
[data-framer-name="Steps"]{
  align-items:stretch !important;
}
[data-framer-name="Values Section"] > div,
[data-framer-name="Steps"] > div{
  height:auto !important;
  align-self:stretch !important;
}
/* ⚠️ Un seul niveau plus bas, pas deux : plus profond, on étire le rond du
   pictogramme sur toute la hauteur de la carte. */
[data-framer-name="Values Section"] > div > div{
  height:100% !important;
}

/* ---- LES FRAIS EN DOLLARS ----
   Les cartes de filière affichaient « $800 par an », un reste du gabarit
   américain. La ligne entière disparaît : prix et mention « par an ». */
.framer-15c5qdw{ display:none !important; }

/* ---- La palette, au milieu du bord droit ---- */
#ht-palette{position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:2147483000;display:flex;align-items:center;
  font:500 13px/1.35 Inter,system-ui,sans-serif}
#ht-palette>button{width:44px;height:44px;border:0;cursor:pointer;
  background:var(--ht-accent);color:var(--ht-sur-accent);
  display:grid;place-items:center;line-height:0;
  border-radius:6px 0 0 6px;box-shadow:0 6px 22px rgba(0,0,0,.16)}
#ht-palette>button:hover{filter:brightness(1.08)}
#ht-liste{background:#fff;border:1px solid var(--ht-trait);padding:8px;
  display:none;gap:6px;flex-direction:column;min-width:190px;
  box-shadow:0 14px 40px rgba(0,0,0,.14)}
#ht-palette.ouvert #ht-liste{display:flex}
#ht-liste button{display:flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--ht-trait);background:#fff;padding:7px 10px;
  color:var(--ht-encre);text-align:left}
#ht-liste button[aria-pressed="true"]{background:var(--ht-clair-2);
  border-color:var(--ht-encre);font-weight:600}
#ht-liste s{display:flex;gap:0;flex:0 0 auto}
#ht-liste i{width:13px;height:13px;display:block;border:1px solid rgba(0,0,0,.12)}
@media (max-width:809px){#ht-palette>button{width:38px;height:38px;font-size:16px}}
@media print{#ht-palette{display:none}}