/* ==========================================================================
   JustiComm · page « Sites internet » (création et refonte)
   v1, 23/10/2026 : même structure que Réseaux sociaux, Référencement local et Publicité en ligne
   (fil d'Ariane sur fond clair, bande visuelle pétrole pleine largeur, texte dessous à gauche).
   Visuels propres à la page, en HTML et CSS : site de cabinet qui se construit (ordinateur et
   téléphone), parcours du visiteur, éditeur WordPress, pages statiques, « radiographie » du site
   de JustiComm, avant / après d'une refonte, double compétence. Rien de l'accueil.
   Animations courtes (moins de 4 s), jouées une fois ; état final immédiat si « moins d'animations »
   ou sans JavaScript. Tailles modestes (H1 ≈ 48 px, H2 ≈ 38 px, corps 18 px), textes en pleine largeur.
   Préfixe : si-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.si .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem); line-height: 1.12; color: var(--titre); text-wrap: pretty; }
.si-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .si-or, .surface-nuit .si-or { color: var(--or-clair); }
.si-tete { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: left; }
.si-tete .titre-section { margin-top: var(--e-4); }
.si-chapo { margin-top: var(--e-5); max-width: none; font: italic 500 clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem) / 1.42 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-sombre .si-chapo, .surface-nuit .si-chapo { color: var(--creme); }
.si-texte { margin-top: var(--e-4); max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.surface-sombre .si-texte, .surface-nuit .si-texte { color: var(--creme-doux); }
.si-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.si-actions .lien-suite { margin-top: 0; }
.si-actions--centre { justify-content: center; }
.si-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Liste à coches (métiers, offres) */
.si-coches { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.si-coches li { position: relative; padding-left: 1.85rem; font-size: 1.0625rem; line-height: 1.55; color: var(--texte); }
.si-coches li::before {
  content: "✓"; position: absolute; left: 0; top: 0.2em; display: grid; place-items: center;
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or);
  transition: scale 380ms var(--ease-sortie), opacity 380ms var(--ease-sortie);
}
.js [data-reveal]:not(.est-visible) .si-coches li::before { scale: 0.2; opacity: 0; }
.si-coches li:nth-child(2)::before { transition-delay: 120ms; }
.si-coches li:nth-child(3)::before { transition-delay: 240ms; }
.si-coches li:nth-child(4)::before { transition-delay: 360ms; }
.si-coches li:nth-child(5)::before { transition-delay: 480ms; }
.si-coches li:nth-child(6)::before { transition-delay: 600ms; }

/* Phrase forte : centrée, pleine largeur, filet or */
.si-exergue { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; font: italic 500 clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem) / 1.3 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.si-exergue::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto var(--e-4); background: var(--bronze); }

/* Encadré : double filet or, centré, pleine largeur, bouton dessous */
.si-encadre {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--e-5);
  text-align: center; border-block: 1px solid var(--or-400);
  box-shadow: inset 0 4px 0 -3px var(--or-400), inset 0 -4px 0 -3px var(--or-400);
}
.si-encadre__texte { margin: 0; font: 500 clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem) / 1.3 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.si-encadre__texte span { display: inline-block; transition: opacity 500ms var(--ease-sortie), translate 500ms var(--ease-sortie); }
.si-encadre__texte span:nth-child(2) { transition-delay: 350ms; }
.si-encadre__texte span:nth-child(3) { transition-delay: 700ms; font-style: italic; color: var(--or-texte); }
.js .si-encadre:not(.est-visible) .si-encadre__texte span { opacity: 0; translate: 0 10px; }
.si-encadre .btn-plaque { margin-top: var(--e-5); }
.si-encadre--sombre { border-color: rgba(224, 189, 142, 0.55); box-shadow: inset 0 4px 0 -3px rgba(224, 189, 142, 0.55), inset 0 -4px 0 -3px rgba(224, 189, 142, 0.55); }
.si-encadre--sombre .si-encadre__texte { font-style: italic; color: var(--or-clair); }

/* Éléments communs des maquettes (illustrations, cachées aux lecteurs d'écran) */
.si-mq-nav { display: flex; align-items: center; gap: 0.9em; padding: 0.55em 0.9em; border-bottom: 1px solid var(--lin); font-size: 0.8125rem; color: var(--taupe); }
.si-mq-nav b { margin-right: auto; font: 600 1.05em / 1 var(--f-titre); letter-spacing: 0.02em; color: var(--petrole); }
.si-mq-nav--tel { padding: 0.6em 0.8em; }
.si-mq-burger { width: 16px; height: 10px; border-block: 2px solid var(--petrole); position: relative; }
.si-mq-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: var(--petrole); }
.si-mq-bouton { display: inline-flex; align-items: center; justify-content: center; padding: 0.5em 0.9em; border: 1px solid var(--petrole); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--petrole); white-space: nowrap; }
.si-mq-bouton--plein { border-color: var(--cuivre); background: var(--cuivre); color: #fff; }

/* Bouton rond lecture / pause (vidéo du haut) */
.si-lecture {
  flex: none; display: none; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(224, 189, 142, 0.6); border-radius: 50%;
  background: rgba(2, 24, 24, 0.6); color: var(--or-clair); cursor: pointer; backdrop-filter: blur(6px);
  transition: background-color var(--d) var(--ease-sortie);
}
.js .si-lecture { display: grid; }
.si-lecture svg { width: 20px; height: 20px; fill: currentColor; }
.si-lecture__pause { display: none; }
.est-en-lecture .si-lecture__pause { display: block; }
.est-en-lecture .si-lecture__lire { display: none; }
.si-lecture:hover { background: var(--petrole); }
.si-lecture:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d'Ariane clair, bande pétrole pleine largeur, texte dessous
   -------------------------------------------------------------------------- */
body:has(.si-haut) .entete__fond { opacity: 1; }   /* barre du haut avec son fond dès le départ */
.si-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.si-haut__ariane .si-ariane { margin: 0; padding-block: 0.9rem; }
.si-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--taupe); }
.si-ariane a { color: inherit; text-underline-offset: 3px; }
.si-ariane [aria-current] { color: var(--encre); }

.si-haut__bandeau { position: relative; background: var(--petrole-900); }
.si-haut__video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; background: var(--petrole-900) url("../img/videos/creation-site-internet-avocat-notaire-justicomm-nice.webp?v=2") center / cover no-repeat; }
@media (max-width: 47.99em) and (orientation: portrait) { .si-haut__video { aspect-ratio: 1080 / 1350; object-fit: contain; background-image: url("../img/videos/creation-site-internet-avocat-notaire-justicomm-nice-telephone.webp?v=2"); } }   /* au téléphone : version verticale, jamais recadrée */
.si-haut__bouton { position: absolute; top: 1rem; right: 1rem; }

.si-haut__texte { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.si-haut__titre { margin: 0; font-family: var(--f-titre); font-weight: 500; color: var(--petrole); }
.si-haut__sur { display: flex; flex-wrap: wrap; margin-bottom: var(--e-4); font-size: 1rem; letter-spacing: 0.2em; line-height: 1.5; color: var(--texte-doux); }
.si-haut__phrase { display: block; font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem); line-height: 1.08; text-wrap: pretty; }
.si-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.si-haut__intro { margin-top: var(--e-3); max-width: none; font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.si-haut .si-actions { margin-top: var(--e-5); gap: 12px 18px; }
.si-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.si-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.si-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
.si-professions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: var(--e-3) 0 0; list-style: none; border-top: 1px solid var(--lin); font-size: 0.9375rem; }
.si-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.si-professions a:hover, .si-professions a:focus-visible { color: var(--petrole); }

