/*!
 * TSN Services — feuille de style du site
 * ---------------------------------------
 * Remplace le CDN Tailwind (cdn.tailwindcss.com), qui compilait le CSS dans le
 * navigateur : ~400 Ko de JavaScript, un avertissement en console et une requete
 * vers un tiers a chaque page.
 *
 * Ce fichier reprend a l'identique les classes utilitaires de Tailwind v3
 * REELLEMENT utilisees par le site : le HTML n'a pas eu besoin d'etre modifie.
 *
 * IMPORTANT — en cas d'ajout de nouvelles classes dans les pages PHP, il faut
 * ajouter la regle correspondante ici, sinon elle restera sans effet.
 * Points d'arret : sm = 640px, md = 768px, lg = 1024px.
 */

/* ==========================================================================
   1. Palette
   ========================================================================== */

:root {
    /* Couleurs de marque */
    --tsn-blue-50:  #eff6ff;
    --tsn-blue-100: #dbeafe;
    --tsn-blue-500: #3b82f6;
    --tsn-blue-700: #1e3a5f;
    --tsn-blue-800: #1a2e4a;
    --tsn-blue-900: #0f1d30;

    --tsn-orange-100: #ffedd5;
    --tsn-orange-500: #f97316;
    --tsn-orange-600: #ea580c;

    /* Gris */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Couleurs de statut et d'accent */
    --blue-100:   #dbeafe;
    --blue-600:   #2563eb;
    --green-100:  #dcfce7;
    --green-400:  #4ade80;
    --green-700:  #15803d;
    --red-100:    #fee2e2;
    --red-400:    #f87171;
    --red-500:    #ef4444;
    --red-700:    #b91c1c;
    --purple-100: #f3e8ff;
    --purple-600: #9333ea;
    --amber-100:  #fef3c7;
    --amber-600:  #d97706;
}

/* ==========================================================================
   2. Reinitialisation (equivalent du preflight Tailwind)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid var(--gray-200);
}

html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

p, figure, blockquote {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

strong {
    font-weight: bolder;
}

img, svg, video, iframe {
    display: block;
    max-width: 100%;
}

img, video {
    height: auto;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

legend {
    padding: 0;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0 solid var(--gray-200);
}

button {
    cursor: pointer;
    background-image: none;
}

[type="text"], [type="email"], [type="tel"], select, textarea {
    background-color: #fff;
}

::placeholder {
    color: var(--gray-400);
    opacity: 1;
}

/* Focus visible au clavier : indispensable pour l'accessibilite */
:focus-visible {
    outline: 2px solid var(--tsn-orange-600);
    outline-offset: 2px;
}

/* ==========================================================================
   3. Mise en page
   ========================================================================== */

