/* ==========================================================================
   PowerChain Systems — feuille de style
   Habillage conservé de la V0 (vert de marque, cartes, frise). La refonte de
   direction artistique est prévue après la mise en ligne.
   Corrigés ici : contrastes, focus clavier, navigation mobile, mouvement réduit.
   ========================================================================== */

:root{
  /* Marque */
  --green-primary:#328722;   /* aplats et fonds — 4,35:1 sur blanc, jamais en texte */
  --green-dark:#1F6B14;      /* texte, liens, boutons — 6,62:1 sur blanc */
  --green-darker:#17540F;    /* survol */

  /* Neutres */
  --slate:#354C4A;           /* pied de page, bordures de champ */
  --slate-dark:#22322F;
  --grey-light:#F1F3F2;
  --white:#ffffff;
  --text-dark:#1f2937;
  --text-muted:#5A6664;      /* 5,35:1 sur --grey-light */

  /* Retours */
  --error:#8A1C1C;
  --error-bg:#FDECEC;
  --error-border:#E8B4B4;
  --success-bg:#E9F5E4;
  --success-border:#9CCB8B;

  --max-width:1100px;
  --radius:6px;
  --focus:#0B5FBF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text-dark);
  background:var(--white);
  line-height:1.65;
}
img{max-width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   Accessibilité — plancher
   -------------------------------------------------------------------------- */

/* Lien d'évitement : caché jusqu'à la prise de focus clavier. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--white);color:var(--green-dark);
  padding:.75rem 1.25rem;font-weight:700;
  border:2px solid var(--green-dark);border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

/* Un contour franc et contrasté, visible sur fond clair comme sur fond vert.
   L'ancienne règle utilisait un vert à 25 % d'opacité, imperceptible. */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:2px;
}
.site-header :focus-visible,
.footer :focus-visible{outline-color:var(--white)}

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

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--green-primary);
  color:var(--white);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.header-inner{
  max-width:var(--max-width);margin:0 auto;
  padding:.75rem 1.5rem;
  display:flex;align-items:center;gap:1.5rem;
}
.header-logo{flex:0 0 auto}
.header-logo img{height:44px;width:auto}

.header-nav{display:flex;gap:.5rem;align-items:center;flex:1;justify-content:center}
.header-nav a{
  color:var(--white);text-decoration:none;font-weight:600;
  padding:.5rem .9rem;border-radius:var(--radius);
  transition:background .2s;
}
.header-nav a:hover{background:rgba(255,255,255,.18)}

.lang-switch{display:flex;gap:.4rem;align-items:center;flex:0 0 auto}
.lang-switch a{
  padding:.4rem .8rem;border-radius:var(--radius);text-decoration:none;
  /* Fond assombri, pas éclairci : un voile blanc sur le vert de l'en-tête
     remontait la luminance et cassait le contraste AA du texte blanc
     (3,7:1, mesuré par Lighthouse le 2026-08-05). Un voile noir fait
     l'inverse et remonte à ~5,9:1. */
  color:var(--white);background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.35);font-weight:600;font-size:.9rem;
  transition:background .2s;
}
.lang-switch a.active{background:var(--white);color:var(--green-dark)}
.lang-switch a:hover:not(.active){background:rgba(255,255,255,.28)}

/* Bouton de menu mobile — masqué au-dessus du point de rupture. */
.nav-toggle{
  display:none;align-items:center;gap:.5rem;
  margin-left:auto;
  background:transparent;border:1px solid rgba(255,255,255,.5);
  color:var(--white);font:inherit;font-weight:600;font-size:.9rem;
  padding:.45rem .8rem;border-radius:var(--radius);cursor:pointer;
}
.nav-toggle-bar{
  width:18px;height:2px;background:currentColor;position:relative;display:block;
}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:currentColor;
}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Alternance des fonds par classe explicite. L'ancienne règle nth-of-type
   inversait silencieusement tous les fonds dès qu'une section était ajoutée. */
section{padding:4rem 1.5rem}
.section-content{max-width:var(--max-width);margin:0 auto}
#services,#process,#produits{background:var(--white)}
#qui,#domaines,#besoins,#partenaires{background:var(--grey-light)}