/* --------------------------------------------------------------------------
   2. Un site qui présente votre valeur : quatre questions et parcours sur téléphone
   -------------------------------------------------------------------------- */
.si-valeur__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .si-valeur__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.si-valeur__texte > .si-texte:first-child { margin-top: 0; }
.si-questions { display: grid; gap: var(--e-4); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.si-questions li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.si-questions__num { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--or-400); border-radius: 50%; font: 600 1.25rem / 1 var(--f-titre); color: var(--or-texte); background: var(--papier); }
.si-questions p { margin: 0.35rem 0 0; font-size: var(--t-corps); line-height: 1.55; color: var(--texte); }
.si-questions strong { display: block; font: 600 clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem) / 1.25 var(--f-titre); color: var(--petrole); }
.si-texte--note { margin-top: var(--e-5); font-style: italic; }


/* --------------------------------------------------------------------------
   3. Un site adapté à votre profession : un site de démonstration par métier, en onglets
   (sans JavaScript, les six panneaux s'affichent à la suite)
   -------------------------------------------------------------------------- */
.si-metiers .si-tete .si-texte { margin-top: var(--e-4); }
.si-sel__onglets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.si-sel__onglets[hidden] { display: none; }
.si-sel__onglet {
  min-height: 44px; padding: 0.55rem 1.15rem; border: 1px solid #D6CFC1; border-radius: 999px; background: #fff;
  font: 500 1rem / 1.2 var(--f-texte); color: var(--petrole); cursor: pointer;
  transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie), border-color var(--d) var(--ease-sortie);
}
.si-sel__onglet:hover { border-color: var(--petrole); }
.si-sel__onglet[aria-selected="true"] { border-color: var(--petrole); background: var(--petrole); color: var(--creme); }
.si-sel__onglet:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.si-sel__panneau { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.si-sel__panneau + .si-sel__panneau { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--lin); }
.est-onglets .si-sel__panneau + .si-sel__panneau { margin-top: 0; padding-top: 0; border-top: 0; }
.si-sel__panneau[hidden] { display: none; }
@media (min-width: 60em) { .si-sel__panneau { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.est-onglets .si-sel__panneau:not([hidden]) .si-demo { animation: si-arrive 520ms var(--ease-sortie) both; }
.est-onglets .si-sel__panneau:not([hidden]) .si-sel__texte { animation: si-arrive 520ms var(--ease-sortie) 90ms both; }
@keyframes si-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

/* Site de démonstration (navigateur) */
.si-demo { overflow: hidden; border-radius: 10px; background: var(--papier); box-shadow: var(--ombre-panneau), 0 0 0 1px #D6CFC1; font-size: clamp(0.75rem, 0.55rem + 0.5vw, 0.9375rem); }
.si-demo__barre { display: flex; align-items: center; gap: 6px; padding: 0.6em 0.9em; background: #E7E1D6; }
.si-demo__barre i { width: 0.65em; height: 0.65em; border-radius: 50%; background: #CFC6B6; }
.si-demo__barre span { flex: 1; min-width: 0; margin-left: 0.6em; padding: 0.25em 0.9em; border-radius: 999px; background: var(--papier); font-size: 0.9em; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-demo__nav { display: flex; align-items: center; gap: 1.4em; padding: 0.9em 1.6em; border-bottom: 1px solid var(--lin); font-size: 0.92em; color: var(--taupe); }
.si-demo__nav b { margin-right: auto; font: 600 1.3em / 1 var(--f-titre); color: var(--petrole); white-space: nowrap; }
.si-demo__espace { padding: 0.35em 0.8em; background: var(--petrole); color: var(--creme); }
.si-demo__une { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4em; align-items: center; padding: 1.6em; }
.si-demo__sur { margin: 0; font-size: 0.82em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-texte); }
.si-demo__titre { margin: 0.4em 0 0; font: 500 1.9em / 1.1 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.si-demo__bouton { display: inline-flex; margin-top: 1.2em; padding: 0.65em 1.1em; background: var(--cuivre); font-size: 0.9em; color: #fff; }
.si-demo__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: radial-gradient(ellipse 60% 70% at 70% 40%, var(--or-400), transparent 70%), linear-gradient(135deg, var(--petrole-600), var(--petrole)); }
.si-demo__photo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 22px); }
.si-demo__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.si-demo__puces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8em; padding: 0 1.6em 1.6em; }
.si-demo__puces span { padding: 0.9em 1em; border: 1px solid var(--lin); border-top: 2px solid var(--or-400); background: #fff; font: 600 1.05em / 1.2 var(--f-titre); color: var(--petrole); }
.si-demo__pied { padding: 0.8em 1.6em; border-top: 1px solid var(--lin); background: var(--creme); font-size: 0.85em; color: var(--taupe); }

.si-metier__titre { margin: 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem) / 1.2 var(--f-titre); }
.si-metier__titre a { color: var(--petrole); text-decoration: none; background: linear-gradient(var(--or-400), var(--or-400)) 0 100% / 0 1px no-repeat; transition: background-size var(--d) var(--ease-sortie); }
.si-metier__titre a:hover, .si-metier__titre a:focus-visible { background-size: 100% 1px; }
.si-metier__role { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }
.si-metier__label { margin: var(--e-5) 0 var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--lin); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-texte); }
.si-metier__plus { margin: var(--e-4) 0 0; font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--petrole); }
.si-sel .si-coches li::before { scale: 1; opacity: 1; }

/* --------------------------------------------------------------------------
   4. Ce que nous construisons : six blocs à pictogramme
   -------------------------------------------------------------------------- */
.si-blocs { display: grid; gap: var(--e-5); }
@media (min-width: 44em) { .si-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .si-blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.si-bloc { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--papier); border: 1px solid #D6CFC1; }
.si-bloc__icone { width: 44px; height: 44px; fill: none; stroke: var(--cuivre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.si-bloc__icone path, .si-bloc__icone rect, .si-bloc__icone circle { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-douce) 200ms; }
.js [data-reveal]:not(.est-visible) .si-bloc__icone path,
.js [data-reveal]:not(.est-visible) .si-bloc__icone rect,
.js [data-reveal]:not(.est-visible) .si-bloc__icone circle { stroke-dashoffset: 1; }
.si-bloc__icone * { vector-effect: non-scaling-stroke; }
.si-bloc__titre { margin: var(--e-4) 0 0; font: 500 clamp(1.3125rem, 1.2rem + 0.35vw, 1.5rem) / 1.22 var(--f-titre); color: var(--petrole); }
.si-bloc p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--texte); }
.si-bloc__lien { display: inline-flex; align-items: flex-start; gap: 0.5rem; margin-top: auto; padding-top: var(--e-4); font-size: 1rem; line-height: 1.45; color: var(--petrole); text-underline-offset: 3px; }
.si-bloc__lien svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.2em; fill: none; stroke: currentColor; stroke-width: 1.6; transition: translate var(--d) var(--ease-sortie); }
.si-bloc__lien:hover svg { translate: 4px 0; }
.si-construit .si-actions--centre { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   5. WordPress ou site statique
   -------------------------------------------------------------------------- */
.si-choix__grille { display: grid; gap: var(--e-6); }
@media (min-width: 52em) { .si-choix__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.si-option { display: flex; flex-direction: column; }
.si-option__visuel { position: relative; display: grid; place-items: center; height: clamp(12rem, 22vw, 15rem); margin-bottom: var(--e-5); overflow: hidden; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(224, 189, 142, 0.18), transparent 70%), var(--petrole-profond); }
.si-option__titre { margin: 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem) / 1.2 var(--f-titre); color: var(--petrole); }
.si-option > p { margin: var(--e-3) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }

