/* ===============================================
   TOLExperience — styles globaux (palette officielle)
   Version : 2025-08-21 (espacements unifiés & nettoyés)
   =============================================== */

/* ---------- Variables ---------- */
:root{
  --brand-red:  #a63d2f;
  --brand-blue: #005e83;
  --gray-dark:  #383e42;
  --gray-light: #c8c8c7;
  --white:      #f8f8f8;
  --black:      #111111;

  --bg-color:   var(--white);
  --text-color: var(--black);

  --gray-300: var(--gray-light);
  --gray-500: var(--gray-dark);
  --gray-700: var(--black);

  --page-top:   color-mix(in oklab, var(--white) 96%, var(--black) 4%);
  --page-mid:   color-mix(in oklab, var(--white) 92%, var(--black) 8%);
  --page-bot:   color-mix(in oklab, var(--white) 88%, var(--black) 12%);

  --surface-1:  color-mix(in oklab, var(--white) 94%, var(--black) 6%);
  --surface-2:  color-mix(in oklab, var(--white) 90%, var(--black) 10%);

  --shadow-sm:  0 4px 14px rgba(0,0,0,.8);
  --shadow-md:  0 10px 26px rgba(0,0,0,.2);

  --section-max-w: 1200px;
  --gap: 16px;

  --card-h: 120px;
  --card-min: 360px;

  /* Rythme d'espacement */
  --stack: clamp(12px, 1.8vw, 22px);   /* à l'intérieur d'une section */
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root{
    --bg-color:   var(--black);
    --text-color: var(--white);
    --gray-300: var(--gray-dark);
    --gray-500: var(--gray-light);
    --gray-700: var(--white);
    --page-top:  color-mix(in oklab, var(--black) 92%, var(--white) 8%);
    --page-mid:  color-mix(in oklab, var(--black) 88%, var(--white) 12%);
    --page-bot:  color-mix(in oklab, var(--black) 84%, var(--white) 16%);
    --surface-1: color-mix(in oklab, var(--black) 88%, var(--white) 12%);
    --surface-2: color-mix(in oklab, var(--black) 84%, var(--white) 16%);
  }
}

