/*
Theme Name: NC Canvas
Description: Thème minimal maison (pas de dépendance à un thème tiers) : contrôle total du HTML/CSS, palette et polices pilotées par site via des theme_mods.
Author: NC ECOM
Version: 1.0
Text Domain: nc-canvas
*/

/* ==========================================================================
   Variables (repli par défaut ; surchargées par site via functions.php)
   ========================================================================== */
:root {
    --color-primary: #0067FF;
    --color-primary-hover: #005EE9;
    --color-heading: #0F172A;
    --color-text: #364151;
    --color-background: #FFFFFF;
    --color-secondary-background: #E7F6FF;
    --color-border: #070614;
    --color-secondary-border: #D1DAE5;
    --color-accent: #222222;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    --container-width: 1200px;
    --radius: 10px;
    --radius-pill: 999px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.14);

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;

    --bp-mobile: 900px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.65;
    font-size: 1rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}
/* Échelle typographique affirmée (clamp = fluide entre mobile et desktop) :
   des titres display qui portent la personnalité de la police choisie,
   au lieu de tailles timides qui rendaient tout générique. Couleurs
   distinctes par niveau (retour utilisateur : tout le texte était noir,
   aucune variation) : h1 dans le Primary de la palette, h2 dans son
   dégradé Hover, h3 revient au ton neutre pour rester lisible en petit
   (titres de cartes...). Les h1/h2 sur fond sombre (hero, bandeau CTA)
   gardent leur blanc forcé via une règle plus spécifique ou un style
   inline, qui l'emporte toujours sur celle-ci. */
h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); letter-spacing: -0.015em; color: var(--color-primary); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.01em; color: var(--color-primary-hover); }
h3 { font-size: 1.35rem; line-height: 1.3; }
p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.9rem 1.9rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); text-decoration: none; }
.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { color: #fff; }
/* Bouton pour bandes sombres ou saturées (hero, bandeau CTA) : blanc à
   texte foncé — contraste garanti quelle que soit la couleur de la bande
   (un bouton accent sombre sur bande sombre était illisible, constaté). */
/* Teinte claire DÉRIVÉE du Primary de la palette (color-mix), pas le
   secondary-background : celui-ci est souvent crème/quasi blanc selon le
   preset, ce qui redonnait un bouton "quasi blanc" (retour utilisateur,
   deux fois). Un mélange à 22% de Primary donne un vrai bouton coloré
   clair quel que soit le preset. */
.btn--light {
    background: var(--color-secondary-background);
    background: color-mix(in srgb, var(--color-primary) 22%, #fff);
    color: var(--color-heading);
}
.btn--light:hover {
    color: var(--color-heading);
    background: color-mix(in srgb, var(--color-primary) 34%, #fff);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--color-secondary-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); }
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 1rem 1.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
}
.site-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
}
.site-branding img { max-height: 44px; width: auto; }
.site-branding__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-heading);
    white-space: nowrap;
}

.header-nav-area { display: flex; align-items: center; gap: var(--space-md); flex: 1; justify-content: flex-end; }

.primary-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
    flex-wrap: nowrap;
}
.primary-nav a {
    color: var(--color-heading);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.98rem;
}
.primary-nav a:hover { color: var(--color-primary); }

.header-search { position: relative; }
.header-search__toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-heading);
    padding: 0.4rem;
    display: flex;
    align-items: center;
}
.header-search__toggle svg { width: 20px; height: 20px; }
.header-search__form {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: #fff;
    box-shadow: var(--shadow-hover);
    border-radius: var(--radius);
    padding: 0.75rem;
    width: 280px;
}
.header-search__form.is-open { display: flex; gap: 0.5rem; }
.header-search__form input[type="search"] {
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-secondary-border);
    border-radius: 6px;
    font-family: inherit;
}
.header-search__form button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 1rem;
    cursor: pointer;
}

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.mobile-nav-toggle svg { width: 26px; height: 26px; color: var(--color-heading); }