.si-editeur { align-content: center; justify-items: center; padding-inline: var(--e-5); }
.si-editeur > p { width: min(24rem, 100%); }
.si-editeur > p { margin: 0; }
.si-editeur__barre { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.6rem 0.45rem 0.75rem; background: #1D2A2A; font-size: 0.75rem; line-height: 1.2; color: var(--creme-doux); }
.si-editeur__barre b { padding: 0.25rem 0.6rem; background: var(--cuivre); font-weight: 500; color: #fff; transition: background-color 300ms ease 2s; }
.si-editeur__champ { display: grid; gap: 6px; padding: 0.75rem; background: var(--papier); border-inline: 1px solid #D6CFC1; }
.si-editeur__champ i { height: 5px; border-radius: 3px; background: var(--lin); }
.si-editeur__champ i.court { width: 60%; }
.si-editeur__champ--titre { display: block !important; font: 600 1.125rem / 1.2 var(--f-titre); color: var(--petrole); border-top: 1px solid #D6CFC1; box-shadow: inset 2px 0 0 var(--or); }
.si-editeur__champ--titre::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--petrole); animation: si-clignote 1s steps(1) 4; }
@keyframes si-clignote { 50% { opacity: 0; } }
.si-editeur__photo { height: 2.75rem; background: linear-gradient(135deg, var(--sauge), var(--petrole-600)); border: 1px solid #D6CFC1; border-top: 0; }
.si-editeur__crayon { position: absolute; right: 18%; top: 34%; width: 34px; height: 34px; fill: var(--or-clair); stroke: var(--petrole-profond); stroke-width: 1.2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); transition: translate 1.4s var(--ease-douce) 300ms; }
.js .si-option:not(.est-visible) .si-editeur__crayon { translate: 40px -30px; }

.si-pile { perspective: 600px; }
.si-pile__page { position: absolute; width: 42%; height: 62%; border: 1px solid #D6CFC1; background: var(--papier); box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.6); transition: translate 900ms var(--ease-sortie), rotate 900ms var(--ease-sortie); }
.si-pile__page:nth-child(1) { translate: -18% -6%; rotate: -6deg; opacity: 0.7; }
.si-pile__page:nth-child(2) { translate: -8% -2%; rotate: -2deg; opacity: 0.85; }
.si-pile__page:nth-child(3) { display: grid; align-content: start; gap: 6px; padding: 1rem; translate: 4% 2%; rotate: 2deg; }
.si-pile__page i { height: 5px; border-radius: 3px; background: var(--lin); }
.si-pile__page i:first-child { height: 9px; width: 70%; background: var(--petrole); }
.si-pile__page i.court { width: 50%; }
.js .si-option:not(.est-visible) .si-pile__page { translate: 0 0; rotate: 0deg; }
.si-pile__eclair { position: absolute; right: 22%; top: 18%; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--or); fill: var(--petrole-profond); box-shadow: 0 0 0 8px rgba(224, 189, 142, 0.2); transition: scale 500ms var(--ease-sortie) 700ms; }
.js .si-option:not(.est-visible) .si-pile__eclair { scale: 0; }

/* --------------------------------------------------------------------------
   6. La preuve : « radiographie » du site de JustiComm
   -------------------------------------------------------------------------- */
.si-preuve__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .si-preuve__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.si-radio { position: relative; width: min(30rem, 100%); margin-inline: auto; }
.si-radio__page { display: grid; gap: 0.6rem; padding: 0.75rem; border: 1px solid rgba(224, 189, 142, 0.4); background: rgba(238, 234, 225, 0.04); background-image: linear-gradient(rgba(224, 189, 142, 0.07) 1px, transparent 1px); background-size: 100% 22px; }
.si-radio__barre { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 1px dashed rgba(224, 189, 142, 0.45); }
.si-radio__barre b { margin-right: auto; font: 600 0.9375rem / 1 var(--f-titre); color: var(--or-clair); letter-spacing: 0.04em; }
.si-radio__barre i { width: 2.25rem; height: 4px; border-radius: 2px; background: rgba(224, 189, 142, 0.35); }
.si-radio__une { display: grid; gap: 6px; padding: 1rem 0.75rem; border: 1px dashed rgba(224, 189, 142, 0.45); }
.si-radio__une p { height: 8px; margin: 0; border-radius: 4px; background: rgba(238, 234, 225, 0.4); }
.si-radio__une p.court { width: 60%; height: 6px; background: rgba(238, 234, 225, 0.22); }
.si-radio__une span { width: 6.5rem; height: 1.2rem; margin-top: 0.4rem; background: rgba(176, 99, 57, 0.75); }
.si-radio__blocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.si-radio__blocs i { height: 3.25rem; border: 1px dashed rgba(224, 189, 142, 0.35); }
.si-radio__plan { height: 4.5rem; border: 1px dashed rgba(224, 189, 142, 0.45); background: repeating-linear-gradient(35deg, transparent 0 12px, rgba(224, 189, 142, 0.12) 12px 13px), repeating-linear-gradient(-55deg, transparent 0 18px, rgba(224, 189, 142, 0.1) 18px 19px); }
.si-radio__pied { display: flex; gap: 0.75rem; padding: 0.6rem; border: 1px dashed rgba(224, 189, 142, 0.45); }
.si-radio__pied i { flex: 1; height: 4px; border-radius: 2px; background: rgba(224, 189, 142, 0.35); }
.si-radio__mobile { display: flex; justify-content: flex-end; gap: 0.4rem; }
.si-radio__mobile span { padding: 0.3rem 0.65rem; background: linear-gradient(180deg, var(--or-clair), var(--or)); font-size: 0.75rem; font-weight: 500; color: var(--petrole-profond); }
.si-repere {
  position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--or); font: 600 0.8125rem / 1 var(--f-texte); color: var(--petrole-profond);
  box-shadow: 0 0 0 5px rgba(224, 189, 142, 0.22); translate: -50% -50%;
  transition: scale 420ms var(--ease-sortie) calc(var(--i) * 260ms + 200ms), opacity 420ms var(--ease-sortie) calc(var(--i) * 260ms + 200ms);
}
.js .si-radio:not(.est-visible) .si-repere { scale: 0.2; opacity: 0; }

.si-preuves { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; counter-reset: si-preuve; }
.si-preuves li { position: relative; padding: 0.15rem 0 var(--e-3) 2.75rem; border-bottom: 1px solid rgba(224, 189, 142, 0.18); font-size: var(--t-corps); line-height: 1.5; color: var(--creme-doux); counter-increment: si-preuve; }
.si-preuves li::before { content: counter(si-preuve); position: absolute; left: 0; top: 0.05rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--or); border-radius: 50%; font: 600 0.8125rem / 1 var(--f-texte); color: var(--or-clair); }
.si-preuves strong { font-weight: 500; color: var(--creme); }

