RELEASE V5.5.0 : Voici les modifications apportées :

-> REFONTE TOTALE DE TOUS LES AFFICHEURS CLASSIQUES + QUAIS

FONCTIONNALITÉS EN COURS DE DÉVELOPPEMENT :

-> ADAPTABILITÉ EN FONCTION DES SITUATIONS

src/components/afficheurs/AttentifsEnsemble.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import './AttentifsEnsemble.css';
+
+export default function AttentifsEnsemble() {
+  return (
+    <div className="aff-attentifs__container">
+      {/* COLONNE GAUCHE : ANTHRACITE FONCÉ (ATTENTIFS ENSEMBLE + VIGIPIRATE) */}
+      <div className="aff-attentifs__left-col">
+        <div className="aff-attentifs__title-group">
+          <div className="aff-attentifs__title-word">ATTENTIFS</div>
+          <div className="aff-attentifs__title-word">ENSEMBLE</div>
+        </div>
+
+        {/* Insigne Vigipirate Officiel */}
+        <div className="aff-attentifs__vigipirate-wrap">
+          <svg
+            viewBox="0 0 280 240"
+            className="aff-attentifs__vigipirate-svg"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {/* Triangle noir extérieur */}
+            <polygon points="140,12 268,228 12,228" fill="#1e1e1e" stroke="#1e1e1e" strokeWidth="8" strokeLinejoin="round" />
+            {/* Triangle rouge intérieur */}
+            <polygon points="140,42 238,206 42,206" fill="#e2001a" />
+            {/* Bandeau blanc en bas */}
+            <polygon points="56,182 224,182 238,206 42,206" fill="#ffffff" />
+            {/* Texte VIGIPIRATE */}
+            <text
+              x="140"
+              y="201"
+              fill="#1e1e1e"
+              fontSize="23"
+              fontWeight="900"
+              fontFamily="Achemine, Arial, sans-serif"
+              textAnchor="middle"
+              letterSpacing="2.5"
+            >
+              VIGIPIRATE
+            </text>
+          </svg>
+        </div>
+      </div>
+
+      {/* COLONNE DROITE : GRIS MOYEN (CONSIGNES + BULLE ALERTE 3117) */}
+      <div className="aff-attentifs__right-col">
+        {/* Partie gauche des consignes */}
+        <div className="aff-attentifs__info-section">
+          <p className="aff-attentifs__info-desc">
+            Si vous êtes témoin<br />
+            d'une situation<br />
+            qui présente un risque<br />
+            pour votre sécurité<br />
+            ou celle des autres<br />
+            voyageurs,
+          </p>
+
+          <div className="aff-attentifs__call-action">
+            <span className="aff-attentifs__call-text">APPELER* LE 3117</span>
+            <span className="aff-attentifs__call-hours">24h/24 · 7j/7</span>
+          </div>
+
+          <div className="aff-attentifs__call-footnote">
+            * Appel non surtaxé et enregistré
+          </div>
+        </div>
+
+        {/* Partie droite avec la bulle Alerte SNCF 3117 et le smartphone */}
+        <div className="aff-attentifs__bubble-section">
+          <div className="aff-attentifs__bubble-wrap">
+            {/* Bulle blanche à bordure rouge */}
+            <div className="aff-attentifs__bubble-card">
+              <div className="aff-attentifs__bubble-title">ALERTE SNCF</div>
+              <div className="aff-attentifs__bubble-rows">
+                <div className="aff-attentifs__bubble-line">
+                  <span className="aff-attentifs__bubble-label">TÉL.</span>
+                  <span className="aff-attentifs__bubble-number">3117*</span>
+                </div>
+                <div className="aff-attentifs__bubble-line">
+                  <span className="aff-attentifs__bubble-label">SMS</span>
+                  <span className="aff-attentifs__bubble-number">31177**</span>
+                </div>
+              </div>
+
+              {/* Pointe de la bulle */}
+              <div className="aff-attentifs__bubble-tail" />
+            </div>
+
+            {/* Smartphone Rouge d'alerte */}
+            <div className="aff-attentifs__phone-badge">
+              <svg viewBox="0 0 68 104" className="aff-attentifs__phone-svg" fill="none" xmlns="http://www.w3.org/2000/svg">
+                {/* Corps de téléphone rouge arrondi */}
+                <rect x="4" y="4" width="60" height="96" rx="14" fill="#e2001a" stroke="#ffffff" strokeWidth="4.5" />
+                {/* Écran blanc */}
+                <rect x="12" y="14" width="44" height="50" rx="6" fill="#ffffff" />
+                {/* Point d'exclamation rouge d'urgence */}
+                <rect x="30.5" y="24" width="7" height="20" rx="3.5" fill="#e2001a" />
+                <circle cx="34" cy="53" r="4" fill="#e2001a" />
+                {/* Touches du pavé numérique */}
+                <circle cx="20" cy="74" r="3" fill="#ffffff" />
+                <circle cx="34" cy="74" r="3" fill="#ffffff" />
+                <circle cx="48" cy="74" r="3" fill="#ffffff" />
+                <circle cx="20" cy="85" r="3" fill="#ffffff" />
+                <circle cx="34" cy="85" r="3" fill="#ffffff" />
+                <circle cx="48" cy="85" r="3" fill="#ffffff" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}