h1,h2,h3{line-height:1.25}
h2{font-size:2rem;margin:0 0 1rem;color:var(--green-dark);font-weight:700}
h3{font-size:1.25rem;margin:0 0 .5rem;color:var(--text-dark);font-weight:700}
.section-intro{max-width:60ch;color:var(--text-muted);margin:0 0 2.5rem;font-size:1.05rem}
.section-note{margin-top:2rem}
.section-actions{margin-top:2rem}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  padding:5rem 1.5rem 4rem;
  background:var(--grey-light);
  border-bottom:1px solid rgba(53,76,74,.15);
}
.hero-inner{max-width:900px}
.hero-eyebrow{
  margin:0 0 1rem;text-transform:uppercase;letter-spacing:.08em;
  font-size:.8rem;font-weight:700;color:var(--green-dark);
}
.hero h1{
  font-size:clamp(1.9rem,4.5vw,3rem);
  margin:0 0 1.5rem;color:var(--text-dark);font-weight:800;
  letter-spacing:-.02em;
}
.hero-lead{font-size:1.15rem;max-width:62ch;margin:0 0 2rem;color:var(--text-dark)}
.hero-actions{margin:0 0 2.5rem}
.hero-proof{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;
  border-top:1px solid rgba(53,76,74,.2);padding-top:1.5rem;
}
.hero-proof li{color:var(--text-muted);font-size:.95rem}
.hero-proof strong{color:var(--green-dark);display:block;font-size:1.05rem}

/* Hero des pages produit : plus compact que celui de l'accueil. */
.hero-page{padding:3.5rem 1.5rem 3rem}
.hero-page h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}

/* --------------------------------------------------------------------------
   Cartes de domaine (accueil)
   -------------------------------------------------------------------------- */

.domain-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;margin-top:1rem;
}
.domain-card{
  background:var(--white);padding:2rem;
  border:1px solid rgba(53,76,74,.18);
  border-left:4px solid var(--green-primary);
  border-radius:var(--radius);
  display:flex;flex-direction:column;
}
.domain-card h3{font-size:1.3rem;margin-bottom:.75rem}
.domain-card h3 a{color:var(--green-dark);text-decoration:none}
.domain-card h3 a:hover{text-decoration:underline}
.domain-card p{color:var(--text-muted);margin:0 0 1rem}
.domain-link{margin-top:auto;margin-bottom:0}
.link-arrow{
  color:var(--green-dark);font-weight:700;text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.link-arrow::after{content:' \2192'}
.link-arrow:hover{color:var(--green-darker)}

.todo-note{margin-top:1.5rem}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-block;padding:.85rem 1.75rem;
  font:inherit;font-weight:700;text-decoration:none;text-align:center;
  border-radius:var(--radius);border:2px solid transparent;cursor:pointer;
  transition:background .2s,color .2s;
}
.btn-primary{background:var(--green-dark);color:var(--white)}
.btn-primary:hover{background:var(--green-darker);color:var(--white)}
.btn-consent{
  background:var(--white);color:var(--green-dark);
  border-color:var(--green-dark);padding:.6rem 1.4rem;font-size:.95rem;
}
.btn-consent:hover{background:var(--green-dark);color:var(--white)}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;margin-top:1rem;
}
.service-card{
  background:var(--white);padding:1.75rem;
  border:1px solid rgba(53,76,74,.18);
  border-top:3px solid var(--green-primary);
  border-radius:var(--radius);
}
.service-card h3{color:var(--green-dark)}
.service-card p{margin:0;color:var(--text-muted)}

/* --------------------------------------------------------------------------
   Qui suis-je
   -------------------------------------------------------------------------- */

.about-grid{display:flex;gap:2.5rem;align-items:flex-start;flex-wrap:wrap}
.about-photo{flex:0 0 180px}
.about-text{flex:1 1 320px}
.about-role{
  margin:-.5rem 0 1rem;font-weight:700;color:var(--green-dark);
  font-size:.95rem;
}
.profile-photo{width:180px;height:180px;border-radius:50%;object-fit:cover}

/* --------------------------------------------------------------------------
   Frise du processus
   -------------------------------------------------------------------------- */

.timeline{list-style:none;counter-reset:step;padding:0;margin:2rem 0 0;max-width:720px}
.timeline-item{
  position:relative;counter-increment:step;
  padding:0 0 2rem 3.25rem;border-left:2px solid var(--green-primary);
  margin-left:1rem;
}
.timeline-item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline-item::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:-1.05rem;top:0;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--green-dark);color:var(--white);
  font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.timeline-item h3{margin-top:.2rem}
.timeline-item p{margin:0;color:var(--text-muted)}

/* --------------------------------------------------------------------------
   Contact et formulaire
   -------------------------------------------------------------------------- */

