/* ==========================================================
   Datagital — thème Bludit (repris du design 1 v2)
   Feuille de style « mobile first » :
   les règles de base visent le téléphone, puis les
   @media (min-width: …) ajoutent la mise en page tablette/ordinateur.
   Couleurs et réglages communs : dans :root.
   ========================================================== */

/* ---------- Polices (hébergées sur le site) ---------- */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- Couleurs et réglages ---------- */
:root {
  --marine: #003366;      /* couleur principale : titres, bandeau, boutons */
  --marine-fonce: #00264d;
  --ciel: #6fa8d6;        /* accent : logo, décorations (pas pour du texte) */
  --texte: #1f2933;       /* texte courant */
  --gris: #5b6672;        /* texte secondaire */
  --fond: #ffffff;
  --fond-doux: #f3f6f9;
  --bordure: #dde3ea;
  --largeur: 1080px;      /* largeur maximale du contenu */
  --marge: 1.25rem;       /* marge latérale (augmente sur grand écran) */
  --rayon: 6px;
  --h-bandeau-logo: 5.4rem;   /* hauteur du bandeau logo + menu (téléphone) ; 4rem sur ordinateur */
  --espace-avant-bandeau: 1.5rem;   /* espace blanc entre l'en-tête et le bandeau bleu */
  --h-sous-nav: 2.0rem;   /* hauteur de la barre des prestations (et de l'espace blanc équivalent) */
}

/* ==========================================================
   1. BASE — TÉLÉPHONE
   ========================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-gutter: stable; /* réserve toujours la place de la barre de défilement : aucune page ne se décale */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; } /* les ancres (#…) ne passent pas sous l'en-tête fixe */
body {
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texte);
  background: var(--fond);
}
h1, h2, h3 { color: var(--marine); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--marine); }
p + p { margin-top: 1em; }
img { max-width: 100%; height: auto; }

/* Conteneur centré commun */
.header-inner, .footer-inner, .contenu > * {
  max-width: var(--largeur);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* ---------- Logo ---------- */
.logo {
  font-weight: 600;
  font-size: 2.45rem;        /* +40 % */
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;

}
.data { color: var(--marine); }
.gital { color: var(--ciel); margin-left: -0.08em; mix-blend-mode: multiply; }
.i-ast { position: relative; display: inline-block; }
.i-ast::after {
  content: "*";
  position: absolute;
  left: calc(50% + var(--ast-dx, 0.05em));
  top: var(--ast-top, 0.0em);
  transform: translateX(-50%);
  font-size: var(--ast-size, 0.6em);
  letter-spacing: 0;
  line-height: 1;
  color: var(--marine);
  font-weight: var(--ast-weight, 800);
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;            /* logo et menu restent visibles en haut de l'écran */
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
  box-shadow: 0 2px 8px rgba(0, 32, 64, 0.06);
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding-top: 0.6rem;
  padding-bottom: 1rem;     /* marge basse du bandeau logo (+30 %) */
  min-height: var(--h-bandeau-logo);
}
.menu { list-style: none; display: flex; gap: 0.3rem; padding-top: 1rem; }
/* Alignement à gauche sur le logo : pas de marge intérieure à gauche du premier lien */
.menu > li:first-child > a,
.sous-nav li:first-child a { padding-left: 0; }
.menu a { text-decoration: none; font-weight: 600; color: var(--texte); padding: 0.1em 0; }
.menu > li > a {                 /* liens du menu principal, en pastille comme la barre des prestations */
  font-size: 0.8rem;
  display: inline-block;
  padding: 0.25em 0.85em;
  border-radius: 999px;
}
.menu > li > a:hover { background: var(--fond-doux); color: var(--marine); }
.menu > li > a[aria-current="page"],
.menu > li > a[aria-current="true"] { background: none; color: var(--marine); box-shadow: none; text-decoration: underline 2px var(--ciel); text-underline-offset: 0.35em; }   /* lien actif : soulignement simple */
.menu a:hover, .menu a[aria-current="page"] { color: var(--marine); }
.menu a[aria-current="page"], .menu a[aria-current="true"] { color: var(--marine); box-shadow: inset 0 -2px 0 var(--ciel); }

/* ---------- Sous-menu Prestations ----------
   Téléphone : masqué (la page Prestations donne accès aux 4 pages de détail).
   Tablette et ordinateur : menu déroulant au survol ou au clavier (voir plus bas). */
.a-sous-menu { position: relative; }
.sous-menu { display: none; list-style: none; }

/* ---------- Logo + phrase d'accroche ---------- */
.marque { display: flex; align-items: center; gap: 0.6rem; }
.baseline {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gris);
  line-height: 1.25;
  padding-left: 0.6rem;
  border-left: 1px solid var(--bordure);
  white-space: nowrap;         /* toujours sur une seule ligne */
  
}

