/* ==========================================================================
   OutilsEurocodes — feuille de style du site
   Design "Modernist" (variante 1a — éditorial réglé, accent bleu).
   CSS simple sur HTML simple : aucun build, aucun framework.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

/* --- Tokens de design (couleurs, typo, espaces, ombres) ------------------ */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Accent bleu (rampe alignée sur le design 1a) */
  --color-accent-100: #e6ecff;
  --color-accent-200: #c4d2ff;
  --color-accent-300: #97b0ff;
  --color-accent-400: #4f79ff;
  --color-accent-500: #1247ff;
  --color-accent-600: #0a3ae2;
  --color-accent-700: #0730b9;
  --color-accent-800: #06248e;
  --color-accent-900: #041a68;
  --color-accent: #1247ff;

  /* Neutres */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --maxw: 1240px;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #dcdad9;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5rem;
}
p { margin: 0 0 .75rem; }
a { color: var(--color-accent); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.text-accent { color: var(--color-accent); }

/* Cadre "page" façon maquette : le contenu vit dans une colonne blanche */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Rythme horizontal commun aux sections */
.wrap { padding-left: clamp(20px, 4.5vw, 56px); padding-right: clamp(20px, 4.5vw, 56px); }

.hr { height: 2px; border: 0; background: var(--color-divider);
      margin-left: clamp(20px, 4.5vw, 56px); margin-right: clamp(20px, 4.5vw, 56px); }

.kicker {
  display: block; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 14px;
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; padding: 10px 15px; border-radius: 0;
}
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-ghost { color: var(--color-accent); }
.btn-on-accent { background: #fff; color: var(--color-accent); }
.btn-outline-light { color: #fff; border: 1px solid #fff; }

/* --- Navigation --------------------------------------------------------- */
.nav {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(20px, 4.5vw, 56px);
  border-bottom: 2px solid var(--color-divider);
  position: sticky; top: 0; background: var(--color-bg); z-index: 20;
}
/* Verrouillage du logo : la marque SVG accolée au logotype en Archivo 800.
   Composé en HTML plutôt qu'avec assets/logo-lockup.svg, dont le texte dépendrait
   de la présence d'Archivo sur le système d'affichage (voir assets/logo.md). */
.nav-brand { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-right: auto;
             text-decoration: none; color: var(--color-text);
             display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
.nav-brand img { display: block; flex: 0 0 auto; }
.nav a.nav-link { color: inherit; text-decoration: none; font-size: 14px; }
.nav a.nav-link:hover { color: var(--color-accent); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero h1 {
  font-size: clamp(38px, 6vw, 74px); line-height: 1.03; letter-spacing: -0.025em;
  margin: 0 0 30px; max-width: 15ch;
}
.hero p { font-size: clamp(16px, 2vw, 18px); line-height: 1.62; max-width: 56ch; margin: 0 0 34px; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Chiffres clés ------------------------------------------------------ */
.stats {
  padding-top: clamp(36px, 5vw, 52px); padding-bottom: clamp(36px, 5vw, 52px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4vw, 46px); line-height: 1; color: var(--color-accent); margin: 0 0 14px; }
.stat-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 72%, transparent); margin: 0; }

/* --- Section générique -------------------------------------------------- */
.section { padding-top: clamp(48px, 7vw, 64px); padding-bottom: clamp(48px, 7vw, 64px); }
.section h2 { font-size: clamp(28px, 3.4vw, 34px); letter-spacing: -0.015em; margin: 0 0 32px; }

/* --- Cartes d'outils ---------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; background: var(--color-surface); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
}
a.card { transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13.5px; opacity: .82; flex: 1; }
.card-cta { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); margin-top: 4px; }
.card-soon .card-cta { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.card-accent { background: var(--color-accent); color: #fff; justify-content: flex-end; }
.card-accent .card-title, .card-accent .card-body { color: #fff; }
.card-accent .card-body { opacity: .92; }

/* --- Bandeau Eurocodes -------------------------------------------------- */
.ec-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  background: var(--color-divider); border: 2px solid var(--color-divider);
}
.ec-cell { background: var(--color-bg); padding: 24px 20px; }
.ec-code { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--color-accent); margin: 0 0 8px; }
.ec-en { font-family: var(--font-heading); font-weight: 800; font-size: 14px; margin: 0 0 6px; }
.ec-desc { font-size: 12.5px; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.tag-outline { display: inline-flex; align-items: center; font-size: 11px; padding: 3px 10px; border: 1px solid var(--color-accent); color: var(--color-accent); margin-right: 10px; }

/* --- Split photo + texte ------------------------------------------------ */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: clamp(48px, 7vw, 72px); }
.split h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.14; margin: 0 0 18px; }
.split p { font-size: 15.5px; line-height: 1.62; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 44ch; }
.figure { margin: 0; filter: grayscale(1) contrast(1.08); }

/* --- FAQ ---------------------------------------------------------------- */
.faq details { border-top: 2px solid var(--color-divider); padding: 22px 0; }
.faq details:last-of-type { border-bottom: 2px solid var(--color-divider); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(17px, 2vw, 20px); }
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--color-accent); font-size: 24px; transition: transform .2s; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.62; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 66ch; }

