/* Patron → A4 / A3 : styles de l'outil en ligne, tous préfixés .pa4.
   Les couleurs et polices reprennent celles du site (variables globales Elementor),
   avec des valeurs de repli pour fonctionner partout. */
.pa4 {
  --pa4-accent: var(--e-global-color-accent, #087467);
  --pa4-accent-fonce: #065a50;
  --pa4-encre: var(--e-global-color-text, #0d1137);
  --pa4-nuit: var(--e-global-color-secondary, #003049);
  --pa4-creme: #fffaf4;
  --pa4-bord: #e6ddd1;
  --pa4-doux: #5b6170;
  --pa4-erreur: #9a5354;
  --pa4-titre: var(--e-global-typography-primary-font-family, inherit), system-ui, sans-serif;
  --pa4-texte: var(--e-global-typography-text-font-family, inherit), system-ui, sans-serif;
  --pa4-rayon: 16px;
  color: var(--pa4-encre);
  font-family: var(--pa4-texte);
  font-size: 16px;
  line-height: 1.5;
  max-width: 1200px;
  margin: 0 auto;
}
.pa4 *, .pa4 *::before, .pa4 *::after { box-sizing: border-box; }
.pa4 [hidden] { display: none !important; }
.pa4 svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa4-invisible { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* place réservée avant l'arrivée du script, pour que la page ne saute pas */
[data-patron-a4]:not(.pa4) { min-height: 900px; }

/* ---- zone de dépôt (dans la carte « Pages du patron » tant qu'aucun patron n'est chargé) */
.pa4-depot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px; text-align: center; cursor: pointer;
  background: var(--pa4-creme); border: 2px dashed var(--pa4-accent); border-radius: var(--pa4-rayon);
  transition: background .15s, border-color .15s;
}
.pa4-depot:hover, .pa4-survol .pa4-depot, .pa4-depot:focus-within { background: #fff3e4; border-color: var(--pa4-accent-fonce); }
.pa4-depot:focus-within { outline: 3px solid color-mix(in srgb, var(--pa4-accent) 35%, transparent); outline-offset: 3px; }
.pa4-depot-icone { font-size: 36px; color: var(--pa4-accent); line-height: 1; }
.pa4-depot-titre { font-family: var(--pa4-titre); font-weight: 700; font-size: 1.2em; color: var(--pa4-nuit); }
.pa4-depot-sous-titre { color: var(--pa4-doux); }
.pa4-lien { color: var(--pa4-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pa4-confidentiel { display: block; margin-top: 10px; font-size: .9em; color: var(--pa4-accent-fonce); }
.pa4-confidentiel svg { vertical-align: -2px; margin-right: 4px; }
.pa4-survol .pa4-outil { outline: 2px dashed var(--pa4-accent); outline-offset: 6px; border-radius: var(--pa4-rayon); }

/* ---- messages */
.pa4-message { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; }
.pa4-etat { background: #e7f3f1; color: var(--pa4-accent-fonce); }
.pa4-erreur { background: #fbeeee; color: var(--pa4-erreur); font-weight: 600; }
.pa4-progression { display: flex; flex-direction: column; gap: 8px; }
.pa4-barre { position: relative; display: block; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--pa4-accent) 15%, #fff); }
.pa4-barre > span {
  display: block; height: 100%; width: 0; border-radius: inherit; background-color: var(--pa4-accent);
  background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%);
  background-size: 16px 16px; animation: pa4-rayures .8s linear infinite; transition: width .3s ease;
}
.pa4-barre-inconnue > span { width: 35% !important; animation: pa4-rayures .8s linear infinite, pa4-va-et-vient 1.4s ease-in-out infinite alternate; }
@keyframes pa4-rayures { to { background-position: 16px 0; } }
@keyframes pa4-va-et-vient { from { transform: translateX(-10%); } to { transform: translateX(195%); } }
@media (prefers-reduced-motion: reduce) { .pa4-barre > span { animation: none !important; } }

/* ---- outil */
.pa4-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pa4-entete p { margin: 0; overflow-wrap: anywhere; }
.pa4-entete strong { font-family: var(--pa4-titre); color: var(--pa4-nuit); }
.pa4-entete span { color: var(--pa4-doux); }
.pa4-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pa4-colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pa4-carte { background: #fff; border: 1px solid var(--pa4-bord); border-radius: var(--pa4-rayon); padding: 20px; min-width: 0; }
.pa4 .pa4-titre { margin: 0 0 12px; font-family: var(--pa4-titre); font-size: 1.1em; font-weight: 700; color: var(--pa4-nuit); line-height: 1.3; }
.pa4-discret { font-weight: 500; color: var(--pa4-doux); }

/* ---- tableau des pages */
.pa4-tableau-defile { overflow-x: auto; }
.pa4-pages { width: 100%; border-collapse: collapse; font-size: .92em; margin: 0; }
.pa4-pages th, .pa4-pages td { padding: 8px 10px; text-align: left; border: 0; border-bottom: 1px solid var(--pa4-bord); white-space: nowrap; background: none; }
.pa4-pages th { font-weight: 600; color: var(--pa4-doux); font-size: .9em; }
.pa4-pages tbody tr { cursor: pointer; }
.pa4-pages tbody tr:hover { background: var(--pa4-creme); }
.pa4-pages tbody tr.pa4-choisie { background: #e7f3f1; }
.pa4-pages tbody tr.pa4-choisie td:first-child { box-shadow: inset 3px 0 var(--pa4-accent); }

/* ---- réglages */
.pa4-segment { display: inline-flex; border: 0; padding: 0; margin: 0 0 16px; gap: 0; flex-wrap: wrap; align-items: center; }
.pa4-segment legend { float: left; margin-right: 12px; padding: 0; font-weight: 600; }
.pa4-segment label { position: relative; }
.pa4-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pa4-segment span { display: block; padding: 6px 20px; border: 1.5px solid var(--pa4-accent); color: var(--pa4-accent); font-weight: 700; }
.pa4-segment label:first-of-type span { border-radius: 999px 0 0 999px; }
.pa4-segment label:last-of-type span { border-radius: 0 999px 999px 0; border-left: 0; }
.pa4-segment input:checked + span { background: var(--pa4-accent); color: #fff; }
.pa4-segment input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pa4-accent) 35%, transparent); outline-offset: 2px; }
.pa4-champ { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; flex-wrap: wrap; }
.pa4-unite { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.pa4 .pa4-unite input { width: 76px; padding: 6px 10px; border: 1.5px solid var(--pa4-bord); border-radius: 8px; font: inherit; color: inherit; background: #fff; }
.pa4 .pa4-unite input:focus { border-color: var(--pa4-accent); outline: none; }
.pa4-aide { margin: 4px 0 14px; font-size: .88em; color: var(--pa4-doux); }
.pa4-case { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.pa4-case input, .pa4-pages input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--pa4-accent); flex: none; cursor: pointer; }

/* ---- action */
.pa4-action { text-align: center; padding: 4px 0; }
.pa4-total { margin: 0 0 12px; font-family: var(--pa4-titre); font-weight: 700; font-size: 1.15em; color: var(--pa4-nuit); }
.pa4 .pa4-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border: 2px solid var(--pa4-accent); border-radius: 999px;
  background: var(--pa4-accent); color: #fff; font: 700 1em var(--pa4-titre); cursor: pointer;
  text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s;
}
.pa4 .pa4-bouton:hover:not(:disabled) { background: var(--pa4-accent-fonce); border-color: var(--pa4-accent-fonce); }
.pa4 .pa4-bouton:focus-visible { outline: 3px solid color-mix(in srgb, var(--pa4-accent) 35%, transparent); outline-offset: 3px; }
.pa4 .pa4-bouton:disabled { opacity: .5; cursor: not-allowed; }
.pa4 .pa4-bouton-secondaire { padding: 8px 18px; background: #fff; color: var(--pa4-accent); font-size: .92em; }
.pa4 .pa4-bouton-secondaire:hover:not(:disabled) { background: var(--pa4-creme); color: var(--pa4-accent-fonce); }
.pa4-rappel { margin: 14px 0 0; padding: 10px 14px; background: #fff6db; border-left: 4px solid #ffbe0b; border-radius: 8px; font-size: .9em; text-align: left; }

/* ---- aperçu */
.pa4-apercu { position: sticky; top: 20px; }
.pa4-apercu canvas { display: block; width: 100%; border-radius: 6px; }
.pa4-apercu-vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 320px; padding: 24px; text-align: center; color: var(--pa4-doux);
  background: var(--pa4-creme); border: 1.5px dashed var(--pa4-bord); border-radius: 10px;
}
.pa4 .pa4-apercu-vide svg { width: 84px; height: 105px; stroke: var(--pa4-bord); stroke-width: 2.5; }
.pa4-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 0; font-size: .85em; color: var(--pa4-doux); }
.pa4-legende > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pa4-pastille { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--pa4-accent); border-radius: 3px; }
.pa4-pastille-vide { border-color: var(--pa4-erreur); background: rgba(110, 110, 110, .35); }
.pa4-pastille-recouvrement { border: 0; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pa4-accent) 55%, transparent) 0 1px, color-mix(in srgb, var(--pa4-accent) 18%, transparent) 1px 4px); }

/* ---- conseils */
.pa4-conseils { margin-top: 20px; background: var(--pa4-creme); border-radius: var(--pa4-rayon); padding: 14px 20px; }
.pa4-conseils summary { cursor: pointer; font-family: var(--pa4-titre); font-weight: 700; color: var(--pa4-nuit); }
.pa4-conseils ol { margin: 12px 0 4px; padding-left: 1.3em; }
.pa4-conseils li { margin: 6px 0; }

@media (max-width: 860px) {
  .pa4-grille { grid-template-columns: minmax(0, 1fr); }
  .pa4-apercu { position: static; order: -1; }
  .pa4-vide .pa4-apercu { order: 0; } /* sans patron, l'import passe avant l'aperçu */
  .pa4-apercu-vide { min-height: 180px; }
  [data-patron-a4]:not(.pa4) { min-height: 1400px; }
}