/* ========================================================================
   CORRECTIONS DE RECETTE - DISCUSSION 7 - 12/09/2026
   Retablit quatre reglages que WordPress fournissait et que le code recupere
   ne contenait pas. Ne rien supprimer ici sans avoir relu le rapport de
   recette de la discussion 7.
   ======================================================================== */

/* A2 - Remise a zero du navigateur : sans ces deux lignes, chaque bloc
   mesure 40 points de plus que la place disponible et les pages debordent
   lateralement sur telephone. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* A1 - La section "Pourquoi ScanView Data ?" de l'accueil est ecrite en
   blanc. Son fond sombre etait pose par le theme WordPress, en dehors du code
   des blocs : sans lui, elle etait blanche sur blanc, donc invisible.

   CORRECTION DU 20/09/2026 : ce fond avait d'abord ete pose sur la page
   entiere. C'etait trop large : partout ou aucun bloc ne peint de fond, le
   sombre ressortait, ce qui donnait une bande sombre sous l'entete collante
   et un bandeau sombre autour du fil d'Ariane, par-dessus les videos.
   Le fond sombre est donc pose sur le seul bloc qui en a besoin, et la page
   redevient blanche comme partout ailleurs. */
body { background-color: #FFFFFF; }
.p-accueil-b3 { background-color: #061928; }

/* A2 bis - Rien ne depasse la largeur de l'ecran */
img, video, iframe, table { max-width: 100%; }
@media (max-width: 768px) {
    table { display: block; overflow-x: auto; }
}

/* A2 ter - Textes longs insecables : blocs de commandes et noms de fichiers
   dans un lien. Sans cela, l'article "... en 5 minutes grace a l'IA"
   deborde de 363 points sur telephone. */
pre { max-width: 100%; overflow-x: auto; }
code, a { overflow-wrap: break-word; }

/* A3 - Voile sombre des bandeaux video. La regle existe dans les pages mais
   designe un nom d'element propre a WordPress, qui n'existe plus. Elle est
   rebranchee ici sur les blocs qui contiennent reellement une video de fond.
   Teinte et opacite identiques a l'origine. */
:where(div):has(> .svd-fond-video)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 22, 40, 0.6);
    z-index: 1;
}

/* A6 - Rangees de realisations : les 4 cartes se dimensionnaient sur leur
   contenu, donc toutes de largeurs differentes. Elles se partagent maintenant
   la largeur a parts egales. */
.p-numerisation-3d-b9-i > div,
.p-inspection-aerienne-b9-i > div,
.p-creation-audiovisuelle-b9-i > div {
    flex: 1 1 0;
    min-width: 0;
}

/* A4 - Blocs a deux colonnes : empiles sur telephone. Le !important est
   necessaire car les largeurs 60%/40% sont declarees dans les pages
   elles-memes, donc apres cette feuille. */
@media (max-width: 768px) {
    .p-contact-b2-i,
    .p-numerisation-3d-b9-i,
    .p-inspection-aerienne-b9-i,
    .p-creation-audiovisuelle-b9-i {
        flex-direction: column !important;
    }
    .p-contact-b3, .p-contact-b4 { width: 100% !important; }

    /* Pied de page : 4 colonnes de 25% qui ne s'empilaient jamais.
       Deux colonnes sur telephone, une seule sur les petits ecrans. */
    .pied-b1-i { flex-wrap: wrap; }
    .pied-b2, .pied-b3, .pied-b4, .pied-b5 { width: 50% !important; }
    .pied-b1-i { row-gap: 40px !important; }
}
@media (max-width: 480px) {
    .pied-b2, .pied-b3, .pied-b4, .pied-b5 { width: 100% !important; }
}

/* ========================================
   SCANVIEW DATA - CSS PERSONNALISÉ
   ======================================== */

