/*
Theme Name: QR Blueprint
Theme URI: https://example.com/qr-blueprint
Author: Studio
Author URI: https://example.com
Description: Générateur de QR codes en direct, avec une identité visuelle "plan technique / blueprint". 100% côté client, aucun réglage requis.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qr-blueprint
*/

/* ==========================================================================
   0. TOKENS
   ========================================================================== */
:root{
  --ink-900:#0B2138;   /* fond principal, "papier" bleu nuit */
  --ink-800:#0F2A43;   /* fond des panneaux */
  --ink-700:#173B5C;   /* fond hover / cartes */
  --line-blue:#3E6E93;  /* traits de grille discrets */
  --line-blue-soft:rgba(79,168,216,0.18);
  --cyan:#4FA8D8;       /* accent froid, "trait de plan" */
  --amber:#F2A93B;      /* accent chaud, "surligneur / calque actif" */
  --amber-dim:#B97F22;
  --paper:#EEF3F7;      /* texte clair / surfaces claires */
  --paper-dim:#C7D4DF;
  --slate:#8098AC;      /* texte secondaire */
  --ok:#5FBF8F;

  --font-display:'IBM Plex Mono', 'Space Mono', ui-monospace, monospace;
  --font-body:'IBM Plex Sans', 'Inter', -apple-system, sans-serif;

  --radius-s:2px;
  --radius-m:4px;
  --grid-size:34px;
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink-900);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line-blue-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-blue-soft) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--paper-dim); }
button{ font-family:inherit; }
.container{ max-width:1180px; margin:0 auto; padding:0 28px; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Étiquette d'annotation façon plan technique, réutilisée partout */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cyan);
}
.eyebrow::before{ content:''; width:16px; height:1px; background:var(--cyan); }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,33,56,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-blue-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.site-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:16px; font-weight:600;
  color:var(--paper); text-decoration:none;
}
.site-logo .mark{
  width:26px; height:26px; border:1.5px solid var(--cyan); border-radius:3px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:4px;
}
.site-logo .mark span{ background:var(--cyan); }
.site-logo .mark span:nth-child(2),
.site-logo .mark span:nth-child(4),
.site-logo .mark span:nth-child(8){ background:transparent; }

.site-nav{ display:flex; align-items:center; gap:32px; }
.site-nav a{
  text-decoration:none; color:var(--slate); font-size:14px;
  transition:color .15s ease;
}
.site-nav a:hover{ color:var(--paper); }
.nav-cta{
  border:1px solid var(--amber); color:var(--amber) !important;
  padding:8px 16px; border-radius:var(--radius-s);
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em;
}
.nav-cta:hover{ background:var(--amber); color:var(--ink-900) !important; }

/* ==========================================================================
   3. HERO / GENERATEUR
   ========================================================================== */
.hero{ padding:64px 0 40px; }
.hero-head{ max-width:640px; margin-bottom:44px; }
.hero-head h1{
  font-size:clamp(30px,4.4vw,46px); line-height:1.08; color:var(--paper);
  margin-top:14px;
}
.hero-head h1 em{ color:var(--amber); font-style:normal; }
.hero-head p{ font-size:17px; max-width:520px; }

.generator{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:0;
  border:1px solid var(--line-blue-soft);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--ink-800);
}
@media (max-width:860px){ .generator{ grid-template-columns:1fr; } }

.gen-panel{ padding:32px; }
.gen-panel + .gen-panel{ border-left:1px solid var(--line-blue-soft); background:var(--ink-700); }
@media (max-width:860px){ .gen-panel + .gen-panel{ border-left:none; border-top:1px solid var(--line-blue-soft); } }

.field-label{
  display:block; font-family:var(--font-display); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px;
}
.type-switch{ display:flex; gap:6px; margin-bottom:22px; flex-wrap:wrap; }
.type-switch button{
  background:transparent; border:1px solid var(--line-blue-soft); color:var(--slate);
  padding:7px 13px; border-radius:20px; font-size:12.5px; cursor:pointer;
  transition:all .15s ease;
}
.type-switch button.active{ border-color:var(--amber); color:var(--amber); background:rgba(242,169,59,0.08); }
.type-switch button:hover:not(.active){ border-color:var(--cyan); color:var(--paper); }

