/*
Theme Name: Juxma
Theme URI: https://juxma.fr
Author: Juxma
Description: Thème de blocs du site juxma.fr, généré depuis la planche Claude Design « Juxma - accueil » (desktop 1280, mobile 390). Blocs natifs uniquement.
Version: 0.1.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: juxma
*/

/* ============================================================
   Juxma - CSS issu de la maquette normalisée (phase 2).
   Jetons : theme.json. Composants : classes reportées sur les blocs.
   ============================================================ */
img { height: auto; max-width: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Icônes en masques (SVG de la maquette, phase 4 : substitutions) ---- */
:root {
  --ico-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0118 0v6'/%3E%3Cpath d='M21 19a2 2 0 01-2 2h-1a2 2 0 01-2-2v-3a2 2 0 012-2h3zM3 19a2 2 0 002 2h1a2 2 0 002-2v-3a2 2 0 00-2-2H3z'/%3E%3C/svg%3E");
  --ico-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ico-nuage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19a4.5 4.5 0 000-9 6 6 0 00-11.6 1.5A3.5 3.5 0 006.5 19z'/%3E%3C/svg%3E");
  --ico-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
  --ico-wifi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0114 0'/%3E%3Cpath d='M8.5 16a5 5 0 017 0'/%3E%3Cpath d='M2 9a14 14 0 0120 0'/%3E%3Ccircle cx='12' cy='19.5' r='1'/%3E%3C/svg%3E");
  --ico-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 3.9L2.6 17.2a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z'/%3E%3C/svg%3E");
  --ico-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v6a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h9'/%3E%3C/svg%3E");
  --ico-bulle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 01-8 8H8l-5 3 1.5-4A8 8 0 1121 12z'/%3E%3C/svg%3E");
  --x-juxma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M9 9 L39 39' stroke='%230b1220' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M39 9 L9 39' stroke='%230369a1' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
  --gouttiere: max(20px, calc((100% - 1120px) / 2));
}

/* ---- Sections : bandes pleine largeur, contenu centré sur 1120 px ---- */
.section { padding: 88px var(--gouttiere); border-top: 1px solid var(--wp--preset--color--bordure); }
.section > * + * { margin-top: 28px; }
.section-surtitre { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.section-titre { font-size: 38px; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--encre); line-height: 1.1; }
.section-surtitre + .section-titre { margin-top: 10px; }
.fond-doux { background: var(--wp--preset--color--fond-doux); }

/* ---- En-tête ---- */
.entete { background: var(--wp--preset--color--fond-doux); height: 76px; padding: 0 var(--gouttiere); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.entete .wp-block-site-logo img { width: 140px; height: auto; display: block; }
.entete .wp-block-navigation { justify-self: center; gap: 36px; font-size: 15px; font-weight: 500; }
.entete .wp-block-navigation a { color: var(--wp--preset--color--gris-fonce); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.entete .wp-block-navigation a:hover { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); }
.entete-cta { justify-self: end; }
.wp-block-button.btn-entete .wp-block-button__link { background: var(--wp--preset--color--accent); color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 15px; font-weight: 600; }

/* ---- Boutons ---- */
.wp-block-button.btn-plein .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; background: var(--wp--preset--color--accent); color: #fff; border-radius: 10px; padding: 16px 26px; font-size: 17px; font-weight: 700; text-decoration: none; transition: background-color .15s ease, transform .15s ease; }
.wp-block-button.btn-plein .wp-block-button__link::after { content: "→"; font-weight: 700; }
.wp-block-button.btn-plein .wp-block-button__link:hover, .wp-block-button.btn-entete .wp-block-button__link:hover { background: #075985; transform: translateY(-1px); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* ---- Héro ---- */
.hero { position: relative; overflow: hidden; padding: 104px var(--gouttiere) 112px; }
.hero .filigrane { position: absolute; right: -60px; top: 0; width: 560px; height: 560px; opacity: 0; pointer-events: none; animation: filigrane-in 1.6s ease-out .2s forwards; }
.hero .filigrane path { stroke-dasharray: 43; stroke-dashoffset: 43; animation: filigrane-trait 1.1s cubic-bezier(.4, 0, .2, 1) forwards; }
.hero .filigrane path:nth-child(1) { animation-delay: .2s; }
.hero .filigrane path:nth-child(2) { animation-delay: .55s; }
@keyframes filigrane-trait { to { stroke-dashoffset: 0; } }
@keyframes filigrane-in { 0% { opacity: 0; } 30% { opacity: .14; } 100% { opacity: .07; } }
.hero > *:not(.filigrane) { position: relative; }
.hero-surtitre { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.hero-titre { font-size: 64px; line-height: 1.06; font-weight: 800; letter-spacing: -.03em; max-width: 900px; margin-top: 28px; color: var(--wp--preset--color--encre); }
.hero-chapeau { font-size: 22px; line-height: 1.45; color: var(--wp--preset--color--gris); max-width: 760px; margin-top: 28px; }
.hero-texte { font-size: 18px; line-height: 1.55; color: var(--wp--preset--color--gris-fonce); max-width: 800px; margin-top: 28px; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.hero-note { font-size: 15px; color: var(--wp--preset--color--gris-clair); }

/* ---- Expertises ---- */
.grille-briques { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.brique { padding: 22px 20px; border: 1px solid var(--wp--preset--color--bordure); border-radius: 14px; background: #fff; transition: border-color .15s ease, transform .15s ease; }
.brique:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-3px); }
.brique::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: 10px; background: var(--wp--preset--color--accent); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.brique-support::before { -webkit-mask-image: var(--ico-support); mask-image: var(--ico-support); }
.brique-cyber::before { -webkit-mask-image: var(--ico-bouclier); mask-image: var(--ico-bouclier); }
.brique-m365::before { -webkit-mask-image: var(--ico-nuage); mask-image: var(--ico-nuage); }
.brique-sauvegarde::before { -webkit-mask-image: var(--ico-base); mask-image: var(--ico-base); }
.brique-reseaux::before { -webkit-mask-image: var(--ico-wifi); mask-image: var(--ico-wifi); }
.brique h3 { font-size: 18px; font-weight: 700; color: var(--wp--preset--color--encre); margin: 0; transition: color .15s ease; }
.brique:hover h3 { color: var(--wp--preset--color--accent); }
.brique p { font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--gris); margin: 10px 0 0; }
.expertises-note { font-size: 15px; color: var(--wp--preset--color--gris-clair); margin-top: 32px; }
.expertises-note strong { color: var(--wp--preset--color--gris-fonce); font-weight: 600; }

/* ---- Pour qui ---- */
.pour-qui { padding-top: 72px; padding-bottom: 72px; }
.pour-qui .section-titre { font-size: 34px; }
.grille-profils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.profil { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--wp--preset--color--bordure); border-radius: 14px; background: var(--wp--preset--color--fond-doux); }
.profil::before { content: ""; flex: 0 0 26px; width: 26px; height: 26px; margin-top: 2px; background: var(--wp--preset--color--accent); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.profil-donnees::before { -webkit-mask-image: var(--ico-bouclier); mask-image: var(--ico-bouclier); }
.profil-alerte::before { -webkit-mask-image: var(--ico-alerte); mask-image: var(--ico-alerte); }
.profil-garanties::before { -webkit-mask-image: var(--ico-coche); mask-image: var(--ico-coche); }
.profil-conseil::before { -webkit-mask-image: var(--ico-bulle); mask-image: var(--ico-bulle); }
.profil p { font-size: 16px; line-height: 1.55; margin: 0; }
.nuance { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--gris); border-left: 3px solid var(--wp--preset--color--accent); padding-left: 16px; max-width: 900px; margin-top: 28px; }

/* ---- Méthode ---- */
.grille-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.etape { padding: 24px; border-radius: 14px; background: #fff; border: 1px solid var(--wp--preset--color--bordure); transition: border-color .15s ease, transform .15s ease; }
.etape:hover { border-color: var(--wp--preset--color--accent); transform: translateY(-3px); }
.etape .num { width: 36px; height: 36px; border-radius: 10px; background: var(--wp--preset--color--accent); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0; transition: transform .15s ease, background-color .15s ease; }
.etape:hover .num { transform: scale(1.12); background: var(--wp--preset--color--encre); }
.etape h3 { font-size: 20px; font-weight: 700; margin: 12px 0 0; color: var(--wp--preset--color--encre); }
.etape p:not(.num) { font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--gris); margin: 12px 0 0; }

/* ---- Cas concret ---- */
.cas { margin-top: 48px; padding: 28px 32px; border: 1px solid var(--wp--preset--color--bordure); border-radius: 16px; background: #fff; }
.cas-titre { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--encre); margin: 6px 0 0; }
.cas-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.cas-colonne p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--gris); }
.cas-colonne p.cas-label { font-weight: 700; color: var(--wp--preset--color--encre); margin-bottom: 6px; }

/* ---- Tarifs ---- */
.tarifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 80px; border-top: 0; }
.tarifs > * + * { margin-top: 0; }
.tarifs .section-titre { font-size: 34px; margin-top: 16px; }
.tarifs-texte { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--gris); margin-top: 16px; }
.tarifs-lien { margin-top: 16px; font-size: 16px; font-weight: 600; }
.tarifs-lien a { color: var(--wp--preset--color--accent); text-decoration: none; }
.tarifs-lien a:hover { text-decoration: underline; }
.carte-prix { background: var(--wp--preset--color--encre); color: #fff; border-radius: 16px; padding: 32px; border: 1px solid transparent; transition: border-color .2s ease, transform .2s ease; }
.carte-prix:hover { border-color: var(--wp--preset--color--accent-vif); transform: translateY(-2px); }
.carte-prix p { margin: 0; }
.carte-prix .prix-intro { font-size: 15px; color: #94a3b8; }
.carte-prix .montant { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; transition: color .2s ease; }
.carte-prix:hover .montant { color: var(--wp--preset--color--accent-vif); }
.carte-prix .montant .unite { font-size: 18px; font-weight: 500; color: #94a3b8; letter-spacing: 0; }
.carte-prix .prix-details { font-size: 15px; color: #cbd5e1; margin-top: 16px; }
.carte-prix .prix-note { font-size: 14px; color: #94a3b8; line-height: 1.5; margin-top: 10px; }

/* ---- Zone d'intervention ---- */
.zone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; padding-top: 72px; padding-bottom: 72px; }
.zone > * + * { margin-top: 0; }
.zone .section-titre { font-size: 34px; margin-top: 14px; }
.zone-texte { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--gris); margin-top: 14px; }
.zone-communes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 17px; color: var(--wp--preset--color--encre); }
.zone-communes li { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--bordure); margin: 0; }

/* ---- Appel final ---- */
.appel { padding-top: 72px; padding-bottom: 88px; }
.appel-exclusion { font-size: 15px; color: var(--wp--preset--color--gris-clair); }
.appel .section-titre { font-size: 34px; max-width: 820px; margin-top: 22px; }
.appel .wp-block-buttons { margin-top: 22px; }

/* ---- Pied de page ---- */
.pied { background: #f1f5f9; border-top: 1px solid var(--wp--preset--color--bordure); color: var(--wp--preset--color--gris); padding: 40px var(--gouttiere); font-size: 14px; }
.pied .wp-block-columns { gap: 24px; margin: 0; }
.pied .wp-block-column { flex-basis: auto; }
.pied-marque { display: flex; align-items: center; gap: 10px; color: var(--wp--preset--color--encre); font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.pied-marque::before { content: ""; width: 22px; height: 22px; background: center / contain no-repeat var(--x-juxma); }
.pied-marque .x { color: var(--wp--preset--color--accent); }
.pied p { margin: 8px 0 0; }
.pied-liens { display: flex; gap: 24px; justify-content: flex-end; margin: 0; }
.pied-liens a { color: var(--wp--preset--color--gris-fonce); text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.credit { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--bordure); }
.credit a { color: inherit; font-weight: 600; text-decoration: none; }

/* ---- Pages intérieures (contact, légales, 404) ---- */
.page-interieure { padding: 64px var(--gouttiere); max-width: calc(820px + 2 * var(--gouttiere)); }
.page-interieure .wp-block-post-title { font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--wp--preset--color--encre); margin: 0 0 32px; }
.page-interieure h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--wp--preset--color--encre); margin: 36px 0 12px; }
.page-interieure p, .page-interieure li { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--gris-fonce); }
.page-interieure p + p { margin-top: 14px; }
.page-interieure ul { padding-left: 22px; margin: 12px 0; }
.page-interieure table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
.page-interieure th, .page-interieure td { border: 1px solid var(--wp--preset--color--bordure); padding: 10px 12px; text-align: left; vertical-align: top; }
.page-interieure th { background: var(--wp--preset--color--fond-doux); }
.coordonnees { font-size: 17px; line-height: 1.7; }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) { .brique, .etape, .carte-prix, .etape .num, .wp-block-button__link { transition: none; } .hero .filigrane { animation: none; opacity: .07; } .hero .filigrane path { animation: none; stroke-dashoffset: 0; } }

