@charset "utf-8";
/* La ligne ci-dessus DOIT rester la toute première du fichier : elle indique
   au navigateur que ce fichier contient des caractères spéciaux (→, ✓, é...)
   encodés en UTF-8. Sans elle, ces symboles s'affichent mal. */

/* ==========================================================================
   TAK' Informatique - Feuille de style principale (refonte 2026)
   --------------------------------------------------------------------------
   Ce fichier contient toute la partie visuelle du site.
   Pour modifier les couleurs, les tailles ou les espacements, commence par
   regarder la section :root juste en dessous : tout part de là.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables globales
   --------------------------------------------------------------------------
   Une variable CSS commence par --.
   Exemple : var(--color-red) réutilise la couleur rouge partout dans le site.
   Cela permet de changer la charte graphique à un seul endroit.
   -------------------------------------------------------------------------- */
:root {
    /* Charte : rouge / noir / blanc / gris (couleurs du logo TAK'). */
    --color-black: #070709;
    --color-dark: #0e0e12;
    --color-card-dark: #16161b;
    --color-red: #e30613;
    --color-red-dark: #b0000c;
    --color-red-soft: #ff3341;
    --color-white: #ffffff;
    --color-light: #f6f6f8;
    --color-gray: #62666e;
    --color-border: #e6e7ea;

    /* Or des étoiles Google (couleur officielle des avis). */
    --color-star: #fbbc04;

    /* Dégradé signature : utilisé sur les mots importants et les bordures. */
    --gradient-red: linear-gradient(120deg, #ff3341, #e30613 55%, #8e000a);

    --font-display: "IBM Plex Sans", Arial, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "Courier New", monospace;

    --container-width: 1180px;
    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 26px;
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.08);
    --shadow-red: 0 14px 34px rgba(227, 6, 19, 0.25);
}

/* --------------------------------------------------------------------------
   2. Base du site
   --------------------------------------------------------------------------
   On remet certains styles navigateur à zéro pour avoir un résultat régulier.
   -------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Compense le header collant lors d'un clic sur une ancre (#contact...) :
       la section visée ne se retrouve pas cachée sous le header. */
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: var(--font-display);
    background: var(--color-light);
    color: var(--color-black);
    line-height: 1.65;
    /* Rend le texte plus net sur Mac/mobile. */
    -webkit-font-smoothing: antialiased;
}

/* Accessibilité : si la personne préfère réduire les animations,
   on coupe tout, partout, d'un seul coup. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

img {
    max-width: 100%;
    display: block;
}

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

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

/* Sélection de texte à la souris : rouge TAK' au lieu du bleu par défaut.
   Petit détail, mais ça personnalise vraiment le site. */
::selection {
    background: var(--color-red);
    color: var(--color-white);
}

/* Barre de défilement personnalisée (navigateurs Chrome/Edge). */
::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: var(--color-dark);
}

::-webkit-scrollbar-thumb {
    background: #3a3a42;
    border-radius: 8px;
    border: 2px solid var(--color-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-red);
}

/* Conteneur commun à presque toutes les sections. */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* Version plus étroite pour les pages texte. */
.narrow-container {
    max-width: 860px;
}

/* Lien d'évitement : invisible, sauf pour la navigation au clavier (Tab).
   Permet aux personnes non-voyantes de sauter directement au contenu. */
.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 300;
    padding: 12px 20px;
    border-radius: 0 0 12px 12px;
    background: var(--color-red);
    color: var(--color-white);
    font-weight: 700;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Barre de progression de lecture : fine ligne rouge tout en haut,
   remplie par js/effects.js au fur et à mesure du défilement. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 0;
    height: 3px;
    background: var(--gradient-red);
    pointer-events: none; /* On peut cliquer "à travers" la barre. */
}

/* --------------------------------------------------------------------------
   3. Header et navigation
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(7, 7, 9, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Dès qu'on scrolle (classe posée par include-header.js), le header
   devient plus opaque et gagne une ombre : il se détache du contenu. */
.site-header.is-scrolled {
    background: rgba(7, 7, 9, 0.97);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#header-placeholder {
    min-height: 76px;
}

