/*
 * Charte nicolascestari.fr (alignée sur le business plan).
 * Chargé après style.css : tout passe par des variables CSS, style.css n'est pas modifié.
 *
 *  Bleu nuit        #0F1030   fonds sombres (hero, bandeau CTA final, footer UNIQUEMENT)
 *  Bleu nuit 2      #16173A   cartes sombres, texte principal
 *  Indigo           #4B4BEA   boutons, liens, puces, numéros
 *  Indigo clair     #878EFB   dégradés, liens et accents sur fond sombre
 *  Vert d'eau       #4CC6A7   accent secondaire (texte uniquement sur fond sombre)
 *  Fond teinté      #F5F5FF   sections alternées, encadrés
 */

/* ---------- Typographie : Ubuntu auto-hébergée ---------- */
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../fonts/ubuntu/ubuntu-300.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/ubuntu/ubuntu-400.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/ubuntu/ubuntu-500.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/ubuntu/ubuntu-700.woff2") format("woff2"); }

/* ---------- Jetons de marque ---------- */
:root {
  --brand-night: #0F1030;
  --brand-night-rgb: 15, 16, 48;
  --brand-night-2: #16173A;
  --brand-night-2-rgb: 22, 23, 58;
  --brand-indigo: #4B4BEA;
  --brand-indigo-rgb: 75, 75, 234;
  --brand-indigo-dark: #3A3AC4;
  --brand-indigo-light: #878EFB;
  --brand-mint: #4CC6A7;
  --brand-mint-rgb: 76, 198, 167;
  --brand-tint: #F5F5FF;
  --brand-accent: #4CC6A7;
  --brand-accent-rgb: 76, 198, 167;
  --brand-gradient: linear-gradient(90deg, #878EFB, #4CC6A7);
  --brand-font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--brand-font);
}

/* ---------- Thème clair ---------- */
:root,
[data-bs-theme=light] {
  --bs-primary: #4B4BEA;
  --bs-primary-rgb: 75, 75, 234;
  --bs-primary-text-emphasis: #3A3AC4;
  --bs-primary-bg-subtle: #ECECFD;
  --bs-primary-border-subtle: #C9CAF8;
  --bs-secondary: #5B5D75;
  --bs-secondary-rgb: 91, 93, 117;
  --bs-link-color: #4B4BEA;
  --bs-link-color-rgb: 75, 75, 234;
  --bs-link-hover-color: #3A3AC4;
  --bs-link-hover-color-rgb: 58, 58, 196;
  --bs-nav-pills-link-active-bg: #4B4BEA;
  --bs-body-color: #16173A;
  --bs-body-color-rgb: 22, 23, 58;
  --bs-heading-color: #16173A;
  --bs-secondary-color: #5B5D75;
  --bs-secondary-color-rgb: 91, 93, 117;
  --bs-tertiary-bg: #F5F5FF;
  --bs-border-color: #E1E2F0;
  --bs-light: #F5F5FF;
  --bs-light-rgb: 245, 245, 255;
  --bs-dark: #0F1030;
  --bs-dark-rgb: 15, 16, 48;
  --brand-link: #4B4BEA;
  --brand-link-hover: #3A3AC4;
}

/* ---------- Thème sombre (bascule du template ET sections sombres du site) ---------- */
[data-bs-theme=dark] {
  --bs-primary: #4B4BEA;
  --bs-primary-rgb: 75, 75, 234;
  --bs-primary-text-emphasis: #B0B4FD;
  --bs-primary-bg-subtle: #1B1C4F;
  --bs-primary-border-subtle: #3A3AC4;
  --bs-link-color: #878EFB;
  --bs-link-color-rgb: 135, 142, 251;
  --bs-link-hover-color: #B0B4FD;
  --bs-link-hover-color-rgb: 176, 180, 253;
  --bs-nav-pills-link-active-bg: #4B4BEA;
  --bs-body-bg: #0F1030;
  --bs-body-bg-rgb: 15, 16, 48;
  --bs-body-color: #E8E9F7;
  --bs-body-color-rgb: 232, 233, 247;
  --bs-heading-color: #FFFFFF;
  --bs-secondary-color: #B7B9D6;
  --bs-secondary-color-rgb: 183, 185, 214;
  --bs-secondary-bg: #16173A;
  --bs-tertiary-bg: #16173A;
  --bs-border-color: rgba(255, 255, 255, .14);
  --bs-light: #16173A;
  --bs-light-rgb: 22, 23, 58;
  --bs-dark: #0F1030;
  --bs-dark-rgb: 15, 16, 48;
  --brand-link: #878EFB;
  --brand-link-hover: #B0B4FD;
}

/* Une section sombre imbriquée (data-bs-theme=dark hors <html>) reprend les couleurs de texte du thème sombre */
[data-bs-theme=dark]:not(html) { color: var(--bs-body-color); }

/* Les .row.g-5 débordent de 12 px sur mobile (gouttière > padding du container) : on coupe au niveau du contenu principal */
main { overflow-x: clip; }

