/* Page de secours PAC Communication - Pixbulle, octobre 2026
   Couleurs, polices et textes repris de l'ancien site (capture archive.org du 13/06/2026). */
@font-face{font-family:"Oswald";src:url("/fonts/oswald.woff2") format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Quicksand";src:url("/fonts/quicksand.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bleu:#43b8de;        /* bleu de l'ancien site : fonds et décors */
  --bleu-texte:#1a7699;  /* même teinte assombrie pour le texte (4,9:1 sur blanc) */
  --marine:#201d3c;      /* fond du logo */
  --nuit:#14151a;        /* pied de page de l'ancien site */
  --texte:#504f4f;
  --doux:#f3f8fb;
  --radius:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Quicksand",Arial,sans-serif;color:var(--texte);background:#fff;line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-texte)}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:"Oswald",Arial,sans-serif;font-weight:400;line-height:1.15;margin:0}
h2{font-size:44px;color:var(--bleu-texte);text-transform:uppercase}
.sous-titre{font-family:Arial,sans-serif;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:var(--texte);margin:10px 0 0}
section{padding:72px 0}
[id]{scroll-margin-top:96px}
.centre{text-align:center}

/* En-tête */
.entete{background:#fff;border-bottom:1px solid #e8ecef;position:sticky;top:0;z-index:10}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.entete .logo img{width:64px;height:64px}
.entete nav{display:flex;flex-wrap:wrap;gap:4px 26px}
.entete nav a{font-family:"Oswald",Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--marine);text-decoration:none;font-size:16px}
.entete nav a:hover{color:var(--bleu-texte)}

/* Bandeau équipe */
.equipe{background:#2b2b2b;color:#fff;padding:0}
.equipe .photo{position:relative}
.equipe .photo img{width:100%;max-height:640px;object-fit:cover;object-position:center 30%}
.equipe ul{list-style:none;margin:0;padding:22px 16px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1140px;margin:0 auto;text-align:center}
.equipe li strong{display:block;font-family:"Quicksand",Arial,sans-serif;font-weight:500;font-size:26px;color:var(--bleu)}
.equipe li span{font-size:16px;color:#e6e6e6}

.avis{background:var(--doux);border-left:5px solid var(--bleu);padding:16px 20px;margin:40px auto 0;max-width:820px;font-size:16px}
.avis strong{color:var(--marine)}

/* Agence conseil */
.agence .wrap{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.agence h1{font-size:52px;color:var(--bleu-texte);text-transform:uppercase}
.agence .depuis{font-family:Arial,sans-serif;font-size:17px;letter-spacing:.08em;margin:14px 0 22px}
.agence blockquote{margin:0;font-style:italic;font-size:16px}
.agence blockquote p{margin:0 0 14px}
.agence .tel{display:inline-block;font-family:"Oswald",Arial,sans-serif;font-size:44px;color:var(--bleu-texte);text-decoration:none;margin-top:12px}

.accompagne{padding:0 0 60px}
.accompagne p{font-size:22px;margin:0 0 10px}
.accompagne ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.accompagne li{background:var(--doux);color:var(--bleu-texte);font-size:19px;padding:8px 16px;border-radius:999px}

/* Chiffres */
.chiffres{background:var(--marine);color:#fff;padding:56px 0}
.chiffres .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.chiffres strong{display:block;font-family:"Oswald",Arial,sans-serif;font-weight:500;font-size:54px;color:var(--bleu);line-height:1.1}
.chiffres span{font-family:"Oswald",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:18px}

/* Compétences */
.competences .wrap{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:start}
.medias h2{font-size:30px;margin-bottom:18px}
.medias a{display:block;border:1px solid #e8ecef;margin-bottom:14px;transition:border-color .2s}
.medias a:hover{border-color:var(--bleu)}
.competences .grille{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px}
.competences .num{font-family:"Oswald",Arial,sans-serif;font-weight:500;font-size:64px;color:var(--bleu);line-height:1}
.competences h3{font-family:Arial,sans-serif;font-size:24px;text-transform:uppercase;color:#4b4b4b;margin:14px 0 12px}
.competences p{margin:0;font-size:16px}


/* Contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.contact h2{margin-bottom:22px}
.contact .societe{font-family:Arial,sans-serif;font-size:19px;letter-spacing:.06em;color:#4b4b4b;margin:0 0 10px}
.contact address{font-style:normal;margin-bottom:18px}
.contact .ligne{font-family:Arial,sans-serif;font-size:19px;letter-spacing:.04em;margin:0 0 10px}
.contact .ligne a{text-decoration:none}
.bouton{display:inline-block;background:var(--marine);color:#fff;text-decoration:none;font-family:Arial,sans-serif;font-weight:bold;letter-spacing:.12em;text-transform:uppercase;font-size:14px;padding:14px 22px;border-radius:var(--radius);margin:6px 8px 0 0}
.bouton.bleu{background:var(--bleu);color:var(--marine)}
.bouton:hover{opacity:.9}
.reseaux{margin-top:22px}
.reseaux a{margin-right:16px}

/* Pied de page */
footer{background:var(--nuit);color:#b9b9bf;font-size:15px;text-align:center;padding:36px 0}
footer p{margin:0 0 8px}
footer a{color:#fff}

/* Mentions légales */
.texte{max-width:820px}
.texte h1{font-size:44px;color:var(--bleu-texte);text-transform:uppercase;margin-bottom:24px}
.texte h2{font-size:26px;margin:34px 0 10px}

@media (max-width:860px){
  body{font-size:16px}
  section{padding:52px 0}
  h2,.texte h1{font-size:34px}
  .agence h1{font-size:40px}
  .agence .wrap,.competences .wrap,.contact .wrap{grid-template-columns:1fr;gap:32px}
  .chiffres .wrap{grid-template-columns:1fr 1fr;gap:30px 16px}
  .equipe ul{grid-template-columns:1fr;gap:12px}
  .entete .wrap{flex-direction:column;gap:6px}
  .entete nav{justify-content:center;gap:2px 16px}
  .entete nav a{font-size:15px}
  .entete{position:static}
}
@media (max-width:520px){
  .competences .grille{grid-template-columns:1fr;gap:30px}
  .chiffres strong{font-size:42px}
  .agence .tel{font-size:36px}
}