.header-layout {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
    font-size: 22px;
    font-weight: 800;
}

.logo-img {
    height: 58px;
    width: auto;
    max-width: none;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.main-menu a {
    position: relative;
    padding: 6px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 500;
    transition: color var(--transition-fast);
}

/* Soulignement animé : un trait rouge grandit de gauche à droite
   sous le lien au survol (et reste plein sur la page active). */
.main-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-smooth);
}

.main-menu a:hover,
.main-menu a:focus {
    color: var(--color-white);
}

.main-menu a:hover::after,
.main-menu a:focus::after {
    transform: scaleX(1);
}

/* Lien de la page en cours (classe posée par include-header.js). */
.main-menu a.is-active {
    color: var(--color-white);
}

.main-menu a.is-active::after {
    transform: scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Bouton burger : caché sur ordinateur, visible sur mobile (media query
   plus bas). Les 3 <span> sont les 3 barres blanches. */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--color-white);
    transition: transform var(--transition-smooth), opacity var(--transition-fast);
}

/* Menu ouvert : les 3 barres se transforment en croix (X). */
.site-header.menu-open .burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.menu-open .burger span:nth-child(2) {
    opacity: 0;
}

.site-header.menu-open .burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. Boutons
   --------------------------------------------------------------------------
   Les boutons utilisent une classe commune .button, puis une variante :
   .button-primary, .button-secondary, etc.
   -------------------------------------------------------------------------- */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-fast);
}

.button-small {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14px;
}

.button-primary {
    gap: 8px;
    background: var(--color-red);
    color: var(--color-white);
    box-shadow: var(--shadow-red);
}

/* Petite flèche animée à droite du texte. */
.button-primary::after {
    content: "→";
    display: inline-block;
    transform: translateX(-2px);
    transition: transform var(--transition-fast);
}

/* Effet "reflet" : une bande lumineuse traverse le bouton au survol. */
.button-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.button-primary:hover,
.button-primary:focus {
    background: var(--color-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(227, 6, 19, 0.35);
}

.button-primary:hover::after,
.button-primary:focus::after {
    transform: translateX(2px);
}

.button-primary:hover::before {
    left: 120%;
}

.button-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.28);
}

.button-secondary:hover,
.button-secondary:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.button-secondary-dark {
    color: var(--color-black);
    border-color: #d3d5da;
    background: var(--color-white);
}

.button-secondary-dark:hover,
.button-secondary-dark:focus {
    border-color: var(--color-red);
    color: var(--color-red);
}

/* --------------------------------------------------------------------------
   5. Hero de la page d'accueil
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    padding: 110px 0 130px;
    color: var(--color-white);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(227, 6, 19, 0.28), transparent 42%),
        radial-gradient(ellipse at 10% 90%, rgba(227, 6, 19, 0.12), transparent 38%),
        linear-gradient(160deg, #070709 0%, #101014 55%, #070709 100%);
}

/* Le canvas des particules (dessiné par js/effects.js) occupe toute la
   section, DERRIÈRE le contenu (z-index). pointer-events: none permet de
   cliquer les boutons "à travers" le canvas. */
.hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 60px;
    align-items: center;
}

/* Badge d'introduction au-dessus du titre. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.04em;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--color-red-soft);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.section-kicker-dark {
    color: var(--color-red);
}

.hero-content h1 {
    max-width: 780px;
    margin-bottom: 24px;
    font-size: clamp(38px, 5vw, 60px);
}

/* Mot mis en valeur dans le titre : texte "peint" avec le dégradé rouge.
   Technique moderne : background-clip: text. */
.text-gradient {
    background: linear-gradient(100deg, #ff5560, #e30613 60%, #ff3341);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-description {
    max-width: 640px;
    margin-bottom: 34px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 19px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 36px;
}

.hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}

.hero-points span {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Coche rouge dessinée en CSS devant chaque point fort. */
.hero-points span::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(227, 6, 19, 0.18);
    color: var(--color-red-soft);
    font-size: 12px;
    font-weight: 700;
}

