:root {
  --orange:       #F77F00;
  --orange-light: #FFB347;
  --orange-dark:  #C45E00;
  --vert:         #009A44;
  --vert-fonce:   #007533;
  --vert-clair:   #00C457;
  --marron:       #2C1503;
  --marron-mid:   #5C3010;
  --creme:        #FDF8F2;
  --blanc:        #FFFFFF;
  --gris:         #6B7280;
  --gris-clair:   #F3F4F6;
  --ccc:    #5C3010;
  --bnetd:  #003366;
  --pfo:    #0a3f70;
  --socotec:#0a7eb4;
  --aveci:  #FF9FD6;
  --jf:     #FFCC80;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--creme);
  color: var(--marron);
  overflow-x: hidden;
  padding-top: 72px;
}

section { scroll-margin-top: 80px; }

.fond-blanc { background: var(--blanc); }
.fond-creme { background: var(--creme); }


nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: 72px;
  background: rgba(44, 21, 3, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--orange);
}

.logo-nav { display: flex; align-items: center; gap: 12px; }

.badge-logo {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900; font-size: 18px;
  color: white; letter-spacing: -1px;
}

.texte-logo { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: white; line-height: 1.2; }
.texte-logo span { display: block; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 400; color: var(--orange-light); letter-spacing: 2px; text-transform: uppercase; }

.liens-nav { display: flex; gap: 2rem; list-style: none; }
.liens-nav a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; transition: color 0.2s; }
.liens-nav a:hover { color: var(--orange-light); }

.appel-action { background: var(--vert); color: white !important; padding: 8px 20px; border-radius: 6px; font-weight: 600 !important; transition: background 0.2s; }
.appel-action:hover { background: var(--vert-fonce); }


.element-nav { position: relative; }
.element-nav:hover .menu-deroulant { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.menu-deroulant {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--marron);
  border: 1px solid rgba(247,127,0,0.3);
  border-radius: 10px; padding: 0.5rem; min-width: 230px;
  opacity: 0; visibility: hidden; transition: all 0.2s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 200;
}
.menu-deroulant::before {
  content: ''; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--marron);
  border-left: 1px solid rgba(247,127,0,0.3); border-top: 1px solid rgba(247,127,0,0.3);
}

.element-menu { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 7px; text-decoration: none; color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; transition: all 0.15s; white-space: nowrap; }
.element-menu:hover { background: rgba(247,127,0,0.12); color: var(--orange-light); }
.icone-menu { width: 28px; height: 28px; border-radius: 6px; background: rgba(247,127,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.etiquette-menu { line-height: 1.2; }
.etiquette-menu small { display: block; font-size: 11px; color: rgba(255,255,255,0.35); font-weight: 400; margin-top: 1px; }
.chevron-nav { display: inline-block; margin-left: 4px; font-size: 10px; transition: transform 0.2s; vertical-align: middle; }
.element-nav:hover .chevron-nav { transform: rotate(180deg); }


.banniere { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }

.banniere-gauche { background: var(--marron); display: flex; flex-direction: column; justify-content: center; padding: 8rem 4rem 4rem 5rem; position: relative; z-index: 2; }
.banniere-gauche::after { content: ''; position: absolute; top: 0; right: -80px; width: 160px; height: 100%; background: var(--marron); clip-path: polygon(0 0, 0% 100%, 100% 100%); z-index: 1; }

.etiquette-banniere { display: inline-flex; align-items: center; gap: 8px; background: rgba(247,127,0,0.15); border: 1px solid rgba(247,127,0,0.4); color: var(--orange-light); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.5rem; width: fit-content; animation: fadeInUp 0.6s ease both; }
.etiquette-banniere::before { content: ''; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; animation: pulse 2s infinite; }

.titre-banniere { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 900; color: white; line-height: 1.1; margin-bottom: 1.5rem; animation: fadeInUp 0.7s ease 0.1s both; }
.titre-banniere .accent { color: var(--orange); display: block; }
.description-banniere { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 420px; margin-bottom: 2.5rem; animation: fadeInUp 0.7s ease 0.2s both; }
.boutons-banniere { display: flex; gap: 1rem; animation: fadeInUp 0.7s ease 0.3s both; }

.bouton-principal { background: var(--orange); color: white; border: none; padding: 14px 28px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.bouton-principal:hover { background: var(--orange-dark); transform: translateY(-2px); }
.bouton-secondaire { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.3); padding: 14px 28px; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-decoration: none; }
.bouton-secondaire:hover { border-color: var(--orange-light); color: var(--orange-light); }

.banniere-droite { background: var(--creme); display: flex; align-items: center; justify-content: center; padding: 8rem 3rem 3rem 6rem; position: relative; }
.banniere-droite::before { content: ''; position: absolute; top: 120px; right: 40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(247,127,0,0.1) 0%, transparent 70%); border-radius: 50%; }
.banniere-droite::after { content: ''; position: absolute; bottom: 80px; left: 80px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(0,154,68,0.1) 0%, transparent 70%); border-radius: 50%; }

