.elementor .e-21778bdb-1a2c0ce{font-family:Roboto;font-size:19px;color:#000;text-align:end;}.elementor .e-14cdb9f0-e15a9f4{font-family:Roboto;font-weight:300;font-size:20px;color:#000;align-self:center;}.elementor .e-44649184-856debc{font-family:Anton;font-weight:400;color:#000;}.elementor .e-1498989a-527288e{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-d2ed391-659a374{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-43fa84d1-b721a0f{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-70be19bd-32d4779{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-76c499d4-12a56e6{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-4be67e94-d408e31{font-family:Anton;font-weight:400;color:#000;margin-block-start:15px;}.elementor .e-39f2fb7f-0d9fde7{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-27e5804-cc0f5ff{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-5940fdb-ca56949{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-64b8001-512b1af{margin-block-start:20px;flex-direction:row;gap:20px;}.elementor .e-66fffce-af1007e{font-family:Anton;font-weight:300;font-size:26px;color:var(--Blanc);}.elementor .e-0ba394c-b4cffa1{flex-direction:column;gap:20px;}.elementor .e-17c7661-69ea9db{margin-block-start:50px;margin-block-end:50px;flex-direction:row;gap:20px;}.elementor .e-a37816e-f3d3f9c{flex-direction:row;}.elementor .e-1a5dcf3-d365b4f{font-family:Anton;font-weight:400;color:#000;margin-block-start:15px;}.elementor .e-311e133-b5bfe6a{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-14a479f-ea8c0ae{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-ce99df9-ee4ce6b{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-f1b999f-5029fdb{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-86900e3-b68c852{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-9aff308-d54998c{font-family:Anton;font-weight:300;font-size:26px;color:#000;}.elementor .e-13ef5e9-3d47120{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-7eeb93b-677b4f6{font-family:Anton;font-weight:300;font-size:26px;color:var(--Blanc);}.elementor .e-1a2daac-8923081{font-family:Roboto;font-weight:400;font-size:18px;color:var(--Blanc);}.elementor .e-5e9f127-4ae5726{flex-direction:row;gap:20px;justify-content:center;/* ============================================
 SMARTPACK — Style unifié tableaux & cartes
 Typographie : Anton (titres) + Roboto (corps)
 ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@300;400;500;700&display=swap');

:root {
--sp-color-text: #2a2a2a;
--sp-color-text-muted: #707070;
--sp-color-bg: #f5f5f5;
--sp-color-bg-highlight: #ededed;
--sp-color-border: #d8d8d8;
--sp-color-border-light: rgba(0, 0, 0, 0.1);
--sp-color-black: #000;
--sp-color-white: #fff;
}

/* ============================================
 BLOC 5 — Cartes spécifications produit
 ============================================ */

.sp-spec-card {
background: var(--sp-color-bg);
border: 1px solid var(--sp-color-border);
border-radius: 4px;
padding: 1rem 1.25rem;
font-family: 'Roboto', system-ui, -apple-system, sans-serif;
font-weight: 300;
font-size: 0.82rem;
color: var(--sp-color-text);
line-height: 1.35;
max-width: 420px;
}

/* Variante mise en avant — bordure simple plus contrastée */
.sp-spec-card--highlight {
background: var(--sp-color-bg-highlight);
border-color: #b8b8b8;
}

.sp-spec-section + .sp-spec-section {
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--sp-color-border);
}

.sp-spec-title {
margin: 0 0 0.6rem 0;
font-family: 'Anton', 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sp-color-black);
line-height: 1.1;
}

.sp-spec-list {
margin: 0;
padding: 0;
}

.sp-spec-row {
display: flex;
align-items: baseline;
gap: 0.85rem;
padding: 0.25rem 0;
border-bottom: 1px dotted var(--sp-color-border-light);
}

.sp-spec-row:last-child {
border-bottom: none;
}

.sp-spec-row dt {
flex: 0 0 35%;
font-size: 0.72rem;
font-weight: 300;
color: var(--sp-color-text-muted);
}

.sp-spec-row dd {
flex: 1;
margin: 0;
font-size: 0.78rem;
font-weight: 500;
color: var(--sp-color-black);
}

.sp-spec-uses {
margin: 0;
padding: 0;
list-style: none;
}

.sp-spec-uses li {
position: relative;
padding: 0.22rem 0 0.22rem 0.9rem;
font-size: 0.78rem;
font-weight: 300;
color: var(--sp-color-text);
line-height: 1.4;
}

.sp-spec-uses li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 4px;
height: 4px;
background: var(--sp-color-black);
border-radius: 50%;
}

