/* Parlote - www.parlote.fr. Charte SyNode-IT (www.synode-it.com), mise en page inspiree d'element.io.
   Aucune ressource externe : police Montserrat hebergee localement. */

@font-face {
  font-family: "Montserrat";
  src: url("montserrat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --primaire: #62b6cb;        /* bleu-vert SyNode-IT */
  --primaire-fonce: #437d8b;
  --encre: #212529;
  --texte: #495057;
  --discret: #6c757d;
  --fond-clair: #f4f8f9;
  --bord: #e3eaec;
  --blanc: #ffffff;
  --accent: #fec503;
  --rayon: 14px;
  --titre: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --corps: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Droid Serif", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: var(--corps); color: var(--texte); line-height: 1.6; background: var(--blanc); }
img { max-width: 100%; height: auto; }
a { color: var(--primaire-fonce); }
.conteneur { width: min(1140px, 100% - 32px); margin-inline: auto; }

/* Barre de navigation */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: rgba(33, 37, 41, .96); backdrop-filter: blur(6px);
}
.nav .conteneur { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blanc);
  font-family: var(--titre); font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; }
.logo svg { width: 34px; height: 34px; flex: none; }
.menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu a { color: #e9ecef; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; }
.menu a:hover { color: var(--primaire); }
.bascule, .bascule-label { display: none; }

/* Boutons */
.btn { display: inline-block; font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: .85rem; text-decoration: none; padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn-primaire { background: var(--primaire); color: var(--blanc); border-color: var(--primaire); }
.btn-primaire:hover { background: var(--primaire-fonce); border-color: var(--primaire-fonce); }
.btn-contour { color: var(--blanc); border-color: rgba(255, 255, 255, .8); }
.btn-contour:hover { background: var(--blanc); color: var(--encre); }
.btn-sombre { background: var(--encre); color: var(--blanc); }
.btn-sombre:hover { background: #000; }
.btn-petit { padding: 10px 18px; font-size: .78rem; }
.menu .btn { color: var(--blanc); }

/* En-tete */
.entete {
  min-height: 92vh; display: flex; align-items: center; text-align: center; color: var(--blanc);
  background: linear-gradient(rgba(33, 37, 41, .78), rgba(67, 125, 139, .78)), url("fond-entete.jpg") center / cover no-repeat;
  padding: 120px 0 80px;
}
.accroche { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: 0 0 18px; opacity: .95; }
.entete h1 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; margin: 0 0 22px; }
.entete h1 span { color: var(--primaire); }
.entete p.sous-titre { max-width: 720px; margin: 0 auto 36px; font-size: 1.15rem; color: #e9f3f6; }
.actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Sections */
.section { padding: 96px 0; }
.section.claire { background: var(--fond-clair); }
.tete-section { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.tete-section h2 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; color: var(--encre);
  font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 12px; letter-spacing: .01em; }
.tete-section h2 .point { color: var(--primaire); }
.tete-section p { font-family: var(--serif); font-style: italic; color: var(--discret); font-size: 1.15rem; margin: 0; }

.grille { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 30px 28px; }
.section.claire .carte { border-color: transparent; box-shadow: 0 6px 24px rgba(33, 37, 41, .06); }
.carte h3 { font-family: var(--titre); color: var(--encre); font-size: 1.12rem; margin: 18px 0 8px; }
.carte p { margin: 0; }
.icone { width: 60px; height: 60px; border-radius: 50%; background: var(--primaire); display: grid; place-items: center; }
.icone svg { width: 28px; height: 28px; stroke: var(--blanc); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Etapes */
.etapes { counter-reset: etape; margin-top: 22px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.etape { position: relative; padding: 34px 28px 28px; border-radius: var(--rayon); background: var(--blanc); box-shadow: 0 6px 24px rgba(33, 37, 41, .06); }
.etape::before { counter-increment: etape; content: counter(etape); position: absolute; top: -22px; left: 28px;
  width: 44px; height: 44px; border-radius: 50%; background: var(--primaire-fonce); color: var(--blanc);
  font-family: var(--titre); font-weight: 700; display: grid; place-items: center; font-size: 1.1rem; }
.etape h3 { font-family: var(--titre); color: var(--encre); margin: 6px 0 8px; font-size: 1.12rem; }
.etape p { margin: 0 0 14px; }
.astuce { margin: 40px auto 0; max-width: 860px; border-left: 4px solid var(--accent); background: #fffbea;
  padding: 16px 20px; border-radius: 0 var(--rayon) var(--rayon) 0; color: var(--encre); }

/* Applications */
.appli { display: flex; flex-direction: column; }
.appli .plateformes { font-size: .9rem; color: var(--discret); margin: 2px 0 14px; }
.appli p { flex: 1; }
.appli .btn { margin-top: 18px; align-self: flex-start; }
.note-serveur { text-align: center; margin: 36px auto 0; color: var(--encre); }
.note-serveur code { background: var(--blanc); border: 1px solid var(--bord); padding: 2px 8px; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primaire-fonce); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--bord); padding: 6px 0; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--titre); font-weight: 700; color: var(--encre);
  padding: 16px 36px 16px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 1.5rem; color: var(--primaire); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; }

/* Contact */
.contact { background: linear-gradient(135deg, var(--encre), var(--primaire-fonce)); color: var(--blanc); text-align: center; }
.contact .tete-section h2 { color: var(--blanc); }
.contact .tete-section p { color: #d6e9ee; }

/* Pied de page */
.pied { background: var(--fond-clair); padding: 40px 0; font-size: .92rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.pied .logo { color: var(--encre); font-size: 1.2rem; }
.service { display: inline-flex; align-items: center; gap: 12px; color: var(--discret); text-decoration: none; }
.service img { height: 46px; width: auto; }
.pied small { color: var(--discret); }

/* Mobile */
@media (max-width: 860px) {
  .bascule-label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
  .bascule-label span, .bascule-label span::before, .bascule-label span::after {
    display: block; width: 24px; height: 2px; background: var(--blanc); position: relative; content: ""; }
  .bascule-label span::before { position: absolute; top: -7px; }
  .bascule-label span::after { position: absolute; top: 7px; }
  .menu { display: none; position: absolute; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(33, 37, 41, .98); padding: 8px 16px 20px; }
  .menu li a { display: block; padding: 14px 4px; }
  .menu .btn { text-align: center; margin-top: 8px; }
  .bascule:checked ~ .menu { display: flex; }
  .section { padding: 72px 0; }
  .entete { min-height: auto; }
}