.field{ margin-bottom:20px; }
.field input[type="text"],
.field input[type="url"],
.field textarea{
  width:100%; background:var(--ink-900); border:1px solid var(--line-blue-soft);
  color:var(--paper); padding:12px 14px; border-radius:var(--radius-s);
  font-family:var(--font-body); font-size:14.5px; resize:vertical;
  transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--cyan); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-hint{ font-size:12px; color:var(--slate); margin-top:6px; }

.field-vcard{ display:none; }
.field-vcard.active{ display:block; }
.field-wifi{ display:none; }
.field-wifi.active{ display:block; }
.field-text{ display:block; }
.field-text.hidden{ display:none; }

.customize-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.swatch-row{ display:flex; gap:8px; align-items:center; }
.swatch-row input[type="color"]{
  width:34px; height:34px; border:1px solid var(--line-blue-soft); border-radius:var(--radius-s);
  background:none; padding:2px; cursor:pointer;
}
.range-row{ display:flex; align-items:center; gap:10px; }
input[type="range"]{ flex:1; accent-color:var(--amber); }

.btn-generate{
  width:100%; background:var(--amber); color:var(--ink-900); border:none;
  padding:14px; border-radius:var(--radius-s); font-family:var(--font-display);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.btn-generate:hover{ background:#ffbe5c; }
.btn-generate:active{ transform:scale(.99); }

/* Cadre "viseur de scan" — élément signature */
.scan-frame{
  position:relative; width:100%; max-width:280px; aspect-ratio:1/1; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--radius-s);
}
.scan-frame .corner{
  position:absolute; width:22px; height:22px; border:2px solid var(--amber);
}
.scan-frame .corner.tl{ top:-8px; left:-8px; border-right:none; border-bottom:none; }
.scan-frame .corner.tr{ top:-8px; right:-8px; border-left:none; border-bottom:none; }
.scan-frame .corner.bl{ bottom:-8px; left:-8px; border-right:none; border-top:none; }
.scan-frame .corner.br{ bottom:-8px; right:-8px; border-left:none; border-top:none; }
#qr-canvas-wrap{ padding:14px; }
#qr-canvas-wrap img, #qr-canvas-wrap canvas{ width:100% !important; height:auto !important; }

.scan-caption{
  text-align:center; font-family:var(--font-display); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin:18px 0 20px;
}
.scan-caption .status{ color:var(--ok); }

.download-row{ display:flex; gap:10px; }
.btn-ghost{
  flex:1; background:transparent; border:1px solid var(--line-blue-soft); color:var(--paper);
  padding:11px; border-radius:var(--radius-s); font-size:13px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

/* ==========================================================================
   4. BANDE DE CONFIANCE
   ========================================================================== */
.trust-strip{
  border-top:1px solid var(--line-blue-soft); border-bottom:1px solid var(--line-blue-soft);
  padding:22px 0; margin-top:56px;
}
.trust-strip .container{
  display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between;
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em; color:var(--slate);
}
.trust-strip strong{ color:var(--paper); }

/* ==========================================================================
   5. COMMENT ÇA MARCHE
   ========================================================================== */
.section{ padding:88px 0; }
.section-head{ max-width:560px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(24px,3vw,32px); color:var(--paper); margin-top:12px; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-blue-soft); border:1px solid var(--line-blue-soft); }
@media (max-width:780px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--ink-900); padding:30px; }
.step .num{ font-family:var(--font-display); color:var(--amber); font-size:13px; margin-bottom:16px; display:block; }
.step h3{ color:var(--paper); font-size:17px; }
.step p{ font-size:14.5px; margin:0; }

/* ==========================================================================
   6. TYPES DE CODES SUPPORTÉS
   ========================================================================== */
.types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .types-grid{ grid-template-columns:repeat(2,1fr); } }
.type-card{
  border:1px solid var(--line-blue-soft); border-radius:var(--radius-m); padding:22px;
  background:var(--ink-800); transition:border-color .15s ease, transform .15s ease;
}
.type-card:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.type-card .icon{
  width:34px; height:34px; border:1px solid var(--cyan); border-radius:var(--radius-s);
  display:grid; place-items:center; color:var(--cyan); font-family:var(--font-display); font-size:13px;
  margin-bottom:14px;
}
.type-card h4{ color:var(--paper); font-size:15px; }
.type-card p{ font-size:13.5px; margin:0; }

