/* =========================================================
   iTUSA — shared stylesheet
   Design tokens, reset, typography, header, footer, buttons,
   split / FAQ / final-CTA components. Extracted from the twelve
   page sheets: every rule here appeared on six or more pages.
   Page-specific rules stay in the page's own <style> block and
   therefore still win the cascade.
   ========================================================= */

/* Design tokens — union of the twelve page sheets. Pages may still
   override any of these in their own <style> block. */
:root{
  --navy:        #0F1E33;
  --navy-deep:   #0A1524;
  --navy-lift:   #16273F;
  --gold:        #5E7B00; /* contextualisé dans layout.css */
  --gold-soft:   color-mix(in srgb, var(--gold) 55%, transparent);
  --white:       #FFFFFF;
  --grey-warm:   #A8A29A;
  --grey-warm-light: #6E6860;
  --grey-dark:   #2E3238;
  --grey-light:  #F4F3F1;
  --grey-mid:    #D8D5CF;
  --error:       #B3453C;
  --remote-accent: #9CAF3C;
  --font: 'Outfit', system-ui, -apple-system, sans-serif;
  --section-y: 84px;
  --section-y-tab: 64px;
  --section-y-mob: 48px;
  --gutter: clamp(20px, 2.4vw, 36px);
  --max-width: 1280px;
  --measure: 68ch;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;
  --error-on-navy: #E08579;
  --gold-navy-lift: #A6D609;
  --comp-prep:   #3E6E6B;
  --day-wed:     #2E5AA8;
  --day-sat:     #4E86C6;
  --day-rest:    #B9D0EC;
  --garnet:      #8A2432;
  /* Width of the browser scrollbar, measured once by /assets/site.js.
     Without it, 100vw is wider than the visible page and every full-bleed
     block would sit a few pixels right of the header. */
  --sbw: 0px;
  /* Horizontal distance from the viewport edge to the site's content column —
     i.e. exactly where the logo starts in the header. Full-bleed sections use
     this instead of a hand-picked padding, so every block on every page lines
     up on the same left and right edge. */
  --page-inset: var(--gutter);
  --lime:        #A6D609;
}

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

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }}

body{
  margin:0; font-family: var(--font); background: #F7F6F2; color: var(--grey-dark);
  font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased;
}

h1,h2,h3{ font-family: var(--font); font-weight: 700; margin: 0; line-height: 1.12; color: var(--navy); }

p{ margin: 0; }

a{ color: inherit; }

img{ display:block; max-width:100%; }

button{ font-family: var(--font); }

table{ border-collapse: collapse; width: 100%; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--gold); color:var(--navy-deep); padding:12px 20px; font-weight:600;
}

.skip-link:focus{ left: 16px; top: 16px; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--gold); outline-offset: 3px;
}

.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

.section-label{
  display:block; font-size: 0.8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}

.section-title.on-navy{ color: var(--white); }

.body-copy{ font-size: 1.05rem; font-weight: 300; color: var(--grey-dark); max-width: var(--measure); }

.body-copy.on-navy{ color: var(--grey-mid); }

.body-copy p + p{ margin-top: 1.1em; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font); font-weight:600; font-size:1rem;
  padding: 16px 32px; border-radius: 2px; text-decoration:none;
  border: 1.5px solid transparent; cursor:pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-primary{ background: var(--gold); color: var(--navy-deep); }