/* --- CTA final ---------------------------------------------------------- */
.cta { background: var(--color-accent); color: #fff; padding: clamp(56px, 8vw, 80px) clamp(20px, 4.5vw, 56px); }
.cta h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; color: #fff; margin: 0 0 22px; max-width: 16ch; }
.cta p { font-size: 17px; line-height: 1.55; max-width: 48ch; margin: 0 0 30px; color: #fff; opacity: .92; }

/* --- Pied de page ------------------------------------------------------- */
.footer { padding: 40px clamp(20px, 4.5vw, 56px); font-size: 13px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 70%, transparent); display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer .brand { font-family: var(--font-heading); font-weight: 800; color: var(--color-text);
                 display: inline-flex; align-items: center; gap: 8px; }
.footer .brand img { display: block; flex: 0 0 auto; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--color-accent); }

/* ==========================================================================
   Formulaire de calcul (pages outils)
   ========================================================================== */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.calc-panel { background: var(--color-surface); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
/* Les indices/exposants agrandissent la boîte de ligne : sans cela un libellé avec
   « f_ck » est plus haut qu'un libellé sans indice et les champs d'une même ligne
   ne s'alignent plus verticalement. */
.field label sub, .field label sup { line-height: 0; font-size: 0.75em; }
.field .hint { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 4px 0 0; }
.input, select.input {
  width: 100%; min-height: 42px; padding: 8px 12px; font: inherit; font-size: 15px;
  color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: 0; caret-color: var(--color-accent);
}
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-neutral-200); }

.results { }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.result-row:first-child { border-top: 1px solid var(--color-divider); }
.result-label { font-size: 14px; }
.result-label small { display: block; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.result-value { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 3vw, 28px); color: var(--color-accent); white-space: nowrap; }
.result-value .unit { font-size: 14px; color: var(--color-text); margin-left: 4px; }

.formula { font-size: 13.5px; background: var(--color-neutral-100); border-left: 3px solid var(--color-accent); padding: 12px 16px; margin: 6px 0 0; overflow-x: auto; }
.notice { font-size: 13px; line-height: 1.6; background: color-mix(in srgb, var(--color-accent) 8%, transparent); border: 1px solid var(--color-accent-200); padding: 16px; margin-top: 28px; }

/* --- Fil d'ariane / retour --------------------------------------------- */
.crumb { font-size: 13px; margin-bottom: 8px; }
.crumb a { text-decoration: none; }

/* --- Ligne d'entrée à deux colonnes (valeur + unité serrée) ------------- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* --- Aide (?) dépliable ------------------------------------------------- */
.cb-row { display: flex; align-items: center; gap: 10px; }
.cb { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.help-q {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--color-accent); background: transparent; color: var(--color-accent);
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.help-q:hover { background: var(--color-accent); color: #fff; }
.help-body { margin-top: 10px; border-left: 2px solid var(--color-accent-200); padding-left: 12px; }
.lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lbl-row label { margin: 0; }

/* --- Case d'activation d'une action (générateurs de combinaisons) --------
   Permet de n'engendrer les combinaisons que pour les cas de charge requis :
   une action décochée est totalement exclue (ni dominante, ni accompagnante). */
.act-cb { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer;
          font-size: 12px; font-weight: 700; color: var(--color-accent-700); white-space: nowrap; }
.act-cb input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }

/* Sous-titre de bloc dans un formulaire + encadré de groupe (composantes liées) */
.grp-h { font-family: var(--font-heading); font-size: 13px; font-weight: 800; text-transform: uppercase;
         letter-spacing: .05em; color: var(--color-accent-700); margin: 4px 0 14px;
         padding-top: 14px; border-top: 1px solid var(--color-divider); }
.grp-h span { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 400;
              font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.grp { border-left: 2px solid var(--color-accent-200); padding-left: 14px; margin-bottom: 18px; }
.grp-cb { margin-bottom: 10px; font-size: 13px; }

/* --- Tableaux ----------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-family: var(--font-heading); font-weight: 800;
  font-size: 12.5px; padding: 10px 12px; white-space: nowrap;
  border-bottom: 2px solid var(--color-divider);
}
.table td { padding: 9px 12px; border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table td.rowlab { font-weight: 800; white-space: nowrap; }
.table .col-cur { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* --- Badge de vérification (ELU/ELS OK / KO) ---------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; }
.badge-ok { background: color-mix(in srgb, #0a3ae2 12%, transparent); color: var(--color-accent-700); }
.badge-ko { background: color-mix(in srgb, #dd2b0f 14%, transparent); color: #a51600; }
.verdict { margin-top: 20px; padding: 16px; border-left: 3px solid var(--color-accent); background: var(--color-neutral-100); font-size: 14px; line-height: 1.55; }
.verdict.ko { border-left-color: #dd2b0f; }
.result-value.ok { color: var(--color-accent-700); }
.result-value.ko { color: #dd2b0f; }

/* --- Liste des sous-outils (page hub) ---------------------------------- */
.subtools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.subtool { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: var(--color-surface); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.subtool:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.subtool .num { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 1; color: #fff; background: var(--color-accent); min-width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.subtool h3 { font-size: 18px; margin: 2px 0 6px; }
.subtool p { margin: 0; font-size: 13.5px; opacity: .82; }

@media (max-width: 700px) {
  .subtools { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .ec-grid { grid-template-columns: repeat(2, 1fr); }
  /* En 2 colonnes, un nombre IMPAIR de blocs laisse une case vide qui laisse
     voir le fond de la grille (un rectangle gris). Le dernier bloc occupe
     alors toute la largeur. Vrai quel que soit le nombre de blocs. */
  .ec-grid > .ec-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .faq-two { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .ec-grid { grid-template-columns: 1fr; }
  .nav .nav-link { display: none; }
}