/* DEBUT POLICE EXO 2 HEBERGEE SUR LE SITE - genere par installer-police.py */
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/ressources/polices/exo2-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('/ressources/polices/exo2-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/ressources/polices/exo2-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/ressources/polices/exo2-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FIN POLICE EXO 2 HEBERGEE SUR LE SITE */

/* Variables globales - Couleurs de la charte */
:root {
    --couleur-bleu-fonce: #0A1628;
    --couleur-bleu-marine: #1a3a52;
    --couleur-bleu: #2563a8;
    --couleur-bleu-clair: #3b82c4;
    --couleur-orange: #ff6b35;
    --couleur-gris: #6b7280;
    --couleur-gris-clair: #f3f4f6;
    --couleur-blanc: #ffffff;
    --police-principale: 'Exo 2', sans-serif;
    --espacement-section: 80px;
    --espacement-mobile: 40px;
}

/* Application globale de la police */
body {
    font-family: var(--police-principale);
    color: var(--couleur-gris);
    line-height: 1.6;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--police-principale);
    font-weight: 700;
    color: var(--couleur-bleu-marine);
    line-height: 1.2;
}

h1 { font-size: 3rem; font-weight: 800; }
h2 { font-size: 2.5rem; font-weight: 700; }
h3 { font-size: 2rem; font-weight: 600; }
h4 { font-size: 1.5rem; font-weight: 600; }

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

/* Forcer le style du message de confirmation Contact Form 7 */
div.wpcf7 .wpcf7-response-output {
    border: 2px solid #46b450 !important;
    background: #d4edda !important;
    color: #155724 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 15px 20px !important;
    margin: 20px 0 0 0 !important;
    border-radius: 5px !important;
    font-family: 'Exo 2', sans-serif !important;
}

div.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
div.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng {
    border: 2px solid #dc3232 !important;
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* ============================================
   STYLE DU BLOG - Harmonisation avec le site
   ============================================ */

/* Fond blanc pour le contenu du blog */
body.blog .site-content,
body.archive .site-content,
body.single-post .site-content {
    background: #ffffff !important;
    padding: 60px 20px !important;
}

/* Container du blog */
#content-wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Titre de la page blog */
.page-header-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #1a3a52 !important;
    margin-bottom: 50px !important;
}

/* Articles individuels */
.blog-entry,
.single-post-content {
    background: #ffffff !important;
    margin-bottom: 40px !important;
    padding: 30px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-entry:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}

/* Titres des articles */
.blog-entry-title,
.single-post-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.blog-entry-title a {
    color: #1a3a52 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.blog-entry-title a:hover {
    color: #ff6b35 !important;
}