.btn-primary:hover{ background: #b8931f; }

.btn-secondary-nav{ background: transparent; color: var(--navy); border-color: var(--navy); font-weight: 500; }

.btn-secondary-nav:hover{ background: var(--navy); color: var(--white); }

.btn-secondary-nav.on-navy{ color: var(--white); border-color: var(--gold); }

.btn-secondary-nav.on-navy:hover{ background: var(--gold); color: var(--navy-deep); }

.link-nav{ color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }

.link-nav.on-navy{ color: var(--white); }

.btn-row{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }

.ph{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px; width:100%; background: var(--grey-light);
  border: 1px dashed var(--gold-soft); color: var(--grey-dark); text-align:center; padding:24px;
}

.ph-id{ font-family: ui-monospace, monospace; font-weight:600; letter-spacing:.06em; font-size:.85rem; }

.ph-type{ font-size:.8rem; color: var(--grey-warm-light); }

.ph-desc{ font-size:.9rem; max-width:40ch; }

.ph-status{ font-size:.75rem; color: var(--error); font-weight:500; }

.ph.on-navy{ background: var(--navy-lift); border-color: var(--gold-soft); color: var(--grey-mid); }

.ph.on-navy .ph-status{ color:#E08579; }

.ph.on-navy .ph-type{ color: var(--grey-warm); }

.pending{ color: var(--error); font-weight: 600; font-size: 0.85em; border-bottom: 1px dashed var(--error); }

.proof-band .pending, .final-cta .pending{ color: #E08579; border-bottom-color: #E08579; }

.icon{ width:48px; height:48px; stroke: currentColor; fill:none; stroke-width:1.5; }

.icon[aria-hidden="true"]{ pointer-events:none; }

section{ position:relative; }

.split{ display:grid; grid-template-columns: 1fr 1fr; min-height: 640px; }

.split > .split-media{ position:relative; overflow:hidden; }

.split > .split-media img, .split > .split-media .ph{ width:100%; height:100%; object-fit:cover; }

.split > .split-text{ display:flex; flex-direction:column; justify-content:center; padding: var(--section-y) var(--page-inset); gap: 24px; }

.on-navy-bg{ background: var(--navy); }

.on-navy-bg .body-copy{ color: var(--grey-mid); }

.caption{ font-size: .85rem; color: var(--grey-mid); font-weight:300; font-style: italic; }

.caption-bar{
  position:absolute; left:0; right:0; bottom:0; padding: 20px 24px;
  background: linear-gradient(to top, rgba(10,21,36,.82), transparent);
  color: var(--white); font-size:.85rem; font-style:italic; font-weight:300;
}

@media (max-width: 1024px){
  .split{ grid-template-columns: 1fr; min-height:auto; }
  .split > .split-text{ padding: var(--section-y-tab) var(--page-inset); }}

@media (max-width: 640px){
  .split > .split-text{ padding: var(--section-y-mob) 24px; gap:20px; }
  .split-media{ aspect-ratio: 4/5; }}

.accordion-toggle{
  all: unset; display:flex; justify-content:space-between; align-items:center;
  width:100%; cursor:pointer; gap:16px; padding: 20px 4px; min-height:48px;
}

.accordion-toggle h3{ font-size:1.02rem; font-weight:600; }

.accordion-toggle .acc-mark{ flex-shrink:0; width:22px; height:22px; color: var(--gold); transition: transform var(--dur) var(--ease); }

.accordion-toggle[aria-expanded="true"] .acc-mark{ transform: rotate(45deg); }

.accordion-panel{ max-height:0; overflow:hidden; transition: max-height var(--dur) var(--ease); }

.accordion-panel-inner{ padding: 0 4px 22px; font-weight:300; font-size:.98rem; line-height:1.65; }

.hero{
  display:grid; grid-template-columns: 55fr 45fr;
  min-height: 100vh;
}

.hero-text{ display:flex; flex-direction:column; justify-content:center; gap: 28px; padding: 64px; }

.hero-media{
  position:relative; display:flex; flex-direction:column;
  height: 100vh;
}

.hero-panel img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-panel .ph{ height:100%; }

.proof-block{ padding: 22px 20px; border-right: 1px solid rgba(255,255,255,.12); color: var(--white); }

.proof-block:last-child{ border-right:none; }

.proof-block .proof-desc{ font-size:.85rem; font-weight:300; color: var(--grey-mid); }

.faq-section{ background: var(--grey-light); padding: var(--section-y) 0; }

.faq-header{ text-align:center; margin-bottom:48px; }

.faq-list{ max-width: var(--max-width); margin:0 auto; }

.faq-item{ border-bottom:1px solid var(--grey-mid); }

.faq-question{
  all:unset; display:flex; justify-content:space-between; align-items:center;
  width:100%; cursor:pointer; padding:22px 4px; gap:16px; min-height:48px;
}

.faq-question h3{ font-size:1.02rem; font-weight:500; color:var(--navy); }

.faq-question .acc-mark{ color:var(--gold); width:18px; height:18px; flex-shrink:0; transition: transform var(--dur) var(--ease); }

.faq-question[aria-expanded="true"] .acc-mark{ transform: rotate(45deg); }

.faq-panel{ max-height:0; overflow:hidden; transition: max-height var(--dur) var(--ease); }

.faq-panel-inner a{ color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }

@media (max-width:1024px){ .faq-list{ margin:0 10%; }}

@media (max-width:640px){ .faq-section{ padding: var(--section-y-mob) 0; } .faq-list{ margin:0; }}

.final-cta{ background: var(--navy-deep); padding: var(--section-y) 0; }

.final-cta .section-title{ max-width:none; }

.final-cta .body-copy{ margin:24px auto 0; max-width:none; text-align:center; }

.brand-mark{
  width:220px; height:165px; margin:0 auto 32px;
  background-image:url('/images/GLB-03_logo-lockups.png');
  background-size:440px 330px; background-position:0 -82px; background-repeat:no-repeat;
}

/* LOT 3 — logo simple en tête de CTA (5 pages), ex-style inline. */
/* LOT 3 (corrigé le 23/08) — le sélecteur était scopé .final-cta, mais
   full-board place ce logo dans un bloc .proc-cta (id="final-cta", pas la
   classe) : la règle ne matchait pas et l'image s'affichait en 1536×1024.
   La classe .cta-logo se suffit à elle-même — elle n'existe que là. */
.cta-logo{ height:44px; width:auto; display:block; margin:0 auto 8px; }

.cta-dual-row{ display:flex; justify-content:center; gap:24px; margin: 44px 0 8px; flex-wrap:wrap; }

.cta-dual-item{ display:flex; flex-direction:column; align-items:center; gap:12px; }

.cta-dual-item .btn{ min-width:260px; }

.cta-audience-line{ font-size:.8rem; font-weight:300; color:var(--grey-mid); }

@media (max-width:640px){
  .final-cta{ padding: var(--section-y-mob) 0; }
  .final-cta-inner{ max-width:none; padding:0 24px; }
  .cta-dual-row{ flex-direction:column; align-items:stretch; }
  .cta-dual-item{ align-items:stretch; }
  .cta-dual-item .btn{ width:100%; min-width:0; }
  .brand-mark{ width:170px; height:128px; background-size:340px 255px; background-position:0 -63px; }}

.site-nav{
  position: sticky; top: 0; z-index: 500;
  background: var(--navy-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
}

.site-nav-inner{
  max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}

.site-nav-logo{ display:block; line-height:0; flex-shrink:0; }
/* LOT 3 — taille du logo centralisée ici (34 styles inline supprimés des
   15 pages). 44px dans une nav de 72px : la marque respire enfin sans
   toucher à la hauteur de barre. Le fichier PNG source (1536×1024) porte
   encore de larges marges internes : après recadrage de l'asset, seuls
   les attributs width/height des <img> seront à mettre à jour — plus
   aucune taille n'est écrite dans le HTML. */
.site-nav-logo img{ height:44px; width:auto; display:block; }
@media (max-width:640px){ .site-nav-logo img{ height:38px; } }

.site-nav-toggle{
  display: none; align-items:center; justify-content:center;
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--white);
}

.site-nav-toggle .icon-close{ display:none; }

.site-nav.open .site-nav-toggle .icon-menu{ display:none; }

.site-nav.open .site-nav-toggle .icon-close{ display:block; }

.site-nav-panel{ display:flex; align-items:center; gap: 32px; }

.site-nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }

.site-nav-links a{
  color: var(--white); text-decoration:none; font-size:.95rem; font-weight:500;
  padding: 6px 2px; border-bottom: 2px solid transparent; display:inline-block;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.site-nav-links a:hover, .site-nav-links a:focus-visible{ border-color: var(--gold-soft); }

.site-nav-links a[aria-current="page"]{ color: var(--gold); border-color: var(--gold); }

/* LOT 8 — entrée utilitaire Sign in : lien réel vers /account (placeholder
   propre), jamais un bouton grisé — un contrôle désactivé est ambigu et
   invisible aux lecteurs d'écran. Filet discret pour la distinguer des
   entrées de navigation. */
.site-nav-links .nav-signin a{
  border:1px solid color-mix(in srgb, var(--white) 35%, transparent);
  border-radius:2px; padding:8px 16px; border-bottom-width:1px;
}
.site-nav-links .nav-signin a:hover,
.site-nav-links .nav-signin a:focus-visible{ border-color: var(--lime); }
.site-nav-links .nav-signin a[aria-current="page"]{ border-color: var(--lime); color: var(--lime); }
@media (max-width:860px){
  .site-nav-links .nav-signin a{ border-width:1px; margin-top:10px; text-align:center; }
}

.site-nav-lang{ position:relative; flex-shrink:0; }

.site-nav-lang-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid color-mix(in srgb, var(--white) 25%, transparent);
  border-radius: 4px; color: var(--white); font-size:.85rem; font-family: var(--font);
  padding: 6px 10px; cursor:pointer;
}

.site-nav-lang-btn:hover, .site-nav-lang-btn:focus-visible{ border-color: var(--gold-soft); }

.site-nav-lang-panel{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background: var(--navy-lift); border:1px solid color-mix(in srgb, var(--white) 12%, transparent);
  border-radius: 6px; list-style:none; margin:0; padding:6px; min-width:170px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

.site-nav-lang.open .site-nav-lang-panel{ display:block; }

.site-nav-lang-panel li a{
  display:block; width:100%; text-align:left; background:none; border:0;
  color: var(--white); font-family: var(--font); font-size:.85rem; text-decoration:none;
  padding: 8px 10px; border-radius:4px; cursor:pointer;
}

.site-nav-lang-panel li a:hover{ background: color-mix(in srgb, var(--white) 8%, transparent); }

.site-nav-lang-panel li a.lang-current{ color: var(--gold); font-weight:600; }

@media (max-width: 860px){
  .site-nav-toggle{ display:flex; }
  .site-nav-panel{
    position: fixed; inset: 72px 0 0 0; background: var(--navy-deep);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 24px var(--gutter);
    transform: translateX(100%); transition: transform var(--dur) var(--ease);
    overflow-y: auto; visibility: hidden;
  }
  .site-nav.open .site-nav-panel{ transform: translateX(0); visibility: visible; }
  .site-nav-links{ flex-direction:column; gap:0; width:100%; }
  .site-nav-links a{ display:block; width:100%; padding:14px 4px; border-bottom:1px solid color-mix(in srgb, var(--white) 10%, transparent); }
  .site-nav-lang{ margin-top: 20px; width:100%; }
  .site-nav-lang-btn{ width:100%; justify-content:space-between; }
  .site-nav-lang-panel{ position:static; box-shadow:none; margin-top:8px; width:100%; }}

@media (prefers-reduced-motion: reduce){
  .site-nav-panel{ transition: none; }}

.site-footer{ background: var(--navy-deep); padding: 64px 0 0; }

.footer-inner{
  max-width: var(--max-width); margin:0 auto; padding: 0 var(--gutter) 48px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}

.footer-col-brand img{ height:52px; width:auto; display:block; } /* LOT 3 — ex-inline 46px */
.footer-col-brand p{ color: var(--grey-warm); font-size:.85rem; margin: 12px 0 0; line-height:1.5; }

.footer-heading{
  color: var(--white); font-size:.8rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; margin: 0 0 16px;
}

.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

.footer-col ul a{ color: var(--grey-warm); text-decoration:none; font-size:.9rem; }

.footer-col ul a:hover, .footer-col ul a:focus-visible{ color: var(--gold); }

.footer-social{ flex-direction:row !important; gap:14px !important; }

.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--white) 20%, transparent);
  color: var(--white);
}

