:root {
    --violet: #7030a0;
    --orange: #F2B705;
}

body { font-family: 'Arial', sans-serif; line-height: 1.6; }
h1, h2, h3, .archivo { font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase; }

/* Animations */
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Formes Géométriques */
.diagonal-hero {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.circle-mask {
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* Accordéons Programme */
.prog-item { border-bottom: 1px solid #eee; }
.prog-header { cursor: pointer; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
.prog-header:hover { background: #fdf7e6; }
.prog-content { display: none; padding: 0 20px 20px 20px; animation: slideDown 0.4s ease; }
.prog-content.active { display: block; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Boutons */
.btn-orange { background: var(--orange); color: white; padding: 12px 30px; border-radius: 50px; font-weight: bold; transition: 0.3s; display: inline-block; }
.btn-orange:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(242, 183, 5, 0.3); }




    :root{
      --violet:#7030a0;
      --jaune:#F2B705;
      --ink:#111;
    }

    /* Fond blanc total */
    html, body { height:100%; }
    body{
      margin:0;
      background:#fff;
      color:var(--ink);
      font-family: Arial, sans-serif;
    }

    header{
      padding: 12px 14px 10px;
      background:#fff;
    }
    header h1{
      margin:0 0 8px;
      font-family:"Archivo", Arial, sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing:.2px;
    }
    .toolbar{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    input[type="search"]{
      width:min(520px, 100%);
      padding:7px 9px;
      border:1px solid rgba(0,0,0,.12);
      border-radius: 10px;
      font-size:12px;
      outline:none;
      background:#fff;
    }
    .count{
      font-size:11px;
      color:#555;
    }

    main{ padding: 0px; }

    /* 5 par ligne */
    .grid{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 15px 30px;
      align-items:start;
    }
    @media (max-width: 1200px){ .grid{ grid-template-columns: repeat(4, 1fr);} }
    @media (max-width: 950px){  .grid{ grid-template-columns: repeat(3, 1fr);} }
    @media (max-width: 650px){  .grid{ grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 420px){  .grid{ grid-template-columns: 1fr;} }

    /* === CARTE : aucune “carte” visible (pas d’ombre, pas de bord, pas de fond) === */
    .card{
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      position: relative;
    }

    /* Photo ronde */
    .avatarWrap{
      width: 200px;
      height: 200px;
      margin: 0 auto;
      border-radius: 999px;
      border: 5px solid var(--violet);
      overflow:hidden;
      background:#f0f0f0;
      position: relative;
      z-index: 2;
    }
    .avatarWrap img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    /* Ruban quartier : très petit, sans radius */
    .ribbon{
      width: 76%;
      margin: 0 auto;
      background: var(--jaune);
      color: var(--violet);
      font-family:"Archivo", Arial, sans-serif;
      font-weight: 800;
      font-size: 11px;     /* plus petit */
      line-height: 1.0;
      text-align:center;
      padding: 4px 6px;    /* plus compact */
      border-radius: 0;
      position: relative;
      z-index: 3;
      transform: translateY(-14px) rotate(-2deg);
      }

      /* Bloc violet : carré, compact, superposé, sans radius */
    .info{
      background: var(--violet);
      color:#fff;
      border-radius: 0;
      padding: 14px 10px 10px;
      text-align:center;
      position: relative;
      z-index: 1;
      margin-top: -22px;

      transform: rotate(-2deg);
    }

    /* contre-rotation pour garder texte droit */
    .infoInner{
      transform: rotate(5deg);
    }

    /* Prénom 1 ligne */
    .prenom{
      font-family:"Archivo", Arial, sans-serif;
      font-weight: 800;
      font-size: 20px;     /* plus petit */
      line-height: 1.0;
      margin: 6px 0 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Nom (majuscule) 1 ligne */
    .nom{
      font-family:"Archivo", Arial, sans-serif;
      font-weight: 800;
      font-size: 14px;     /* plus petit */
      line-height: 1.0;
      margin: 0 0 6px;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: .2px;
    }

    /* Profession : encore plus petit, 2 lignes max, serré */
    .job{
      font-family: Arial, sans-serif;
      font-weight: 400;
      font-size: 15px;  /* plus petit */
      line-height: 1.12;
      margin: 0;
      opacity: .98;

      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Badge numéro (optionnel) ultra discret */
    .badgeNum{
      position:absolute;
      top: -2px;
      left: -2px;
      font-family:"Archivo", Arial, sans-serif;
      font-weight:800;
      font-size:10px;
      color: rgba(75,46,131,.55);
      background: transparent;
      border: none;
      padding: 0;
      display: none;
    }

:root{
    --violet-dark: #37174f;
}
    footer {
     background-color: var(--violet-dark);   
    }

.logo-nav {
    height: 2em;
}