/* Zone inversée (contact). Stylée par une CLASSE et non par l'identifiant :
   un sélecteur `#contact a` l'emporte sur `.form-feedback-error a` en spécificité,
   ce qui affichait les messages d'erreur en blanc sur fond rose pâle — illisibles.
   L'identifiant reste sur la section, mais uniquement comme cible d'ancre. */
.section-invert{
  position:relative;
  background:var(--slate-dark);
  color:var(--white);
}
.section-invert::before{
  content:'';position:absolute;inset:0;
  background-image:url('../images/chaine.webp');
  background-size:cover;background-position:center;
  opacity:.18;pointer-events:none;
}
.section-invert .section-content{position:relative}
.section-invert h2{color:var(--white)}
.section-invert .section-intro{color:rgba(255,255,255,.85)}
.section-invert a{color:var(--white)}

.contact-form{max-width:720px;margin:0}
.contact-form fieldset{border:0;padding:0;margin:0}
.contact-form legend{
  font-size:1.1rem;font-weight:700;padding:0;margin-bottom:.5rem;color:var(--white);
}
.form-required-note{font-size:.9rem;color:rgba(255,255,255,.8);margin:0 0 1.5rem}

.form-row{display:flex;gap:1.25rem;flex-wrap:wrap}
.form-row .form-field{flex:1 1 240px}
.form-field{margin-bottom:1.25rem}
.form-field label{display:block;margin-bottom:.35rem;font-weight:600}
.field-optional{font-weight:400;opacity:.8;font-size:.9rem}