.primary-nav__close { display: none; }

@media (max-width: 900px) {
    /* Menu mobile en vraie modale plein écran (fixed, au-dessus de tout),
       pas un panneau qui se déplie et comprime le header — retour
       utilisateur : "ça comprime tout". Fond uni + liens larges centrés. */
    .primary-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 300;
        background: var(--color-background);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav__close {
        display: flex;
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        background: none;
        border: none;
        color: var(--color-heading);
        padding: 0.5rem;
    }
    .primary-nav__close svg { width: 26px; height: 26px; }
    .primary-nav ul { flex-direction: column; gap: 0.25rem; padding: 0; text-align: center; }
    .primary-nav a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1.4rem;
        font-family: var(--font-heading);
        font-weight: 700;
        color: var(--color-heading);
    }
    .primary-nav a:hover { color: var(--color-primary); }
    /* Une seule ligne : logo/titre à gauche (rétrécissables, titre en
       ellipse), icônes à droite. Constaté cassé en capture mobile avant
       correction : le header s'étalait sur deux lignes difformes. */
    .site-header__inner { flex-wrap: nowrap; gap: 0.75rem; padding: 0.75rem 1rem; }
    .site-branding { flex: 1 1 0; min-width: 0; }
    .site-branding img { max-height: 34px; }
    .site-branding__title { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-nav-area { flex: 0 0 auto; gap: 0.5rem; }
    .mobile-nav-toggle { display: flex; }
    body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   Sections (bandes pleine largeur) + séparateurs diagonaux
   ========================================================================== */
.section { padding: var(--space-xl) 0; }
.section + .section { border-top: none; }
.section__inner > *:first-child { margin-top: 0; }

/* Séparateurs diagonaux entre les bandes : chaque section recouvre la
   précédente de 2.5rem et découpe son propre bord supérieur en biseau
   (direction alternée). La couleur de la bande précédente apparaît dans
   le triangle découpé, quelle que soit la palette — aucune couleur à
   coordonner. La première section d'une page garde un bord droit (rien à
   chevaucher au-dessus, sinon elle mordrait sur le header). */
main > .section {
    margin-top: -2.5rem;
    /* padding-top compense l'encoche que CETTE section découpe dans SON
       PROPRE haut ; padding-bottom doit compenser pareil, pour les 2.5rem
       que la section SUIVANTE va manger sur CE bas via son propre
       chevauchement (margin-top négatif) — sans ce 2e "+2.5rem", l'espace
       visible réel finissait à 80px en haut mais seulement 40px en bas,
       constaté en capture ("plus gros en bas qu'en haut"), pas une
       impression : les deux formules étaient simplement différentes. */
    padding-top: calc(var(--space-xl) + 2.5rem);
    padding-bottom: calc(var(--space-xl) + 2.5rem);
    clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}
main > .section:nth-of-type(even) {
    clip-path: polygon(0 0, 100% 2.5rem, 100% 100%, 0 100%);
}
main > .section:first-child {
    margin-top: 0;
    padding-top: var(--space-xl);
    clip-path: none;
}

/* Section titre seul (page.php) : un h1 sans contenu autour n'a pas besoin
   de la même respiration qu'une bande de couleur pleine page (hero,
   feature_grid...). Avec le padding-bottom standard (120px), le titre se
   retrouvait à ~200px du vrai contenu de la page — un vide énorme constaté
   en capture. Garde juste assez (2.5rem + 1rem) pour rester au-dessus du
   chevauchement diagonal de la section suivante (voir commentaire dans
   page.php : un titre sur 2+ lignes se faisait recouvrir sans ce minimum). */
main > .section.page-title {
    padding-bottom: 3.5rem;
}
/* La section qui suit le titre garde, elle aussi, son padding-top complet
   (120px) pensé pour une bande colorée façon page d'accueil — entre un
   titre et le premier paragraphe d'une page utilitaire (mentions légales,
   cookies...), ça laissait un vide énorme constaté en capture. Réduit au
   même niveau que page-title, symétrique. */
main > .section.page-title + .section {
    padding-top: 3.5rem;
}

/* Rythme vertical unifié : mêmes respirations partout (retour utilisateur :
   espacements incohérents, tantôt collés tantôt vides). */
.section h2 { margin-bottom: 1.25rem; }
.section .section-title { margin-bottom: 2.5rem; }
.hero__content h1 { margin-bottom: 1rem; }
.hero__content p { margin-bottom: 1.75rem; }
.section .btn { margin-top: 0.5rem; }

.hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: #14141c; /* repli si aucune image trouvée */
    background-size: cover;
    background-position: center;
    text-align: center;
}
/* Superposition : noir en dégradé diagonal très légèrement lumineux (les
   voiles de couleur vive type Primary faisaient "cheap" — retour
   utilisateur ; le point bas à ~0.45 laisse respirer la photo). */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(45, 45, 62, 0.45) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; padding: var(--space-lg) 1.5rem; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4rem); }