.footer-social a:hover, .footer-social a:focus-visible{ border-color: var(--gold); color: var(--gold); }

.footer-base{
  border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent);
  padding: 20px var(--gutter); text-align:center;
}

.footer-base p{ color: var(--grey-warm); font-size:.8rem; margin:0; }

@media (max-width: 860px){
  .footer-inner{ grid-template-columns: 1fr 1fr; gap:32px 24px; }}

@media (max-width: 480px){
  .footer-inner{ grid-template-columns: 1fr; }}

.site-nav-dropdown{ position:relative; }

.site-nav-dropbtn{
  color:var(--white); background:none; border:0; border-bottom:2px solid transparent;
  font:inherit; font-size:.95rem; font-weight:500; padding:6px 2px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}

.site-nav-dropbtn:hover, .site-nav-dropbtn:focus-visible{ border-color:var(--gold-soft); }

.site-nav-dropdown.open > .site-nav-dropbtn,
.site-nav-dropbtn[aria-current="true"]{ color:var(--gold); border-color:var(--gold); }

.site-nav-dropmenu{
  position:absolute; top:100%; left:0; margin-top:12px; min-width:236px;
  background:var(--navy); border:1px solid var(--gold-soft); border-radius:6px;
  padding:8px; list-style:none; display:none; z-index:60;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.site-nav-dropdown.open .site-nav-dropmenu{ display:block; }

.site-nav-dropmenu a{
  display:block; color:var(--white); text-decoration:none; font-size:.9rem;
  padding:10px 12px; border-radius:4px; border-bottom:0;
}

.site-nav-dropmenu a:hover, .site-nav-dropmenu a:focus-visible{ background:color-mix(in srgb, var(--white) 8%, transparent); color:var(--gold); }

.site-nav-dropmenu a[aria-current="page"]{ color:var(--gold); }

@media (max-width: 860px){
  .site-nav-dropdown{ width:100%; }
  .site-nav-dropbtn{ width:100%; justify-content:space-between; padding:14px 4px;
    border-bottom:1px solid color-mix(in srgb, var(--white) 10%, transparent); }
  .site-nav-dropmenu{ position:static; margin:0 0 0 8px; min-width:0; border:0;
    border-left:1px solid var(--gold-soft); border-radius:0; box-shadow:none;
    background:transparent; padding:4px 0 8px 8px; }}