/* --------------------------------------------------------------------------
   7. Refonte : avant, adresses redirigées, après
   -------------------------------------------------------------------------- */
.si-refonte__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .si-refonte__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.si-refonte .si-tete { margin-bottom: var(--e-5); }
.si-refonte .si-texte:first-child { margin-top: 0; }
.si-avap { display: grid; gap: var(--e-4); width: min(28rem, 100%); margin-inline: auto; }
.si-avap__site { position: relative; padding: 2.1rem 0.9rem 0.9rem; border: 1px solid #D6CFC1; background: #fff; box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(2, 24, 24, 0.3); transition: opacity 600ms var(--ease-sortie), translate 600ms var(--ease-sortie); }
.si-avap__etiquette { position: absolute; left: 0.9rem; top: 0.6rem; margin: 0; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); }
.si-avap__site--apres .si-avap__etiquette { color: var(--or-texte); }
.si-vieux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; filter: grayscale(1); opacity: 0.75; }
.si-vieux i { height: 6px; background: #C9C2B6; }
.si-vieux i.l { grid-column: 1 / -1; }
.si-vieux i.b { height: 1.75rem; background: repeating-linear-gradient(45deg, #D9D3C8 0 5px, #CFC8BB 5px 10px); }
.si-vieux i.p { grid-column: 1 / -1; height: 2.25rem; background: #DAD4C9; }
.si-vieux i.court { grid-column: 1 / 3; }
.si-neuf { display: grid; gap: 6px; padding: 0.75rem; border-top: 2px solid var(--or-400); background: var(--papier); }
.si-neuf b { font: 600 0.9375rem / 1 var(--f-titre); color: var(--petrole); }
.si-neuf .t { margin: 0.2rem 0 0.1rem; font: 500 1.125rem / 1.1 var(--f-titre); color: var(--petrole); }
.si-neuf i { height: 5px; border-radius: 3px; background: var(--lin); }
.si-neuf i.court { width: 60%; }
.si-neuf span { justify-self: start; margin-top: 0.3rem; padding: 0.35rem 0.7rem; background: var(--cuivre); font-size: 0.75rem; color: #fff; }
.si-redir { display: grid; gap: 0.4rem; }
.si-redir p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; font-size: 0.8125rem; color: var(--taupe); transition: opacity 500ms var(--ease-sortie) 500ms, translate 500ms var(--ease-sortie) 500ms; }
.si-redir p + p { transition-delay: 750ms; }
.si-redir code { padding: 0.2rem 0.5rem; border: 1px solid #D6CFC1; background: var(--creme); font: 0.8125rem / 1.2 ui-monospace, "SF Mono", Menlo, monospace; color: var(--encre); }
.si-redir code:last-child { border-color: var(--or-400); background: #fff; color: var(--petrole); }
.si-redir span { color: var(--cuivre); font-weight: 600; }
.si-avap__site--apres { transition-delay: 1s; }
.js .si-avap:not(.est-visible) .si-redir p { opacity: 0; translate: -10px 0; }
.js .si-avap:not(.est-visible) .si-avap__site--apres { opacity: 0; translate: 0 14px; }

/* --------------------------------------------------------------------------
   8. Visibilité : deux cartes
   -------------------------------------------------------------------------- */
.si-visi__grille { display: grid; gap: var(--e-5); }
@media (min-width: 52em) { .si-visi__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.si-visi__carte { padding: clamp(1.5rem, 2.5vw, 2rem); background: var(--papier); border: 1px solid #D6CFC1; border-left: 2px solid var(--or-400); }
.si-visi__carte p { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--texte); }
.si-visi__carte a { color: var(--petrole); font-weight: 500; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   9. Comment se déroule votre projet : cinq étapes
   -------------------------------------------------------------------------- */
.si-etapes { display: grid; gap: var(--e-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 44em) { .si-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .si-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4); } }
.si-etape { padding: clamp(1.5rem, 2.5vw, 1.75rem); border: 1px solid rgba(224, 189, 142, 0.3); border-top: 2px solid var(--or); background: rgba(238, 234, 225, 0.04); transition: translate var(--d) var(--ease-sortie), background-color var(--d) var(--ease-sortie); }
.si-etape:hover { translate: 0 -3px; background: rgba(238, 234, 225, 0.07); }
.si-etape__num { display: block; font: 600 clamp(2.75rem, 2.4rem + 1vw, 3.5rem) / 1 var(--f-titre); font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1px var(--or); }
.si-etape__titre { margin: var(--e-4) 0 0; font: 500 1.375rem / 1.2 var(--f-titre); color: var(--creme); }
.si-etape p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--creme-doux); }
.si-etapes .si-etape:nth-child(2) { transition-delay: 0s; }
.js .si-etapes .si-etape[data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js .si-etapes .si-etape[data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js .si-etapes .si-etape[data-reveal]:nth-child(4) { transition-delay: 240ms; }
.js .si-etapes .si-etape[data-reveal]:nth-child(5) { transition-delay: 320ms; }

/* --------------------------------------------------------------------------
   10. Tarifs : trois niveaux
   -------------------------------------------------------------------------- */
.si-offres { display: grid; gap: var(--e-5); align-items: stretch; }
@media (min-width: 64em) { .si-offres { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr); } }
.si-offre { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.25rem); border: 1px solid #D6CFC1; border-top: 2px solid var(--or-400); background: #fff; }
.si-offre__nom { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.si-offre__prix { margin: var(--e-4) 0 0; font: 500 clamp(1.875rem, 1.6rem + 0.9vw, 2.375rem) / 1.1 var(--f-titre); color: var(--petrole); font-variant-numeric: lining-nums; }
.si-offre__prix span { display: block; margin-bottom: 0.2rem; font: 400 0.875rem / 1.3 var(--f-texte); letter-spacing: 0.12em; text-transform: uppercase; color: var(--or-texte); }
.si-offre__phrase { margin: var(--e-3) 0 var(--e-5); font: italic 500 1.1875rem / 1.4 var(--f-titre); color: var(--titre); }
.si-offre .si-coches { padding-top: var(--e-5); border-top: 1px solid var(--lin); }
.si-offre .si-coches li { font-size: 1rem; }
.si-offre--forte { border-color: var(--petrole); border-top-color: var(--or); background: var(--petrole-profond); box-shadow: var(--ombre-panneau); }
.si-offre--forte .si-offre__nom, .si-offre--forte .si-offre__prix { color: var(--creme); }
.si-offre--forte .si-offre__prix span { color: var(--or-clair); }
.si-offre--forte .si-offre__phrase { color: var(--or-clair); }
.si-offre--forte .si-coches { border-top-color: rgba(224, 189, 142, 0.25); }
.si-offre--forte .si-coches li { color: var(--creme-doux); }
.si-offre--forte .si-coches li::before { background: var(--or); color: var(--petrole-profond); }
.si-conditions { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }
.si-conditions p { margin: var(--e-2) 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--texte); }
.si-conditions strong { font-weight: 500; color: var(--petrole); }
.si-conditions__fort { margin-top: var(--e-4) !important; font: italic 500 clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem) / 1.35 var(--f-titre) !important; color: var(--petrole) !important; }
.si-tarifs .si-actions--centre { margin-top: var(--e-6); }

/* --------------------------------------------------------------------------
   12. L'agence : double compétence
   -------------------------------------------------------------------------- */
.si-agence { overflow-x: clip; }
.si-agence__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .si-agence__grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.si-agence .si-tete { margin-bottom: var(--e-4); }
.si-duo { position: relative; width: min(22rem, 100%); aspect-ratio: 1.6; margin-inline: auto; }
.si-duo__cercle {
  position: absolute; top: 50%; display: grid; place-items: center; width: 62%; aspect-ratio: 1; border-radius: 50%;
  font: italic 500 clamp(1.125rem, 1rem + 0.4vw, 1.375rem) / 1 var(--f-titre); color: var(--petrole);
  translate: 0 -50%; transition: translate 1s var(--ease-sortie);
}
.si-duo__cercle--droit { left: 0; border: 1px solid var(--petrole); background: rgba(10, 57, 58, 0.06); padding-right: 22%; }
.si-duo__cercle--comm { right: 0; border: 1px solid var(--or-400); background: rgba(224, 189, 142, 0.16); padding-left: 22%; }
.si-duo__coeur { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 7px rgba(176, 99, 57, 0.18); translate: -50% -50%; transition: scale 500ms var(--ease-sortie) 900ms; }
.js .si-duo:not(.est-visible) .si-duo__cercle--droit { translate: -18% -50%; }
.js .si-duo:not(.est-visible) .si-duo__cercle--comm { translate: 18% -50%; }
.js .si-duo:not(.est-visible) .si-duo__coeur { scale: 0; }

/* --------------------------------------------------------------------------
   13. Appel final : texte calé à gauche, cercles dorés à droite
   -------------------------------------------------------------------------- */
.si-final { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: radial-gradient(ellipse 50% 80% at 80% 50%, rgba(224, 189, 142, 0.14), transparent 70%), var(--petrole-profond); }
.si-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 80% 50%, transparent 0 56px, rgba(224, 189, 142, 0.09) 57px 58px);
  -webkit-mask-image: radial-gradient(ellipse 42% 75% at 80% 50%, #000 0, transparent 100%);
  mask-image: radial-gradient(ellipse 42% 75% at 80% 50%, #000 0, transparent 100%);
}
.si-final__contenu { position: relative; }
.si-final__repere { display: block; width: 16px; height: 16px; margin: 0 0 var(--e-5); border-radius: 50%; background: var(--cuivre); box-shadow: 0 0 0 8px rgba(176, 99, 57, 0.18), 0 0 40px rgba(224, 189, 142, 0.6); }
.si-final .titre-section { max-width: 34ch; color: var(--creme); font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.375rem); }
.si-final__texte { max-width: 44rem; margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }

/* --------------------------------------------------------------------------
   14. Tablette et téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 59.99em) {
  .si-demo__nav span:not(.si-demo__espace) { display: none; }
}
@media (max-width: 39.99em) {
  .si-actions .btn--grand, .si-actions .btn-cartouche, .si-actions .btn-plaque { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .si-demo { font-size: 0.75rem; }
  .si-demo__une { grid-template-columns: minmax(0, 1fr); }
  .si-demo__photo { order: -1; aspect-ratio: 16 / 9; }
  .si-demo__titre { font-size: 1.75em; }
  .si-demo__puces span { padding: 0.7em 0.6em; font-size: 0.95em; }
  .si-demo__espace { display: none; }
  .si-sel__onglets { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--marge)); padding: 2px var(--marge) 6px; scroll-padding-inline: var(--marge); scrollbar-width: none; }
  .si-sel__onglets::-webkit-scrollbar { display: none; }
  .si-sel__onglet { flex: none; padding-inline: 1rem; font-size: 0.9375rem; white-space: nowrap; }
  .si-questions li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--e-3); }
  .si-questions__num { width: 2.25rem; height: 2.25rem; }
  .si-repere { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }
  .si-encadre { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   15. Moins d'animations : état final immédiat
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .si *, .si *::before, .si *::after { animation: none !important; transition: none !important; }
  .si-metier:hover, .si-etape:hover { translate: none; }
}

/* --------------------------------------------------------------------------
   16. Photos (23/10/2026) : sites de démonstration et appel final sur photo assombrie
   -------------------------------------------------------------------------- */
.si-demo[data-metier="avocats"] .si-demo__photo img { object-position: 55% 50%; }
.si-demo[data-metier="notaires"] .si-demo__photo img { object-position: 70% 50%; }
.si-demo[data-metier="cj"] .si-demo__photo img { object-position: 78% 40%; }
.si-demo[data-metier="cpi"] .si-demo__photo img { object-position: 50% 45%; }
.si-demo[data-metier="comptables"] .si-demo__photo img { object-position: 72% 50%; }
.si-demo[data-metier="syndics"] .si-demo__photo img { object-position: 82% 55%; }

.si-final__fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.si-final:has(.si-final__fond)::before {
  z-index: 1; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(90deg, rgba(2, 24, 24, 0.94) 0%, rgba(2, 24, 24, 0.82) 34%, rgba(2, 24, 24, 0.3) 58%, transparent 74%);
}
.si-final:has(.si-final__fond) .si-final__contenu { z-index: 2; max-width: 38rem; margin-left: 0; }
@media (min-width: 75em) {
  .si-final:has(.si-final__fond) { display: flex; align-items: center; min-height: clamp(32rem, 40vw, 40rem); }
  .si-final:has(.si-final__fond) > .si-final__contenu { width: 100%; }
}
@media (max-width: 74.99em) {
  .si-final:has(.si-final__fond) { padding-top: 0; }
  .si-final__fond { position: relative; display: block; height: clamp(15rem, 48vw, 28rem); object-position: 62% 50%; }
  .si-final:has(.si-final__fond)::before { display: none; }
  .si-final:has(.si-final__fond) .si-final__contenu { margin-top: var(--e-7); max-width: none; }
}

/* --------------------------------------------------------------------------
   17. Site de démonstration et maquette offerte (23/10/2026)
   -------------------------------------------------------------------------- */
.si-haut__demo { margin: var(--e-4) 0 0; }
.si-haut__demo a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 1.0625rem; font-weight: 500; color: var(--petrole); text-underline-offset: 4px; }
.si-haut__demo svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: translate var(--d) var(--ease-sortie); }
.si-haut__demo a:hover svg { translate: 4px 0; }
.si-sel__visite { margin-top: var(--e-5); }

.si-maquette { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 5.5rem); background: radial-gradient(ellipse 50% 80% at 85% 50%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole-profond); }
.si-maquette__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60em) { .si-maquette__grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.si-maquette .titre-section { color: var(--creme); }
.si-maquette .si-chapo { color: var(--creme); }
.si-croquis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: min(24rem, 100%); margin-inline: auto; padding: 1.1rem; border: 1px solid rgba(224, 189, 142, 0.45); background: rgba(238, 234, 225, 0.04); }
.si-croquis__titre { grid-column: 1 / -1; margin: 0 0 0.2rem; font: italic 500 1.125rem / 1.2 var(--f-titre); color: var(--or-clair); }
.si-croquis__bloc { min-height: 3.25rem; border: 1.5px dashed rgba(224, 189, 142, 0.7); transition: opacity 500ms var(--ease-sortie) calc(var(--i) * 140ms), translate 500ms var(--ease-sortie) calc(var(--i) * 140ms), background-color 600ms ease calc(var(--i) * 140ms + 500ms), border-style 0s linear calc(var(--i) * 140ms + 500ms); }
.si-croquis__bloc--nav, .si-croquis__bloc--pied { grid-column: 1 / -1; min-height: 1.6rem; }
.si-croquis__bloc--une { grid-column: 1 / 3; display: grid; align-content: center; gap: 6px; padding: 0.7rem; min-height: 7rem; }
.si-croquis__bloc--une i { height: 7px; border-radius: 4px; background: rgba(238, 234, 225, 0.55); }
.si-croquis__bloc--une i + i { width: 70%; height: 5px; background: rgba(238, 234, 225, 0.3); }
.si-croquis__bloc--une b { justify-self: start; margin-top: 0.35rem; padding: 0.3rem 0.55rem; background: var(--cuivre); font-size: 0.75rem; font-weight: 500; color: #fff; }
.si-croquis__bloc--photo { min-height: 7rem; }
.si-croquis.est-visible .si-croquis__bloc { border-style: solid; background-color: rgba(238, 234, 225, 0.08); }
.si-croquis.est-visible .si-croquis__bloc--photo { background: linear-gradient(135deg, rgba(224, 189, 142, 0.55), rgba(32, 80, 81, 0.9)); }
.js .si-croquis:not(.est-visible) .si-croquis__bloc { opacity: 0; translate: 0 10px; }

/* --------------------------------------------------------------------------
   18. Site de démonstration intégré dans la page (23/10/2026) : écran d'ordinateur ou téléphone, plein écran
   -------------------------------------------------------------------------- */
.si-vivant__commandes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: var(--e-4); }
.si-vivant__vues { display: inline-flex; padding: 4px; border: 1px solid #D6CFC1; border-radius: 999px; background: #fff; }
.si-vivant__vues button, .si-vivant__plein, .si-vivant__fermer {
  min-height: 42px; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px; background: transparent;
  font: 500 0.9375rem / 1.2 var(--f-texte); color: var(--petrole); cursor: pointer;
}
.si-vivant__vues button[aria-pressed="true"] { background: var(--petrole); color: var(--creme); }
.si-vivant__plein { border: 1px solid var(--petrole); }
.si-vivant__plein::before { content: "⤢"; margin-right: 0.45rem; }
.si-vivant__vues button:focus-visible, .si-vivant__plein:focus-visible, .si-vivant__fermer:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.si-vivant__appareil { position: relative; margin-inline: auto; overflow: hidden; border-radius: 14px; background: #E7E1D6; box-shadow: var(--ombre-panneau), 0 0 0 1px #D6CFC1; transition: max-width 450ms var(--ease-sortie), border-radius 450ms var(--ease-sortie); max-width: 100%; }
.si-vivant__barre { display: flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; }
.si-vivant__barre i { width: 10px; height: 10px; border-radius: 50%; background: #CFC6B6; }
.si-vivant__barre span { flex: 1; margin-left: 0.6rem; padding: 0.25rem 0.9rem; border-radius: 999px; background: var(--papier); font-size: 0.8125rem; color: var(--taupe); }
.si-vivant__ecran { position: relative; height: min(78vh, 46rem); background: #FAF7F2; }
.si-vivant__ecran iframe { display: block; width: 100%; height: 100%; border: 0; }
.si-vivant__attente { display: grid; place-items: center; height: 100%; margin: 0; padding: 2rem; text-align: center; color: var(--taupe); }
.si-vivant__attente a { color: var(--petrole); }
.si-vivant__fermer { display: none; }

/* Vue téléphone */
.si-vivant.est-telephone .si-vivant__appareil { max-width: 25rem; padding: 12px; border-radius: 42px; background: #0B1414; }
.si-vivant.est-telephone .si-vivant__barre { display: none; }
.si-vivant.est-telephone .si-vivant__ecran { height: min(80vh, 50rem); overflow: hidden; border-radius: 30px; }

/* Plein écran, sans quitter la page */
.si-sans-defilement { overflow: hidden; }
.si-vivant.est-plein .si-vivant__appareil { position: fixed; inset: 0; z-index: 1000; max-width: none; margin: 0; padding: 0; border-radius: 0; background: var(--petrole-profond); display: flex; flex-direction: column; }
.si-vivant.est-plein .si-vivant__barre { display: none; }
.si-vivant.est-plein .si-vivant__ecran { flex: 1; height: auto; border-radius: 0; }
.si-vivant.est-plein .si-vivant__fermer { display: inline-flex; position: absolute; left: 1rem; bottom: 1rem; z-index: 2; background: var(--petrole-profond); color: var(--creme); border: 1px solid var(--or); box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0, 0, 0, 0.5); }
.si-vivant.est-plein .si-vivant__fermer:focus-visible { outline-color: var(--or); }

/* Au téléphone : le site s'affiche déjà en version mobile, pas de choix de vue */
@media (max-width: 47.99em) {
  .si-vivant__vues { display: none; }
  .si-vivant__commandes { justify-content: flex-end; }
  .si-vivant__ecran { height: min(72vh, 40rem); }
}

/* --------------------------------------------------------------------------
   19. Avec chaque site / selon votre devis ; formulaire « Décrivez votre projet » (23/10/2026)
   -------------------------------------------------------------------------- */
.si-inclus { display: grid; gap: var(--e-5); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 52em) { .si-inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.si-inclus__colonne { padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid #D6CFC1; background: var(--papier); }
.si-inclus__titre { margin: 0 0 var(--e-4); font: 500 clamp(1.3125rem, 1.2rem + 0.35vw, 1.5rem) / 1.2 var(--f-titre); color: var(--petrole); }
.si-inclus .si-coches li { font-size: 1.0625rem; }

.si-projet-form__grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60em) { .si-projet-form__grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .si-projet-form__tete { position: sticky; top: calc(var(--h-entete) + 2rem); } }
.si-projet-form__contact { display: grid; gap: 0.4rem; margin: var(--e-5) 0 0; padding: 0; list-style: none; font-size: 1.0625rem; color: var(--texte); }
.si-projet-form__contact a { color: var(--petrole); font-weight: 500; text-underline-offset: 3px; }
.si-projet-form .ct-form { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid #D6CFC1; border-top: 2px solid var(--or-400); background: #fff; }
.si-champs { display: grid; gap: 0 var(--e-5); }
@media (min-width: 40em) { .si-champs--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.si-champ { display: grid; gap: 0.35rem; align-content: start; margin: 0 0 var(--e-5); border: 0; padding: 0; }
.si-champ label, .si-champ legend { font-size: 1rem; font-weight: 500; color: var(--petrole); }
.si-facultatif { font-weight: 400; font-size: 0.875rem; color: var(--texte-doux); }
.si-champ input[type="text"], .si-champ input[type="email"], .si-champ input[type="tel"], .si-champ input[type="url"], .si-champ select, .si-champ textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 1px solid #8A8175; border-radius: 2px; background: var(--papier);
  font: inherit; font-size: 1.0625rem; color: var(--encre);
}
.si-champ textarea { min-height: 7rem; resize: vertical; }
.si-champ input:focus-visible, .si-champ select:focus-visible, .si-champ textarea:focus-visible { outline: 2px solid var(--petrole); outline-offset: 1px; border-color: var(--petrole); }
.si-projet-form .si-champ [aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 1px var(--erreur); }
.si-champ ::placeholder { color: var(--texte-doux); opacity: 1; }
.si-champ__erreur { font-size: 0.9375rem; font-weight: 500; color: var(--erreur); }
.si-champ__erreur[hidden] { display: none; }
.si-champs > .si-champ { margin-top: 0; }
.si-choix-projet { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.si-choix-projet legend { width: 100%; margin-bottom: 0.4rem; }
.si-choix-projet label, .si-case label { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 400; font-size: 1.0625rem; color: var(--encre); cursor: pointer; }
.si-choix-projet input, .si-case input { width: 1.15rem; height: 1.15rem; accent-color: var(--petrole); }
.si-projet-form .ct-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.si-projet-form .btn-plaque { margin-top: var(--e-2); }
.si-info { margin: var(--e-4) 0 0; font-size: 0.9375rem; color: var(--texte-doux); }
.si-info a { color: var(--petrole); }
.si-retour { margin: var(--e-4) 0 0; padding: 0.8rem 1rem; border-left: 3px solid var(--succes); background: #EEF4EF; font-weight: 500; color: var(--succes); }
.si-retour[data-erreur] { border-left-color: var(--erreur); background: #F8ECEA; color: var(--erreur); }
@media (max-width: 39.99em) { .si-projet-form .btn-plaque { width: 100%; justify-content: center; } }

/* --------------------------------------------------------------------------
   20. Plus d'humanité (23/10/2026) : mot signé de Raoudha près du formulaire ; chiffres vrais en haut de page
   -------------------------------------------------------------------------- */
.si-mot { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--e-5); align-items: start; margin: var(--e-6) 0 0; padding: var(--e-5); border: 1px solid #D6CFC1; border-left: 2px solid var(--or-400); background: var(--papier); }
.si-mot__photo { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--or-400); }
.si-mot__texte { margin: 0; }
.si-mot__texte p { margin: 0; font: italic 500 clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem) / 1.4 var(--f-titre); color: var(--petrole); }
.si-mot__signature { margin-top: var(--e-3); font-size: 0.9375rem; color: var(--texte-doux); }
.si-mot__nom { display: block; font: 600 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }

.si-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: var(--e-5) 0 0; list-style: none; border-top: 1px solid var(--lin); }
@media (min-width: 60em) { .si-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.si-chiffres li { display: grid; gap: 0.25rem; padding-left: var(--e-4); border-left: 2px solid var(--or-400); }
.si-chiffres strong { font: 500 clamp(1.75rem, 1.45rem + 1vw, 2.375rem) / 1.05 var(--f-titre); font-variant-numeric: lining-nums; color: var(--petrole); white-space: nowrap; }
.si-chiffres span { font-size: 0.9375rem; line-height: 1.4; color: var(--texte-doux); }
@media (max-width: 39.99em) { .si-mot { grid-template-columns: 4.5rem minmax(0, 1fr); padding: var(--e-4); } .si-mot__photo { width: 4.5rem; height: 4.5rem; } }

/* --------------------------------------------------------------------------
   21. Photos humaines (23/10/2026) : haut de page en photo pleine largeur ; vidéo en bande plus bas ;
   personne qui consulte un site sur son téléphone
   -------------------------------------------------------------------------- */
.si-haut__photo { position: relative; height: clamp(24rem, 46vw, 42rem); overflow: hidden; background: var(--petrole-900); }
.si-haut__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
@media (max-width: 47.99em) { .si-haut__photo { height: min(112vw, 34rem); } .si-haut__photo img { object-position: 74% 30%; } }
.si-film { position: relative; }
.si-valeur__photo { position: relative; width: min(24rem, 100%); margin: 0 auto; }
.si-valeur__photo::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--or-400); }
.si-valeur__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: var(--ombre-panneau); }
@media (max-width: 59.99em) { .si-valeur__photo { width: min(20rem, 85%); } .si-valeur__photo::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; } }

/* --------------------------------------------------------------------------
   22. Onglets des professions : photo du professionnel (au lieu d'un mini-site dessiné) (23/10/2026)
   -------------------------------------------------------------------------- */
.si-sel__photo { position: relative; margin: 0; }
.si-sel__photo::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--or-400); }
.si-sel__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--ombre-panneau); }
.si-sel__photo[data-metier="avocats"] img { object-position: 55% 50%; }
.si-sel__photo[data-metier="notaires"] img { object-position: 70% 50%; }
.si-sel__photo[data-metier="cj"] img { object-position: 78% 40%; }
.si-sel__photo[data-metier="cpi"] img { object-position: 50% 45%; }
.si-sel__photo[data-metier="comptables"] img { object-position: 72% 50%; }
.si-sel__photo[data-metier="syndics"] img { object-position: 82% 55%; }
.est-onglets .si-sel__panneau:not([hidden]) .si-sel__photo { animation: si-arrive 520ms var(--ease-sortie) both; }
@media (max-width: 39.99em) { .si-sel__photo::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; } }