/* ============================================
 WRAPPER COMMUN TABLEAUX
 ============================================ */

.sp-table-wrapper {
margin: 2rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.sp-table-encadre {
background: var(--sp-color-bg);
border: 1px solid var(--sp-color-border);
border-radius: 4px;
padding: 1.25rem 1.5rem;
margin: 2.5rem 0;
}

.sp-table-intro {
margin: 0 0 0.9rem 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.85rem;
color: var(--sp-color-text-muted);
font-style: italic;
}

/* ============================================
 BLOC 3 — Tableau comparatif Ondulé vs Compact
 ============================================ */

.sp-comparison-table {
width: 100%;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.82rem;
color: var(--sp-color-text);
background: var(--sp-color-white);
border: 1px solid var(--sp-color-border);
border-radius: 4px;
overflow: hidden;
}

.sp-comparison-table thead th {
background: var(--sp-color-black);
color: var(--sp-color-white);
text-align: left;
padding: 0.7rem 1rem;
font-family: 'Anton', 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
border: none;
}

.sp-comparison-table thead th.sp-col-highlight {
background: #2a2a2a;
}

.sp-col-subtitle {
display: block;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.7rem;
text-transform: none;
letter-spacing: 0;
opacity: 0.75;
margin-top: 0.1rem;
font-style: italic;
}

.sp-comparison-table tbody th {
text-align: left;
font-weight: 500;
font-size: 0.78rem;
padding: 0.55rem 1rem;
background: var(--sp-color-bg);
border-bottom: 1px solid var(--sp-color-border);
width: 30%;
color: var(--sp-color-black);
}

.sp-comparison-table tbody td {
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--sp-color-border);
vertical-align: top;
font-size: 0.78rem;
line-height: 1.4;
}

.sp-comparison-table tbody td.sp-col-highlight {
background: var(--sp-color-bg-highlight);
font-weight: 500;
color: var(--sp-color-black);
}

.sp-comparison-table tbody tr:last-child th,
.sp-comparison-table tbody tr:last-child td {
border-bottom: none;
}

/* ============================================
 BLOC 4 — Tableau cas d'usage
 ============================================ */

.sp-use-cases {
margin: 3rem 0;
font-family: 'Roboto', sans-serif;
}

.sp-section-title {
font-family: 'Anton', 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 1.8rem;
color: var(--sp-color-black);
margin: 0 0 1rem 0;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.1;
}

.sp-section-intro {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.9rem;
color: var(--sp-color-text);
line-height: 1.55;
max-width: 70ch;
margin: 0 0 1.75rem 0;
}

.sp-use-cases-table {
width: 100%;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.8rem;
color: var(--sp-color-text);
background: var(--sp-color-white);
border: 1px solid var(--sp-color-border);
border-radius: 4px;
overflow: hidden;
}

.sp-use-cases-table thead th {
background: var(--sp-color-black);
color: var(--sp-color-white);
text-align: left;
padding: 0.7rem 0.9rem;
font-family: 'Anton', 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.2;
border: none;
}

.sp-use-cases-table tbody th {
text-align: left;
font-weight: 500;
font-size: 0.78rem;
padding: 0.7rem 0.9rem;
background: var(--sp-color-bg);
border-bottom: 1px solid var(--sp-color-border);
border-right: 1px solid var(--sp-color-border);
vertical-align: top;
width: 28%;
color: var(--sp-color-black);
line-height: 1.4;
}

.sp-use-cases-table tbody td {
padding: 0.7rem 0.9rem;
border-bottom: 1px solid var(--sp-color-border);
border-right: 1px solid var(--sp-color-border);
vertical-align: top;
line-height: 1.4;
font-size: 0.78rem;
}

.sp-use-cases-table tbody td:last-child {
border-right: none;
}

.sp-use-cases-table tbody tr:hover {
background: var(--sp-color-bg);
}

.sp-use-cases-table tbody tr:last-child th,
.sp-use-cases-table tbody tr:last-child td {
border-bottom: none;
}

.sp-use-cases-table strong {
font-weight: 500;
color: var(--sp-color-black);
}

.sp-row-detail {
display: block;
font-weight: 300;
font-size: 0.72rem;
color: var(--sp-color-text-muted);
font-style: italic;
margin-top: 0.2rem;
line-height: 1.35;
}

/* ============================================
 Note pédagogique sous tableau
 ============================================ */

.sp-note {
margin: 1.5rem 0;
padding: 0.85rem 1.1rem;
background: var(--sp-color-bg);
border: 1px solid var(--sp-color-border);
border-radius: 4px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 0.8rem;
color: var(--sp-color-text);
line-height: 1.5;
}