.container { width: 100%; }

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.inset-0 { inset: 0; }
.top-0   { top: 0; }
.z-10    { z-index: 10; }
.z-50    { z-index: 50; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-grow      { flex-grow: 1; }
.flex-shrink-0  { flex-shrink: 0; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gap-2  { gap: 0.5rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }

.min-h-screen    { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }

/* ==========================================================================
   4. Dimensions
   ========================================================================== */

.w-12   { width: 3rem; }
.w-14   { width: 3.5rem; }
.w-16   { width: 4rem; }
.w-32   { width: 8rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }

.h-10   { height: 2.5rem; }
.h-12   { height: 3rem; }
.h-14   { height: 3.5rem; }
.h-16   { height: 4rem; }
.h-32   { height: 8rem; }
.h-48   { height: 12rem; }
.h-80   { height: 20rem; }
.h-full { height: 100%; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* ==========================================================================
   5. Marges internes et externes
   ========================================================================== */

.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-1  { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.py-12 { padding-top: 3rem;     padding-bottom: 3rem; }
.py-16 { padding-top: 4rem;     padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;     padding-bottom: 6rem; }

.pb-4 { padding-bottom: 1rem; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }

.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }

.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }

.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-x-8 > * + * { margin-left: 2rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ==========================================================================
   6. Typographie
   ========================================================================== */

.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl { font-size: 3rem;     line-height: 1; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.text-center { text-align: center; }

.list-disc   { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.list-disc.list-inside { padding-left: 0; }

/* ==========================================================================
   7. Couleurs de texte
   ========================================================================== */

.text-white { color: #fff; }

.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }

.text-blue-100   { color: var(--blue-100); }
.text-blue-600   { color: var(--blue-600); }
.text-green-700  { color: var(--green-700); }
.text-red-500    { color: var(--red-500); }
.text-red-700    { color: var(--red-700); }
.text-purple-600 { color: var(--purple-600); }
.text-amber-600  { color: var(--amber-600); }

.text-tsn-blue-700   { color: var(--tsn-blue-700); }
.text-tsn-blue-800   { color: var(--tsn-blue-800); }
.text-tsn-orange-500 { color: var(--tsn-orange-500); }

/* ==========================================================================
   8. Couleurs de fond
   ========================================================================== */

.bg-white { background-color: #fff; }

.bg-gray-50  { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }

.bg-blue-100   { background-color: var(--blue-100); }
.bg-green-100  { background-color: var(--green-100); }
.bg-red-100    { background-color: var(--red-100); }
.bg-purple-100 { background-color: var(--purple-100); }
.bg-amber-100  { background-color: var(--amber-100); }

.bg-tsn-blue-50  { background-color: var(--tsn-blue-50); }
.bg-tsn-blue-100 { background-color: var(--tsn-blue-100); }
.bg-tsn-blue-700 { background-color: var(--tsn-blue-700); }
.bg-tsn-blue-800 { background-color: var(--tsn-blue-800); }
.bg-tsn-blue-900 { background-color: var(--tsn-blue-900); }

.bg-tsn-orange-500 { background-color: var(--tsn-orange-500); }

.bg-tsn-blue-900\/80 { background-color: rgb(15 29 48 / 0.8); }

/* Degrade du hero */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--grad-from), var(--grad-to));
}
.from-tsn-blue-900\/90 { --grad-from: rgb(15 29 48 / 0.9); }
.to-tsn-blue-700\/70   { --grad-to: rgb(30 58 95 / 0.7); }

/* ==========================================================================
   9. Bordures et arrondis
   ========================================================================== */

.border   { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }

.border-gray-200 { border-color: var(--gray-200); }
.border-gray-300 { border-color: var(--gray-300); }
.border-gray-700 { border-color: var(--gray-700); }
.border-green-400 { border-color: var(--green-400); }
.border-red-400   { border-color: var(--red-400); }
.border-white     { border-color: #fff; }
.border-tsn-blue-700 { border-color: var(--tsn-blue-700); }

.rounded       { border-radius: 0.25rem; }
.rounded-lg    { border-radius: 0.5rem; }
.rounded-xl    { border-radius: 0.75rem; }
.rounded-full  { border-radius: 9999px; }

/* ==========================================================================
   10. Ombres, filtres, objets
   ========================================================================== */

.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

.drop-shadow    { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); }
.drop-shadow-lg { filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)); }

.object-cover { object-fit: cover; }
.resize-none  { resize: none; }

/* ==========================================================================
   11. Transitions et etats
   ========================================================================== */

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

.hover\:bg-white:hover           { background-color: #fff; }
.hover\:bg-tsn-blue-800:hover    { background-color: var(--tsn-blue-800); }
.hover\:bg-tsn-orange-600:hover  { background-color: var(--tsn-orange-600); }

.hover\:text-white:hover             { color: #fff; }
.hover\:text-tsn-blue-800:hover      { color: var(--tsn-blue-800); }
.hover\:text-tsn-orange-100:hover    { color: var(--tsn-orange-100); }
.hover\:text-tsn-orange-500:hover    { color: var(--tsn-orange-500); }
.hover\:text-tsn-orange-600:hover    { color: var(--tsn-orange-600); }

.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }

.hover\:scale-110:hover                { transform: scale(1.1); }
.group:hover .group-hover\:scale-105   { transform: scale(1.05); }

.focus\:ring-2:focus            { box-shadow: 0 0 0 2px var(--ring-color, var(--tsn-blue-500)); }
.focus\:ring-tsn-blue-500:focus { --ring-color: var(--tsn-blue-500); }
.focus\:border-transparent:focus { border-color: transparent; }

/* Champs de formulaire : on retire le contour natif au profit de l'anneau */
input:focus, select:focus, textarea:focus { outline: none; }

/* Boutons radio aux couleurs du site (remplace le plugin @tailwindcss/forms) */
.form-radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tsn-blue-700);
    cursor: pointer;
}

