/* Styles propres à TIPS, en complément de Bootstrap 5.3 */

/* ------------------------------------------------------------------ charte graphique
   Reprise de TIPS-PHP (orange et bleu, police Ubuntu, cartes arrondies) et de l'hébergeur AUNEGe (orange du logo
   #F78F3E / #FBA74D). Contrastes vérifiés (WCAG 2.1, RGAA 3.2 et 3.3) : le texte est toujours marine ou blanc sur
   les aplats, jamais orange sur blanc (2,35:1) ; l’orange lisible sur blanc est #9A4300 (6,6:1). */
@font-face { font-family: "Ubuntu"; src: url("../fonts/Ubuntu-Regular.8137e84a6240.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fonts/Ubuntu-Italic.ac62f670b113.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fonts/Ubuntu-Medium.fdc87c926772.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("../fonts/Ubuntu-Bold.634b54dabba0.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
    --tips-orange: #F78F3E;        /* orange AUNEGe : aplats seulement */
    --tips-orange-light: #FBA74D;
    --tips-orange-border: #C25E0F; /* contour de composant, 4,3:1 sur blanc */
    --tips-orange-text: #9A4300;   /* orange pour du texte : 6,6:1 sur blanc, plus de 5:1 sur les fonds gris clair */
    --tips-navy: #050846;          /* texte sur orange (7,9:1) et titres (18,6:1) */
    --tips-blue: #2B6496;          /* bleu TIPS #3374AC assombri : liens 6,2:1, pied de page */
    --tips-cream: #FFF4E8;
    --tips-sky: #EAF6FB;           /* dégradé clair de TIPS-PHP (#9BEEF6 adouci) */

    --bs-body-font-family: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-primary: var(--tips-orange);
    --bs-primary-rgb: 247, 143, 62;
    --bs-link-color: var(--tips-blue);
    --bs-link-color-rgb: 43, 100, 150;
    --bs-link-hover-color: var(--tips-navy);
    --bs-link-hover-color-rgb: 5, 8, 70;
    --bs-heading-color: var(--tips-navy);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-focus-ring-color: rgba(5, 8, 70, .5);
}

body {
    background: linear-gradient(var(--tips-sky), #fff 16rem) no-repeat;
}

/* Focus toujours visible (RGAA 10.7) : marine, lisible sur blanc comme sur l'orange */
:focus-visible {
    outline: 3px solid var(--tips-navy);
    outline-offset: 2px;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(251, 167, 77, .6);
    border-color: var(--tips-navy);
}

/* Boutons : orange AUNEGe et texte marine (ex .my-btn de TIPS-PHP) */
.btn-primary {
    --bs-btn-color: var(--tips-navy);
    --bs-btn-bg: var(--tips-orange);
    --bs-btn-border-color: var(--tips-orange-border);
    --bs-btn-hover-color: var(--tips-navy);
    --bs-btn-hover-bg: var(--tips-orange-light);
    --bs-btn-hover-border-color: var(--tips-orange-border);
    --bs-btn-active-color: var(--tips-navy);
    --bs-btn-active-bg: var(--tips-orange-light);
    --bs-btn-active-border-color: var(--tips-navy);
    --bs-btn-disabled-color: var(--tips-navy);
    --bs-btn-disabled-bg: var(--tips-orange-light);
    --bs-btn-disabled-border-color: var(--tips-orange-border);
    font-weight: 500;
}
.btn-outline-primary {
    --bs-btn-color: var(--tips-orange-text);
    --bs-btn-border-color: var(--tips-orange-border);
    --bs-btn-hover-color: var(--tips-navy);
    --bs-btn-hover-bg: var(--tips-orange-light);
    --bs-btn-hover-border-color: var(--tips-orange-border);
    --bs-btn-active-color: var(--tips-navy);
    --bs-btn-active-bg: var(--tips-orange);
    --bs-btn-active-border-color: var(--tips-navy);
    --bs-btn-disabled-color: var(--tips-orange-text);
    --bs-btn-disabled-border-color: var(--tips-orange-border);
}
.text-bg-primary { color: var(--tips-navy) !important; background-color: var(--tips-orange) !important; }

/* En-tête : bandeau orange comme TIPS-PHP et le logo AUNEGe, texte marine */
.tips-header {
    background: var(--tips-orange);
    border-bottom: 4px solid var(--tips-orange-border);
}
.tips-header .navbar { --bs-navbar-color: var(--tips-navy); --bs-navbar-hover-color: #000; --bs-navbar-active-color: var(--tips-navy);
                       --bs-navbar-brand-color: var(--tips-navy); --bs-navbar-brand-hover-color: var(--tips-navy); }
.tips-header .navbar-brand { font-weight: 700; letter-spacing: .5px; display: flex; align-items: center; gap: .5rem; }
.tips-header .nav-link[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 2px; }
.tips-header .nav-link:hover { text-decoration: underline; }
/* Les textes .visually-hidden (position absolue) d'un tableau défilant doivent rester dans son cadre : sinon ils
   élargissent la page et provoquent un défilement horizontal à 320 px (RGAA 10.11) */
.table-responsive { position: relative; }
/* Boutons secondaires en marine partout : le gris de Bootstrap (#6c757d) tombe sous 4,5:1 sur les fonds colorés
   (alert-info, carte crème des propositions d'activation) ; vérifié par manage.py accessibility_audit */
.btn-outline-secondary { --bs-btn-color: var(--tips-navy); --bs-btn-border-color: var(--tips-navy);
                         --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--tips-navy); --bs-btn-hover-border-color: var(--tips-navy);
                         --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--tips-navy); --bs-btn-active-border-color: var(--tips-navy);
                         --bs-btn-disabled-color: var(--tips-navy); --bs-btn-disabled-border-color: var(--tips-navy); }
