/* Paul Assistance — CTA header bleu et page /assistance/.
   Bleu = #40c4f0, couleur exacte du mot "Paul" du logo officiel Paul Informatique. */

/* CTA header : calque de .nav-urgence-link (même boîte, même transition), variante bleue */
.header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link {
  color: #40c4f0; white-space: nowrap; border: 1px solid #40c4f0; border-radius: 4px;
  margin-left: 6px; padding: 10px 20px; font-size: 14px; line-height: 20px; transition: all .25s linear;
}
.header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link:after { display: none; }
.header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link:hover,
.header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link:focus-visible,
.header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link.active { color: #061018; background: #40c4f0; }
.offcanvas-navigation ul li a.nav-assist-link { color: #40c4f0; }

/* Menu desktop resserré : le conteneur du header garde ~1080px au-delà de 1200px, les 3 CTA doivent y tenir */
@media only screen and (min-width: 1200px) {
  .header-area-3 .menu-area .main-menu nav ul li a { padding-left: 9px; padding-right: 9px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area-3 .menu-area .main-menu nav ul li a { padding-left: 7px; padding-right: 7px; font-size: 14px; }
  .header-area-3 .menu-area .main-menu nav ul li a.nav-urgence-link,
  .header-area-3 .menu-area .main-menu nav ul li a.nav-assist-link { padding: 10px 12px; margin-left: 4px; }
  .header-area-3 .main-menu .header-cta { margin-left: 8px; padding: 10px 14px; }
}

/* Page /assistance/ */
.pa-hero { padding: 55px 0 34px; }
.pa-hero-card { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; padding: 34px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: var(--common-body-3); }
.pa-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 0; }
.pa-brand img { width: 160px; height: 160px; }
.pa-brand figcaption { font-size: 20px; font-weight: 700; color: var(--text-h); }
.pa-hero h2 { font-size: 30px; line-height: 1.25; margin-bottom: 13px; color: var(--text-h); }
.pa-hero p { font-size: 18px; color: var(--text-p-1); margin-bottom: 13px; max-width: 680px; }
.pa-cta { margin-top: 8px; }
.pa-cta .default-btn { font-size: 18px; padding: 18px 34px; margin-top: 0; }
.pa-meta { font-size: 16px; font-weight: 600; color: var(--text-h) !important; margin: 13px 0 0 !important; }
.pa-note { font-size: 14px !important; margin: 8px 0 0 !important; }
.pa-tuto { padding: 21px 0 34px; }
.pa-tuto > .auto-container > h2 { font-size: 34px; margin-bottom: 8px; color: var(--text-h); text-align: center; }
.pa-tuto-sub { font-size: 18px; color: var(--text-p-1); text-align: center; margin-bottom: 34px; }
.pa-steps { list-style: none; padding: 0; margin: 0; }
.pa-step { display: grid; grid-template-columns: 1fr 1.2fr; gap: 55px; align-items: center; padding: 34px 0;
  border-top: 1px solid rgba(0,0,0,.08); }
.pa-step:nth-child(even) .pa-step-text { order: 2; }
.pa-num { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--theme-1); color: #061018; font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 13px; }
.pa-step h3 { font-size: 28px; line-height: 1.25; color: var(--text-h); margin-bottom: 8px; }
.pa-step p { font-size: 18px; color: var(--text-p-1); margin: 0; }
.pa-step p strong { color: var(--text-h); overflow-wrap: anywhere; }
.pa-step figure { margin: 0; text-align: center; }
.pa-step img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 13px 34px rgba(0,0,0,.12); }
.pa-step figcaption { font-size: 14px; color: var(--text-p-1); margin-top: 8px; }
.pa-help { padding: 21px 0 89px; }
.pa-help-card { text-align: center; padding: 34px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: var(--common-body-3); }
.pa-help-card h2 { font-size: 30px; margin-bottom: 13px; color: var(--text-h); }
.pa-help-card p { font-size: 18px; color: var(--text-p-1); margin: 0 auto; max-width: 620px; }
/* Sélecteur de navigateur (boutons radio natifs : souris, clavier, tactile) */
.pa-choice { border: 0; padding: 0; margin: 0 0 21px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; min-width: 0; }
.pa-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pa-choice-label { position: relative; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 76px; margin: 0;
  padding: 13px 21px; border: 2px solid rgba(0,0,0,.14); border-radius: 8px; background: #fff; color: var(--text-h);
  font-size: 18px; font-weight: 600; cursor: pointer; transition: all .25s linear; }
.pa-choice-label img { width: 40px; height: 40px; flex: 0 0 40px; }
.pa-choice-label:hover { border-color: #40c4f0; }
.pa-choice-input:checked + .pa-choice-label { border-color: #40c4f0; background: #eaf8fe; box-shadow: inset 0 0 0 2px #40c4f0; }
/* état actif signalé aussi sans couleur : coche */
.pa-choice-input:checked + .pa-choice-label::after { content: "✓"; position: absolute; top: 6px; right: 10px; font-size: 18px; font-weight: 800; color: #061018; }
.pa-choice-input:focus-visible + .pa-choice-label { outline: 3px solid #061018; outline-offset: 3px; }
.pa-panel { display: none; }
.pa-panel--chrome { display: block; }
.pa-browsers:has(#pa-b-firefox:checked) .pa-panel--chrome, .pa-browsers:has(#pa-b-edge:checked) .pa-panel--chrome { display: none; }
.pa-browsers:has(#pa-b-firefox:checked) .pa-panel--firefox, .pa-browsers:has(#pa-b-edge:checked) .pa-panel--edge { display: block; }
.pa-edge-note { font-size: 16px !important; margin-top: 13px !important; padding: 13px 16px; border-left: 4px solid #f59e0b; background: #fff8eb; border-radius: 4px; }
.pa-steps--common { border-bottom: 1px solid rgba(0,0,0,.08); }
.pa-step picture { display: block; }
/* Méthode alternative : Explorateur de fichiers (repliée par défaut) */
.pa-alt { margin-top: 34px; padding: 21px 34px; border: 1px dashed rgba(0,0,0,.18); border-radius: 8px; background: var(--common-body-3); }
.pa-alt h3 { font-size: 22px; line-height: 1.3; color: var(--text-h); margin-bottom: 8px; }
.pa-alt > p { font-size: 17px; color: var(--text-p-1); margin-bottom: 13px; }
.pa-alt summary { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 21px; border: 1px solid var(--theme-1);
  border-radius: 4px; background: #fff; color: var(--text-h); font-weight: 600; cursor: pointer; list-style: none; }
.pa-alt summary::-webkit-details-marker { display: none; }
.pa-alt summary::before { content: "+"; font-size: 20px; font-weight: 800; line-height: 1; }
.pa-alt details[open] summary::before { content: "−"; }
.pa-alt summary:focus-visible { outline: 3px solid #061018; outline-offset: 3px; }
.pa-alt ol { margin: 21px 0 13px; padding-left: 24px; font-size: 18px; color: var(--text-h); }
.pa-alt ol li { margin-bottom: 8px; }
.pa-alt img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
@media (max-width: 991px) {
  .pa-step { grid-template-columns: 1fr; gap: 21px; padding: 34px 0; }
  .pa-step:nth-child(even) .pa-step-text { order: 0; }
}
@media (max-width: 767px) {
  .pa-hero { padding: 34px 0 21px; }
  .pa-hero-card { grid-template-columns: 1fr; gap: 21px; padding: 21px; text-align: center; }
  .pa-brand img { width: 112px; height: 112px; }
  .pa-hero h2 { font-size: 24px; }
  .pa-hero p, .pa-step p, .pa-help-card p { font-size: 17px; }
  .pa-cta .default-btn { display: block; width: 100%; padding: 18px 16px; }
  .pa-tuto > .auto-container > h2 { font-size: 28px; }
  .pa-step h3 { font-size: 23px; }
  .pa-num { width: 56px; height: 56px; font-size: 26px; }
  .pa-help-card { padding: 21px; }
  .pa-help-card h2 { font-size: 24px; }
  .pa-choice { grid-template-columns: 1fr; gap: 8px; }
  .pa-choice-label { justify-content: flex-start; min-height: 60px; font-size: 17px; }
  .pa-alt { padding: 21px 16px; }
}