/* ---------- Polices ---------- */
@font-face{ font-family:"TOLArial3"; src:url("./fonts/TOL-Arial3Gras-SVG.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"TOLArial2"; src:url("./fonts/TOL-Arial2Gras-SVG.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"TOLArial4"; src:url("./fonts/TOL-Arial4Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"TOL-RV1";    src:url("./fonts/TOLRV1.ttf")           format("truetype"); font-weight:400; font-style:normal; font-display:swap; }

/* ---------- Reset & base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text-color);
  font-family:"TOLArial4", Arial, Helvetica, sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-blue); text-decoration: underline; }

/* ---------- Titres ---------- */
h1,h2,h3{
  font-family:"TOLArial2", system-ui, Arial, sans-serif;
  font-weight:700; margin:0; color:var(--text-color);
}
h1{ font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.2; }
h2{ font-size:clamp(1.4rem,3.2vw,1.9rem); line-height:1.3; }
h3{ font-size:clamp(1.2rem,2.6vw,1.5rem); line-height:1.4; }

.tol-title{ font-family:"TOLArial2"; color:var(--gray-500); font-weight:400; }
.tol-text { font-family:"TOLArial4"; line-height:1.5; }
.tol-note { font-family:"TOL-RV1";  font-weight:normal; }

/* Titre bleu TOLArial3 */
.tol-btitle{ font-family:"TOLArial3"; font-weight:700; color:var(--brand-blue); margin:0; }
.tol-btitle .red-L{ color:var(--brand-red); }

/* ---------- Sections ---------- */
.section{
  max-width: var(--section-max-w);
  margin: 0 auto;
  padding-inline: clamp(12px, 2.2vw, 24px);
  padding-block: 8px;                 /* anti margin-collapse */
}
.section--full{ max-width:100%; }

/* Espacement uniforme */
.section > *{ margin-block:0; }
.section > * + *{ margin-block-start: var(--stack); }
.section + .section{ margin-block-start: var(--stack); }

/* ---------- HERO ---------- */
.hero-banner{ text-align:center; margin-bottom:var(--stack); background:none; border-radius:12px; overflow:hidden; padding:clamp(12px,2vw,24px) 0 clamp(16px,3vw,32px); }
.hero-stack{ display:inline-block; text-align:center; }
.logo{ display:block; height:clamp(72px,12vw,150px); width:auto; margin:0 auto 8px; }
.slogans{ margin:0 auto; max-width:var(--logo-width,600px); white-space:nowrap; }
.slogan-left,.slogan-right{ margin:4px 0; line-height:1.2; font-family:"TOL-RV1"; font-size:var(--slogan-size,24px); color:#383e42; }
.slogan-left{text-align:left;} .slogan-right{text-align:right;}

/* ---------- Grille ---------- */
.grid{ display:grid; gap:var(--gap); }
.grid--home{ grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); }

/* ---------- Cartes ---------- */
.card{
  position:relative; border:2px solid var(--gray-300); border-radius:0;
  overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface-1);
  transition: box-shadow .15s ease; color:var(--text-color); margin:0;
}
/* Chemins relatifs depuis /assets/style.css */
.card::before{ content:""; position:absolute; inset:0; background:url("./background-l.jpg") center/cover no-repeat; z-index:0; pointer-events:none; }
html.dark .card::before{ background:url("./background-d.jpg") center/cover no-repeat; }

.card-body{ position:relative; z-index:1; padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card:hover{ box-shadow:var(--shadow-md); }

.grid--home .card{ min-height:var(--card-h); height:auto; display:flex; flex-direction:column; }
.grid--home .card h3{ margin:0 0 .3rem 0; color:var(--gray-500); display:flex; align-items:center; gap:.6rem; }
.grid--home .card p{ margin:0; line-height:1.3; overflow-wrap:anywhere; color:var(--gray-500); }

/* Icône optionnelle carrée */
.card h3 .logo-mark{ display:inline-block; width:1.2em; height:1.2em; margin-right:.45rem; border-radius:4px;
  background:linear-gradient(180deg,var(--gray-light),color-mix(in oklab,var(--gray-light)70%,var(--black)30%));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}

/* ---------- Icônes SVG ---------- */
.card-icon{ width:36px; height:36px; flex:0 0 36px; display:inline-block; color:var(--brand-blue); filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.card-icon path[fill="none"]{ stroke: currentColor; }
.card-icon path:not([fill]), .card-icon [fill="#000"], .card-icon [fill="black"]{ fill: currentColor; }

/* ---------- Boutons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:.45rem 1rem; border-radius:999px;
  border:1px solid transparent; text-decoration:none; cursor:pointer; font-family:"TOLArial2"; font-weight:700; font-size:.9rem;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background:var(--brand-blue); color:var(--gray-light); box-shadow:0 3px 8px rgba(0,0,0,.8); }
.btn--primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.grid--home .card .btn{ width:100%; max-width:120px; margin-top:auto; margin-left:auto; margin-right:auto; align-self:center; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .grid--home{ grid-template-columns:1fr; }
  :root{ --card-h:140px; }
  .grid--home .card h3{ font-size:clamp(1rem,3.8vw,1.1rem); line-height:1.15; }
  .grid--home .card p{ font-size:clamp(.9rem,3.2vw,1rem); line-height:1.25; }
  .card-body{ gap:.5rem; }
  .card-icon{ width:28px; height:28px; flex-basis:28px; }
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{ width:12px; height:12px;}
::-webkit-scrollbar-track{ background:var(--bg-color);}
::-webkit-scrollbar-thumb{ background-color:var(--text-color); border-radius:6px; border:3px solid var(--bg-color); }
::-webkit-scrollbar-thumb:hover{ background-color:color-mix(in oklab,var(--text-color)85%,var(--bg-color)15%); }
::-webkit-scrollbar-button{ background:var(--text-color); border:2px solid var(--bg-color); }
*{ scrollbar-width:thin; scrollbar-color:var(--text-color) var(--bg-color); }

/* ---------- Thème manuel ---------- */
html.dark{
  --bg-color:var(--black); --text-color:var(--white);
  --gray-300:var(--gray-dark); --gray-500:var(--gray-light); --gray-700:var(--white);
}
html.light{
  --bg-color:var(--white); --text-color:var(--black);
  --gray-300:var(--gray-light); --gray-500:var(--gray-dark); --gray-700:var(--black);
}

/* ---------- Vidéos & PDF ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:12px; }
.video-card{ margin:0; }
.video-frame{ position:relative; padding-top:56.25%; background:var(--gray-300); border:1px solid var(--gray-500); border-radius:8px; overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.pdf-wrapper{ width:100%; max-width:100%; margin:0 auto; height:70vh; border:1px solid var(--gray-500); border-radius:8px; overflow:hidden; }
.pdf-wrapper .pdf-embed{ width:100%; height:100%; border:0; }
.pdf-actions{ margin-top:10px; }

/* Espacement vertical entre sections */
.section {
  margin-block: 0;              /* on annule tout */
  padding-block: 0;             /* idem pour padding vertical */
}

.section + .section {
  margin-top: 1.5rem;           /* espace homogène entre deux sections */
}

/* Helpers texte rouge (rouge de marque) */
.red-L { color: var(--brand-red); }          /* globalise l'existant */
.tol-red { color: var(--brand-red); }

/* Si un style sur em écrase la couleur, on renforce un peu : */
.tol-text em.tol-red,
.tol-text em .tol-red { color: var(--brand-red); }

/* Interligne uniforme dans les cartes "contenu" */
.card--content {
  --card-lh: 1.3;            /* choisis 1.45 ou 1.5 selon ton goût */
}

.card--content .card-body { line-height: var(--card-lh); }
.card--content p,
.card--content li { line-height: inherit; }

/* S'assurer que les inlines ne cassent pas l'interligne */
.card--content .tol-btitle,
.card--content strong,
.card--content em,
.card--content a,
.card--content span { line-height: inherit; }

/* Si ces cartes sont dans .grid--home, cette règle neutralise le 1.3 existant */
.grid--home .card--content p { line-height: var(--card-lh); }