.tips-header .navbar-toggler { border-color: var(--tips-navy); }
/* Drapeaux de choix de la langue : la langue courante est encadrée de marine (aria-current) */
.tips-flags button { display: inline-flex; padding: 2px; background: transparent; border: 2px solid transparent;
                     border-radius: 3px; line-height: 0; }
.tips-flags button:hover { border-color: rgba(5, 8, 70, .45); }
.tips-flags button[aria-current="true"] { border-color: var(--tips-navy); }
.tips-flags img { display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

/* Bandeau « serveur de tests » (TEST_SERVER_BANNER) : marine sur l'orange de l'en-tête, texte blanc 19:1 */
.tips-test-banner { background: var(--tips-navy); color: #fff; font-size: .9rem; }
.tips-test-banner a { color: #fff; text-decoration: underline; }
.tips-test-banner a:hover { color: var(--tips-cream); }
.tips-test-banner a:focus-visible { outline-color: #fff !important; }

/* Pied de page bleu bordé d'orange (ex .footer de TIPS-PHP), texte blanc 6,2:1 */
.tips-footer {
    background: var(--tips-blue);
    border-top: 5px solid var(--tips-orange);
    color: #fff;
}
.tips-footer a { color: #fff; }
.tips-footer a:hover { color: var(--tips-cream); }
.tips-footer :focus-visible { outline-color: #fff; }
.tips-footer .tips-host { background: #fff; border-radius: .5rem; padding: .25rem .5rem; display: inline-flex; }

/* Cartes arrondies (ex .card de TIPS-PHP) */
.card { --bs-card-border-radius: 1rem; --bs-card-inner-border-radius: calc(1rem - 1px); }

.chat-messages {
    max-height: 65vh;
    overflow-y: auto;
}

.chat-message {
    max-width: 85%;
    border-radius: .75rem;
    padding: .75rem 1rem;
}

.chat-message--user {
    margin-left: auto;
    background: #cfe2ff;  /* contraste du texte noir > 4.5:1 */
}

.chat-message--assistant {
    background: #f1f3f5;
}

.chat-message--advice {
    background: #fff3cd;
    border: 1px solid #ffe69c;
}

.chat-message--error {
    background: #f8d7da;
}

.chat-message p:last-child {
    margin-bottom: 0;
}

/* Manuel : les intertitres des fragments (h3) restent sous le titre du chapitre (h2 en .h4) */
.manual h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.manual table { width: 100%; margin-bottom: 1rem; }
.manual th, .manual td { border: 1px solid var(--bs-border-color); padding: .35rem .5rem; vertical-align: top; }
.manual figure.capture { margin: 1rem 0 1.5rem; }
.manual figure.capture img { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.manual figure.capture figcaption { font-size: .875rem; color: var(--bs-secondary-color); margin-top: .35rem; }

[x-cloak] { display: none !important; }

/* Page « Fonctionnalités » : une ligne de famille par groupe, états lisibles sans la couleur (texte du badge) */
/* écran étroit : chaque fonctionnalité devient un bloc, l'intitulé de colonne précède chaque valeur */
@media (max-width: 991.98px) {
    .tips-features thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .tips-features tr, .tips-features th, .tips-features td { display: block; width: 100%; }
    .tips-features tbody tr:not(.tips-family) { border-bottom: 1px solid var(--bs-border-color); padding: .5rem 0; }
    .tips-features tbody tr:not(.tips-family) > * { border: 0; padding: .2rem .5rem; }
    .tips-features td { font-size: .875rem; }
    .tips-features td[data-label]::before { content: attr(data-label) " : "; font-weight: 500; color: var(--tips-navy); }
}
.tips-features thead th { border-bottom: 3px solid var(--tips-orange); }
.tips-features .tips-family th { background: var(--tips-cream); color: var(--tips-navy); font-size: 1.05rem; padding-top: .75rem; }
.tips-features tbody th[scope="row"] { font-weight: 500; }
.tips-features tr:target { outline: 3px solid var(--tips-orange-border); outline-offset: -3px; }
.tips-state-always { background: var(--tips-blue); color: #fff; }
.tips-state-off { background: #fff; color: #495057; border: 1px solid #6c757d; }

/* Tableau de bord : proposition d'activation, nouveautés, premiers pas, actualité (ex #card_actualite bleu) */
.tips-suggestion { border: 2px solid var(--tips-orange-border); background: var(--tips-cream); }
.tips-new { background: var(--tips-navy); color: #fff; }
.tips-steps li { margin-bottom: .6rem; }
.tips-steps li.is-done > .fw-medium { text-decoration: line-through; text-decoration-color: #6c757d; }
.tips-news { background: var(--tips-blue); color: #fff; }
.tips-news h2 { color: #fff; }
.tips-news a { color: #fff; }
.tips-news :focus-visible { outline-color: #fff !important; }
.tips-help { display: contents; }
.tips-help-text { display: block; flex-basis: 100%; }  /* sous le titre, sur toute la largeur (sans !important : x-show doit pouvoir le masquer) */

/* Paramètres experts : encadré du formulaire du débutant et bouton d'information (i), cible de 44 px (RGAA 13.x) */
.tips-expert { background: var(--tips-cream); border-color: var(--tips-orange-border) !important; }
.tips-info {
    width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 2px solid var(--tips-blue);
    color: var(--tips-blue); font: italic 700 1.05rem/1 Georgia, "Times New Roman", serif; position: relative;
}
.tips-info::after { content: ""; position: absolute; inset: -.4rem; }  /* zone cliquable élargie */
.tips-info:hover, .tips-info[aria-expanded="true"] { background: var(--tips-blue); color: #fff; }

/* Impression d'une conversation : seulement le fil des messages */
@media print {
    header, nav, form, .btn, details, #chat-status, #chat-error, .d-print-none { display: none !important; }
    .chat-messages { max-height: none !important; overflow: visible !important; }
    main { padding: 0 !important; }
}

/* Page « À propos » : les modules de TIPS (mascottes de la présentation), texte marine sur fond crème */
.tips-about-hero { background: var(--tips-cream); border-radius: 1rem; padding: 1.25rem 1.5rem; }
.tips-about-hero-text { flex: 1 1 20rem; }
.tips-about-hero.tips-page-intro { padding: .75rem 1.25rem; }
.tips-module { border-top: 4px solid var(--tips-orange); }
.tips-module-logo { flex-shrink: 0; height: auto; object-fit: contain; }
.tips-module-tag { display: inline-block; font-size: .75rem; font-weight: 500; vertical-align: middle;
                   color: var(--tips-navy); background: var(--tips-cream); border: 1px solid var(--tips-orange-border);
                   border-radius: 1rem; padding: .05rem .5rem; margin-left: .25rem; }
/* Marque des modules (TIPSIM, TIPSOS, TIPSCAN, TIPSIDOR, filtre |brand) : « TIPS » en marine, suffixe en orange.
   L'orange des logos (#F28C1E, 2,4:1 sur blanc) ne convient qu'aux images ; en texte, l'orange foncé (6,6:1 sur blanc,
   6,1:1 sur crème). Sur un fond coloré (bouton, en-tête, pied de page, bandeau, élément de menu actif), tout le nom
   reprend la couleur du texte : l'orange n'y serait pas lisible. */
.tips-brand { color: var(--tips-navy); font-weight: 700; white-space: nowrap; }
.tips-brand-suffix { color: var(--tips-orange-text); }
a .tips-brand { color: inherit; }
.btn .tips-brand, .btn .tips-brand-suffix,
.tips-header .tips-brand, .tips-header .tips-brand-suffix,
.tips-footer .tips-brand, .tips-footer .tips-brand-suffix,
.tips-test-banner .tips-brand, .tips-test-banner .tips-brand-suffix,
.dropdown-item.active .tips-brand, .dropdown-item.active .tips-brand-suffix { color: inherit; }
.tips-module-icon { flex-shrink: 0; height: auto; vertical-align: middle; }
.tips-module-name { font-size: 1.5rem; line-height: 1.1; }
/* grand texte gras (24 px) : 3:1 suffit, l'orange #C25E0F (4,3:1 sur blanc) reste plus proche de celui des logos */
.tips-module-name .tips-brand-suffix { color: var(--tips-orange-border); }
/* Bande des partenaires (pages de présentation) : logotypes allongés à 44 px, badges ronds à 72 px, centrés */
.tips-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem;
                 margin: 2.5rem 0 0; padding: 1.5rem 1rem; border-top: 1px solid var(--bs-border-color); }
.tips-partners img { display: block; width: auto; max-width: 100%; }  /* l’emporte sur .page-content img */
.tips-partners .tips-partner-wide { height: 44px; }
.tips-partners .tips-partner-small { height: 36px; }
.tips-partners .tips-partner-badge { height: 72px; }

/* Méthode des cas : diapositives, illustration centrée, cartes des conférences (date en orange lisible) */
.tips-slide { border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.page-content .tips-illustration { max-width: min(100%, 420px); }

/* Page « L’équipe TIPS » : photos rondes (l’emporte sur .page-content img), rôle en badge crème à texte marine */
.page-content .tips-team-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
                                 box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .15); }
.tips-team-card { border-top: 4px solid var(--tips-orange); }
.tips-team-role { background: #FFF1E3; color: var(--tips-navy); font-weight: 500; white-space: normal; text-align: left; }
.tips-talk-date { color: var(--tips-orange-text); font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.tips-talks iframe { border: 0; border-radius: .375rem; }

/* Page de connexion (comme TIPS-PHP) : bouton de la fédération Renater aux couleurs de l'État (bleu #000091, 13,5:1
   sur blanc ; icône rouge #e1000f), séparateur « ou » */
.tips-login { border-top: 4px solid var(--tips-orange); }
.btn-renater { display: inline-flex; align-items: center; justify-content: center; gap: .9rem; width: 100%;
               max-width: 420px; padding: .7rem 1.5rem; background: #fff; border: 2px solid #000091; color: #000091;
               font-size: 1.35rem; font-weight: 500; text-decoration: none; transition: background-color .2s ease; }
.btn-renater:hover { background: #ececfe; color: #000091; }
.tips-login a.btn-renater:focus-visible { outline: 3px solid #000091 !important; outline-offset: 3px; }
.btn-renater-icon { color: #e1000f; flex-shrink: 0; }
.tips-or { display: flex; align-items: center; gap: .75rem; color: #495057; }
.tips-or::before, .tips-or::after { content: ""; flex: 1; border-top: 1px solid #adb5bd; }

/* Encarts repliables des auteurs (page d'une conversation) : en-tête cliquable avec un chevron qui pivote */
.tips-panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.tips-panel > summary::-webkit-details-marker { display: none; }
.tips-panel > summary::before { content: "▸"; color: var(--tips-orange-text); transition: transform .15s ease; }
.tips-panel[open] > summary::before { transform: rotate(90deg); }
.tips-panel > summary h2 { margin: 0; }
.tips-panel:not([open]) > summary { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }

/* Texte long gardant ses sauts de ligne mais revenant à la ligne (prompt système de la banque de sujets) ;
   la classe Bootstrap .text-wrap (white-space: normal !important) les supprimait */
.tips-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: .9rem; }

/* Pages de présentation reprises de TIPS-PHP */
.page-content img { max-width: 100%; height: auto; }
.page-content h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.page-content h3 { font-size: 1.05rem; margin-top: 1rem; }
.tips-header .nav-link { white-space: nowrap; }
.tips-header .btn-link.nav-link { text-decoration: none; }
.tips-header .btn-link.nav-link:hover { text-decoration: underline; }
.tips-header .navbar.container { padding-left: .75rem; padding-right: .75rem; }

/* Focus clavier : Bootstrap remplace le contour par une ombre pâle sur les liens de navigation, boutons et menus ;
   on rétablit un contour marine franc (RGAA 10.7), blanc sur le pied de page bleu */
.nav-link:focus-visible, .btn:focus-visible, .dropdown-item:focus-visible, .navbar-toggler:focus-visible, a:focus-visible {
    outline: 3px solid var(--tips-navy) !important;
    outline-offset: 2px;
    box-shadow: none;
}
.tips-footer a:focus-visible { outline-color: #fff !important; }

/* Réglage système « réduire les animations » (RGAA 13.8, WCAG 2.3.3) : transitions et animations coupées, défilement
   immédiat ; les barres de progression rayées s'arrêtent (l'avancement reste annoncé en texte). La vue 3D du Totem
   applique le même réglage dans totem3d.js (rotations instantanées, sans inertie). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .progress-bar-animated { animation: none !important; }
}