/* Respect de la preference systeme « animations reduites » */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .hover\:scale-110:hover,
    .group:hover .group-hover\:scale-105 { transform: none; }
}

/* ==========================================================================
   12. Variantes responsives
   ========================================================================== */

@media (min-width: 640px) {
    .sm\:flex     { display: flex; }
    .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 768px) {
    .md\:flex     { display: flex; }
    .md\:flex-row { flex-direction: row; }

    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }

    .md\:mt-0 { margin-top: 0; }
}

@media (min-width: 1024px) {
    .lg\:flex     { display: flex; }
    .lg\:hidden   { display: none; }
    .lg\:flex-row { flex-direction: row; }

    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }

    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-1\/3 { width: 33.333333%; }
    .lg\:w-2\/3 { width: 66.666667%; }

    .lg\:p-12  { padding: 3rem; }
    .lg\:py-40 { padding-top: 10rem; padding-bottom: 10rem; }

    .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .lg\:text-5xl { font-size: 3rem;   line-height: 1; }
}

/* ==========================================================================
   13. Composants specifiques au site
   ========================================================================== */

/* Icones du sprite SVG (includes/icones.php) : la taille suit la taille de
   police, la couleur suit la couleur du texte */
.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* La navigation collante mesure ~88px : sans cette marge, les cibles
   d'ancres (#zone-intervention, #formulaire, prestations) passeraient dessous */
[id] {
    scroll-margin-top: 6.5rem;
}

/* Soulignement de marque sous les titres de section */
.titre-section {
    position: relative;
    padding-bottom: 0.875rem;
}
.titre-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3.5rem;
    height: 0.25rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--tsn-orange-500), var(--tsn-orange-600));
}
.titre-section-gauche::after {
    left: 0;
    transform: none;
}

/* Cartes : legere elevation au survol, en plus de l'ombre */
.transition-lift {
    transition-property: box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
}

/* Menu mobile : deploiement anime (la classe .ouvert est posee par main.js) */
.menu-mobile {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.3s;
}
.menu-mobile.ouvert {
    max-height: 24rem;
    opacity: 1;
    visibility: visible;
}

/* Apparition douce au defilement.
   Ne s'applique que si JavaScript est present (classe "js" sur <html>) :
   sans JS, tout le contenu reste visible. */
html.js .reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js .reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal {
        opacity: 1;
        transform: none;
    }
    .menu-mobile,
    .menu-mobile.ouvert {
        transition: none;
    }
}

/* Contenu reserve aux lecteurs d'ecran : invisible mais bien restitue a l'oral
   (a ne pas confondre avec .hidden, qui masque aussi pour les lecteurs) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Lien d'evitement pour la navigation au clavier et les lecteurs d'ecran */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.5rem;
    background-color: var(--tsn-orange-500);
    color: #fff;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}

/* Assistant de contact : pastille de discussion + volet en bas a droite.
   Ce n'est pas un chat en direct — un guide a choix rapides
   (voir includes/assistant.php) */
.assistant-bouton {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background-color: var(--tsn-orange-500);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.2);
    transition: background-color 150ms, transform 150ms;
}

.assistant-bouton:hover {
    background-color: var(--tsn-orange-600);
    transform: scale(1.06);
}

.assistant-bouton .icon {
    width: 1.625rem;
    height: 1.625rem;
}

/* Bulle d'invitation au-dessus de la pastille, facon messagerie.
   Phrases en rotation (fondu sur le texte), fermable d'une croix.
   Contraste : elle flotte au-dessus de sections claires comme sombres. Un
   fond blanc disparaissait sur les sections claires (ratio 1,05) — d'ou le
   corps bleu marine (fort contraste sur clair) double d'un lisere blanc de
   2px (qui la detache du footer sombre). Le lisere se prolonge sur la queue,
   dont le fond masque le segment qu'elle recouvre : le raccord est continu. */
