/* ==========================================================================
   cybergrc.fr — feuille de style unique
   Identité reprise du deck commercial : fond sombre / sections claires,
   accent rouge foncé, surtitres espacés avec filet rouge vertical.
   Aucune dépendance externe (pas de police distante, pas de framework).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables : couleurs, typographie, espacements
   -------------------------------------------------------------------------- */
:root {
  --noir:        #141414;   /* fond des sections sombres            */
  --noir-doux:   #1d1d1d;   /* cartes et surfaces sur fond sombre   */
  --blanc:       #fafaf8;   /* fond des sections claires            */
  --gris-fond:   #f1f0ed;   /* fond alternatif clair                */
  --rouge:       #8b1a1a;   /* accent principal (filets, pastilles) */
  --rouge-vif:   #a82424;   /* survol des boutons                   */
  --encre:       #232323;   /* texte sur fond clair                 */
  --encre-doux:  #555550;   /* texte secondaire sur fond clair      */
  --craie:       #e9e9e4;   /* texte sur fond sombre                */
  --craie-douce: #b9b9b2;   /* texte secondaire sur fond sombre     */

  /* Pile système : proche de l'Arial du deck, zéro requête réseau. */
  --police: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.0625rem;          /* 17 px : confortable pour un lectorat dirigeant */
  line-height: 1.65;
  color: var(--encre);
  background: var(--blanc);
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; }

/* Aucune chaîne longue (email, URL) ne doit déborder d'un petit écran :
   le texte se replie automatiquement dans sa boîte. */
p, h1, h2, h3, a, li { overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }

a { color: inherit; }

.conteneur {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Accessibilité : focus clavier toujours visible. */
a:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

/* Accessibilité : pas de défilement animé si l'utilisateur le refuse. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   3. Éléments récurrents : surtitre, pastille, boutons
   -------------------------------------------------------------------------- */

/* Surtitre espacé avec filet rouge vertical — repris des slides. */
.surtitre {
  display: inline-block;
  border-left: 4px solid var(--rouge);
  padding-left: 12px;
  margin: 0 0 1em;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.surtitre--clair { color: var(--craie-douce); }

/* Pastille numérotée rouge — reprise des slides « processus ». */
.pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  font-weight: 700;
}

.bouton {
  display: inline-block;
  padding: 0.85em 1.6em;
  background: var(--rouge);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease;
}
.bouton:hover { background: var(--rouge-vif); }
.bouton--petit { padding: 0.5em 1em; font-size: 0.9rem; }

.lien-pdf,
.lien-externe {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   4. En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--noir);
  color: var(--craie);
  border-bottom: 1px solid #2a2a2a;
}

.entete__contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.entete__marque {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.entete__role { font-weight: 400; color: var(--craie-douce); }

.entete__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.entete__nav a { text-decoration: none; }
.entete__nav a:not(.bouton):hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. Héro
   -------------------------------------------------------------------------- */
.heros {
  /* Image de fond sous un voile sombre : le dégradé garantit la lisibilité
     du texte, y compris sur les zones lumineuses de l'image. */
  background:
    linear-gradient(rgba(16, 16, 16, 0.72), rgba(16, 16, 16, 0.88)),
    var(--noir) url("../img/fond_site.png") center / cover no-repeat;
  background-blend-mode: normal;
  color: var(--craie);
  padding: 96px 0 104px;
}

.heros__titre {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  color: #fff;
  max-width: 18ch;
}

.heros__texte {
  max-width: 58ch;
  font-size: 1.15rem;
  color: var(--craie-douce);
}

.heros__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 2em;
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.section { padding: 88px 0; }

.section--grise  { background: var(--gris-fond); }

.section--sombre {
  background: var(--noir);
  color: var(--craie);
}

/* La section méthode reçoit l'image de fond ; le CTA final reste en noir uni. */
#methode {
  background:
    linear-gradient(rgba(16, 16, 16, 0.82), rgba(16, 16, 16, 0.92)),
    var(--noir) url("../img/fond_site.png") center 70% / cover no-repeat;
}
.section--sombre h2 { color: #fff; }
.section--sombre p  { color: var(--craie-douce); }

.section__intro { max-width: 62ch; }

/* --------------------------------------------------------------------------
   7. Bloc « trois questions »
   -------------------------------------------------------------------------- */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 2.5em;
}

.question .pastille { margin-bottom: 1em; }
.question p { color: var(--encre-doux); }

/* --------------------------------------------------------------------------
   8. Cartes d'offres
   -------------------------------------------------------------------------- */
.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 2.5em;
}

.offre {
  background: #fff;
  border-top: 4px solid var(--rouge);   /* le liseré rouge des slides */
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.offre__nom { margin-bottom: 0.2em; }

.offre__soustitre {
  color: var(--encre-doux);
  font-style: italic;
  margin-bottom: 1em;
}

.offre p:not(.offre__prix) { color: var(--encre-doux); flex-grow: 1; }

.offre__prix {
  margin: 1.2em 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--rouge);
}

/* --------------------------------------------------------------------------
   9. Étapes de la méthode
   -------------------------------------------------------------------------- */
.etapes {
  list-style: none;
  margin: 2.5em 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.etape {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: rgba(29, 29, 29, 0.82);   /* --noir-doux translucide sur l'image */
  padding: 24px 28px;
}

.etape h3 { color: #fff; margin-bottom: 0.3em; }
.etape__duree { font-weight: 400; color: var(--craie-douce); }
.etape p { margin: 0; }

/* --------------------------------------------------------------------------
   10. Interlocuteur
   -------------------------------------------------------------------------- */
.interlocuteur {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Pastille « JP » en attendant la vraie photo (img.portrait). */
.portrait {
  width: 168px;
  height: 168px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--noir);
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--rouge);
  object-fit: cover;              /* utile quand ce sera une <img> */
}

.certifs {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.certifs li {
  background: var(--gris-fond);
  border: 1px solid #ddd;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. Appel à l'action final et pied de page
   -------------------------------------------------------------------------- */
.cta-final { text-align: left; }

.pied {
  background: var(--noir);
  color: var(--craie-douce);
  border-top: 1px solid #2a2a2a;
  font-size: 0.9rem;
}

.pied__contenu {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 22px;
}

.pied nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   12. Écrans étroits
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .heros { padding: 64px 0 72px; }
  .section { padding: 64px 0; }
  .entete__role { display: none; }   /* on garde juste le nom dans l'en-tête */
}