.contact-form input,.contact-form textarea{
  width:100%;padding:.7rem .8rem;font:inherit;
  border:2px solid rgba(255,255,255,.45);border-radius:var(--radius);
  background:var(--white);color:var(--text-dark);
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--white)}
.contact-form input.invalid,.contact-form textarea.invalid{border-color:#FFB4B4}

.field-error{
  margin:.35rem 0 0;font-size:.9rem;font-weight:600;
  color:#FFC9C9;
}

.consent-checkbox{display:flex;align-items:flex-start;gap:.75rem;margin:1.5rem 0}
.consent-checkbox input[type="checkbox"]{width:auto;flex:0 0 auto;margin-top:.35rem}
.consent-checkbox label{font-weight:400;margin:0}

.form-actions{margin-top:1.5rem}
.btn-submit{padding:1rem 2.5rem;font-size:1.05rem}

/* Piège à robots : hors écran plutôt qu'en display:none, qui est le motif que
   les robots reconnaissent le plus facilement. */
.form-honeypot{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* Retours du formulaire */
.form-feedback{
  padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:2rem;
  border:1px solid;
}
.form-feedback h3{margin:0 0 .5rem;font-size:1.05rem}
.form-feedback ul{margin:0;padding-left:1.25rem}
.form-feedback-error{
  background:var(--error-bg);border-color:var(--error-border);color:var(--error);
}
.form-feedback-error h3,
.form-feedback-error a{color:var(--error)}
.form-feedback-error a{font-weight:700;text-decoration:underline}
.form-feedback-error a:hover{color:#5E1010}

.form-feedback-success{
  background:var(--success-bg);border-color:var(--success-border);color:#1B5E20;
}
.form-feedback-success h3,
.form-feedback-success a{color:#1B5E20}

/* Coordonnées directes, dans la section contact (fond sombre). */
.contact-direct{
  margin:0 0 2rem;font-size:1.05rem;line-height:2;
}
.contact-direct a{color:var(--white);font-weight:600}

/* --------------------------------------------------------------------------
   Médias produit
   -------------------------------------------------------------------------- */

.media-hero{
  margin:2rem 0 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(53,76,74,.2);
}
.media-hero img{width:100%;height:auto}

.gallery{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.25rem;margin-top:2rem;
}
.gallery figure{margin:0}
.gallery img{
  width:100%;height:220px;object-fit:cover;
  border-radius:var(--radius);border:1px solid rgba(53,76,74,.2);
  background:var(--white);
}
.gallery figcaption{
  margin-top:.5rem;font-size:.9rem;color:var(--text-muted);
}

.video-block{margin-top:2rem;max-width:820px}
.video-block video{
  width:100%;height:auto;border-radius:var(--radius);
  border:1px solid rgba(53,76,74,.2);background:#000;
}
.video-block figcaption{margin-top:.5rem;font-size:.9rem;color:var(--text-muted)}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer{background:var(--slate);color:var(--white);padding:2.5rem 1.5rem 1.5rem}
.footer-content{
  max-width:var(--max-width);margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:2rem;flex-wrap:wrap;
}
.footer-brand{flex:1 1 260px}
.footer-brand img{height:40px;width:auto;margin-bottom:.75rem}
/* Ancien réglage : --text-light sur --slate, soit 1,6:1, illisible. */
.footer-tagline{margin:0;font-size:.9rem;color:rgba(255,255,255,.85);max-width:32ch}

.footer-links{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.footer-links a,.footer-consent-btn{
  color:var(--white);text-decoration:underline;
  text-underline-offset:3px;font-size:.95rem;
}
.footer-consent-btn{
  background:none;border:0;padding:0;font:inherit;font-size:.95rem;
  cursor:pointer;text-align:left;
}
.footer-links a:hover,.footer-consent-btn:hover{text-decoration-thickness:2px}

.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--white);border-radius:50%;padding:.6rem;
  background:rgba(255,255,255,.12);transition:background .2s;
}
.footer-social a svg{fill:currentColor;display:block}
.footer-social a:hover{background:rgba(255,255,255,.25)}

.footer-legal-note{
  max-width:var(--max-width);margin:2rem auto 0;padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.2);
  font-size:.85rem;color:rgba(255,255,255,.8);
}

/* --------------------------------------------------------------------------
   Bandeau de consentement
   -------------------------------------------------------------------------- */

/* Bandeau bas de page, et non modale bloquante : la mesure d'audience ne
   justifie pas d'interdire la lecture du site avant un choix. */
.cookie-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:1400;
  background:var(--white);color:var(--text-dark);
  border-top:3px solid var(--green-primary);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.cookie-consent[hidden]{display:none}
.cookie-consent-inner{
  max-width:var(--max-width);margin:0 auto;padding:1.25rem 1.5rem;
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.cookie-consent h2{font-size:1rem;margin:0 0 .25rem;color:var(--green-dark)}
.cookie-consent p{margin:0;font-size:.92rem;color:var(--text-muted);max-width:70ch}
.cookie-consent-text{flex:1 1 380px}
/* Refus et acceptation strictement au même niveau : même taille, même style. */
.cookie-consent-actions{display:flex;gap:.75rem;flex:0 0 auto}

/* --------------------------------------------------------------------------
   Pages de contenu simple (légales, 404)
   -------------------------------------------------------------------------- */

.page-content{max-width:760px;margin:0 auto;padding:3rem 1.5rem}
.page-content h1{font-size:2rem;margin:0 0 .5rem;color:var(--green-dark)}
.page-content h2{font-size:1.35rem;margin:2.5rem 0 .75rem}
.page-content h3{font-size:1.1rem;margin:1.75rem 0 .5rem}
.page-content .page-updated{color:var(--text-muted);font-size:.9rem;margin:0 0 2rem}
.page-content ul,.page-content ol{padding-left:1.25rem}
.page-content li{margin-bottom:.4rem}
.page-content a{color:var(--green-dark)}
.page-content table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}
.page-content th,.page-content td{
  border:1px solid rgba(53,76,74,.25);padding:.6rem .75rem;text-align:left;vertical-align:top;
}
.page-content th{background:var(--grey-light);font-weight:700}

/* Champs que le propriétaire doit encore fournir : visibles, jamais inventés. */
.todo-content{
  background:#FFF4CE;border:1px dashed #B8860B;color:#6B4E00;
  padding:.1rem .4rem;border-radius:3px;font-size:.9em;font-weight:600;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  section{padding:3rem 1.25rem}
  .hero{padding:3.5rem 1.25rem 3rem}
  h2{font-size:1.65rem}

  /* L'en-tête empilait logo, quatre liens et sélecteur sur environ 300 px de
     haut, en sticky, soit la moitié d'un écran mobile. Menu repliable. */
  .nav-toggle{display:inline-flex}
  .header-inner{flex-wrap:wrap;gap:.75rem;padding:.6rem 1rem}
  .header-nav{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid rgba(255,255,255,.3);padding-top:.5rem;
  }
  .header-nav.is-open{display:flex}
  .header-nav a{padding:.7rem .5rem;border-radius:0}
  .lang-switch{order:2;margin-left:0}
  .header-logo{margin-right:auto}

  .about-grid{gap:1.5rem}
  .about-photo{flex:0 0 auto;margin:0 auto}
  .cookie-consent-inner{flex-direction:column;align-items:flex-start}
  .cookie-consent-actions{width:100%}
  .cookie-consent-actions .btn{flex:1 1 auto}
}

@media (max-width:520px){
  .form-row{flex-direction:column;gap:0}
  .hero-proof{flex-direction:column;gap:.75rem}
  .footer-content{flex-direction:column}
}