/* --------------------------------------------------------------------------
   23. « Votre site et votre visibilité » en images : plan du site (Google) et FAQ reprise par une IA (23/10/2026)
   -------------------------------------------------------------------------- */
.si-visi__visuel { position: relative; display: grid; justify-items: center; align-content: center; min-height: 13rem; margin-bottom: var(--e-4); padding: var(--e-5) var(--e-4); background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(224, 189, 142, 0.14), transparent 70%), var(--petrole-profond); }
.si-arbre__noeud { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.8rem; border: 1px solid var(--or); background: rgba(238, 234, 225, 0.06); font-size: 0.8125rem; color: var(--creme); white-space: nowrap; transition: opacity 450ms var(--ease-sortie), translate 450ms var(--ease-sortie); }
.si-arbre__noeud--racine { background: var(--or); color: var(--petrole-profond); font-weight: 500; }
.si-arbre__tronc { width: 1px; height: 1.25rem; background: var(--or); transition: transform 400ms var(--ease-sortie) 250ms; transform-origin: top; }
.si-arbre__branches { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; padding-top: 1.25rem; }
.si-arbre__branches::before { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; background: var(--or); transition: transform 500ms var(--ease-sortie) 450ms; }
.si-arbre__branches .si-arbre__noeud { position: relative; }
.si-arbre__branches .si-arbre__noeud::before { content: ""; position: absolute; left: 50%; top: calc(-1.25rem - 1px); width: 1px; height: 1.25rem; background: var(--or); }
.si-arbre__branches .si-arbre__noeud:nth-child(1) { transition-delay: 650ms; }
.si-arbre__branches .si-arbre__noeud:nth-child(2) { transition-delay: 800ms; }
.si-arbre__branches .si-arbre__noeud:nth-child(3) { transition-delay: 950ms; }
.si-visi__visuel .si-arbre__legende { margin: var(--e-4) 0 0; font: italic 500 1.0625rem / 1.3 var(--f-titre); color: var(--or-clair); text-align: center; }
.js [data-reveal]:not(.est-visible) .si-arbre__tronc { transform: scaleY(0); }
.js [data-reveal]:not(.est-visible) .si-arbre__branches::before { transform: scaleX(0); }
.js [data-reveal]:not(.est-visible) .si-arbre__branches .si-arbre__noeud { opacity: 0; translate: 0 8px; }