.sp-note strong {
font-weight: 500;
color: var(--sp-color-black);
}

/* ============================================
 CTA en sortie de bloc
 ============================================ */

.sp-cta-block {
margin-top: 2rem;
padding: 1.5rem;
background: var(--sp-color-black);
border-radius: 4px;
text-align: center;
}

.sp-cta-text {
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: var(--sp-color-white);
margin: 0 0 1rem 0;
font-size: 0.95rem;
line-height: 1.5;
}

.sp-cta-button {
display: inline-block;
padding: 0.75rem 1.75rem;
background: var(--sp-color-white);
color: var(--sp-color-black);
text-decoration: none;
font-family: 'Anton', 'Roboto Condensed', sans-serif;
font-weight: 400;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 3px;
transition: background 0.2s ease, transform 0.2s ease;
}

.sp-cta-button:hover {
background: #ededed;
transform: translateY(-1px);
}

/* ============================================
 Responsive
 ============================================ */

@media (max-width: 768px) {

.sp-comparison-table {
  min-width: 480px;
}

.sp-section-title {
  font-size: 1.5rem;
}

/* Tableau cas d'usage — transformation en cartes */
.sp-use-cases-table thead {
  display: none;
}

.sp-use-cases-table,
.sp-use-cases-table tbody,
.sp-use-cases-table tr,
.sp-use-cases-table th,
.sp-use-cases-table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.sp-use-cases-table tbody tr {
  margin-bottom: 1rem;
  border: 1px solid var(--sp-color-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--sp-color-white);
}

.sp-use-cases-table tbody th {
  background: var(--sp-color-black);
  color: var(--sp-color-white);
  font-family: 'Anton', 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: none;
  padding: 0.75rem 0.9rem;
}

.sp-use-cases-table tbody th .sp-row-detail {
  color: rgba(255, 255, 255, 0.7);
  text-transform: none;
  letter-spacing: 0;
}

.sp-use-cases-table tbody td {
  border: none;
  border-bottom: 1px solid var(--sp-color-border);
  padding: 0.65rem 0.9rem 0.65rem 0.9rem;
  position: relative;
  padding-top: 1.6rem;
}

.sp-use-cases-table tbody td:last-child {
  border-bottom: none;
}

.sp-use-cases-table tbody td::before {
  content: attr(data-label);
  display: block;
  position: absolute;
  top: 0.45rem;
  left: 0.9rem;
  font-family: 'Anton', 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-color-text-muted);
}
}

@media (max-width: 480px) {
.sp-spec-card {
  padding: 0.85rem 1rem;
  max-width: 100%;
}

.sp-spec-row {
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0;
}

.sp-spec-row dt {
  flex: none;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sp-spec-row dd {
  font-size: 0.82rem;
}

.sp-cta-block {
  padding: 1.25rem 1rem;
}

.sp-cta-button {
  width: 100%;
  padding: 0.75rem 1rem;
}
}\n}.elementor .e-fff0d80-74fb15c{font-family:Anton;font-weight:400;color:#000;margin-block-start:15px;}.elementor .e-b1c12cc-0ee6c56{font-family:Roboto;font-weight:400;font-size:18px;color:var(--Blanc);}.elementor .e-916dc48-2bde940{padding:20px;margin-block-start:0px;margin-block-end:30px;border-radius:10px;border-width:10px;background-color:var(--Black);flex-direction:column;gap:20px;}.elementor .e-2db37a14-49d841c{font-family:Anton;font-weight:400;color:#000;}.elementor .e-1eba6541-a6e24b0{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-de28392-cf0a249{font-family:Anton;font-weight:400;color:#000;margin-block-start:15px;}.elementor .e-0e18658-eb6217a{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-4068401-0ed92ba{font-family:Anton;font-weight:400;font-size:70px;color:#000;margin-block-start:36px;align-self:center;.timeline-horizontal {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}

.timeline-horizontal::before {
content: "";
position: absolute;
top: 42px;
left: 8%;
right: 8%;
height: 2px;
background: #111;
opacity: 0.25;
z-index: 0;
}

.timeline-step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
min-width: 0;
}

.timeline-step::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: 30px auto 18px auto;
background: #ffffff;
border: 2px solid #111;
border-radius: 50%;
}

.timeline-step h3,
.timeline-step h4 {
margin-top: 0;
}

