/* ========================================================================== SharpHeberg — templates/hostim/css/custom.css Date : 2026-08-31 OBJET Modernisation de l'apparence du portail client (theme hostim / ThemeTags, WHMCS 8.12.1) SANS redesign structurel : hierarchie typographique plus nette, rythme d'espacement coherent, composants plus soignes, lisibilite amelioree en mode clair ET en mode sombre. REVERSIBILITE Ce fichier est le SEUL fichier modifie. Il est charge en DERNIER par includes/head.tpl. VIDER CE FICHIER (ou le remplacer par un fichier vide) RESTAURE INTEGRALEMENT L'APPARENCE D'ORIGINE DU SITE, sans aucune autre intervention : aucun .tpl, aucun .js, aucune autre feuille de style n'a ete touche. REGLES DE CASCADE VALABLES POUR TOUTE LA FEUILLE 1. custom.css est charge apres theme.min.css et hostim.css : a specificite egale, nous gagnons. Le prefixe "html body" ne sert que quand la regle d'origine est plus specifique. 2. EXCEPTION cart.php : /templates/orderforms/themetags_cart/css/all.min.css et son custom.css y sont injectes APRES nous (verifie dans le HTML rendu). Toute regle visant #order-standard_cart passe donc par la specificite (prefixe "html body"). 3. !important : uniquement en reponse a un !important deja present dans le theme, qu'aucune specificite ne peut battre. Chacun est justifie sur place. 4. Aucun display:none, aucune visibility:hidden, aucun changement de position qui sorte un element du flux (la seule regle de position REMET au contraire un element dans le flux : section 7.5). ========================================================================== */ /* ========================================================================== 1. JETONS Additifs : aucun jeton existant de variables.css n'est ecrase, sauf --body-color en mode sombre (section 1.9), argumente sur place. ========================================================================== */ :root { /* --- 1.1 Echelle typographique ------------------------------------- Le theme melange 10/11/12/13/14/14.4/15/16/18/20/22/28/35 px sans logique. Les titres Bootstrap, eux, suivent deja un ratio 1.2 propre (16/20/24/28/32/40) : on ne les touche pas, on prolonge l'echelle vers le bas, la ou tout part en vrille. */ --tt-fs-micro: 0.75rem; /* 12px — badges, meta de cellule */ --tt-fs-meta: 0.8125rem; /* 13px — cellules de tableau, metadonnees */ --tt-fs-label: 0.875rem; /* 14px — libelles, pied de page, erreurs */ --tt-fs-body: 0.9375rem; /* 15px — corps de texte */ --tt-fs-lead: 1.0625rem; /* 17px — chapo, sous-titre de banniere */ --tt-fs-title: 1.5rem; /* 24px — titre de page en flux */ --tt-fs-banner: 1.875rem; /* 30px — titre de banniere de page */ /* Interlignes SANS UNITE : chaque composant recalcule son plomb a partir de sa propre taille (voir section 2.1). */ --tt-lh-tight: 1.2; --tt-lh-snug: 1.35; --tt-lh-base: 1.6; --tt-lh-prose: 1.7; /* --- 1.2 Echelle d'espacement, base 4px ----------------------------- Le theme melange 100/60/50/40/35/30/25/20/15/12/10/8/5px. On recale les seules valeurs structurantes : les ecarts sont d'au plus 4px, invisibles a l'oeil, mais toutes les distances deviennent coherentes. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sh-section-y: var(--sp-8); /* rythme des grandes sections */ /* --- 1.3 Rayons ------------------------------------------------------ --custom-radius (.75rem) est defini dans variables.css et utilise par .tt-rounded / .popover-user-notifications / le menu deroulant, mais JAMAIS par .card ni par .alert, restees au 0.25rem de Bootstrap. */ --sh-radius: var(--custom-radius); --sh-radius-inner: calc(var(--custom-radius) - 1px); --sh-radius-sm: 0.5rem; --sh-radius-pill: 999px; /* --- 1.4 Elevations -------------------------------------------------- Deux couches (contact net + diffusion douce) et surtout AUCUN decalage horizontal : le theme avait 4px 10px 9px 3px (menu deroulant) et 2px 0 20px (barre collante), qui projetaient l'ombre de biais. */ --sh-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px -2px rgba(16, 24, 40, .07); --sh-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 12px 28px -10px rgba(16, 24, 40, .14); /* --- 1.5 Surfaces, filets, texte secondaire -------------------------- */ --sh-muted: #5c6672; /* 5.7:1 sur blanc — remplace #6c757d (4.3:1) */ --sh-divider: var(--border-color); --sh-surface-subtle: #f7f8fa; --sh-row-hover: #eef2fe; /* survol de ligne, plus doux que #D1DCFE */ --sh-tint: #edf1fe; /* fond d'accent leger */ --sh-tint-fg: var(--primary); --sh-surface-accent: var(--primary-light); /* usages « fond » de --primary-light */ --sh-surface-success: var(--success-light); --sh-surface-danger: var(--danger-light); /* --- 1.6 Interaction -------------------------------------------------- Le theme n'expose AUCUN jeton d'etat : ni lien, ni focus, ni bordure de champ. On les nomme, chacun avec son pendant sombre (section 1.9). */ --sh-link: var(--primary); --sh-link-hover: var(--primary-dark); --sh-focus: var(--primary); --sh-focus-shadow: rgba(28, 64, 242, .20); /* Bordure de champ au repos. La valeur est calibree sur le fond REEL des champs de la page de connexion et de l'inscription, qui n'est pas blanc mais --gray-light #f5f5f5 (hostim.css:1430) : #767f8c y donne 3.72:1 (4.05:1 sur blanc), au-dessus du seuil de 3:1 de WCAG 1.4.11. --border-color (#e9eaec) donnait 1.20:1 : la limite du champ etait litteralement invisible. */ --sh-input-border: #767f8c; --sh-danger-text: #d0311f; /* 4.8:1 sur blanc. On NE redefinit PAS --danger (#FF4838), couleur de marque consommee par des fonds et des degrades : on ne corrige que les usages TEXTE. */ --sh-danger-shadow: rgba(208, 49, 31, .22); /* --- 1.7 Pastilles de statut ------------------------------------------ .label impose color:#fff (theme.css:9492). Les fonds Bootstrap 3 du theme donnaient 1.95:1 (.status-suspended), 2.48:1 (.status-active, .status-paid), 3.13:1 (.status-closed) — sous le seuil AA sur les statuts les plus frequents des listes de services et de factures. Meme semantique de teinte, luminosite abaissee. Ces valeurs sont identiques en clair et en sombre (le texte blanc y garde 5:1 et plus), a l'exception de --sh-st-ink, trop proche du fond sombre : la FORME de la pastille y disparaissait (voir section 1.9). */ --sh-st-green: #15803d; /* 5.02:1 */ --sh-st-amber: #b45309; /* 5.02:1 */ --sh-st-red: #c0392b; /* 5.44:1 */ --sh-st-slate: #5a6672; /* 5.87:1 */ --sh-st-teal: #0e7490; /* 5.36:1 */ --sh-st-purple: #6d28d9; /* 7.10:1 */ --sh-st-orange: #b94c00; /* 5.13:1 */ --sh-st-blue: #1d4ed8; /* 6.70:1 */ --sh-st-ink: #1f2937; /* 14.7:1 */ /* --- 1.8 Alertes ------------------------------------------------------- Palettes Bootstrap 4 en dur, sans AUCUNE regle en mode sombre : un fond pastel #d1ecf1 subsistait tel quel sur une page --dark. On tokenise fond / texte / filet d'accent pour les 5 types reellement emis par includes/alert.tpl (info, success, warning, danger/error, secondary). .alert-primary n'est utilise nulle part : non traite. */ --sh-al-info-bg: #eaf4fb; --sh-al-info-fg: #0b4a63; --sh-al-info-ac: #0e7490; --sh-al-succ-bg: #eaf7ee; --sh-al-succ-fg: #12603a; --sh-al-succ-ac: #15803d; --sh-al-warn-bg: #fdf5e3; --sh-al-warn-fg: #7a4a06; --sh-al-warn-ac: #b45309; --sh-al-dang-bg: #fdecea; --sh-al-dang-fg: #8a2620; --sh-al-dang-ac: #c0392b; --sh-al-seco-bg: #f3f5f7; --sh-al-seco-fg: #3f4a57; --sh-al-seco-ac: #5a6672; } /* --- 1.9 Pendants sombres -------------------------------------------------- NOTE : variables.css:10 declare --worning (faute de frappe) alors que hostim.css:676 lit var(--warning). On ne « repare » PAS ce nom ici : publier --warning ecraserait le --warning de Bootstrap (theme.css:32), qui sert de border-color a .form-control.is-warning (etat de validation WHMCS) et degraderait ce contraste. L'unique consommateur de var(--warning) dans le theme est .tt-hero-two h1 mark, sur la page d'accueil publique qui n'est pas servie par ce portail : le statu quo est sans consequence. -------------------------------------------------------------------------- */ :root[data-bs-theme="dark"] { /* Le texte courant etait nettement moins lisible en sombre qu'en clair pour le meme contenu : #94a3b8 sur --dark = 6.96:1, contre 10.37:1 en clair. #cbd5e1 retablit la parite (12.0:1 sur --dark, 9.9:1 sur les cartes --gray-light). Un seul jeton remonte d'un coup la lisibilite des tableaux, des menus deroulants et des champs. */ --body-color: #cbd5e1; --sh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 8px -2px rgba(0, 0, 0, .50); --sh-shadow-md: 0 2px 4px -2px rgba(0, 0, 0, .45), 0 14px 32px -10px rgba(0, 0, 0, .60); --sh-muted: #94a3b8; --sh-divider: var(--gray); /* #334155 : --border-color vaut #64748b en sombre, trop clair pour un filet. */ --sh-surface-subtle: var(--gray-light); --sh-row-hover: #2b3950; --sh-tint: #1b2a63; --sh-tint-fg: #93aafd; /* --primary-light (#D1DCFE) est IDENTIQUE en clair et en sombre alors qu'il sert a la fois de FOND (.bg-primary-light, .sidebar .card-header) et de TEXTE clair sur bleu nuit (.tt-footer-menu a). On ne peut donc pas le basculer : --sh-surface-accent porte les seuls usages « fond ». */ --sh-surface-accent: #1b2c5c; --sh-surface-success: #12291a; --sh-surface-danger: #341613; /* hostim.css:15 pose a{color:var(--primary)} et --primary reste #1C40F2 en sombre : 2.61:1 sur le fond de page, 2.14:1 sur une carte. C'est le defaut de contraste le plus grave du theme. On ne touche pas a --primary lui-meme (il sert de FOND a .btn-primary avec du texte blanc, 6.85:1). */ --sh-link: #7d9bff; /* 6.80:1 sur --dark, 5.58:1 sur les cartes */ --sh-link-hover: #a8beff; --sh-focus: #7d9bff; --sh-focus-shadow: rgba(125, 155, 255, .28); --sh-input-border: #64748b; /* 3.07:1 sur le fond du champ */ --sh-danger-text: #ff8a7e; /* 6.40:1 sur les cartes */ --sh-danger-shadow: rgba(255, 138, 126, .25); /* Seule teinte de statut qui ne survit pas au fond sombre : #1f2937 sur --dark (#0f172a) = 1.22:1, la pastille n'avait plus de contour. */ --sh-st-ink: #475569; --sh-al-info-bg: #102a34; --sh-al-info-fg: #a8dcec; --sh-al-info-ac: #2fa8cc; --sh-al-succ-bg: #12291d; --sh-al-succ-fg: #b5e6c6; --sh-al-succ-ac: #3aa564; --sh-al-warn-bg: #2e2411; --sh-al-warn-fg: #f3d79b; --sh-al-warn-ac: #c98a1e; --sh-al-dang-bg: #2e1614; --sh-al-dang-fg: #f5b8b2; --sh-al-dang-ac: #d0483a; --sh-al-seco-bg: #1b2431; --sh-al-seco-fg: #c6cfda; --sh-al-seco-ac: #64748b; } /* ========================================================================== 2. BASE TYPOGRAPHIQUE ========================================================================== */ /* --- 2.1 Le correctif structurant ----------------------------------------- hostim.css:5-7 declare « font-size: 0.9rem; line-height: 1.65rem ». L'interligne est en unite ABSOLUE : il est herite tel quel par tout le document. Un texte a 11px se retrouve donc avec 26,4px de plomb (ratio 2,4) et une cellule a 13px avec 26,4px aussi. C'est la cause racine du rythme vertical flottant partout ailleurs. Une seule regle repare les badges, les cycles de facturation, les cellules et les mentions legales. 0.9rem = 14,4px (sous-pixel, rendu flou) devient 15px pile : +4%, aucun risque de reflow, et le corps se cale enfin sous h6 dans l'echelle. AUCUN EFFET SUR LES BOITES DES CONTROLES : verifie dans theme.min.css, Bootstrap declare explicitement line-height:1.5 sur .btn, .form-control ET .custom-select, et ces trois regles fixent aussi leur font-size (14px via hostim.css:130/132). Les boutons et les champs n'heritent donc ni de la taille ni de l'interligne du body : leur hauteur ne bouge pas d'un pixel, y compris sur cart.php et /login. -------------------------------------------------------------------------- */ html body { font-size: var(--tt-fs-body); line-height: var(--tt-lh-base); } /* Pied de page aligne sur le cran 14px, comme ses propres liens de menu (hostim.css:1009 fixe deja .tt-footer-menu li a a 14px). */ html body footer.footer { font-size: var(--tt-fs-label); } /* --- 2.2 Hierarchie des titres -------------------------------------------- theme.css:362-367 applique line-height:1.2 et margin-bottom:0.5rem a TOUS les niveaux. A 40px, 8px de marge basse ne separe rien ; a 16px, 1.2 est trop serre des que le titre passe sur deux lignes. Les TAILLES restent inchangees : elles forment deja un ratio 1.2 correct, et retrecir des titres deja en production serait une regression. -------------------------------------------------------------------------- */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { line-height: var(--tt-lh-snug); margin-bottom: 0.45em; /* em : le rythme suit la taille du titre */ } h1, .h1, h2, .h2 { line-height: var(--tt-lh-tight); letter-spacing: -0.015em; /* correction optique aux grands corps */ } h3, .h3, h4, .h4 { letter-spacing: -0.01em; } /* h6 a 16px/500 ne se detachait plus d'un corps a 15px/400 (ecart 1,07x). 700 est un poids reellement charge pour Roboto (variables.css importe 400;500;700) ; 600 serait synthetise. */ h6, .h6 { font-weight: 700; } /* --- 2.3 Titres de page et de section ------------------------------------- hostim.css:168-174 ramene .primary-content .card-title a 18px, aussi bien pour un titre de PAGE que pour un titre de SECTION dans une carte : la hierarchie s'effondre a 18px contre 15px de corps. PORTEE REELLE de la premiere regle : le seul gabarit qui emette un h2.card-title en enfant DIRECT de .primary-content est announcements.tpl:1 (configuressl-stepone/steptwo placent le leur dans un .card-body, ils ne sont donc pas atteints). Les autres titres de page sont des h3.card-title, volontairement laisses a 18px : les elargir n'a pas pu etre valide sur un rendu authentifie. -------------------------------------------------------------------------- */ html body .primary-content > h2.card-title { font-size: var(--tt-fs-title); /* 24px : palier net au-dessus du corps */ line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--sp-5) 0; } /* Titre de section dans une carte : taille conservee (18px), on ne corrige que l'interligne (herite a 1.2) et la marge. */ html body .primary-content .card-body > .card-title, html body .primary-content .card-header .card-title { line-height: var(--tt-lh-snug); margin: 0 0 var(--sp-4) 0; } /* --- 2.4 Banniere de page -------------------------------------------------- Le

est neutralise dans le markup par la classe utilitaire .h3 (28px) : on la surclasse par specificite (0,1,2 contre 0,1,0), sans modifier le .tpl. La section porte py-5, la place existe. Le fil d'Ariane est en position:absolute (hostim.css:614) : il ne bouge pas. Le sous-titre n'avait aucune taille propre — il passait pour du corps de texte perdu sur le degrade. -------------------------------------------------------------------------- */ html body .tt-page-header-info h1 { font-size: var(--tt-fs-banner); line-height: var(--tt-lh-tight); letter-spacing: -0.015em; } html body .tt-page-header-info p { font-size: var(--tt-fs-lead); line-height: 1.5; max-width: 52ch; margin-bottom: 0; } /* --- 2.5 Textes secondaires ------------------------------------------------ */ /* hostim.css:24 met .small/small a 90% (13,5px sous-pixel) sans interligne. */ html body small, html body .small { font-size: var(--tt-fs-meta); line-height: var(--tt-lh-snug); } /* .text-sm est UTILISE dans le markup (knowledgebasearticle.tpl:24 — seule occurrence du token autonome ; text-sm-left / text-sm-right et info-text-sm sont des classes DIFFERENTES, non ciblees) mais n'est defini NULLE PART : seules les variantes responsive existent. La meta s'affichait donc a la taille du corps. Regle purement additive. */ html body .text-sm { font-size: var(--tt-fs-meta); line-height: var(--tt-lh-snug); } /* .lead : 20px en graisse 300, tres date et peu contraste (theme.css:393). Poids 300 non charge pour Open Sans via variables.css. */ html body .lead { font-size: var(--tt-fs-lead); font-weight: 400; line-height: var(--tt-lh-prose); } /* --- 2.6 Texte de lecture : longueur de ligne et rythme -------------------- .tt-new-content (viewannouncement.tpl:25) et les
(announcements.tpl:25, knowledgebasearticle.tpl:29) n'ont aucun style typographique : sur une colonne de 800 a 1100px, cela donne 110 a 150 caracteres par ligne, plus du double de la longueur confortable. IMPORTANT : la contrainte de largeur est posee sur les PARAGRAPHES, pas sur le conteneur — tableaux, images et blocs de code gardent toute la largeur disponible, et rien n'est sorti du flux. -------------------------------------------------------------------------- */ html body .tt-new-content, html body .tt-news-wrap .tt-news-single article, html body .primary-content .card-body > article { line-height: var(--tt-lh-prose); } html body .tt-new-content p, html body .tt-new-content ul, html body .tt-new-content ol, html body .tt-news-wrap .tt-news-single article p, html body .primary-content .card-body > article p, html body .primary-content .card-body > article ul, html body .primary-content .card-body > article ol { max-width: 68ch; margin-bottom: 1.15em; } /* theme.css:83 impose margin-top:0 a tous les titres : dans un article, un sous-titre se retrouve colle au paragraphe precedent. */ html body .tt-new-content h2, html body .tt-new-content h3, html body .tt-new-content h4, html body .tt-new-content h5, html body .primary-content .card-body > article h2, html body .primary-content .card-body > article h3, html body .primary-content .card-body > article h4, html body .primary-content .card-body > article h5 { margin-top: 1.6em; } html body .tt-new-content > :first-child, html body .primary-content .card-body > article > :first-child { margin-top: 0; } html body .tt-new-content > :last-child, html body .tt-news-wrap .tt-news-single article > :last-child, html body .primary-content .card-body > article > :last-child { margin-bottom: 0; } /* --- 2.7 Texte secondaire : couleur --------------------------------------- .text-muted vaut #6c757d, sans equivalent sombre : 3.81:1 sur le fond de page sombre (echec AA) et 4.30:1 en clair des qu'il est pose sur --gray-light. 14 occurrences dans le HTML rendu, dont l'accroche et « Forgot Password ? » de /login et les cycles de facturation du panier. !important assume : Bootstrap ecrit .text-muted{color:#6c757d!important}, qu'aucune specificite ne peut battre. -------------------------------------------------------------------------- */ html body .text-muted { color: var(--sh-muted) !important; } html body .form-control::placeholder { color: var(--sh-muted); opacity: 1; } /* ========================================================================== 3. MISE EN PAGE ET ESPACEMENT ========================================================================== */ /* --- 3.1 Rythme vertical du corps de page --------------------------------- hostim.css:650 -> section#main-body{padding:60px 0}. 64px pour rester sur l'echelle. .tt-auth-wrap est exclu (traite en 3.6). Specificite (1,1,1) > (1,0,1). La page d'accueil garde son .ptb-100, declare en !important par hostim.css:55. MOBILE — CONTRAINTE IMPERATIVE : .tt-breadcrumb est en position:absolute avec bottom:-48px, ancre sur .tt-page-header (hostim.css:610-620) : il DEBORDE de 48px A L'INTERIEUR de #main-body, et aucune media query du theme ne le repositionne. Le padding-top de #main-body est donc la seule garde qui empeche le fil d'Ariane de chevaucher le contenu. On ne descend JAMAIS ce padding-top sous 48px : seul le padding-bas est reduit en mobile. (Concerne announcements, knowledgebase, contact ET cart.php.) -------------------------------------------------------------------------- */ section#main-body:not(.tt-auth-wrap) { padding-top: var(--sh-section-y); padding-bottom: var(--sh-section-y); } @media (max-width: 767.98px) { section#main-body:not(.tt-auth-wrap) { padding-top: 3.75rem; /* 60px, valeur d'origine : >= 48px */ padding-bottom: var(--sp-6); /* 32px : l'aeration mobile visee en bas */ } } /* --- 3.2 Alignement du contenu sans barre laterale ------------------------- header.tpl:32 : quand il n'y a pas de sidebar, le markup est .container > .col-12.primary-content, SANS .row parent (verifie dans cart.php.html, contact.php.html, cart.php_a_view.html). Le padding de 15px de la colonne n'est donc annule par aucune marge negative et s'ajoute aux 15px du conteneur : le bord du contenu saute de 15px quand on navigue entre une page a sidebar et une page sans. Specificite (1,2,0) : gagne meme sur cart.php. Sous 576px on restitue la gouttiere : l'alignement inter-pages n'y a plus d'interet et le tunnel de commande ne doit pas se rapprocher du bord. -------------------------------------------------------------------------- */ #main-body > .container > .primary-content.col-12 { padding-left: 0; padding-right: 0; } @media (max-width: 575.98px) { #main-body > .container > .primary-content.col-12 { padding-left: 15px; padding-right: 15px; } } /* --- 3.3 Rythme des cartes de contenu ------------------------------------- hostim.css:1661 -> margin-bottom:20px, seule valeur hors echelle du flux principal. -------------------------------------------------------------------------- */ .primary-content .card { margin-bottom: var(--sp-5); } /* --- 3.4 Largeur de conteneur sur grand ecran ----------------------------- Bootstrap 4.5 s'arrete a 1140px et n'a pas de palier xxl : sur un 1440p, les tableaux de l'espace client se compriment pour rien. Palier modere (+140px), applique uniformement a l'en-tete, au corps et au pied — rien ne se desaligne. Rien ne change sous 1400px. Le tunnel de commande ne redefinit pas .container (verifie par grep sur all.min.css). -------------------------------------------------------------------------- */ @media (min-width: 1400px) { .container { max-width: 1280px; } } /* --- 3.5 Page contact : padding vertical en double ------------------------- contact.tpl:3 pose .ptb-60 sur le formulaire alors que #main-body applique deja son propre rythme : 120px de vide au-dessus du premier champ. !important INEVITABLE : hostim.css:58 declare .ptb-60 en !important. Portee la plus etroite possible. -------------------------------------------------------------------------- */ html body section#main-body .tt-contact-form.ptb-60 { padding-top: 0 !important; padding-bottom: 0 !important; } /* Les 60px du bas servaient accidentellement de separateur quand les deux colonnes col-lg-6 s'empilent : on le remplace par une marge explicite. */ @media (max-width: 991.98px) { #main-body .tt-contact-form { margin-bottom: var(--sp-7); } } /* Sous 768px, « Nom » et « Email » (col-12 col-md-6) s'empilent et se touchent : .form-group ne pose sa marge que sur la ligne, pas sur les colonnes. Volontairement limite a .tt-contact-form : ailleurs le motif form-group.row est « label + champ », ou une marge serait une regression. */ @media (max-width: 767.98px) { .tt-contact-form .form-group.row > [class*="col-"] + [class*="col-"] { margin-top: var(--sp-4); } } /* --- 3.6 Page de connexion : hauteur ------------------------------------- ZONE CRITIQUE — intervention volontairement minimale. hostim.css:1379 -> .tt-auth-wrap{min-height:100vh !important}, alors que l'en-tete (~120px) et le pied de page complet s'ajoutent au-dessus et en dessous (footer.tpl emet