/* Charte Cliken Web — alignée sur les rapports d'audit SEO (report_template_v2) */
:root{
  --ck-black:#1d1d1b; --ck-yellow:#f0c93b; --ck-yellow-light:#fdf6dc;
  --ck-yellow-hover:#e0b820; --ck-white:#fff;
  --ck-gray-50:#fafafa; --ck-gray-100:#f5f5f5; --ck-gray-200:#e8e8e8;
  --ck-gray-300:#d1d1d1; --ck-gray-600:#6b6b6b; --ck-gray-800:#2d2d2d;
  --ck-green:#22c55e; --ck-green-light:#dcfce7;
  --ck-red:#ef4444; --ck-red-light:#fee2e2;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ck-gray-50);color:var(--ck-black);
  font:16px/1.6 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}

/* ── Bandeau noir ── */
.site-header{background:var(--ck-black);padding:16px 32px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.site-header img{height:36px;display:block}
.site-header .baseline{color:var(--ck-gray-300);font-size:13px;text-align:right;line-height:1.4}
.site-header .baseline strong{color:var(--ck-yellow);font-weight:600}
@media(max-width:600px){.site-header{padding:14px 18px}.site-header .baseline{display:none}}

/* ── Pied de page noir ── */
.site-footer{background:var(--ck-black);color:var(--ck-gray-300);padding:24px 32px;
  text-align:center;font-size:12px;margin-top:auto}
.site-footer strong{color:var(--ck-yellow)}
.site-footer a{color:var(--ck-gray-300)}

.shell{width:100%;max-width:720px;margin:0 auto;padding:clamp(24px,5vw,48px) 20px}

/* ── Cartes ── */
.card{background:var(--ck-white);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(24px,5vw,40px);margin-bottom:24px}

/* Surtitre : barre jaune, comme .section-title des audits */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  color:var(--ck-gray-600)}
.eyebrow::before{content:'';width:4px;height:16px;background:var(--ck-yellow);
  border-radius:2px;flex-shrink:0}

h1{margin:0 0 12px;font-size:clamp(24px,4.2vw,30px);font-weight:800;line-height:1.25}
h2{margin:0 0 12px;font-size:clamp(19px,3.4vw,24px);font-weight:800;line-height:1.3}
h1 span,h2 span{color:var(--ck-gray-800)}
.lede{margin:0 0 24px;color:var(--ck-gray-600);font-size:15px;line-height:1.7}
.fineprint{margin:14px 0 0;font-size:12.5px;color:var(--ck-gray-600)}
.optional{font-weight:400;color:var(--ck-gray-600);font-size:13px}

/* ── Formulaires ── */
.field-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.field-row input{flex:1 1 240px}
input:not([type=checkbox]):not([type=radio]){
  width:100%;padding:13px 15px;font:inherit;color:inherit;background:var(--ck-white);
  border:1px solid var(--ck-gray-300);border-radius:var(--radius-sm)}
input:focus-visible{outline:2px solid var(--ck-yellow);outline-offset:1px;
  border-color:var(--ck-yellow)}
label{display:block;margin:0 0 16px;font-size:13px;font-weight:700}
label input{margin-top:6px;font-weight:400}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.grid-2{grid-template-columns:1fr}}

/* ── Boutons : jaune sur noir, comme .btn-primary des audits ── */
.btn{display:inline-block;padding:13px 28px;font:inherit;font-size:14px;font-weight:700;
  color:var(--ck-black);background:var(--ck-yellow);border:0;border-radius:var(--radius-sm);
  cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--ck-yellow-hover)}
.btn:disabled{background:var(--ck-gray-200);color:var(--ck-gray-300);cursor:not-allowed}

.error{margin:0 0 14px;padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;
  background:var(--ck-red-light);color:var(--ck-red);font-weight:600}
.notice{margin:4px 0 18px;padding:13px 15px;border-radius:var(--radius-sm);font-size:13px;
  background:var(--ck-gray-50);color:var(--ck-gray-600);border:1px solid var(--ck-gray-200)}
.check{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:13.5px;
  margin-bottom:20px}
.check input{margin-top:4px;flex:0 0 auto;accent-color:var(--ck-yellow)}
.check em{font-style:normal;color:var(--ck-gray-600)}

/* ── Étapes d'analyse ── */
.steps{list-style:none;margin:0;padding:0}
.steps li{padding:12px 0 12px 34px;position:relative;color:var(--ck-gray-600);
  font-size:14.5px;border-bottom:1px solid var(--ck-gray-100)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:"";position:absolute;left:5px;top:50%;width:14px;height:14px;
  margin-top:-7px;border:2px solid var(--ck-gray-200);border-radius:50%}
.steps li.done{color:var(--ck-black);font-weight:600}
.steps li.done::before{content:"✓";background:var(--ck-yellow);border-color:var(--ck-yellow);
  color:var(--ck-black);font-size:10px;font-weight:800;line-height:14px;text-align:center;
  border-width:0}

/* ── Tuiles chiffrées : reprise des .kpi des audits ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin:0 0 24px}
.tile{padding:16px;border-radius:var(--radius-sm);background:var(--ck-gray-50);
  text-align:center}
.tile b{display:block;font-size:28px;font-weight:800;line-height:1.2}
.tile span{display:block;margin-top:4px;font-size:12px;color:var(--ck-gray-600)}

/* ── Rappel : le bouton reste inactif tant que le consentement n'est pas coché.
   Fait en CSS seul (:has), sans JavaScript. Le serveur refuse de toute façon
   une demande sans consentement (app.py, 400) : ceci n'est qu'une affordance. */
#form-rappel:has(#consent:not(:checked)) button[type="submit"]{
  background:var(--ck-gray-200);color:var(--ck-gray-300);
  cursor:not-allowed;pointer-events:none;
}
#form-rappel:has(#consent:not(:checked)) button[type="submit"]::after{
  content:" — cochez la case ci-dessus";font-weight:400;font-size:12px;
}

/* ── Garde anti-debordement horizontal (03/09/2026) ──
   Aucun debordement n a pu etre reproduit de 320 a 1280 px, mais un nom de
   domaine long, une adresse email longue ou un mot insecable peuvent forcer
   la largeur du conteneur. Ces regles neutralisent le cas sans toucher a la
   mise en page existante. */
html,body{max-width:100%;overflow-x:hidden}
h1,h2,.lede,.fineprint,.eyebrow,.notice,.error{overflow-wrap:break-word}
.lede strong,.fineprint a{overflow-wrap:anywhere}
img{max-width:100%;height:auto}