.si-iavis { grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; column-gap: 0.75rem; }
.si-iavis .si-arbre__legende { grid-column: 1 / -1; }
.si-iavis__faq { display: grid; gap: 0.45rem; width: 11rem; padding: 0.8rem; border: 1px solid rgba(224, 189, 142, 0.6); background: rgba(238, 234, 225, 0.06); }
.si-iavis__faq b { font-weight: 500; font-size: 0.8125rem; color: var(--or-clair); }
.si-iavis__faq span { display: grid; gap: 4px; padding-top: 0.4rem; border-top: 1px solid rgba(224, 189, 142, 0.25); }
.si-iavis__faq i { height: 5px; border-radius: 3px; background: rgba(238, 234, 225, 0.55); }
.si-iavis__faq i.court { width: 65%; background: rgba(238, 234, 225, 0.28); }
.si-iavis__lien { width: 3rem; height: 1px; background: repeating-linear-gradient(90deg, var(--or) 0 6px, transparent 6px 10px); transition: transform 600ms var(--ease-sortie) 300ms; transform-origin: left; }
.si-iavis__ia { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--or); font: 600 0.9375rem / 1 var(--f-texte); color: var(--petrole-profond); box-shadow: 0 0 0 8px rgba(224, 189, 142, 0.18); transition: scale 500ms var(--ease-sortie) 800ms; }
.js [data-reveal]:not(.est-visible) .si-iavis__lien { transform: scaleX(0); }
.js [data-reveal]:not(.est-visible) .si-iavis__ia { scale: 0.3; }
@media (max-width: 39.99em) { .si-iavis__faq { width: 9.5rem; } .si-arbre__noeud { padding-inline: 0.55rem; font-size: 0.75rem; } }