/* ---- Faux terminal (panneau droit du hero) ------------------------------
   Une fenêtre de "console technicien" qui tape ses lignes toute seule.
   L'inclinaison 3D au passage de la souris est gérée par js/effects.js
   grâce à l'attribut data-tilt posé dans le HTML. */
.hero-terminal {
    border-radius: var(--radius-medium);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(10, 10, 14, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    /* will-change prévient le navigateur que cet élément va bouger (3D). */
    will-change: transform;
    transition: transform 0.15s ease-out;
}

/* Barre de titre de la fenêtre, avec les 3 pastilles colorées façon macOS. */
.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terminal-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.terminal-dot-red { background: #ff5f57; }
.terminal-dot-yellow { background: #febc2e; }
.terminal-dot-green { background: #28c840; }

.terminal-title {
    margin-left: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.terminal-body {
    /* min-height fixe : la fenêtre ne "saute" pas pendant la frappe. */
    min-height: 250px;
    padding: 22px 22px 26px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 2.05;
}

.terminal-line {
    color: rgba(255, 255, 255, 0.82);
    white-space: pre-wrap;
}

/* Les lignes commençant par ">" sont des commandes : affichées en rouge. */
.terminal-line.is-command {
    color: var(--color-red-soft);
}

/* Les lignes de résultat "✓" sont en vert terminal. */
.terminal-line.is-ok {
    color: #2ee6a6;
}

/* Curseur clignotant pendant la frappe et à la fin. */
.terminal-line.is-typing::after,
.terminal-cursor.is-visible::after {
    content: "▋";
    color: var(--color-red-soft);
    animation: cursor-blink 0.9s steps(1) infinite;
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

/* Badge "systèmes surveillés" flottant sous le terminal. */
.hero-terminal-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ee6a6;
}

/* Halo qui "pulse" autour du point vert, comme un radar. */
.status-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: #2ee6a6;
    opacity: 0.4;
    animation: status-pulse 2.2s ease-out infinite;
}

@keyframes status-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Bandeau chiffres clés (sous le hero)
   --------------------------------------------------------------------------
   Les nombres sont animés par js/reveal.js grâce à data-count.
   -------------------------------------------------------------------------- */
.stats-band {
    padding: 40px 0;
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--color-white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stat-item {
    text-align: center;
    padding: 10px 0;
    /* Trait séparateur vertical entre les stats (sauf la première). */
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-item:first-child {
    border-left: none;
}

.stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
}

.stat-value .stat-suffix {
    font-size: 22px;
    color: var(--color-red-soft);
    font-weight: 600;
}

.stat-label {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. Sections génériques
   -------------------------------------------------------------------------- */
.section {
    padding: 96px 0;
}

.section-light {
    background: var(--color-light);
}

.section-white {
    background: var(--color-white);
}

.section-dark {
    color: var(--color-white);
    background:
        radial-gradient(circle at 15% 10%, rgba(227, 6, 19, 0.16), transparent 30%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        var(--color-black);
    background-size: auto, 22px 22px, auto;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.section-heading.is-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-heading h2 {
    margin-bottom: 16px;
    font-size: clamp(30px, 3.4vw, 42px);
}

.section-heading p:not(.section-kicker) {
    color: var(--color-gray);
    font-size: 17px;
}

.section-heading-light h2 {
    color: var(--color-white);
}

.section-heading-light p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.70);
}

/* --------------------------------------------------------------------------
   8. Grilles et cartes
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    gap: 24px;
}

.card-grid-three {
    grid-template-columns: repeat(3, 1fr);
}

.card-grid-two {
    grid-template-columns: repeat(2, 1fr);
}

.info-card,
.testimonial-card,
.service-detail-card {
    position: relative;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}

/* Trait dégradé rouge en haut de la carte : invisible au repos,
   il "s'allume" au survol. Effet signature du site. */
.info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gradient-red);
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

.info-card:hover::before {
    opacity: 1;
}

.info-card:hover,
.testimonial-card:hover,
.service-detail-card:hover {
    transform: translateY(-6px);
    border-color: rgba(227, 6, 19, 0.30);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.10);
}

.card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border-radius: 15px;
    color: var(--color-red);
    background: rgba(227, 6, 19, 0.08);
    transition: transform var(--transition-smooth), background var(--transition-smooth), color var(--transition-smooth);
}

.card-icon svg {
    width: 25px;
    height: 25px;
}

/* Au survol de la carte, l'icône passe en rouge plein et "saute" légèrement. */
.info-card:hover .card-icon {
    background: var(--color-red);
    color: var(--color-white);
    transform: translateY(-3px) scale(1.05);
}

.info-card h3,
.testimonial-card h3,
.service-detail-card h2,
.service-detail-card h3 {
    margin-bottom: 12px;
}

.info-card p,
.testimonial-card p,
.service-detail-card p {
    color: var(--color-gray);
}

/* Petit lien "En savoir plus →" en bas des cartes service. */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--color-red);
    font-weight: 700;
    font-size: 14.5px;
}

.card-link::after {
    content: "→";
    transition: transform var(--transition-fast);
}

.card-link:hover::after {
    transform: translateX(4px);
}

.dark-card {
    padding: 32px;
    border-radius: var(--radius-large);
    background: var(--color-card-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.dark-card:hover {
    transform: translateY(-6px);
    border-color: rgba(227, 6, 19, 0.45);
    background: #1a1a20;
}

.dark-card .card-icon {
    background: rgba(255, 255, 255, 0.06);
}

.dark-card:hover .card-icon {
    background: var(--color-red);
    color: var(--color-white);
}

.dark-card h3 {
    margin-bottom: 12px;
    color: var(--color-white);
}

.dark-card p {
    color: rgba(255, 255, 255, 0.68);
}

/* --------------------------------------------------------------------------
   9. Section "Comment ça se passe" (étapes numérotées)
   -------------------------------------------------------------------------- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* counter-reset initialise le compteur automatique des étapes. */
    counter-reset: etape;
}

.step-card {
    position: relative;
    padding: 30px 26px;
    border-radius: var(--radius-large);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: rgba(227, 6, 19, 0.3);
}

/* Numéro de l'étape : généré automatiquement par le CSS (01, 02, 03, 04).
   Si tu ajoutes une étape dans le HTML, elle se numérote toute seule. */
.step-card::before {
    counter-increment: etape;
    content: "0" counter(etape);
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 600;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.step-card h3 {
    margin-bottom: 10px;
    font-size: 19px;
}

.step-card p {
    color: var(--color-gray);
    font-size: 15px;
}

/* --------------------------------------------------------------------------
   10. Avis Google
   -------------------------------------------------------------------------- */

/* En-tête de la section : note globale + étoiles + logo Google. */
.google-rating {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 14px 22px;
    border-radius: var(--radius-medium);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

/* Logo "G" officiel de Google en 4 couleurs (SVG directement dans le HTML). */
.google-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.google-rating-score {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 30px;
    color: var(--color-black);
    line-height: 1;
}

.google-rating-text {
    display: grid;
    gap: 3px;
    text-align: left;
}

.google-rating-count {
    color: var(--color-gray);
    font-size: 13.5px;
}

/* Rangée d'étoiles (SVG). Utilisée dans l'en-tête ET dans chaque carte avis. */
.stars {
    display: inline-flex;
    gap: 2px;
}

.stars svg {
    width: 18px;
    height: 18px;
    fill: var(--color-star);
}

.google-rating .stars svg {
    width: 20px;
    height: 20px;
}

/* Carte d'un avis client. */
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.testimonial-card > p {
    flex: 1;
    margin-bottom: 20px;
    font-size: 15.5px;
}

/* Pied de l'avis : avatar rond + nom + mention "Avis Google". */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Avatar : cercle coloré avec l'initiale du client (comme sur Google Maps).
   Trois variantes de couleurs, appliquées carte par carte dans le HTML. */
.testimonial-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--color-white);
    font-weight: 700;
    font-size: 17px;
}

.avatar-blue { background: #4285f4; }
.avatar-green { background: #34a853; }
.avatar-red { background: #ea4335; }
.avatar-purple { background: #a142f4; }

.testimonial-name {
    display: block;
    color: var(--color-black);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
}

.testimonial-source {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-gray);
    font-size: 12.5px;
}

.testimonial-source svg {
    width: 12px;
    height: 12px;
}

.reviews-cta {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* Petit logo Google à gauche du texte dans le bouton "Voir tous nos avis". */
.btn-google-icon {
    width: 19px;
    height: 19px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. Bandeau partenaires défilant ("Ils nous font confiance")
   --------------------------------------------------------------------------
   Défilement infini : le HTML ne contient qu'une seule liste de logos, que
   js/effects.js duplique en nombre pair. L'ensemble glisse de 0% à -50% en
   boucle ; comme -50% correspond à la moitié des copies, la boucle est
   invisible (ni coupure ni saut) et les logos restent centrés.
   -------------------------------------------------------------------------- */
.trust-band {
    /* overflow: hidden est indispensable : le bandeau interne est deux fois
       plus large que l'écran, on ne montre qu'une "fenêtre" dessus. */
    position: relative;
    padding: 64px 0;
    background: var(--color-black);
    overflow: hidden;
}

.trust-band-label {
    margin-bottom: 36px;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
}

.trust-band-track {
    display: flex;
    width: max-content;
    /* margin auto : tant que le JS n'a pas cloné les logos (ou s'il est
       désactivé), la liste unique reste bien CENTRÉE au milieu de la page
       au lieu d'être collée à gauche. */
    margin: 0 auto;
    /* Pas d'animation par défaut : c'est js/effects.js qui l'active (classe
       .is-animated) une fois les copies créées, pour une boucle parfaite. */
    animation: none;
    /* Fondu progressif sur les bords gauche/droit : les logos apparaissent
       et disparaissent en douceur au lieu d'être coupés net. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Classe posée par js/effects.js quand le bandeau est prêt à défiler. */
.trust-band-track.is-animated {
    animation: trust-scroll 30s linear infinite;
}

/* Pause au survol ou au focus clavier : bonne pratique d'accessibilité,
   ça permet de cliquer un logo sans qu'il bouge sous la souris. */
.trust-band-track:hover,
.trust-band-track:focus-within {
    animation-play-state: paused;
}

.trust-band-group {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 14px;
}

/* Chaque logo vit dans une "pastille" blanche arrondie : les logos ressortent
   nets et propres quelle que soit leur couleur d'origine, et le bandeau a un
   rendu beaucoup plus premium qu'avec des logos posés sur fond noir. */
.trust-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    min-width: 170px;
    padding: 16px 30px;
    border-radius: var(--radius-medium);
    background: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.trust-logo:hover,
.trust-logo:focus {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(227, 6, 19, 0.25);
}

.trust-logo img {
    max-height: 52px;
    max-width: 150px;
    width: auto;
    /* object-fit garde les proportions du logo sans jamais le déformer. */
    object-fit: contain;
}

@keyframes trust-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Accessibilité : si la personne a activé "réduire les animations",
   on coupe le défilement automatique et on rend le bandeau défilable
   au doigt / à la souris. */
@media (prefers-reduced-motion: reduce) {
    .trust-band-track,
    .trust-band-track.is-animated {
        animation: none;
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   12. Contenus en deux colonnes (pages internes)
   -------------------------------------------------------------------------- */
.content-two-columns {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 54px;
}

.content-two-columns h2 {
    font-size: clamp(28px, 3vw, 38px);
}

.text-content {
    display: grid;
    gap: 18px;
}

.text-content p {
    color: var(--color-gray);
}

.text-content h2 {
    margin-top: 14px;
    font-size: 28px;
}

/* Ligne "Dernière mise à jour" en bas des mentions légales. */
.legal-updated {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-gray);
    font-size: 14px;
    font-style: italic;
}

/* --------------------------------------------------------------------------
   13. Pages internes (services, à propos, mentions)
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    padding: 96px 0;
    color: var(--color-white);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(227, 6, 19, 0.25), transparent 38%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(150deg, #070709, #101014);
    background-size: auto, 22px 22px, auto;
}

.page-hero h1 {
    margin-bottom: 20px;
    font-size: clamp(36px, 4.5vw, 52px);
}

.page-hero p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.74);
    font-size: 19px;
}

.service-list {
    display: grid;
    gap: 28px;
}

.service-detail-card {
    display: grid;
    gap: 18px;
}

/* En-tête d'une carte service : icône + numéro alignés. */
.service-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.service-card-header .card-icon {
    margin-bottom: 0;
}

.service-tag {
    color: var(--color-red) !important;
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 13px;
}

.service-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius-medium);
    background: var(--color-light);
    border: 1px solid var(--color-border);
}

.service-meta-grid h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

/* Petit point rouge devant les titres "Client idéal" / "Bénéfice clé". */
.service-meta-grid h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-red);
}

.service-detail-card .button {
    justify-self: start;
}

/* --------------------------------------------------------------------------
   14. FAQ (questions/réponses dépliables)
   --------------------------------------------------------------------------
   Utilise les balises HTML natives <details>/<summary> : accessible,
   fonctionne même sans JavaScript, et stylable en CSS.
   -------------------------------------------------------------------------- */
.faq-list {
    display: grid;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-white);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
    border-color: rgba(227, 6, 19, 0.3);
}

.faq-item[open] {
    border-color: rgba(227, 6, 19, 0.4);
    box-shadow: var(--shadow-soft);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    font-weight: 700;
    font-size: 16.5px;
    cursor: pointer;
    /* Supprime la flèche par défaut du navigateur (on met la nôtre). */
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Notre indicateur "+" qui pivote en "×" quand la question est ouverte. */
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(227, 6, 19, 0.08);
    color: var(--color-red);
    font-size: 20px;
    font-weight: 400;
    transition: transform var(--transition-smooth), background var(--transition-fast), color var(--transition-fast);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
    background: var(--color-red);
    color: var(--color-white);
}

.faq-item .faq-answer {
    padding: 0 24px 22px;
    color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   15. Formulaire de contact
   -------------------------------------------------------------------------- */
.contact-box {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: start;
    padding: 56px;
    border-radius: var(--radius-large);
    color: var(--color-white);
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(227, 6, 19, 0.28), transparent 34%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        var(--color-black);
    background-size: auto, 22px 22px, auto;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.25);
}

.contact-text h2 {
    margin-bottom: 18px;
    font-size: clamp(28px, 3vw, 38px);
}

.contact-text p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.72);
}

/* Liste de réassurance sous le texte du contact. */
.contact-reassurance {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}

.contact-reassurance li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-reassurance li::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(227, 6, 19, 0.18);
    color: var(--color-red-soft);
    font-size: 12px;
    font-weight: 700;
}

/* Bloc "contact direct" sous la liste de réassurance : email cliquable
   et horaires d'ouverture, dans un encadré discret. */
.contact-direct {
    display: grid;
    gap: 12px;
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-direct-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
}

.contact-direct-line svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    color: var(--color-red-soft);
}