/* ============================================================
   Mobile - valeurs lues sur l'artboard 390 px
   ============================================================ */
@media (max-width: 782px) {
  :root { --gouttiere: 20px; }
  .section { padding: 48px 20px; }
  .section > * + * { margin-top: 18px; }
  .section-titre, .pour-qui .section-titre, .tarifs .section-titre, .zone .section-titre, .appel .section-titre { font-size: 28px; line-height: 1.15; }
  .entete { height: 64px; grid-template-columns: auto 1fr auto; }
  .entete .wp-block-navigation { justify-self: end; }
  .entete-cta { display: none; }
  .hero { padding: 56px 20px; }
  .hero .filigrane { width: 320px; height: 320px; right: -80px; }
  .hero-titre { font-size: 40px; line-height: 1.08; margin-top: 18px; }
  .hero-chapeau { font-size: 18px; margin-top: 18px; }
  .hero-texte { font-size: 16px; margin-top: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .wp-block-button.btn-plein, .wp-block-button.btn-plein .wp-block-button__link { width: 100%; justify-content: center; }
  .hero-note { text-align: center; }
  .grille-briques { grid-template-columns: 1fr; gap: 10px; }
  .brique { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; padding: 14px 16px; border-radius: 12px; }
  .brique::before { margin: 0; grid-row: 1 / span 2; }
  .brique p { margin-top: 4px; }
  .grille-profils, .grille-etapes, .cas-colonnes { grid-template-columns: 1fr; gap: 12px; }
  .etape { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 18px; }
  .etape .num { grid-row: 1 / span 2; }
  .etape h3 { margin-top: 0; }
  .cas { padding: 20px; margin-top: 24px; }
  .tarifs, .zone { grid-template-columns: 1fr; gap: 24px; padding: 48px 20px; }
  .carte-prix { padding: 24px; }
  .carte-prix .montant { font-size: 36px; }
  .zone-communes { font-size: 16px; gap: 0 20px; }
  .appel { padding: 48px 20px; }
  .pied { padding: 28px 20px; }
  .pied .wp-block-columns { flex-direction: column; }
  .pied-liens { justify-content: flex-start; margin-top: 10px; }
}