/* --------------------------------------------------------------------------
   24. « Ce que nous construisons » : photo d'atelier à gauche, six blocs à droite (23/10/2026)
   -------------------------------------------------------------------------- */
.si-construit__grille { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.si-construit__photo { position: relative; margin: 0; }
.si-construit__photo::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 1px solid var(--or-400); }
.si-construit__photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 58% 50%; box-shadow: var(--ombre-panneau); }
@media (min-width: 64em) {
  .si-construit__grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .si-construit__photo { position: sticky; top: calc(var(--h-entete) + 2rem); }
  .si-construit__photo img { aspect-ratio: 4 / 5; }
  .si-construit .si-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 39.99em) { .si-construit__photo::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; } }
/* correctif téléphone : le visuel IA se resserre au lieu de déborder */
.si-iavis { grid-template-columns: minmax(0, 11rem) auto auto; }
.si-iavis__faq { width: auto; min-width: 0; }
.si-visi__carte { min-width: 0; }
@media (max-width: 39.99em) { .si-iavis__lien { width: 1.5rem; } .si-iavis__ia { width: 2.75rem; height: 2.75rem; } .si-arbre__branches { gap: 0.4rem; } }

/* --------------------------------------------------------------------------
   25. Corrections du contrôle final (23/10/2026 : Octave, Pauline)
   -------------------------------------------------------------------------- */