/* Meta info (date, catégorie, auteur) */
.blog-entry-meta,
.single-post-header-meta {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

.blog-entry-meta a,
.single-post-header-meta a {
    color: #ff6b35 !important;
    text-decoration: none !important;
}

/* Contenu des articles */
.blog-entry-content,
.entry-content,
.blog-entry-content p,
.entry-content p,
.blog-entry-excerpt,
.entry-excerpt {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #1a1a1a !important;
}

/* Couleur du texte dans les articles du blog - VERSION RENFORCÉE */
body.blog .blog-entry-content,
body.blog .blog-entry-content *,
body.blog .blog-entry-excerpt,
body.blog .blog-entry-excerpt *,
body.archive .blog-entry-content,
body.archive .blog-entry-content *,
body.archive .blog-entry-excerpt,
body.archive .blog-entry-excerpt *,
body.single-post .entry-content,
body.single-post .entry-content *,
body.single-post .entry,
body.single-post .entry * {
    color: #1a1a1a !important;
}

/* Liens dans le contenu des articles - ORANGE et soulignés */
body.blog .blog-entry-content a,
body.blog .entry-content a,
body.archive .blog-entry-content a,
body.archive .entry-content a,
body.single-post .entry-content a,
body.single-post .entry a,
article .entry-content a,
article p a,
.blog-entry p a {
    color: #ff6b35 !important;
    text-decoration: underline !important;
}

body.blog .blog-entry-content a:hover,
body.blog .entry-content a:hover,
body.archive .blog-entry-content a:hover,
body.archive .entry-content a:hover,
body.single-post .entry-content a:hover,
body.single-post .entry a:hover,
article .entry-content a:hover,
article p a:hover,
.blog-entry p a:hover {
    color: #1a3a52 !important;
    text-decoration: none !important;
}

/* SAUF les boutons */
.scanview-blog-button {
    text-decoration: none !important;
}

/* Titres des articles en bleu */
body.blog .blog-entry-title,
body.blog .blog-entry-title a,
body.archive .blog-entry-title,
body.archive .blog-entry-title a,
body.single-post .entry-title,
body.single-post h1,
body.single-post h2,
body.single-post h3 {
    color: #1a3a52 !important;
}

/* TEXTE NOIR - Version ultra-ciblée */
body.blog .blog-entry-content,
body.blog .blog-entry-content p,
body.blog .blog-entry-content div,
body.blog .blog-entry-content span,
body.blog .blog-entry-content li,
body.blog .blog-entry-excerpt,
body.archive .blog-entry-content,
body.archive .blog-entry-content p,
body.archive .blog-entry-content div,
body.archive .blog-entry-content span,
body.archive .blog-entry-content li,
body.archive .blog-entry-excerpt,
body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content div,
body.single-post .entry-content span,
body.single-post .entry-content li {
    color: #1a1a1a !important;
}

/* LIENS ORANGE sans soulignement */
body.blog .blog-entry-content a:not(.scanview-blog-button),
body.archive .blog-entry-content a:not(.scanview-blog-button),
body.single-post .entry-content a:not(.scanview-blog-button),
body.blog article a:not(.scanview-blog-button),
body.archive article a:not(.scanview-blog-button),
body.single-post article a:not(.scanview-blog-button),
.blog-entry-content a:not(.scanview-blog-button),
.entry-content a:not(.scanview-blog-button) {
    color: #ff6b35 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

body.blog .blog-entry-content a:not(.scanview-blog-button):hover,
body.archive .blog-entry-content a:not(.scanview-blog-button):hover,
body.single-post .entry-content a:not(.scanview-blog-button):hover {
    color: #1a3a52 !important;
    text-decoration: underline !important;
}

/* FORCE BRUTALE sur le texte uniquement */
body.blog article *:not(a):not(h1):not(h2):not(h3):not(.scanview-blog-button),
body.archive article *:not(a):not(h1):not(h2):not(h3):not(.scanview-blog-button),
body.single-post article *:not(a):not(h1):not(h2):not(h3):not(.scanview-blog-button) {
    color: #000000 !important;
}

/* Boutons "Continuer la lecture" */
.blog-entry-readmore a,
.more-link {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    background: #ff6b35 !important;
    color: #ffffff !important;
    border: 2px solid #ff6b35 !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.blog-entry-readmore a:hover,
.more-link:hover {
    background: #ffffff !important;
    color: #ff6b35 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3) !important;
}

/* Images dans les articles */
.blog-entry-media img,
.entry-content img {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Catégories */
.blog-entry-category a {
    background: #ff6b35 !important;
    color: #ffffff !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 15px !important;
}

/* Sidebar (si présente) */
#sidebar {
    background: #f8f9fa !important;
    padding: 30px !important;
    border-radius: 10px !important;
}

#sidebar .widget-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a3a52 !important;
    margin-bottom: 20px !important;
    padding-bottom: 10px !important;
    border-bottom: 3px solid #ff6b35 !important;
}

/* Pagination */
.page-numbers {
    font-family: 'Exo 2', sans-serif !important;
    padding: 10px 15px !important;
    margin: 0 5px !important;
    background: #f8f9fa !important;
    color: #1a3a52 !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.page-numbers:hover,
.page-numbers.current {
    background: #ff6b35 !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header-title {
        font-size: 32px !important;
    }
    
    .blog-entry-title {
        font-size: 24px !important;
    }
    
    .blog-entry {
        padding: 20px !important;
    }
}

/* ============================================
   RESPONSIVE - Marges latérales sur mobile/tablette
   ============================================ */

/* Sur tablettes et mobiles */
@media (max-width: 1024px) {
    /* Forcer padding sur les sections Elementor */
    .elementor-section .elementor-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Forcer padding sur les colonnes */
    .elementor-column-wrap,
    .elementor-widget-wrap {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Sections spécifiques */
    .elementor-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Sur petits mobiles (smartphones) */
@media (max-width: 767px) {
    .elementor-section .elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .elementor-column-wrap,
    .elementor-widget-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Blog responsive - marges */
@media (max-width: 1024px) {
    body.blog .site-content,
    body.archive .site-content,
    body.single-post .site-content {
        padding: 40px 20px !important;
    }
}

/* === STYLE SIDEBAR BLOG === */

/* Fond de la sidebar */
.sidebar-container,
#sidebar,
.widget-area {
    background: #f9fafb !important;
    padding: 25px !important;
    border-radius: 10px;
}

/* Titres des widgets */
.sidebar-container .widget-title,
#sidebar .widget-title,
.widget-area .widget-title {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1a3a52 !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #ff6b35 !important;
    background: transparent !important;
}

/* Liste des catégories */
.sidebar-container ul,
#sidebar ul,
.widget-area ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.sidebar-container li,
#sidebar li,
.widget-area li {
    padding: 10px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: transparent !important;
}

.sidebar-container li:last-child,
#sidebar li:last-child,
.widget-area li:last-child {
    border-bottom: none !important;
}

/* Liens dans la sidebar */
.sidebar-container a,
#sidebar a,
.widget-area a {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 16px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    background: transparent !important;
}

.sidebar-container a:hover,
#sidebar a:hover,
.widget-area a:hover {
    color: #ff6b35 !important;
}

/* Compteur d'articles */
.sidebar-container .count,
#sidebar .count,
.widget-area .count {
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* Widget */
.sidebar-container .widget,
#sidebar .widget,
.widget-area .widget {
    background: transparent !important;
    margin-bottom: 30px !important;
}

/* === BOUTON COMMENTAIRE === */

/* Bouton "Laisser un commentaire" / "Leave a comment" */
.comment-reply-link,
.comment-respond .submit,
#submit,
input[type="submit"].submit,
.single-post .comment-form input[type="submit"],
.comment-form-submit input[type="submit"] {
    font-family: 'Exo 2', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 5px !important;
    background: #ff6b35 !important;
    color: #ffffff !important;
    border: 2px solid #ff6b35 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.comment-reply-link:hover,
.comment-respond .submit:hover,
#submit:hover,
input[type="submit"].submit:hover,
.single-post .comment-form input[type="submit"]:hover,
.comment-form-submit input[type="submit"]:hover {
    background: #1a3a52 !important;
    border-color: #1a3a52 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(26, 58, 82, 0.2) !important;
}

/* Liens de commentaire */
.comments-link a,
.comment-metadata a,
.comment-edit-link {
    color: #ff6b35 !important;
    text-decoration: none !important;
}

.comments-link a:hover,
.comment-metadata a:hover,
.comment-edit-link:hover {
    color: #1a3a52 !important;
}

/* Zone de commentaire */
.comment-respond {
    background: transparent !important;
}

.comment-form label {
    color: #1a3a52 !important;
    font-family: 'Exo 2', sans-serif !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    border: 1px solid #d1d5db !important;
    border-radius: 5px !important;
    padding: 10px !important;
    font-family: 'Exo 2', sans-serif !important;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: #ff6b35 !important;
    outline: none !important;
}

/* ========================================================================
   FIN DE FEUILLE - CORRECTIONS QUI DOIVENT PASSER APRES LES REGLES D'ORIGINE
   ======================================================================== */

/* A8 - Page Actualites et articles : le conteneur reservait 60 points avant
   le fil d'Ariane, ce qui creusait un grand vide sous l'entete. Ramene a 30,
   l'espace du bas est conserve. */
body.blog .site-content,
body.archive .site-content,
body.single-post .site-content {
    padding: 24px 20px 60px 20px !important;
}
@media (max-width: 1024px) {
    body.blog .site-content,
    body.archive .site-content,
    body.single-post .site-content {
        padding: 20px 20px 40px 20px !important;
    }
}