/* ---------- Typo : titres Bold, sous-titres et boutons Medium, texte Regular, intros Light ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--brand-font); }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 700; }
h5, h6, .h5, .h6 { font-weight: 500; }
.btn { font-family: var(--brand-font); font-weight: 500; }
.fw-semibold { font-weight: 500 !important; }
.fs-5, .fs-lg, .lead { font-weight: 300; }

/* ---------- Barre de navigation, menus ---------- */
.navbar {
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-hover-color: var(--brand-link);
  --bs-navbar-active-color: var(--brand-link);
}
.navbar-dark {
  --bs-navbar-hover-color: var(--brand-link) !important;
  --bs-navbar-active-color: var(--brand-link) !important;
}
.nav {
  --bs-nav-link-hover-color: var(--brand-link);
}
.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--brand-link) !important;
  --bs-dropdown-link-active-color: var(--brand-link) !important;
  --bs-dropdown-link-hover-bg: var(--brand-tint);
}

/* ---------- Boutons ---------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4B4BEA;
  --bs-btn-border-color: #4B4BEA;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3A3AC4;
  --bs-btn-hover-border-color: #3A3AC4;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3A3AC4;
  --bs-btn-active-border-color: #3A3AC4;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #4B4BEA;
  --bs-btn-disabled-border-color: #4B4BEA;
  --bs-btn-focus-shadow-rgb: 75, 75, 234;
}
.btn-outline-primary {
  --bs-btn-color: #4B4BEA;
  --bs-btn-border-color: #4B4BEA;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4B4BEA;
  --bs-btn-hover-border-color: #4B4BEA;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4B4BEA;
  --bs-btn-active-border-color: #4B4BEA;
  --bs-btn-disabled-color: #4B4BEA;
  --bs-btn-disabled-border-color: #4B4BEA;
  --bs-btn-focus-shadow-rgb: 75, 75, 234;
}
[data-bs-theme=dark] .btn-outline-primary,
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .85);
  --bs-btn-hover-color: #0F1030;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #0F1030;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}
.btn-outline-light,
[data-bs-theme=dark] .btn-outline-primary { color: #fff; border-color: rgba(255, 255, 255, .85); background-color: transparent; }
.btn-outline-light:hover, .btn-outline-light:focus-visible,
[data-bs-theme=dark] .btn-outline-primary:hover { color: #0F1030; background-color: #fff; border-color: #fff; }
.btn-link {
  --bs-btn-color: var(--brand-link);
  --bs-link-color: var(--brand-link);
  --bs-btn-hover-color: var(--brand-link-hover);
  --bs-btn-active-color: var(--brand-link-hover);
}
.btn-primary-soft {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.btn-primary-soft.active,
.btn-primary-soft:focus,
.btn-primary-soft:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary-shadow,
.btn-primary-shadow:hover,
.btn-primary-shadow:focus,
.btn-primary-shadow.active {
  background-color: var(--bs-primary);
  box-shadow: 0 0 0 10px rgba(var(--bs-primary-rgb), .4);
}
.fill-primary { fill: var(--bs-primary) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.text-bg-primary { background-color: rgba(var(--bs-primary-rgb), 1) !important; }
.page-item.active .page-link,
.page-link:hover,
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.accordion { --bs-accordion-active-color: #3A3AC4; }
[data-bs-theme=dark] .accordion { --bs-accordion-active-color: #B0B4FD; }

/* Anneaux de focus et champs : plus de vert d'origine */
.btn:focus-visible,
.btn-check:focus-visible + .btn { box-shadow: 0 0 0 .25rem rgba(75, 75, 234, .35); }
.nav-link:focus-visible { box-shadow: none; outline: 2px solid var(--brand-link); outline-offset: 2px; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #4B4BEA;
  box-shadow: 0 0 0 .25rem rgba(75, 75, 234, .2);
}
a:focus-visible { outline: 2px solid var(--brand-link); outline-offset: 2px; }

/* SVG inline : chevron d'accordéon et interrupteur en indigo */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234B4BEA'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%234B4BEA'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ---------- Liens ---------- */
main a:not([class*="btn"]):not(.nav-link):not(.dropdown-item):not(.stretched-link):not(.navbar-brand):hover,
footer a:not([class*="btn"]):not(.footer-social):hover {
  text-decoration: underline;
}