.timeline-step p {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}\n}.elementor .e-ad76d00-51677c8{font-family:Anton;font-weight:400;font-size:24px;color:#000;text-align:center;}.elementor .e-a9cec08-96067a7{font-family:Roboto;font-weight:300;font-size:17px;color:#000;line-height:18px;text-align:center;}.elementor .e-786c3c9-866de58{font-family:Anton;font-weight:400;font-size:70px;color:#000;margin-block-start:36px;align-self:center;.timeline-horizontal {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}

.timeline-horizontal::before {
content: "";
position: absolute;
top: 42px;
left: 8%;
right: 8%;
height: 2px;
background: #111;
opacity: 0.25;
z-index: 0;
}

.timeline-step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
min-width: 0;
}

.timeline-step::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: 30px auto 18px auto;
background: #ffffff;
border: 2px solid #111;
border-radius: 50%;
}

.timeline-step h3,
.timeline-step h4 {
margin-top: 0;
}

.timeline-step p {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}\n}.elementor .e-cce1788-a8c5cc6{font-family:Anton;font-weight:400;font-size:24px;color:#000;text-align:center;}.elementor .e-bfceced-652c2e3{font-family:Roboto;font-weight:300;font-size:17px;color:#000;line-height:18px;text-align:center;}.elementor .e-4f4093c-0398d3c{font-family:Anton;font-weight:400;font-size:70px;color:#000;margin-block-start:36px;align-self:center;.timeline-horizontal {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}

.timeline-horizontal::before {
content: "";
position: absolute;
top: 42px;
left: 8%;
right: 8%;
height: 2px;
background: #111;
opacity: 0.25;
z-index: 0;
}

.timeline-step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
min-width: 0;
}

.timeline-step::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: 30px auto 18px auto;
background: #ffffff;
border: 2px solid #111;
border-radius: 50%;
}

.timeline-step h3,
.timeline-step h4 {
margin-top: 0;
}

.timeline-step p {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}\n}.elementor .e-7d17a86-8c9ed53{font-family:Anton;font-weight:400;font-size:24px;color:#000;text-align:center;}.elementor .e-25eb681-ae44be1{font-family:Roboto;font-weight:300;font-size:17px;color:#000;line-height:18px;text-align:center;}.elementor .e-fa8418c-3bd55b1{font-family:Anton;font-weight:400;font-size:70px;color:#000;margin-block-start:36px;align-self:center;.timeline-horizontal {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}

.timeline-horizontal::before {
content: "";
position: absolute;
top: 42px;
left: 8%;
right: 8%;
height: 2px;
background: #111;
opacity: 0.25;
z-index: 0;
}

.timeline-step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
min-width: 0;
}

.timeline-step::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: 30px auto 18px auto;
background: #ffffff;
border: 2px solid #111;
border-radius: 50%;
}

.timeline-step h3,
.timeline-step h4 {
margin-top: 0;
}

.timeline-step p {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}\n}.elementor .e-8fe694e-fc17ffd{font-family:Anton;font-weight:400;font-size:24px;color:#000;text-align:center;}.elementor .e-2afdbad-275c6bd{font-family:Roboto;font-weight:300;font-size:17px;color:#000;line-height:18px;text-align:center;}.elementor .e-15ce851-10e4ba7{font-family:Anton;font-weight:400;font-size:70px;color:#000;margin-block-start:36px;align-self:center;.timeline-horizontal {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
}

.timeline-horizontal::before {
content: "";
position: absolute;
top: 42px;
left: 8%;
right: 8%;
height: 2px;
background: #111;
opacity: 0.25;
z-index: 0;
}

.timeline-step {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
min-width: 0;
}

.timeline-step::before {
content: "";
display: block;
width: 22px;
height: 22px;
margin: 30px auto 18px auto;
background: #ffffff;
border: 2px solid #111;
border-radius: 50%;
}

.timeline-step h3,
.timeline-step h4 {
margin-top: 0;
}

.timeline-step p {
max-width: 220px;
margin-left: auto;
margin-right: auto;
}\n}.elementor .e-85d86db-f13ccc3{font-family:Anton;font-weight:400;font-size:24px;color:#000;text-align:center;}.elementor .e-8278e3e-975f453{font-family:Roboto;font-weight:300;font-size:17px;color:#000;line-height:18px;text-align:center;}.elementor .e-474f29ff-f03078c{font-family:Anton;font-weight:400;color:#000;}.elementor .e-73c6ac30-d9cba77{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-38f15845-b14649d{font-family:Anton;font-weight:400;color:#000;}.elementor .e-2158e2c6-b4df5a4{font-family:Roboto;font-weight:400;font-size:18px;color:#000;}.elementor .e-6e9fc1e9-895a3d2{font-family:Anton;font-weight:400;color:#000;text-align:end;}