.assistant-teaser {
    position: fixed;
    right: 1.25rem;
    bottom: 5.75rem;
    z-index: 60;
    max-width: 16rem;
    display: flex;
    align-items: flex-start;
    gap: 0.125rem;
    background: var(--tsn-blue-800);
    color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0 0 2px #fff,
                0 12px 22px -6px rgb(15 29 48 / 0.45),
                0 4px 8px -4px rgb(15 29 48 / 0.3);
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.assistant-teaser.visible {
    opacity: 1;
    transform: none;
}

/* Queue de la bulle : un carre pivote dont deux cotes portent la bordure,
   pointant vers la pastille — le signe graphique d'une vraie bulle. */
.assistant-teaser::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    bottom: -0.4rem;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--tsn-blue-800);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-bottom-right-radius: 0.15rem;
    transform: rotate(45deg);
}

.assistant-teaser-ouvrir {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem 0.75rem 0.875rem;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

/* Icone de marque : rappelle qu'il s'agit d'une discussion */
.assistant-teaser-icone {
    flex-shrink: 0;
    margin-top: 0.05rem;
    color: var(--tsn-orange-500);
    width: 1.1em;
    height: 1.1em;
}

.assistant-teaser-ouvrir:hover {
    color: var(--tsn-orange-100);
}

#assistant-teaser-texte {
    display: inline-block;
    transition: opacity 0.3s ease;
}

#assistant-teaser-texte.fondu {
    opacity: 0;
}

.assistant-teaser-fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.375rem 0.375rem 0 0;
    border-radius: 9999px;
    color: rgb(255 255 255 / 0.65);
    cursor: pointer;
    font-size: 0.7rem;
    transition: background-color 150ms, color 150ms;
}

.assistant-teaser-fermer:hover {
    background: rgb(255 255 255 / 0.18);
    color: #fff;
}

/* Petit « toc-toc » periodique de la pastille (retire des interaction) */
@keyframes assistant-toc {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-9deg); }
    40%      { transform: rotate(8deg); }
    60%      { transform: rotate(-5deg); }
    80%      { transform: rotate(3deg); }
}

.assistant-bouton.toc {
    animation: assistant-toc 0.7s ease;
}

/* Point bleu : une conversation est en cours (la votre — rien de simule) */
.assistant-bouton.en-cours::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: var(--tsn-blue-700);
    border: 2px solid #fff;
}

.assistant-panneau {
    position: fixed;
    right: 1rem;
    bottom: 4.5rem;
    z-index: 60;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - 6rem));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25);
    overflow: hidden;
}

.assistant-panneau[hidden] {
    display: none;
}

/* Ouverture : le volet surgit du coin et sa bordure pulse une fois —
   le regard du visiteur est guide vers l'endroit ou son clic a abouti */
@keyframes assistant-apparition {
    0% {
        opacity: 0;
        transform: translateY(1.25rem) scale(0.92);
    }
    55% {
        opacity: 1;
        transform: translateY(-0.25rem) scale(1.01);
    }
    100% {
        transform: none;
    }
}

@keyframes assistant-signal {
    0%   { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 0 0 0 rgb(249 115 22 / 0.55); }
    100% { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.25), 0 0 0 14px rgb(249 115 22 / 0); }
}

.assistant-panneau.apparition {
    animation: assistant-apparition 0.35s cubic-bezier(0.34, 1.3, 0.64, 1),
               assistant-signal 0.9s ease-out 0.2s;
}

/* Mode confort : le volet s'agrandit quand une etape demande d'ecrire */
.assistant-panneau.confort {
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 6rem));
    transition: width 0.25s ease, max-height 0.25s ease;
}

/* Mobile (< 640px) : le volet occupe l'essentiel de l'ecran, ancre en bas,
   pour une saisie confortable au pouce — un volet compact serait a l'etroit
   une fois le clavier virtuel ouvert. dvh gere la barre d'adresse mobile. */