.visuel-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 100%; }
.cercle-hero { position: relative; width: 280px; height: 280px; }
.cercle-exterieur { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(247,127,0,0.3); animation: rotation 20s linear infinite; }
.cercle-interieur { position: absolute; inset: 20px; border-radius: 50%; border: 2px solid rgba(0,154,68,0.2); }
.centre-cercle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.icone-hero { font-size: 4rem; }
.texte-cercle { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--marron); text-align: center; line-height: 1.3; }
.sous-texte-cercle { color: var(--orange); font-size: 0.85rem; }
.point-cercle { position: absolute; width: 10px; height: 10px; border-radius: 50%; }
.point-haut    { top: 10px; left: 50%; transform: translateX(-50%); background: var(--orange); }
.point-bas     { bottom: 10px; left: 50%; transform: translateX(-50%); background: var(--vert); }
.point-gauche  { left: 10px; top: 50%; transform: translateY(-50%); background: var(--orange); }
.point-droite  { right: 10px; top: 50%; transform: translateY(-50%); background: var(--vert); }
.tags-hero { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.tag-hero { background: white; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--marron); box-shadow: 0 4px 15px rgba(44,21,3,0.1); display: flex; align-items: center; gap: 6px; }
.tag-vert span { color: var(--vert); }


.logo-acteur { max-width: 120px; max-height: 80px; object-fit: contain; margin-bottom: 1rem; }
.bande-acteurs { background: var(--orange); padding: 1rem 5rem; display: flex; align-items: center; gap: 2rem; overflow-x: auto; }
.etiquette-bande { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: white; white-space: nowrap; opacity: 0.8; }
.separateur-bande { width: 1px; height: 24px; background: rgba(255,255,255,0.4); flex-shrink: 0; }
.puce-acteur { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.point-acteur { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.couleur-ccc    { background: var(--ccc); }
.couleur-bnetd  { background: var(--bnetd); }
.couleur-pfo    { background: var(--pfo); }
.couleur-socotec{ background: var(--socotec); }
.couleur-aveci  { background: var(--aveci); }
.couleur-jf     { background: var(--jf); }
.nom-acteur  { font-size: 13px; font-weight: 600; color: white; }
.role-acteur { font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 400; }


.section { padding: 5rem; }
.entete-section { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.surtitre-section { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 0.4rem; }
.titre-section { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--marron); }
.voir-tout { font-size: 14px; color: var(--vert); font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.voir-tout:hover { gap: 10px; }


.grille-actualites { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; }
.carte-actu { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(44,21,3,0.06); transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.carte-actu:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(44,21,3,0.12); }
.image-actu { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.carte-actu-vedette .image-actu { font-size: 4rem; }
.image-actu-orange { background: linear-gradient(135deg, #F77F00, #C45E00); color: white; }
.image-actu-vert   { background: linear-gradient(135deg, #009A44, #007533); color: white; }
.image-actu-marron { background: linear-gradient(135deg, #2C1503, #5C3010); color: white; }
.corps-actu { padding: 1.2rem; }
.categorie-actu { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.5rem; }
.cat-orange { color: var(--orange); }
.cat-vert   { color: var(--vert); }
.titre-article { font-family: 'Playfair Display', serif; font-weight: 700; color: var(--marron); line-height: 1.3; margin-bottom: 0.5rem; }
.carte-actu-vedette .titre-article { font-size: 1.3rem; }
.carte-actu:not(.carte-actu-vedette) .titre-article { font-size: 1rem; }
.meta-article { font-size: 12px; color: var(--gris); display: flex; align-items: center; gap: 6px; }
.extrait-article { font-size: 14px; color: var(--gris); line-height: 1.6; margin-bottom: 0.8rem; }


.section-agenda { background: var(--marron); padding: 5rem; }
.section-agenda .surtitre-section { color: var(--orange-light); }
.section-agenda .titre-section    { color: white; }
.section-agenda .voir-tout        { color: var(--vert-clair); }
.grille-agenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.carte-agenda { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.carte-agenda:hover { border-color: var(--orange); background: rgba(247,127,0,0.08); }
.haut-carte-agenda { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.date-agenda { text-align: center; }
.jour-agenda { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; color: var(--orange); line-height: 1; }
.mois-agenda { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.badge-agenda { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 1px; }
.badge-hebdomadaire { background: rgba(247,127,0,0.15); color: var(--orange-light); }
.badge-special      { background: rgba(0,154,68,0.15); color: var(--vert-clair); }
.titre-agenda { font-size: 15px; font-weight: 600; color: white; margin-bottom: 0.4rem; }
.meta-agenda  { font-size: 13px; color: rgba(255,255,255,0.5); }
.acteurs-agenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.etiquette-acteur { font-size: 10px; padding: 3px 8px; border-radius: 4px; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }


.grille-avancement { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.colonne-pourcentage { text-align: center; }
.grand-pourcentage-global { font-family: 'Playfair Display', serif; font-size: 6rem; font-weight: 900; color: var(--orange); line-height: 1; }
.label-pourcentage-global { font-size: 14px; color: var(--gris); margin-top: 0.5rem; }
.barre-globale { background: var(--gris-clair); border-radius: 999px; height: 12px; margin-top: 1.5rem; overflow: hidden; }
.remplissage-barre-globale { width: 43%; height: 100%; background: linear-gradient(90deg, var(--orange), var(--vert)); border-radius: 999px; }
.grille-phases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.carte-phase { background: var(--creme); border-radius: 12px; padding: 1.5rem; border-left: 4px solid; }
.bordure-orange { border-color: var(--orange); }
.bordure-vert   { border-color: var(--vert); }
.bordure-gris   { border-color: var(--gris); }
.label-phase { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); margin-bottom: 0.5rem; }
.valeur-phase { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 700; color: var(--marron); }
.piste-phase { background: var(--gris-clair); border-radius: 999px; height: 6px; margin-top: 0.8rem; overflow: hidden; }
.remplissage-phase { height: 100%; border-radius: 999px; }
.fond-orange { background: var(--orange); }
.fond-vert   { background: var(--vert); }
.fond-gris   { background: var(--gris); }


a.bouton-lire-plus { display: inline-block; background: transparent; border: 2px solid #e07b2a; color: #e07b2a; padding: 0.5rem 1.25rem; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; font-size: 0.95rem; margin: 0.75rem 0; transition: all 0.2s ease; }
a.bouton-lire-plus:hover { background: #e07b2a; color: white; }
.grille-projet { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 2rem; align-items: center; }
.paragraphe-projet { font-size: 16px; color: var(--gris); line-height: 1.9; margin-bottom: 1.5rem; }
.stats-projet { display: flex; gap: 2rem; }
.stat-projet { text-align: center; }
.valeur-stat-projet { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; }
.couleur-orange { color: var(--orange); }
.couleur-vert   { color: var(--vert); }
.label-stat-projet { font-size: 12px; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

.carte-circuit { background: var(--marron); border-radius: 16px; padding: 2.5rem; color: white; }
.titre-circuit { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange-light); margin-bottom: 1.5rem; }
.liste-circuit { display: flex; flex-direction: column; gap: 1rem; }
.ligne-circuit { display: flex; align-items: center; gap: 1rem; }
.badge-acteur-circuit { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.fond-ccc   { background: var(--ccc); }
.fond-bnetd { background: var(--bnetd); }
.fond-pfo   { background: var(--pfo); }
.couleur-marron { color: var(--marron); }
.couleur-blanc  { color: white; }
.nom-circuit { font-size: 14px; font-weight: 600; }
.role-circuit { color: rgba(255,255,255,0.4); font-weight: 400; }
.connecteur-circuit { margin-left: 18px; width: 2px; height: 20px; background: rgba(247,127,0,0.4); }
.sous-traitants-circuit { display: flex; gap: 1rem; margin-left: 2rem; margin-top: 0.5rem; }
.tag-sous-traitant { font-size: 12px; padding: 4px 10px; background: rgba(255,255,255,0.08); border-radius: 6px; color: rgba(255,255,255,0.6); }


.grille-acteurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.fiche-acteur { background: var(--creme); border-radius: 12px; padding: 1.8rem; border-top: 4px solid; transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
.fiche-acteur:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(44,21,3,0.1); }
.bordure-ccc    { border-color: var(--ccc); }
.bordure-bnetd  { border-color: var(--bnetd); }
.bordure-pfo    { border-color: var(--pfo); }
.bordure-socotec{ border-color: var(--socotec); }
.bordure-aveci  { border-color: var(--aveci); }
.bordure-jf     { border-color: var(--jf); }
.avatar-acteur { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; margin-bottom: 1rem; }
.fond-socotec{ background: var(--socotec); }
.fond-aveci  { background: var(--aveci); }
.fond-jf     { background: var(--jf); }
.nom-acteur-fiche { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--marron); margin-bottom: 0.3rem; }
.role-acteur-fiche { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.8rem; }
.couleur-ccc-texte    { color: #B8860B; }
.couleur-bnetd-texte  { color: #003366; }
.couleur-pfo-texte    { color: #CC4444; }
.couleur-socotec-texte{ color: #5AAA33; }
.couleur-aveci-texte  { color: #BB4488; }
.couleur-jf-texte     { color: #BB8800; }
.desc-acteur { font-size: 13px; color: var(--gris); line-height: 1.7; }


.grille-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.colonne-info-contact .titre-section { margin-bottom: 1rem; }
.texte-contact { font-size: 15px; color: var(--gris); line-height: 1.8; margin-bottom: 2rem; }
.infos-contact { display: flex; flex-direction: column; gap: 1rem; }
.ligne-info-contact { display: flex; align-items: center; gap: 1rem; font-size: 14px; color: var(--gris); }
.icone-info-contact { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.formulaire-contact { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(44,21,3,0.08); }
.champs-formulaire { display: flex; flex-direction: column; gap: 1rem; }
.champ { display: flex; flex-direction: column; }
.label-champ { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.input-champ, .select-champ, .textarea-champ { width: 100%; padding: 12px 16px; border: 1.5px solid #E5E7EB; border-radius: 8px; font-size: 14px; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.2s; background: white; color: var(--marron); }
.input-champ:focus, .select-champ:focus, .textarea-champ:focus { border-color: var(--orange); }
.textarea-champ { resize: none; }
.bouton-envoyer { width: 100%; background: var(--orange); color: white; border: none; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: all 0.2s; }
.bouton-envoyer:hover { background: var(--orange-dark); transform: translateY(-2px); }


footer { background: #1A0D02; padding: 2rem 5rem; display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--orange-dark); }
.logo-pied { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: white; }
.logo-pied span { color: var(--orange); }
.copyright-pied { font-size: 12px; color: rgba(255,255,255,0.4); }
.drapeau-pied { display: flex; height: 16px; width: 36px; border-radius: 2px; overflow: hidden; }
.bande-drapeau { flex: 1; }
.couleur-orange-drapeau { background: #F77F00; }
.couleur-blanc-drapeau  { background: #FFFFFF; }
.couleur-vert-drapeau   { background: #009A44; }


@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }
@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }



@media (max-width: 1024px) {
  nav { padding: 0 2rem; }
  .section, .section-agenda { padding: 4rem 2rem; }
  .banniere-gauche { padding: 6rem 2rem 3rem 2rem; }
  .banniere-droite { padding: 6rem 2rem 3rem 2rem; }
  .grille-actualites { grid-template-columns: 1fr 1fr; }
  .grille-agenda { grid-template-columns: 1fr 1fr; }
  .grille-acteurs { grid-template-columns: 1fr 1fr; }
  .grille-projet, .grille-contact, .grille-avancement { grid-template-columns: 1fr; gap: 2rem; }
  .stats-projet { justify-content: space-between; }
  footer { padding: 2rem; }
  .bande-acteurs { padding: 1rem 2rem; }
}

@media (max-width: 768px) {
  body { padding-top: 64px; }
  nav { padding: 0 1.2rem; height: 64px; }

  .banniere { grid-template-columns: 1fr; }
  .banniere-gauche { padding: 5rem 1.5rem 3rem 1.5rem; }
  .banniere-droite { padding: 3rem 1.5rem; }
  .titre-banniere { font-size: 2.2rem; }
  .description-banniere { max-width: 100%; }
  .boutons-banniere { flex-direction: column; width: 100%; }
  .bouton-principal, .bouton-secondaire { width: 100%; justify-content: center; }

  .section, .section-agenda { padding: 3rem 1.5rem; }
  .entete-section { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .grille-actualites, .grille-agenda, .grille-acteurs, .grille-phases { grid-template-columns: 1fr; }
  .grand-pourcentage-global { font-size: 4rem; }
  .stats-projet { flex-direction: column; gap: 1rem; }
  .bande-acteurs { padding: 1rem; }
  footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2rem 1rem; }
}

@media (max-width: 480px) {
  .titre-banniere { font-size: 1.8rem; }
  .titre-section { font-size: 1.5rem; }
  .valeur-stat-projet, .valeur-phase { font-size: 1.5rem; }
  .cercle-hero { width: 220px; height: 220px; }
  .icone-hero { font-size: 3rem; }
}

input, select, textarea {
  font-size: 16px !important;
}