/* ------------------------------------------------------------------
   Ajustements site Node — chargé APRÈS assets/tailwind.css du thème.
------------------------------------------------------------------ */

/* Note : la gestion des .glass-card en thème clair est faite dans head.ejs
   (thème clair maison). On ne l'override plus ici. */

/* Le thème utilise .bg-gradient-primary sans le définir → carré transparent.
   On le définit avec le violet de marque (#6b21a8 → #4327A9). */
.bg-gradient-primary {
  background: linear-gradient(135deg, #6b21a8 0%, #4327a9 100%) !important;
}

/* Bouton hamburger + menu déroulant : visibles UNIQUEMENT en mobile (< 1024px).
   Le tailwind.css compilé du thème n'inclut pas la classe lg:hidden → on force ici. */
@media (min-width: 1024px) {
  #burger-btn { display: none !important; }
  #mobile-menu { display: none !important; }
}

/* Menu mobile : masquer le marqueur natif des <details>, animer la flèche */
#mobile-menu summary { list-style: none; }
#mobile-menu summary::-webkit-details-marker { display: none; }
#mobile-menu summary .material-symbols-outlined { transition: transform 0.2s ease; }
#mobile-menu details[open] > summary .material-symbols-outlined { transform: rotate(180deg); }

/* Carrés « portail » colorés (Espace Recruteurs / Candidats) + filigrane */
.portal-box { position: relative; overflow: hidden; }
.portal-box--primary { background: linear-gradient(135deg, #6b21a8 0%, #4327a9 100%); }
.portal-box--secondary { background: linear-gradient(135deg, #b45309 0%, #7c2d12 100%); }
.portal-filigrane {
  position: absolute; right: -20px; bottom: -28px;
  font-size: 190px; line-height: 1; opacity: 0.10; color: #fff; pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPLÉMENTS DE LA CHARTE — 30 septembre 2026

   POURQUOI CE BLOC EXISTE. La feuille Tailwind du site (public/assets/
   tailwind.css) est PRÉCOMPILÉE et figée : il n'y a pas de chaîne de
   construction. Une classe qui n'y figure pas n'a aucun effet, et elle échoue
   EN SILENCE — rien dans la console, rien dans les journaux, juste un élément
   qui ne ressemble pas à ce que le gabarit annonce. C'est ainsi que le pied de
   page est resté sur une seule colonne pendant des mois.

   Tout ce qui suit a été établi par outils/audit-classes.py, puis recoupé une à
   une par « grep » littéral et, pour les cas visibles, mesuré dans un vrai
   navigateur. Aucune règle n'est écrite « au cas où ».

   OÙ ÉCRIRE LA SUITE. Ici, et nulle part ailleurs. Ni dans tailwind.css, qui
   sera écrasé au prochain remplacement du thème ; ni dans un <style> posé au
   fil des pages, qui a déjà produit huit copies de la même feuille. Une
   correction écrite ici profite à toutes les pages, y compris celles qui
   n'existent pas encore.

   APRÈS TOUTE MODIFICATION : incrémenter le numéro de version dans
   views/partials/head.ejs (« /site.css?v=N »), sans quoi les navigateurs
   continueront de servir l'ancienne feuille.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   1. LE PIED DE PAGE SUR CINQ COLONNES

   Le seul défaut qui avait été prouvé au navigateur avant d'être corrigé : le
   pied de page déclare « md:grid-cols-5 », la règle n'existait nulle part, et
   la mesure donnait une colonne unique de 1216 px de large. Sur toutes les
   pages du site, depuis toujours.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* ───────────────────────────────────────────────────────────────────────────
   2. UTILITAIRES ABSENTS DE LA FEUILLE FIGÉE

   Des classes Tailwind parfaitement ordinaires, employées dans les gabarits,
   que la compilation d'origine n'a jamais produites. Elles sont écrites ici à
   l'identique de ce que Tailwind aurait émis, pour qu'une future recompilation
   ne change rien au rendu.
   ─────────────────────────────────────────────────────────────────────────── */

/* Le bouton hamburger et le menu déroulant étaient déjà masqués en grand écran
   par leurs identifiants (plus haut dans ce fichier). La règle générique est
   ajoutée pour que le prochain élément marqué « lg:hidden » se comporte comme
   attendu sans qu'il faille y repenser. */
@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
}

/* Espacements et graisses. */
.p-0  { padding: 0; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pb-24{ padding-bottom: 6rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-5 { margin-bottom: 1.25rem; }
.font-semibold { font-weight: 600; }
.overflow-y-auto { overflow-y: auto; }

/* Soulignement. Employé tel quel dans le pied de page et au survol des titres
   de la liste du blog. */
.underline { text-decoration-line: underline; }
.hover\:underline:hover { text-decoration-line: underline; }

/* Filet coloré en haut des cartes « produit » (accueil et page Logiciels).
   La feuille du thème ne pose AUCUN style de bordure par défaut : sans
   « border-top-style », une largeur seule ne dessine rien. */
.border-t-4 { border-top-width: 4px; border-top-style: solid; }
.border-white\/70 { border-color: rgba(255, 255, 255, 0.7); }

/* Tailles littérales employées dans les pages fabriquées par server.js. */
.text-\[30px\] { font-size: 30px; }
.text-\[46px\] { font-size: 46px; }

/* Le dernier échelon de l'échelle typographique, oublié à la compilation :
   « text-display-lg » existe (64 px), « text-display-md » manquait. Il porte
   les trois prix de la page CRM commercial. La valeur suit l'échelle établie
   par les autres échelons, elle n'est pas choisie au jugé. */
.text-display-md { font-size: 44px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }



/* ───────────────────────────────────────────────────────────────────────────
   3. COMPOSANTS DONT LE STYLE N'AVAIT JAMAIS ÉTÉ ÉCRIT

   Des classes inventées dans le gabarit, auxquelles aucune règle n'a jamais
   répondu. L'élément s'affichait donc sans mise en forme, ou pas du tout.
   ─────────────────────────────────────────────────────────────────────────── */

/* FAQ en accordéon (page Contact). Le marqueur natif du <details> doit
   disparaître au profit de la flèche Material, qui pivote à l'ouverture. */
.faq-accordion > summary { list-style: none; }
.faq-accordion > summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform 0.2s ease; }
.faq-accordion[open] .faq-icon { transform: rotate(180deg); }

/* Message de retour des formulaires (Contact, Recrutement). Tant qu'il est
   vide il ne doit pas réserver de place : sans cette règle, un espace mort
   s'ouvrait au milieu de la grille du formulaire. La couleur est posée par le
   script du pied de page, vert si l'envoi passe, rouge sinon. */
.excelia-form-msg { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 14.5px; line-height: 1.5; }
.excelia-form-msg:empty { display: none; }

/* Halos d'arrière-plan de la page Services. Ils étaient déclarés dans le
   gabarit depuis l'origine et n'avaient jamais rien affiché. */
.blob {
  position: absolute; z-index: 0; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  background: #5300b7; filter: blur(110px); opacity: 0.22;
}

/* Texte en dégradé (page À propos). La couleur pleine reste la valeur de
   repli : si le navigateur ne sait pas découper un fond sur du texte, on ne
   veut surtout pas d'un titre transparent, donc invisible. */
.text-gradient { color: #5300b7; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-gradient {
    background: linear-gradient(90deg, #5300b7 0%, #9b4dff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* Pages légales (mentions, confidentialité). Leurs titres n'utilisent pas le
   système de classes du reste du site ; on les raccroche à la charte par la
   balise plutôt que de reprendre deux pages à la main. */
.legal-page h2 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 22px; line-height: 1.35; font-weight: 600; color: #0d1b2a; margin: 34px 0 10px; }
.legal-page h3 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 18px; line-height: 1.4; font-weight: 600; color: #0d1b2a; margin: 26px 0 8px; }
.legal-page p, .legal-page li { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.75; color: #44526a; }
.legal-page p { margin: 0 0 14px; }
.legal-page ul { padding-left: 22px; margin: 0 0 16px; }
.legal-page a { color: #5300b7; text-decoration: underline; text-underline-offset: 2px; }

/* Pastille d'état (« Bientôt »), page fabriquée par server.js. La couleur de
   fond vient de la classe posée à côté. */
.badge { display: inline-block; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; }

/* Cale verticale employée dans une page fabriquée par server.js. */
.space30 { height: 30px; }


/* ───────────────────────────────────────────────────────────────────────────
   4. LES ARTICLES DE BLOG RESTÉS SUR L'ANCIEN GABARIT

   Huit articles (blog-vae-maroc, blog-crm-ou-erp-pme-maroc, etc.) datent d'un
   thème antérieur. Ils s'appuient sur une grille Bootstrap et sur des icônes
   Font Awesome — or NI L'UN NI L'AUTRE n'est chargé par le site. Résultat
   mesuré : aucun centrage, aucune largeur de lecture, des puces en carré vide
   là où un crochet était prévu, et le bleu Bootstrap #0d6efd au lieu du violet
   de la marque.

   Ces huit pages portaient chacune une copie OCTET POUR OCTET de la même
   feuille interne. Elles ont été retirées au profit de ce bloc unique : une
   correction se fait désormais une fois, et un neuvième article héritera du
   même rendu sans qu'on y pense.

   La grille est réécrite SOUS « .sp1 » et non globalement : « .container » et
   « .row » sont des noms trop communs pour être définis à la racine.
   ─────────────────────────────────────────────────────────────────────────── */

/* --- bandeau de titre --- */
.inner-page-hero-area { position: relative; padding: 128px 0 72px; background-color: #0d1b2a; text-align: center; }
.inner-page-hero-area::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 27, 42, 0.88) 0%, rgba(13, 27, 42, 0.74) 100%);
}
.inner-hero-title { position: relative; max-width: 860px; margin: 0 auto; padding: 0 2rem; }
.inner-hero-title h1 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 40px; line-height: 1.22; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin: 0 0 14px; }
.inner-hero-title p { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0; }

/* --- grille de lecture --- */
.sp1 { padding: 56px 0 76px; }
.sp1 .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.sp1 .row { display: flex; flex-wrap: wrap; justify-content: center; }
.sp1 .col-lg-9 { width: 100%; max-width: 820px; }

/* --- corps de l'article --- */
.blog-article { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 16.5px; line-height: 1.75; color: #44526a; }
.blog-article h2 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 26px; line-height: 1.3; font-weight: 600; color: #0d1b2a; margin: 40px 0 14px; }
.blog-article h3 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 20px; line-height: 1.35; font-weight: 600; color: #0d1b2a; margin: 30px 0 10px; }
.blog-article p  { margin: 0 0 15px; }
.blog-article strong { color: #0d1b2a; font-weight: 600; }

/* Seuls les liens SANS classe reçoivent le soulignement : les boutons d'appel
   à l'action, eux, portent leur propre habillage plus bas. */
.blog-article a:not([class]) { color: #5300b7; text-decoration: underline; text-underline-offset: 2px; }

/* Les icônes Font Awesome de la ligne de contexte ne peuvent rien afficher,
   la police n'étant pas chargée. On les retire plutôt que de laisser des
   espaces sans raison. */
.blog-article .article-meta { font-size: 13px; color: #6b7a90; margin: 0 0 22px; }
.blog-article .article-meta i { display: none; }

.blog-article .lead { font-size: 18.5px; line-height: 1.7; color: #2a3752; background: #f7f4fd; border-left: 4px solid #5300b7; padding: 18px 22px; border-radius: 12px; margin: 0 0 28px; }

/* Le crochet des listes était un caractère de Font Awesome : sans la police,
   chaque puce affichait un carré vide. Il est désormais DESSINÉ en CSS, donc
   sans dépendance. */
.blog-article .check-list { list-style: none; padding: 0; margin: 0 0 18px; }
.blog-article .check-list li { position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.7; }
.blog-article .check-list li::before {
  content: ""; position: absolute; left: 3px; top: 0.52em;
  width: 11px; height: 6px;
  border-left: 2.5px solid #5300b7; border-bottom: 2.5px solid #5300b7;
  transform: rotate(-45deg);
}

.table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid #e6e9f0; border-radius: 12px; }
.blog-article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.blog-article th { background: #0d1b2a; color: #fff; text-align: left; padding: 12px 16px; font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-weight: 600; }
.blog-article td { padding: 12px 16px; border-bottom: 1px solid #eef1f6; color: #44526a; }
.blog-article tbody tr:nth-child(even) td { background: #faf8fd; }
.blog-article tbody tr:last-child td { border-bottom: 0; }

.blog-article .note { background: #fff8e6; border: 1px solid #ffe2a8; border-radius: 12px; padding: 16px 20px; color: #5b4a1f; margin: 0 0 20px; }

/* --- appel à l'action de fin d'article --- */
.article-cta { margin-top: 40px; background: #0d1b2a; color: #fff; border-radius: 18px; padding: 34px 30px; text-align: center; }
.article-cta h3 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; font-size: 23px; line-height: 1.3; font-weight: 600; color: #fff; margin: 0 0 12px; }
.article-cta p { color: rgba(255, 255, 255, 0.85); margin: 0 0 22px; }

/* Les deux boutons reprennent l'habillage de ceux de la page Tarifs : violet
   plein pour l'action principale, contour clair pour la seconde. */
.vl-btn1, .vl-btn2 {
  display: inline-block; font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600; padding: 11px 24px; border-radius: 999px;
  text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease;
}
.vl-btn1 { background: #5300b7; border: 1px solid #5300b7; color: #fff; box-shadow: 0 2px 8px rgba(83, 0, 183, 0.28); }
.vl-btn1:hover { background: #43008f; color: #fff; transform: translateY(-1px); }
.vl-btn2 { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; }
.vl-btn2:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 640px) {
  .inner-page-hero-area { padding: 104px 0 52px; }
  .inner-hero-title h1 { font-size: 30px; }
  .inner-hero-title p { font-size: 16px; }
  .sp1 { padding: 40px 0 56px; }
  .sp1 .container { padding: 0 1.25rem; }
  .blog-article h2 { font-size: 22px; }
  .article-cta { padding: 26px 20px; }
  .vl-btn1, .vl-btn2 { display: block; margin: 0 0 10px !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   5. LES BORDURES DE MARQUE — 30 septembre 2026

   Ce fichier remappait deja « text-primary » et « text-secondary » sur les
   deux violets de la maison, parce que le theme d'origine les donnait en lilas
   tres pale. Les bordures, elles, etaient restees sur l'ancienne palette.

   Tant que « border-t-4 » n'existait pas, cela ne se voyait pas : aucun filet
   n'etait dessine. Maintenant qu'il l'est, le filet des cartes produit sortait
   GRIS — la bordure de « glass-card », posee en !important, l'emportait sur une
   couleur de marque qui n'etait de toute facon pas la bonne.

   Le !important ci-dessous n'est pas une facilite : il repond a celui de
   « glass-card », qu'on ne peut pas retirer sans reprendre toutes les cartes.
   ─────────────────────────────────────────────────────────────────────────── */
.border-primary   { border-color: #6b21a8 !important; }
.border-secondary { border-color: #7c3aed !important; }

/* ───────────────────────────────────────────────────────────────────────────
   6. LES BORDURES NE SE DESSINAIENT PAS — 30 septembre 2026

   Constat en auditant la feuille : les sept classes de largeur de bordure du
   theme (border, border-2, border-b, border-t, border-r, border-l-4,
   border-r-4) declarent une LARGEUR et rien d'autre. Or une largeur sans style
   ne dessine rien du tout — la valeur initiale de « border-style » est
   « none ». Tailwind pose normalement « border-style: solid » sur tous les
   elements via son preambule ; ce preambule ne figure pas dans la feuille
   compilee du site.

   Consequence : AUCUNE bordure du site ne s'affichait, alors que chacune de
   ces classes est systematiquement accompagnee d'une couleur de bordure —
   preuve que le dessin etait bien voulu. Le filet sous l'en-tete, le contour
   des cartes, la pastille de la page Services : tous etaient prevus, aucun
   n'apparaissait.
   ─────────────────────────────────────────────────────────────────────────── */
.border, .border-2, .border-b, .border-t, .border-r, .border-l-4, .border-r-4,
.border-t-4 { border-style: solid; }


/* ───────────────────────────────────────────────────────────────────────────
   7. L'ANCIENNE GRILLE, POUR DE BON — 30 septembre 2026

   Les regles de grille ecrites plus haut etaient confinees a « .sp1 », le
   conteneur des articles de blog. Or « Mon espace » (/espace), l'ecran d'accueil
   des membres connectes, emploie la MEME grille Bootstrap sans ce conteneur :
   ses deux cartes s'etalaient sur toute la largeur de l'ecran.

   Les regles sont donc posees globalement, et les versions confinees
   au-dessus deviennent redondantes — elles sont conservees telles quelles,
   elles ne font que repeter le meme resultat.

   Ces noms sont volontairement traites comme un jeu FERME : ce qui existe dans
   les pages, rien de plus. On ne reconstruit pas Bootstrap.
   ─────────────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
.row { display: flex; flex-wrap: wrap; }
.row.justify-content-center, .justify-content-center { justify-content: center; }
.g-4 { gap: 1.5rem; }
.col-md-6, .col-lg-9 { width: 100%; }
@media (min-width: 768px) {
  .col-md-6 { width: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
  .col-lg-9 { max-width: 820px; }
}
@media (max-width: 640px) {
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* Le voile sombre du bandeau de titre n'a de sens que par-dessus une PHOTO :
   il sert a rendre le texte blanc lisible. « Mon espace » pose son propre
   degrade en style en ligne ; l'y superposer ne ferait que le ternir. */
.inner-page-hero-area:not([style*="url("])::before { display: none; }

/* Le filet des cartes produit restait gris malgre la section 5 : « glass-card »
   est REDEFINIE dans le <style> de head.ejs sous « html.light .glass-card »,
   un selecteur plus specifique que « .border-primary », et charge apres
   site.css. On ne peut donc pas l'emporter par l'ordre ni par !important seul :
   il faut trois classes. Celles-ci sont exactement celles que portent les
   cartes concernees. */
.glass-card.border-t-4.border-primary   { border-top-color: #6b21a8 !important; }
.glass-card.border-t-4.border-secondary { border-top-color: #7c3aed !important; }

/* Le titre des pages legales portait une taille en style en ligne et aucune
   classe de police : il sortait en Inter quand tout le reste du site sort en
   Montserrat. La balise suffit a le raccrocher, sans reprendre les deux pages.
   « !important » repond au style en ligne, qui l'emporterait sinon. */
.legal-page h1 { font-family: Montserrat, ui-sans-serif, system-ui, sans-serif !important; }

/* ===== Blocs SEO / GEO (02/10/2026) : FAQ visibles, comparatif des logiciels =====
   Titres, listes et tableaux bruts (la feuille Tailwind precompilee remet tout a
   zero) ; couleurs heritees du theme clair ou sombre. */
.seo-bloc{max-width:860px;margin:0 auto}
.seo-bloc h2{font-family:Montserrat,ui-sans-serif,system-ui,sans-serif;font-size:26px;line-height:1.3;font-weight:700;margin:0 0 14px}
.seo-bloc h3{font-family:Montserrat,ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.4;font-weight:600;margin:26px 0 6px}
.seo-bloc p,.seo-bloc li{line-height:1.65;margin:0 0 10px}
.seo-bloc ul{list-style:disc;padding-left:22px;margin:16px 0}
.seo-bloc a{color:#5300b7;text-decoration:underline}
html.dark .seo-bloc a{color:#dfb7ff}
.seo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.seo-bloc table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.seo-bloc th,.seo-bloc td{border:1px solid rgba(120,110,160,.28);padding:10px 12px;text-align:left;vertical-align:top}
.seo-bloc thead th{background:rgba(83,0,183,.08);font-weight:700}
.seo-bloc tbody th{font-weight:600;width:20%}
.seo-bloc caption{caption-side:bottom;font-size:13px;opacity:.75;padding-top:8px;text-align:left}