/* ---------- Barre des prestations (pages Prestations, Audit, SEA, SEO, Data) ---------- */
.sous-nav { background: var(--fond-doux); border-top: 1px solid var(--bordure); }   /* placée dans l'en-tête fixe : reste toujours visible */
html:has(.sous-nav) { scroll-padding-top: 10rem; }   /* ancres : tenir compte de la barre en plus */
.sous-nav ul {
  list-style: none;
  display: flex;
  gap: 0.15rem;
  max-width: var(--largeur);
  margin: 0 auto;
  height: var(--h-sous-nav);
  align-items: center;
  padding: 0 var(--marge);
  overflow-x: auto;              /* défile horizontalement si l'écran est trop étroit */
  scrollbar-width: none;
}
.sous-nav ul::-webkit-scrollbar { display: none; }
.sous-nav a {
  display: block;
  white-space: nowrap;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}
.sous-nav a:hover { background: #e3eaf1; color: var(--marine); }
.sous-nav a[aria-current="page"] { background: none; color: var(--marine); box-shadow: none; text-decoration: underline 2px var(--ciel); text-underline-offset: 0.35em; }   /* lien actif : soulignement simple */

/* Espace blanc sous l'en-tête, avant le bandeau bleu (réglage : --espace-avant-bandeau dans :root) */
.site-header + .contenu { padding-top: var(--espace-avant-bandeau); }

/* ---------- Bandeau marine (accroche de l'accueil et titre des pages) ---------- */
.hero, .intro {
  max-width: none;
  background: var(--marine);   /* couleur de secours */
  background: radial-gradient(ellipse at 85% 0%, #1a5c99 0%, rgba(26, 92, 153, 0) 60%), var(--marine);   /* halo lumineux en haut à droite */
  color: #e6eef6;
  padding-top: 1.1rem;
  padding-bottom: 1.3rem;
  /* le contenu reste aligné sur la colonne centrale */
  padding-left: max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge)));
  padding-right: max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge)));
}
.hero h1, .intro h1 { color: #fff; }
.hero h1 { font-size: 1.5rem; max-width: 16em; margin: 0.25em 0 0.35em; }
.intro h1 { font-size: 1.6rem; margin-bottom: 0.25em; }
.surtitre { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; color: var(--ciel); }
.chapo { font-size: 1.05rem; max-width: 40em; }
.hero .chapo, .intro .chapo { color: #cfe0ef; }
.hero .bouton, .intro .bouton { background: #fff; color: var(--marine); margin-top: 0.8rem; }
.hero .bouton:hover, .intro .bouton:hover { background: #e6eef6; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  background: var(--marine);
  color: #fff;
  font: 700 1rem "Manrope", Arial, sans-serif;
  padding: 0.75em 1.5em;
  border: 0;
  border-radius: var(--rayon);
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { background: var(--marine-fonce); }

/* ---------- Contenu ---------- */
.contenu { padding-bottom: 3rem; }
.texte, .prestations, .formulaire { margin-top: 2.25rem; }
.texte h2 { font-size: 1.35rem; margin-bottom: 0.7em; }
.texte > * { max-width: 46rem; }
.legal h2 { font-size: 1.1rem; margin: 1.8em 0 0.5em; }
.legal h2:first-child { margin-top: 0; }

/* ---------- Prestations : une carte par ligne ---------- */
.prestations { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.presta {
  border: 1px solid var(--bordure);
  border-top: 4px solid var(--marine);
  border-radius: var(--rayon);
  padding: 1.4rem;
}
.presta-num { font-weight: 800; color: var(--ciel); font-size: 0.85rem; letter-spacing: 0.1em; }
.presta h2 { font-size: 1.2rem; margin: 0.25em 0 0.6em; }

/* ---------- Formulaire : une colonne ---------- */
.formulaire { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ label { font-weight: 700; font-size: 0.95rem; color: var(--marine); }
.champ input, .champ textarea {
  font: inherit;
  font-size: 1rem;           /* 16 px minimum : évite le zoom automatique sur iPhone */
  padding: 0.7em 0.85em;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: #fff;
  width: 100%;
}
.champ input:focus, .champ textarea:focus { outline: 2px solid var(--ciel); outline-offset: 1px; border-color: var(--ciel); }
.formulaire .bouton { width: 100%; }
.rgpd { font-size: 0.85rem; color: var(--gris); }
.piege { position: absolute; left: -9999px; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--bordure); background: var(--fond-doux); font-size: 0.875rem; color: var(--gris); }
.footer-inner { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.footer-liens { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer-liens a { color: inherit; }

/* Très petits téléphones (moins de 360 px) : logo et accroche un peu réduits pour tenir sur une ligne */
@media (max-width: 359px) {
  .logo { font-size: 2.1rem; }
  .baseline { font-size: 0.66rem; }
}

/* ==========================================================
   2. TABLETTE (à partir de 720 px)
   ========================================================== */
@media (min-width: 720px) {
  :root { --marge: 1.5rem; --h-bandeau-logo: 5.2rem; }   /* hauteur du bandeau logo + menu sur ordinateur (était 4rem) */
  html { scroll-padding-top: 7.2rem; }
  body { font-size: 1.0625rem; }

  .header-inner { flex-direction: row; align-items: center; justify-content: space-between; height: var(--h-bandeau-logo); padding-top: 0; padding-bottom: 0.15rem; }   /* marge basse +30 % */
  .logo { font-size: 2.94rem; }   /* +40 % */
  .menu { gap: 0.5rem; margin-right: -0.68rem; }
  .menu > li:first-child > a { padding-left: 0.85em; }   /* ordinateur : menu à droite, marge complète */
  .sous-nav { margin-top: 0; }   /* ordinateur : barre collée au bandeau logo (écart g → barre = écart haut de page → l) */
  .sous-nav ul { gap: 0.4rem; }
  .sous-nav a { font-size: 0.85rem; padding: 0.25em 0.85em; }
  .marque { gap: 1rem; }
  .baseline { font-size: 0.95rem; padding-left: 1rem; }
  .logo { position: relative; top: -0.1em; }   /* ordinateur : même écart entre le haut du « l » et le haut de page qu'entre le bas du « g » et la ligne grise */
  /* Sous-menu déroulant */
  .a-sous-menu > a::after { content: " ▾"; font-size: 0.75em; opacity: 0.6; }
  .sous-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 8px 24px rgba(0, 32, 64, 0.12);
  }
  /* zone invisible qui comble l'espace entre le lien et le sous-menu (évite qu'il se ferme) */
  .sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.75rem; height: 0.75rem; }
  .a-sous-menu:hover .sous-menu,
  .a-sous-menu:focus-within .sous-menu { display: block; }
  .sous-menu a { display: block; padding: 0.4rem 1rem; font-size: 0.8rem; box-shadow: none !important; }   /* taille du menu déroulant */
  .sous-menu a:hover, .sous-menu a[aria-current="page"] { background: var(--fond-doux); color: var(--marine); }

  .hero { padding-top: 1.15rem; padding-bottom: 1.4rem; }
  .hero h1 { font-size: 2.3rem; }
  .intro { padding-top: 1.8rem; padding-bottom: 2rem; }
  .intro h1 { font-size: 2.1rem; }
  .chapo { font-size: 1.15rem; }
  .hero .bouton { margin-top: 0.9rem; }

  .contenu { padding-bottom: 4.5rem; }
  .texte, .prestations, .formulaire { margin-top: 3rem; }
  .texte h2 { font-size: 1.6rem; }

  .prestations { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .presta { padding: 2rem; }
  .presta h2 { font-size: 1.35rem; }

  .formulaire { grid-template-columns: repeat(2, minmax(0, 22rem)); gap: 1.25rem 1.5rem; }
  .champ-large { grid-column: 1 / -1; }
  .formulaire .bouton { width: auto; justify-self: start; }

  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ==========================================================
   3. ORDINATEUR (à partir de 1024 px)
   ========================================================== */
@media (min-width: 1024px) {
  .hero h1 { font-size: 2.4rem; }
}

/* ==========================================================
   4. ÉLÉMENTS DES PAGES PRESTATIONS
   ========================================================== */
.presta h2 a { color: inherit; text-decoration: none; }
.presta h2 a:hover { text-decoration: underline; }
.lien-suite { display: inline-block; margin-top: 1rem; font-weight: 700; text-decoration: none; }
.lien-suite:hover { text-decoration: underline; }
.detail h2 { margin-top: 1.8em; }
.detail h2:first-child { margin-top: 0; }
.liste { padding-left: 1.2em; }
.liste li + li { margin-top: 0.35em; }
.liste li::marker { color: var(--ciel); }
.encart-contact { margin-top: 2.5rem; padding: 1.5rem; background: var(--fond-doux); border-left: 4px solid var(--marine); border-radius: var(--rayon); }
.encart-contact .bouton { margin-top: 1rem; }
.autres-prestations h2 { font-size: 1.1rem; }
.autres-prestations ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
.autres-prestations a { display: inline-block; padding: 0.4em 0.9em; border: 1px solid var(--bordure); border-radius: 999px; text-decoration: none; font-weight: 600; }
.autres-prestations a:hover { border-color: var(--marine); }

/* ==========================================================
   5. MISE EN FORME DES TEXTES (titres, listes, liens internes)
   ========================================================== */
.texte h2 { margin-top: 1.8em; }
.texte h2:first-child { margin-top: 0; }
.texte h3 { font-size: 1.1rem; margin: 1.3em 0 0.3em; }
.texte h3 a { text-decoration: none; }
.texte h3 a:hover { text-decoration: underline; }
.liste { margin-top: 0.4em; }
.liste + p, p + .liste { margin-top: 1em; }
.texte p a { text-decoration-color: var(--ciel); text-underline-offset: 0.2em; }

/* ==========================================================
   6. COMPLÉMENTS POUR BLUDIT
   (textes saisis dans l'éditeur, encart, messages du formulaire)
   ========================================================== */
/* Listes saisies dans l'éditeur : même style que .liste */
.texte ul:not([class]), .texte ol:not([class]) { padding-left: 1.2em; margin-top: 0.4em; }
.texte ul:not([class]) li + li, .texte ol:not([class]) li + li { margin-top: 0.35em; }
.texte ul:not([class]) li::marker, .texte ol:not([class]) li::marker { color: var(--ciel); }
.texte ul + p, .texte ol + p, .texte p + ul, .texte p + ol { margin-top: 1em; }
.texte li a { text-decoration-color: var(--ciel); text-underline-offset: 0.2em; }
.texte img { border-radius: var(--rayon); margin: 1em 0; }
.texte h2 + h3 { margin-top: 0.6em; }

/* Encart « Parlons de votre projet » ajouté automatiquement */
.encart-seul .encart-contact { margin-top: 0; }
.prestations + .encart-seul, .texte + .encart-seul { margin-top: 2.5rem; }

/* Messages du formulaire de contact */
.message { padding: 1rem 1.25rem; border-radius: var(--rayon); border-left: 4px solid; }
.message-ok { background: #eaf5ee; border-color: #2e7d4f; color: #1d4d31; }
.message-erreur { background: #fdeeee; border-color: #b3261e; color: #6b1712; }
/* Liens « autres prestations » : pastilles, sans retrait de liste */
.texte.autres-prestations ul { padding-left: 0; margin-top: 0.6rem; }
.texte.autres-prestations li + li { margin-top: 0; }