/* ==========================================================================
   SETCO — système de design
   Reprend les tokens de la maquette de référence. Ne rien redessiner ici :
   toute valeur vient du handoff.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées
   Space Grotesk et Archivo sont des polices variables : un seul fichier
   couvre toutes les graisses, d'où le `font-weight` exprimé en intervalle.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fonds */
  --setco-bg: #0e2a2b;        /* fond principal, vert pétrole sombre */
  --setco-bg2: #123334;       /* sections alternées */
  --setco-surface: #173d3e;   /* cartes et blocs */
  --setco-surf2: #1d4748;     /* surface secondaire */
  --setco-footer: #091e1f;    /* pied de page */

  /* Sable — réservé, peu utilisé */
  --setco-sand: #ece3d3;
  --setco-sand2: #f3eee4;

  /* Accent */
  --setco-accent: #ef7d18;    /* boutons, liens actifs, chiffres clés */
  --setco-accent2: #ffa24e;   /* survol */
  --setco-on-accent: #0e2a2b; /* texte posé sur l'orange */

  /* Textes — ratios de contraste vérifiés AA sur les fonds du site */
  --setco-text: #eef3f0;      /* texte principal */
  --setco-muted: #9bb0ab;     /* secondaire et labels — 6,64:1 sur --setco-bg */
  --setco-body: #c2cfca;      /* paragraphes de contenu */
  --setco-card-body: #bccac5; /* corps de texte dans les cartes */
  --setco-copyright: #7c918c; /* ligne du bas du pied de page */
  --setco-line: rgba(238, 243, 240, .14);

  /* Typographie */
  --setco-font-titre: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --setco-font-texte: 'Archivo', system-ui, -apple-system, sans-serif;

  /* Géométrie */
  --setco-largeur: 1280px;
  --setco-gouttiere: 44px;
  --setco-gouttiere-mobile: 22px;
  --setco-section-y: 88px;
  --setco-header-h: 76px;

  /* Rayons */
  --setco-r-carte: 12px;
  --setco-r-bloc: 10px;
  --setco-r-champ: 8px;
  --setco-r-logo: 4px;
  --setco-r-pilule: 100px;
}

/* --------------------------------------------------------------------------
   3. Bases
   -------------------------------------------------------------------------- */

/* Le sélecteur `body[class]` passe devant la classe `.elementor-kit-*` qu'Elementor
   pose sur le body, sans recourir à !important. C'est le thème qui porte le design,
   pas le constructeur de pages. */
body,
body[class] {
  background: var(--setco-bg);
  color: var(--setco-text);
  font-family: var(--setco-font-texte);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.setco-page h1, .setco-page h2, .setco-page h3 {
  font-family: var(--setco-font-titre);
  letter-spacing: -.02em;
  line-height: 1.05;
  font-weight: 600;
  color: var(--setco-text);
  /* Astra met une capitale à chaque mot ; la maquette est en casse normale. */
  text-transform: none;
}

h1 { font-size: clamp(36px, 5.4vw, 68px); }
h2 { font-size: clamp(28px, 4vw, 50px); }
h3 { font-size: 20px; }

p { color: var(--setco-body); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--setco-accent2); }

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

/* Accessibilité : un focus toujours visible, absent de la maquette d'origine. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--setco-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* --------------------------------------------------------------------------
   4. Composants transverses
   -------------------------------------------------------------------------- */

/* Conteneur */
.setco-wrap {
  max-width: var(--setco-largeur);
  margin-inline: auto;
  padding-inline: var(--setco-gouttiere);
}

/* Label : petites capitales espacées */
.setco-label {
  font-family: var(--setco-font-titre);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 500;
  color: var(--setco-muted);
}

/* Kicker : trait orange + label, en tête de section */
.setco-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.setco-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--setco-accent);
  flex: none;
}
.setco-kicker .setco-label { color: var(--setco-accent); }

/* Bouton */
.setco-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--setco-accent);
  color: var(--setco-on-accent);
  font-family: var(--setco-font-titre);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: var(--setco-r-pilule);
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.setco-btn:hover {
  background: var(--setco-accent2);
  color: var(--setco-on-accent);
  transform: translateY(-2px);
}
.setco-btn--ligne {
  background: transparent;
  color: var(--setco-text);
  border: 1px solid var(--setco-line);
}
.setco-btn--ligne:hover {
  background: transparent;
  border-color: var(--setco-accent);
  color: var(--setco-accent);
}

/* Carte */
.setco-carte {
  background: var(--setco-surface);
  border: 1px solid var(--setco-line);
  border-radius: var(--setco-r-carte);
  padding: 30px;
  transition: transform .25s, border-color .25s;
}
.setco-carte:hover {
  transform: translateY(-3px);
  border-color: rgba(239, 125, 24, .5);
}
.setco-carte p { color: var(--setco-card-body); font-size: 14.5px; }