/* Site de démonstration intégré : voile cliquable, la page défile tant qu'on n'a pas cliqué */
.si-vivant__voile { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; width: 100%; padding: 0 0 1.5rem; border: 0; background: linear-gradient(transparent 70%, rgba(2, 24, 24, 0.35)); cursor: pointer; }
.si-vivant__voile span { padding: 0.7rem 1.2rem; border: 1px solid var(--or); border-radius: 999px; background: var(--petrole-profond); font: 500 1rem / 1.2 var(--f-texte); color: var(--creme); box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0, 0, 0, 0.45); transition: translate 200ms var(--ease-sortie); }
.si-vivant__voile:hover span { translate: 0 -2px; }
.si-vivant.est-actif .si-vivant__voile, .si-vivant.est-plein .si-vivant__voile { display: none; }
.si-vivant__vues button, .si-vivant__plein { min-height: 44px; }
html:not(.js) .si-vivant__commandes { display: none; }
/* Plein écran : « Quitter » dans une bande sous le site, pour ne rien cacher du site (bouton fixe « Prendre rendez-vous », assistant) */
.si-vivant.est-plein .si-vivant__fermer { position: static; align-self: center; margin: 0.6rem 0 0.8rem; translate: none; }
@media (max-width: 47.99em) {
  .si-vivant__voile { place-items: center; padding: 0; background: linear-gradient(transparent 55%, rgba(10, 15, 20, 0.28)); }
}

/* Appel final : texte aligné sur le conteneur à toutes les largeurs, boutons sur une ligne */
@media (min-width: 75em) {
  .si-final:has(.si-final__fond) .si-final__contenu { max-width: calc(var(--conteneur) + 2 * var(--marge)); margin-inline: auto; }
  .si-final:has(.si-final__fond) .si-final__contenu > * { max-width: 40rem; }
  .si-final:has(.si-final__fond)::before { background: linear-gradient(90deg, rgba(2, 24, 24, 0.94) 0, rgba(2, 24, 24, 0.82) calc((100% - 80rem) / 2 + 24rem), rgba(2, 24, 24, 0.3) calc((100% - 80rem) / 2 + 46rem), transparent calc((100% - 80rem) / 2 + 60rem)); }
}

/* Téléphone : boutons sur deux lignes lisibles, boutons des encadrés qui passent à la ligne au lieu d'être coupés */
@media (max-width: 39.99em) {
  .si-actions .btn-plaque { line-height: 1.35; padding-block: 0.8rem 0.7rem; letter-spacing: 0.08em; }
  .si-encadre .btn-plaque { max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.35; }
}

/* Rythme : « Ce que nous construisons » sur fond clair, cartes blanches et plus larges ; titres sans coupure prématurée */
.si-construit .si-bloc { background: #fff; }
@media (min-width: 64em) { .si-construit__grille { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); } }
.si h3 { text-wrap: pretty; }
.si-visi__visuel { min-height: 14rem; }

/* Tablette : les onglets des professions défilent sur une ligne ; l'étape 05 prend toute la largeur */
@media (min-width: 40em) and (max-width: 59.99em) {
  .si-sel__onglets { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--marge)); padding: 2px var(--marge) 6px; scroll-padding-inline: var(--marge); scrollbar-width: none; }
  .si-sel__onglets::-webkit-scrollbar { display: none; }
  .si-sel__onglet { flex: none; white-space: nowrap; }
}
@media (min-width: 44em) and (max-width: 71.99em) { .si-etape:last-child { grid-column: 1 / -1; } }

/* Maquette « Après » de la refonte : le site d'un cabinet, pas le style de JustiComm (Octave, 24/10/2026 ; polices système) */
.si-neuf { border-top-color: #8C2B3A; background: #EDF1F5; }
.si-neuf b, .si-neuf .t { font-family: Georgia, "Times New Roman", serif; color: #1B2A3A; }
.si-neuf i { background: #D3DAE2; }
.si-neuf span { background: #1B2A3A; font-family: "Helvetica Neue", Arial, sans-serif; }

/* --------------------------------------------------------------------------
   26. Contrôle en ligne de Pauline (25/10/2026)
   -------------------------------------------------------------------------- */
/* vue Téléphone du cadre, sur ordinateur : la pastille du voile au centre, pas sur le bouton du site */
.si-vivant.est-telephone .si-vivant__voile { place-items: center; padding: 0; }
/* très petit téléphone : le prix tient dans sa colonne, les légendes restent alignées */
.si-chiffres li { align-content: start; }
@media (max-width: 22.49em) { .si-chiffres strong { font-size: 1.5rem; } }
/* dessin « La preuve » au téléphone : la pastille 5 à gauche des boutons Appeler et WhatsApp, sans les couvrir */
@media (max-width: 39.99em) { .si-repere--appel { left: calc(100% - 11.25rem); } }