.hero p { color: #fff; font-size: clamp(1.05rem, 1.8vw, 1.3rem); opacity: 0.92; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-md);
    text-align: center;
}
.stats-grid strong { display: block; font-size: 2.4rem; color: var(--color-primary); font-family: var(--font-heading); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Grilles de cartes (services, catégories, derniers articles)
   ========================================================================== */
/* Titre de section généré (articles, catégories, services…) : centré avec
   une vraie respiration avant la grille — constaté en capture, un titre
   aligné à gauche et collé aux cartes faisait brouillon. */
.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
}

.card-grid {
    /* Flex (pas grid) : avec grid auto-fit, une dernière rangée incomplète
       laisse la carte orpheline collée à gauche de sa colonne (constaté en
       capture : 3 cartes + 1 seule en dessous, déséquilibré). En flex
       centré, chaque rangée — y compris la dernière — se centre
       naturellement, et la largeur fixe des cartes empêche l'étirement
       pleine largeur d'une carte seule. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}
.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 1 300px;
    min-width: 260px;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.4s ease; }
.card:hover img { transform: scale(1.06); }
.card__body { padding: 1.4rem 1.6rem 1.7rem; }
.card__title { margin: 0 0 0.4rem; font-size: 1.1rem; }
.card__title a { color: var(--color-heading); text-decoration: none; }
.card__title a:hover { color: var(--color-primary); }
.card__meta { font-size: 0.85rem; opacity: 0.65; margin: 0; }
.card__text { font-size: 0.95rem; margin: 0.6rem 0 0; }
/* Carte pleine couleur (catégorie sans image) : compacte et centrée. */
.card--solid { display: flex; align-items: center; justify-content: center; min-height: 120px; }
.card--solid .card__body { padding: 1.4rem; text-align: center; }

/* Modificateurs de comptage : jamais de rangée asymétrique type 3+1.
   n2 → deux cartes larges ; n4 → une rangée de 4 (2×2 dès que ça ne tient
   plus), les cartes grandissent pour remplir la rangée uniformément. */
.card-grid--n2 > .card { flex: 1 1 380px; max-width: 500px; }
/* max-width réduit (330px → 250px) : 4 cartes à 330px + 3 espacements ne
   tiennent jamais sur une rangée dans ce container (retour utilisateur —
   "3 puis 1... très laid" sur un autre canevas, même bug latent ici). */
.card-grid--n4 > .card, .card-grid--n4 > li { flex: 1 1 220px; max-width: 250px; min-width: 0; }

/* ==========================================================================
   Bloc "Derniers articles" (core/latest-posts) : bloc dynamique Gutenberg
   réel (nécessaire pour que WordPress interroge et affiche les vrais
   articles), stylé pour matcher notre design system de cartes ci-dessus.
   ========================================================================== */
.wp-block-latest-posts.wp-block-latest-posts__list {
    /* Même logique flex-centré que .card-grid (rangée orpheline centrée). */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}
.wp-block-latest-posts__list > li {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding-bottom: 1.2rem;
    flex: 0 1 300px;
    min-width: 260px;
}
.wp-block-latest-posts__list > li:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.wp-block-latest-posts__featured-image { margin: 0 0 1rem; overflow: hidden; }
.wp-block-latest-posts__featured-image img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.4s ease; }
.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__featured-image img { transform: scale(1.06); }
.wp-block-latest-posts__post-title {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--color-heading);
    margin: 0 1.4rem 0.4rem;
}
.wp-block-latest-posts__post-date { display: block; font-size: 0.85rem; opacity: 0.65; margin: 0 1.4rem; }