/* ==========================================================================
   7. FAQ
   ========================================================================== */
.faq-list{ border-top:1px solid var(--line-blue-soft); }
.faq-item{ border-bottom:1px solid var(--line-blue-soft); }
.faq-q{
  width:100%; background:none; border:none; color:var(--paper); text-align:left;
  padding:22px 0; font-family:var(--font-display); font-size:14.5px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-q .plus{ color:var(--amber); font-size:18px; transition:transform .2s ease; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a p{ padding-bottom:22px; font-size:14.5px; max-width:640px; }

/* ==========================================================================
   8. CTA FINAL
   ========================================================================== */
.final-cta{
  text-align:center; padding:90px 0; border-top:1px solid var(--line-blue-soft);
}
.final-cta h2{ font-size:clamp(24px,3.4vw,34px); color:var(--paper); }
.final-cta p{ max-width:460px; margin:0 auto 26px; }
.final-cta .btn-generate{ width:auto; padding:14px 34px; display:inline-block; }

/* ==========================================================================
   8b. PAGES DE CONTENU (légal, à propos, contact)
   ========================================================================== */
.page-hero{ padding:64px 0 40px; border-bottom:1px solid var(--line-blue-soft); }
.page-hero h1{ font-size:clamp(28px,4vw,40px); color:var(--paper); margin-top:14px; }
.page-hero p{ max-width:560px; font-size:16px; }

.legal-content{ padding:56px 0 90px; }
.legal-content .container{ max-width:780px; }
.legal-content h2{ font-size:19px; color:var(--paper); margin-top:44px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:15px; color:var(--cyan); margin-top:28px; }
.legal-content p, .legal-content li{ font-size:15px; color:var(--paper-dim); }
.legal-content ul{ padding-left:20px; margin:0 0 1em; }
.legal-content li{ margin-bottom:6px; }
.legal-content strong{ color:var(--paper); }
.legal-content .updated{
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em;
  color:var(--slate); text-transform:uppercase; margin-bottom:0;
}
.legal-note{
  border:1px dashed var(--amber); border-radius:var(--radius-s);
  background:rgba(242,169,59,0.06); padding:16px 18px; margin:24px 0;
}
.legal-note p{ margin:0; font-size:13.5px; color:var(--paper); }
.legal-note strong{ color:var(--amber); }

/* À propos */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:70px 0; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }
.about-grid h2{ font-size:22px; color:var(--paper); }
.about-values{ display:grid; gap:20px; }
.about-value{ border-left:2px solid var(--amber); padding-left:16px; }
.about-value h4{ color:var(--paper); font-size:15px; margin:0 0 4px; }
.about-value p{ margin:0; font-size:14px; }

/* Contact */
.contact-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border:1px solid var(--line-blue-soft); border-radius:var(--radius-m); overflow:hidden; margin:56px 0 90px; }
@media (max-width:820px){ .contact-wrap{ grid-template-columns:1fr; } }
.contact-info{ background:var(--ink-800); padding:36px; }
.contact-info h3{ color:var(--paper); font-size:16px; margin-top:0; }
.contact-info p{ font-size:14px; }
.contact-info .item{ margin-bottom:22px; }
.contact-info .item span{ display:block; font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:4px; }
.contact-form{ padding:36px; }
.contact-form .field{ margin-bottom:18px; }
.form-msg{ padding:12px 14px; border-radius:var(--radius-s); font-size:13.5px; margin-bottom:18px; }
.form-msg.success{ background:rgba(95,191,143,0.1); border:1px solid var(--ok); color:var(--ok); }
.form-msg.error{ background:rgba(224,102,102,0.1); border:1px solid #E06666; color:#E06666; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line-blue-soft); padding:36px 0; }
.site-footer .container{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.site-footer p{ margin:0; font-size:13px; color:var(--slate); }
.footer-links{ display:flex; gap:20px; }
.footer-links a{ font-size:13px; color:var(--slate); text-decoration:none; }
.footer-links a:hover{ color:var(--cyan); }