/* Numéro de carte : texte orange suivi d'un filet qui occupe le reste */
.setco-num {
  font-family: var(--setco-font-titre);
  font-size: 13px;
  font-weight: 600;
  color: var(--setco-accent);
  letter-spacing: .1em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.setco-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--setco-line);
}

/* Logo : pastille blanche réduite à un liseré, filet orange en pied */
.setco-logo img {
  height: 48px;
  width: auto;
  background: #fff;
  border-radius: var(--setco-r-logo);
  padding: 4px 7px;
  box-shadow: 0 2px 0 rgba(239, 125, 24, .9);
  box-sizing: border-box;
}

/* Section */
.setco-section { padding-block: var(--setco-section-y); }
.setco-section--alt { background: var(--setco-bg2); }

/* Lien d'évitement : visible seulement au clavier */
.setco-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--setco-accent);
  color: var(--setco-on-accent);
  font-family: var(--setco-font-titre);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--setco-r-champ) 0;
}
.setco-skip:focus {
  left: 0;
  color: var(--setco-on-accent);
}

/* --------------------------------------------------------------------------
   Reprise de la maquette : neutralise l'habillage d'Astra sur les gabarits
   -------------------------------------------------------------------------- */

/* Astra impose un fond clair au document et à ses conteneurs : on rétablit le
   vert pétrole de la maquette. On s'appuie sur la classe que WordPress pose
   lui-même pour nos gabarits — plus sûr qu'une classe ajoutée par filtre. */
html body[class*="page-template-page-templates"] {
  background: var(--setco-bg);
  color: var(--setco-text);
}