/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   ========================================================================== */
.wpcf7-form p { margin-bottom: 1.4rem; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--color-heading); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-secondary-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.9rem 2.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: #c0392b; font-size: 0.85rem; margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: 8px; padding: 1rem; margin-top: 1.5rem; }
/* Champ piège anti-spam (voir nc_canvas_cf7_add_honeypot) : hors écran plutôt
   que display:none, que certains bots savent détecter et ignorer. */
.nc-hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; margin: 0; }

/* ==========================================================================
   Contenu générique (pages, articles)
   ========================================================================== */
.page-content, .single-content { padding: var(--space-lg) 0; }
.entry-title { font-size: 2.2rem; margin-bottom: 0.5rem; }
.entry-meta { color: var(--color-text); opacity: 0.65; font-size: 0.9rem; margin-bottom: var(--space-md); }
.entry-featured-image { margin-bottom: var(--space-md); border-radius: var(--radius); overflow: hidden; }
.entry-featured-image img { width: 100%; }
.entry-content :is(h2, h3) { margin-top: 2rem; }
/* Same rule for generated page content (legal pages etc.), which isn't
   wrapped in .entry-content — without this, each <h3> rubric on a legal
   page sits flush against the previous paragraph with no breathing room. */
.container > :is(h2, h3):not(:first-child) { margin-top: 2rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
/* Gabarits sans bandes .section (article seul, résultats de recherche/
   archive, 404) : le pied de page chevauche quand même de 2.5rem (même
   marge négative que pour les .section, voir plus haut) — sans cette même
   marge de sécurité en bas, un contenu court (catégorie sans articles,
   recherche sans résultat) se fait directement recouvrir par le pied de
   page, constaté en capture. */
.single-content,
.archive-results,
.no-results {
    padding-bottom: calc(var(--space-xl) + 2.5rem);
}

.site-footer {
    background: var(--color-heading);
    color: rgba(255, 255, 255, 0.82);
    /* Même chevauchement que les séparateurs inter-sections (voir
       "main > .section" plus haut) : marge négative + padding compensé,
       pas une marge positive — celle-ci laissait le fond de la page
       (--color-background) apparaître en bande visible au-dessus du pied
       de page, repéré en capture. */
    padding: calc(var(--space-lg) + 2rem + 2.5rem) 0 var(--space-md);
    margin-top: -2.5rem;
    clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
}
.footer-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2rem;
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}
.footer-menu a { color: #fff; opacity: 0.85; text-decoration: none; }
.footer-menu a:hover { opacity: 1; text-decoration: underline; }
.site-footer__copyright { text-align: center; font-size: 0.85rem; opacity: 0.6; }

/* ==========================================================================
   Recherche / archives
   ========================================================================== */
.archive-header, .search-header { padding: var(--space-lg) 0 var(--space-sm); text-align: center; }
.no-results { padding: var(--space-lg) 0; text-align: center; }

/* ==========================================================================
   Apparition au scroll (classe ajoutée par nav.js ; sans JS, aucun style
   .reveal n'est appliqué, le contenu reste normalement visible)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}