@media (max-width: 639px) {
    .assistant-panneau,
    .assistant-panneau.confort {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .assistant-corps {
        flex: 1;
    }

    .assistant-bouton,
    .assistant-teaser {
        right: 1rem;
    }
}

.assistant-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--tsn-blue-900);
    color: #fff;
}

.assistant-sous-titre {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tsn-blue-100);
}

.assistant-fermer {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: 0.375rem;
    color: #fff;
}

.assistant-fermer:hover {
    background: rgb(255 255 255 / 0.15);
}

.assistant-corps {
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assistant-bulle {
    align-self: flex-start;
    max-width: 90%;
    background: var(--gray-100);
    color: var(--gray-800);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
    font-size: 0.875rem;
}

/* Les reponses du visiteur sont des boutons : cliquer une reponse permet
   de la corriger (un crayon apparait au survol) */
.assistant-echo {
    align-self: flex-end;
    max-width: 90%;
    background: var(--tsn-blue-700);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms;
}

.assistant-echo::after {
    content: " ✎";
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 150ms;
}

.assistant-echo:hover,
.assistant-echo:focus-visible {
    background: var(--tsn-blue-800);
}

.assistant-echo:hover::after,
.assistant-echo:focus-visible::after {
    opacity: 0.9;
}

.assistant-choix-liste,
.assistant-action {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: stretch;
}

.assistant-choix {
    display: block;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tsn-blue-100);
    border-radius: 0.5rem;
    background: var(--tsn-blue-50);
    color: var(--tsn-blue-700);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
}

.assistant-choix:hover {
    background: var(--tsn-blue-100);
    border-color: var(--tsn-blue-500);
}

.assistant-tel {
    display: block;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tsn-blue-700);
    padding: 0.5rem;
    border: 1px solid var(--tsn-blue-100);
    border-radius: 0.5rem;
    background: var(--tsn-blue-50);
}

.assistant-note {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-align: center;
    margin-top: 0.25rem;
}

.assistant-formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.assistant-saisie,
.assistant-action input[type="text"],
.assistant-action input[type="tel"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

textarea.assistant-saisie {
    min-height: 5.5rem;
    resize: none;
    font-family: inherit;
}

.assistant-erreur {
    font-size: 0.75rem;
    color: var(--red-500);
}

.assistant-actions-ligne {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assistant-passer {
    background: transparent;
    color: var(--gray-500);
    font-size: 0.8125rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0.25rem 0;
}

.assistant-passer:hover {
    color: var(--tsn-blue-700);
}

/* Les bulles peuvent contenir des retours a la ligne (recapitulatif) */
.assistant-bulle {
    white-space: pre-line;
}

/* Confirmation d'envoi : bloc graphique centre avec coche verte animee —
   un aboutissement, pas une replique de dialogue */
.assistant-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0 0.25rem;
    text-align: center;
}

.assistant-confirmation-rond {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--green-100);
    color: var(--green-700);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: assistant-coche-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.assistant-confirmation-rond .icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.5;
}

@keyframes assistant-coche-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.assistant-confirmation-titre {
    font-weight: 600;
    color: var(--gray-800);
}

.assistant-confirmation-note {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* Envoi en cours : rond tournant + texte centre (pas une bulle de dialogue) */
.assistant-envoi-statut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    color: var(--gray-500);
    font-size: 0.8125rem;
    text-align: center;
}

.assistant-rond {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--tsn-blue-100);
    border-top-color: var(--tsn-orange-500);
    border-radius: 9999px;
    animation: assistant-rotation 0.8s linear infinite;
}

@keyframes assistant-rotation {
    to { transform: rotate(360deg); }
}

.assistant-piege {
    display: none !important;
}

.assistant-envoyer {
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    background: var(--tsn-orange-500);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
}

.assistant-envoyer:hover {
    background: var(--tsn-orange-600);
}

.assistant-envoyer:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ==========================================================================
   14. Impression
   ========================================================================== */

@media print {
    nav,
    footer,
    iframe,
    .skip-link,
    .assistant-bouton,
    .assistant-panneau,
    body > div.bg-tsn-blue-900 {
        display: none !important;
    }

    body {
        background: #fff;
    }

    section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}