a.contact-direct-line:hover,
a.contact-direct-line:focus {
    color: var(--color-red-soft);
}

.contact-form {
    display: grid;
    gap: 12px;
}

/* Deux champs côte à côte (nom/email puis téléphone/profil). */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-field {
    display: grid;
    gap: 6px;
}

.contact-form label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-small);
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.07);
    font: inherit;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Champ sélectionné : bordure rouge + léger halo. Le visiteur voit
   immédiatement où il est en train d'écrire. */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-red);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.25);
}

.contact-form textarea {
    min-height: 130px;
    padding-top: 14px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.contact-form select {
    color: rgba(255, 255, 255, 0.72);
}

/* Les options du select sont noires pour rester lisibles dans les menus natifs. */
.contact-form option {
    color: var(--color-black);
}

/*
   SÉCURITÉ : champ "piège à robots" (honeypot).
   Ce champ est masqué pour les humains (position hors écran) mais reste
   présent dans le HTML : les robots spammeurs le remplissent, et le serveur
   C# rejette silencieusement ces envois. Ne pas utiliser display:none,
   certains robots le détectent.
*/
.field-website {
    position: absolute;
    left: -5000px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Note RGPD sous le bouton d'envoi. */
.form-privacy {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   16. Pages de réponse (confirmation, erreur, 404)
   -------------------------------------------------------------------------- */
.response-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    background:
        radial-gradient(circle at top right, rgba(227, 6, 19, 0.22), transparent 32%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        var(--color-black);
    background-size: auto, 22px 22px, auto;
}

.response-card {
    width: min(720px, 100%);
    padding: 44px;
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.response-card h1 {
    margin-bottom: 18px;
    font-size: 36px;
}

.response-card p {
    color: var(--color-gray);
    margin-bottom: 24px;
}

.response-details {
    margin: 24px 0;
    padding: 20px;
    border-radius: var(--radius-medium);
    background: var(--color-light);
    color: var(--color-gray);
    /* Coupe proprement les très longs mots/emails. */
    overflow-wrap: break-word;
}

.response-card.success {
    border-top: 5px solid var(--color-red);
}

.response-card.error {
    border-top: 5px solid var(--color-red-dark);
}

/* Grand "404" décoratif de la page introuvable. */
.error-code {
    font-family: var(--font-mono);
    font-size: 96px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--gradient-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 70px 0 28px;
    color: rgba(255, 255, 255, 0.65);
    background: var(--color-black);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
}

.footer-brand p {
    font-size: 14.5px;
    max-width: 320px;
}

.footer-logo {
    height: 52px;
    width: auto;
    margin-bottom: 18px;
}

.footer-location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.footer-location svg {
    width: 16px;
    height: 16px;
    color: var(--color-red-soft);
    flex-shrink: 0;
}

.footer-column {
    display: grid;
    gap: 10px;
    align-content: start;
}

.footer-column h3 {
    margin-bottom: 8px;
    color: var(--color-white);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14.5px;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-column a:hover {
    color: var(--color-red-soft);
}

/* Bloc horaires dans la colonne Contact du footer. */
.footer-hours {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.8;
}

.footer-hours strong {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.06em;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13.5px;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom a:hover {
    color: var(--color-red-soft);
}

/* --------------------------------------------------------------------------
   18. Apparition au scroll (progressive enhancement, voir js/reveal.js)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   19. Responsive
   --------------------------------------------------------------------------
   Les media queries adaptent la mise en page selon la largeur de l'écran.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    /* Le menu horizontal devient un panneau déroulant sous le header,
       ouvert/fermé par le bouton burger (classe .menu-open posée en JS). */
    .main-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 24px 22px;
        /* Fond 100 % opaque : le contenu de la page ne doit jamais
           transparaître derrière le menu mobile ouvert. */
        background: #0a0a0e;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        /* Fermé par défaut : invisible et non cliquable. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
    }

    .site-header.menu-open .main-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-menu a {
        padding: 14px 4px;
        font-size: 17px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        /* Liens centrés au milieu de l'écran (et non collés à gauche). */
        text-align: center;
    }

    .main-menu a::after {
        display: none; /* Pas de soulignement animé dans le menu mobile. */
    }

    .burger {
        display: flex; /* Le bouton burger apparaît. */
    }

    .hero-layout,
    .content-two-columns,
    .contact-box {
        grid-template-columns: 1fr;
    }

    .card-grid-three,
    .card-grid-two,
    .service-meta-grid {
        grid-template-columns: 1fr;
    }

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

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

    /* Sur 2 colonnes, seule la stat de gauche de chaque ligne perd son trait. */
    .stat-item:nth-child(odd) {
        border-left: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 20px;
    }

    .logo-img {
        height: 46px;
    }

    /* Sur mobile, le bouton "Demander un devis" du header est masqué :
       le burger et le contenu de page suffisent. */
    .header-actions .button-small {
        display: none;
    }

    .hero-section {
        padding: 72px 0 84px;
    }

    .hero-description {
        font-size: 17px;
    }

    .hero-points {
        grid-template-columns: 1fr;
    }

    .hero-actions .button,
    .contact-form .button {
        width: 100%;
    }

    .section {
        padding: 64px 0;
    }

    .page-hero {
        padding: 72px 0;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .stat-value {
        font-size: 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-box,
    .response-card {
        padding: 32px 22px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .terminal-body {
        min-height: 230px;
        font-size: 12.5px;
    }
}