/* ---------- Accents sur fond sombre : vert d'eau (icônes, sur-titres, chiffres) ---------- */
[data-bs-theme=dark] .text-primary {
  --bs-text-opacity: 1;
  color: var(--brand-mint) !important;
}
[data-bs-theme=dark] .card {
  --bs-card-bg: #16173A;
  --bs-card-border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme=dark] .bg-body { background-color: #16173A !important; }
[data-bs-theme=dark] .stat-num { color: var(--brand-mint) !important; }
[data-bs-theme=dark] .icon-link { color: var(--brand-link); }
[data-bs-theme=dark] .breadcrumb { --bs-breadcrumb-item-active-color: var(--brand-mint); }

/* ---------- Gabarits de la charte ---------- */
/* Sur-titres : majuscules espacées, indigo sur clair, vert d'eau sur sombre */
.text-uppercase.text-primary {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
}

/* Petite barre décorative sous les H2 (dégradé signature) */
main h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: .75rem;
  border-radius: 2px;
  background: var(--brand-gradient);
}
main .text-center h2::after,
main h2.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Mots-clés du H1 en dégradé signature */
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Chiffres clés : dégradé signature, version plus foncée sur fonds clairs (contraste AA) */
.stat-gradient {
  background: linear-gradient(90deg, #4B4BEA, #1F7A64);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-bs-theme=dark] .stat-gradient { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; }

/* Mise en avant : fond teinté + bordure gauche 4 px */
.callout,
.catchphrase {
  background: var(--brand-tint);
  border-left: 4px solid var(--brand-indigo);
  border-radius: 0 .5rem .5rem 0;
  padding: 1rem 1.25rem;
}
[data-bs-theme=dark] .callout,
[data-bs-theme=dark] .catchphrase {
  background: var(--brand-night-2);
  border-left-color: var(--brand-indigo-light);
}

/* Fond sombre signature : bleu nuit + 2 halos discrets (hero, bandeau CTA, footer) */
.hero-night,
#siteFooter,
.bg-dark.rounded-4 {
  background-color: var(--brand-night) !important;
  background-image:
    radial-gradient(circle at 88% 0%, rgba(43, 43, 140, .45), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(76, 198, 167, .10), transparent 40%);
}

/* Tableaux comparatifs : le template force white-space:nowrap sur les cellules (le texte long fait exploser la largeur).
   Colonnes de largeur fixe, texte qui revient à la ligne, défilement horizontal sous 1200 px (via .table-responsive-xl). */
.table-comparatif { table-layout: fixed; min-width: 680px; }
.table-comparatif th,
.table-comparatif td { white-space: normal; vertical-align: middle; overflow-wrap: anywhere; }
.table-comparatif thead th:first-child { width: 24%; }

/* Mode sombre : le bandeau CTA et le footer ont le même fond que la page, on les détache par un fin liseré */
[data-bs-theme=dark] .bg-dark.rounded-4 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
[data-bs-theme=dark] #siteFooter { border-top: 1px solid rgba(255, 255, 255, .1); }

/* En-tête posé sur le hero sombre : liens clairs jusqu'au passage en sticky */
header:not(.header-sticky-on) .navbar-toggler .navbar-toggler-animation span { background: #fff; }
header:not(.header-sticky-on) .navbar-toggler { border-color: rgba(255, 255, 255, .35); }
header:not(.header-sticky-on) #themeToggle { color: #fff; border-color: rgba(255, 255, 255, .4); }
header:not(.header-sticky-on) #themeToggle:hover { background: rgba(255, 255, 255, .12); }
@media (min-width: 1200px) {
  header:not(.header-sticky-on) #mainMenu > li > .nav-link,
  header:not(.header-sticky-on) #mainMenu > li > .nav-link:hover,
  header:not(.header-sticky-on) #mainMenu > li > .nav-link.active,
  header:not(.header-sticky-on) #mainMenu > li.dropdown:has(.show) > a.nav-link { color: #fff !important; }
}

/* Header posé sur un hero CLAIR (page « À propos ») : liens et boutons sombres, au lieu de blancs sur hero sombre */
header.header-on-light:not(.header-sticky-on) .navbar-toggler .navbar-toggler-animation span { background: var(--bs-body-color); }
header.header-on-light:not(.header-sticky-on) .navbar-toggler { border-color: var(--bs-border-color); }
header.header-on-light:not(.header-sticky-on) #themeToggle { color: var(--bs-body-color); border-color: var(--bs-border-color); }
header.header-on-light:not(.header-sticky-on) #themeToggle:hover { background: rgba(var(--bs-primary-rgb), .08); }
@media (min-width: 1200px) {
  header.header-on-light:not(.header-sticky-on) #mainMenu > li > .nav-link,
  header.header-on-light:not(.header-sticky-on) #mainMenu > li > .nav-link:hover,
  header.header-on-light:not(.header-sticky-on) #mainMenu > li > .nav-link.active,
  header.header-on-light:not(.header-sticky-on) #mainMenu > li.dropdown:has(.show) > a.nav-link { color: var(--bs-body-color) !important; }
}

/* Emplacement photo (4:3) en attente d'une vraie image : fond teinté + icône d'appareil photo */
.photo-slot { position: relative; background: #EEEFFD; border-radius: 1rem; overflow: hidden; }
[data-bs-theme=dark] .photo-slot { background: #1B1C4F; }
.photo-slot .bi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--bs-primary); opacity: .45; }
[data-bs-theme=dark] .photo-slot .bi { color: var(--brand-indigo-light); }

/* Accroches « performance / ambition » : petites lignes discrètes (jamais dans un Hn) */
.brand-line { font-family: Ubuntu, system-ui, sans-serif; font-weight: 500; font-size: .8125rem; letter-spacing: .04em; line-height: 1.5; color: var(--brand-mint); text-wrap: balance; }
.brand-line-muted { color: var(--bs-secondary-color); }
.brand-line-light { color: rgba(255, 255, 255, .82); font-size: .875rem; letter-spacing: .02em; }