body[class*="page-template-page-templates"] #page,
body[class*="page-template-page-templates"] .site,
body[class*="page-template-page-templates"] #content,
body[class*="page-template-page-templates"] .site-content,
body[class*="page-template-page-templates"] #primary,
body[class*="page-template-page-templates"] .ast-container,
body[class*="page-template-page-templates"] .entry-content,
body[class*="page-template-page-templates"] .ast-article-single,
body[class*="page-template-page-templates"] .ast-article-inner,
body[class*="page-template-page-templates"] .ast-separate-container .ast-article-single {
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;
  background: transparent;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

/* L'en-tête et le pied d'Astra ne doivent pas doubler ceux de la maquette. */
body[class*="page-template-page-templates"] > .site > .site-header,
body[class*="page-template-page-templates"] .ast-above-header,
body[class*="page-template-page-templates"] .site-footer,
body[class*="page-template-page-templates"] .ast-below-footer {
  display: none;
}

/* Menu mobile : remplace les styles posés en ligne par la maquette. */
@media (max-width: 1080px) {
  .menu {
    display: none;
    position: absolute;
    top: var(--setco-header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--setco-bg);
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid var(--setco-line);
    z-index: 70;
  }
  .menu.menu--ouvert { display: flex; }
}

/* --------------------------------------------------------------------------
   Formulaire WPForms — habillé aux couleurs de la maquette
   -------------------------------------------------------------------------- */

/* WPForms se pilote d'abord par ses propres variables : les renseigner évite
   d'avoir à surcharger chaque règle une à une. */
.formcard .wpforms-container,
.formcard .wpforms-container-full {
  margin: 0;

  --wpforms-field-background-color: var(--setco-bg);
  --wpforms-field-border-color: var(--setco-line);
  --wpforms-field-text-color: var(--setco-text);
  --wpforms-field-border-radius: var(--setco-r-champ);
  --wpforms-field-border-size: 1px;
  --wpforms-field-menu-color: var(--setco-bg);

  --wpforms-label-color: var(--setco-muted);
  --wpforms-label-sublabel-color: var(--setco-muted);
  --wpforms-label-error-color: #ffb4a2;

  --wpforms-button-background-color: var(--setco-accent);
  --wpforms-button-text-color: var(--setco-on-accent);
  --wpforms-button-border-radius: var(--setco-r-pilule);
  --wpforms-button-border-size: 0;

  --wpforms-page-break-color: var(--setco-accent);
}

.formcard .wpforms-field { padding: 0 0 15px; }

.formcard .wpforms-field-label,
.formcard .wpforms-field-label-inline {
  font-family: var(--setco-font-titre) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  color: var(--setco-muted) !important;
  text-transform: uppercase;
  margin-bottom: 7px !important;
}

.formcard input[type="text"],
.formcard input[type="email"],
.formcard input[type="tel"],
.formcard input[type="url"],
.formcard input[type="number"],
.formcard select,
.formcard textarea {
  background: var(--setco-bg) !important;
  border: 1px solid var(--setco-line) !important;
  border-radius: var(--setco-r-champ) !important;
  padding: 12px 14px !important;
  font-family: var(--setco-font-texte) !important;
  font-size: 15px !important;
  color: var(--setco-text) !important;
  box-shadow: none !important;
  max-width: none !important;
  width: 100% !important;
}

.formcard textarea { min-height: 110px !important; resize: vertical; }

.formcard input:focus,
.formcard select:focus,
.formcard textarea:focus {
  border-color: var(--setco-accent) !important;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.formcard ::placeholder { color: var(--setco-muted); opacity: .7; }
.formcard select option { background: var(--setco-bg); color: var(--setco-text); }

/* Bouton d'envoi : même dessin que les boutons du site */
.formcard .wpforms-submit,
.formcard button[type="submit"] {
  background: var(--setco-accent) !important;
  color: var(--setco-on-accent) !important;
  font-family: var(--setco-font-titre) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 22px !important;
  border: none !important;
  border-radius: var(--setco-r-pilule) !important;
  width: 100%;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.formcard .wpforms-submit:hover {
  background: var(--setco-accent2) !important;
  transform: translateY(-2px);
}

/* Messages : erreurs lisibles sur fond sombre, confirmation aux couleurs du site */
.formcard .wpforms-error {
  color: #ffb4a2 !important;
  font-size: 13px !important;
}
.formcard input.wpforms-error,
.formcard textarea.wpforms-error,
.formcard select.wpforms-error { border-color: #ffb4a2 !important; }

.formcard .wpforms-confirmation-container-full,
div[class*="wpforms-confirmation"] {
  background: rgba(239, 125, 24, .12) !important;
  border: 1px solid var(--setco-accent) !important;
  border-radius: var(--setco-r-champ);
  color: var(--setco-accent2) !important;
  padding: 14px 16px !important;
  font-size: 14.5px;
}
.formcard .wpforms-required-label { color: var(--setco-accent) !important; }

/* Réservé aux lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Points de rupture
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .setco-wrap { padding-inline: var(--setco-gouttiere-mobile); }
}

/* --------------------------------------------------------------------------
   6. Références « Ils nous font confiance »
   -------------------------------------------------------------------------- */

/* La maquette posait cette bande sur un beige clair : au milieu d'un site
   sombre, la rupture était brutale. On la ramène dans la palette du site.
   Les logos, eux, gardent leur pastille blanche — ils sont dessinés pour
   un fond clair et deviendraient illisibles autrement. */
.partners {
  background: var(--bg2);
  color: var(--text);
  border-block: 1px solid var(--line);
}

.partners h2 { color: var(--text); }

.partners .plogos .pl {
  background: #fff;
  border: 1px solid rgba(238, 243, 240, .10);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------------------
   7. Mise en mouvement
   -------------------------------------------------------------------------- */

/* Les éléments apparaissent au défilement. L'état masqué n'est appliqué que
   si le script a pris la main (classe posée sur <html>) : sans JavaScript,
   la page reste entièrement lisible au lieu de rester blanche. */
html.setco-anim [data-anim] {
  opacity: 0;
  transform: translateY(20px);
}

html.setco-anim [data-anim].est-vu {
  opacity: 1;
  transform: none;
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retard, 0ms);
}

/* Le hero ne doit jamais attendre : il est déjà à l'écran au chargement. */
html.setco-anim .hero [data-anim] { transition-delay: 0ms; }

/* Liens de navigation : soulignement qui se déploie. */
.menu a { position: relative; }
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.menu a:hover::after,
.menu a:focus-visible::after { transform: scaleX(1); }
.menu a.active::after { transform: scaleX(1); }

/* Boutons et cartes : réponse au survol un peu plus franche. */
.btn { transition: transform .22s ease, background-color .22s ease, color .22s ease; }
.btn:hover { transform: translateY(-2px); }

.gcard { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; }
.gcard:hover { box-shadow: 0 22px 40px -28px rgba(0,0,0,.9); }

.plogos .pl { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }

/* Une personne qui a demandé moins d'animations n'en reçoit aucune. */
@media (prefers-reduced-motion: reduce) {
  html.setco-anim [data-anim] { opacity: 1; transform: none; transition: none; }
  .menu a::after { transition: none; }
  .btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Bouton d'appel à l'action dans l'en-tête
   -------------------------------------------------------------------------- */

/* Dans la barre de navigation, ce bouton avait le même poids qu'un bouton de
   section : aplat orange, large rembourrage. Il écrasait le menu et le logo.
   On l'allège en contour — il reste repérable sans dominer l'en-tête. Les
   appels à l'action des sections, eux, gardent leur aplat plein. */
.nav .btn {
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(239, 125, 24, .5);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
}

.nav .btn:hover,
.nav .btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0e2a2b;
}

/* Une fois l'en-tête collé en haut, le fond devient opaque : on garde le
   même traitement, la lisibilité y est déjà assurée par le contraste. */
header.stuck .nav .btn { border-color: rgba(239, 125, 24, .65); }