/* ==========================================================================
   JustiComm · page « Identité visuelle » (logo, charte graphique, plateforme de marque)
   v1, 23/10/2026 : texte v5.2 validé par Raoudha (site-conception/contenus-v4/identite-visuelle.md).
   Même esprit que Publicité en ligne et Réseaux sociaux : fil d'Ariane, bandeau pétrole pleine largeur,
   texte sur fond clair, titres à gauche, encadrés centrés. Visuels dessinés pour cette page en HTML et CSS
   (identité d'un cabinet fictif, « Attendu Que, avocats associés », et notre propre identité) ; aucun visuel de l'accueil.
   Animations courtes (moins de 3 s), jouées une fois ; état final fixe sans JavaScript ou si « moins d'animations ».
   Préfixe : idv-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.idv {
  /* Couleurs du cabinet fictif « Attendu Que » : volontairement différentes des nôtres (chaque client a sa propre identité) */
  --cl-nuit: #1F2B44;
  --cl-pierre: #E8E1D5;
  --cl-olive: #5F6B3B;
  --cl-papier: #FBF9F5;
}
.idv .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem); line-height: 1.1; color: var(--titre); text-wrap: pretty; }
.idv-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .idv-or, .surface-nuit .idv-or { color: var(--or-clair); }
.idv-tete { margin-bottom: clamp(2rem, 4vw, 3rem); }
.idv-tete .surtitre { margin-bottom: var(--e-4); }
.idv-chapo { margin-top: var(--e-5); max-width: none; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.idv-texte { margin-top: var(--e-4); max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.idv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.idv-actions--centre { justify-content: center; }
.idv-actions .lien-suite { margin-top: 0; }
.idv-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Encadré fort : centré, pleine largeur, double filet or (22 → 26 px) */
.idv-encadre {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--or); outline: 1px solid rgba(224, 189, 142, 0.45); outline-offset: -8px;
  background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(224, 189, 142, 0.14), transparent 70%), var(--petrole);
  text-align: center; font: 500 clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem) / 1.35 var(--f-titre); color: var(--creme); text-wrap: pretty;
}

@keyframes idv-monte { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes idv-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes idv-pose { from { opacity: 0; scale: 0.82; } to { opacity: 1; scale: 1; } }
@keyframes idv-surligne { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes idv-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d'Ariane, bandeau pétrole (planche d'identité), texte
   -------------------------------------------------------------------------- */
.idv-haut { position: relative; padding: var(--h-entete) 0 clamp(2.5rem, 5vw, 3.5rem); background: var(--papier); }
.idv-haut__ariane .idv-ariane { margin: 0; padding-block: 0.9rem; }
.idv-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--taupe); }
.idv-ariane a { color: inherit; text-underline-offset: 3px; }
.idv-ariane [aria-current] { color: var(--encre); }

.idv-haut__bandeau { position: relative; background: var(--petrole-900); }
/* affiche en fond (même cadrage que la vidéo) : le navigateur ne télécharge que celle de l'écran ; visible tant que la vidéo ne joue pas */
.idv-haut__video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 900; object-fit: cover; background: var(--petrole-900) url("../img/videos/identite-visuelle-logo-charte-graphique-cabinet-avocat-justicomm-nice.webp?v=5") center / cover no-repeat; }
@media (max-width: 47.99em) and (orientation: portrait) { .idv-haut__video { aspect-ratio: 1080 / 1350; object-fit: contain; background-image: url("../img/videos/identite-visuelle-logo-charte-graphique-cabinet-avocat-justicomm-nice-720.webp?v=5"); } }
.idv-haut__bouton { position: absolute; top: 1rem; right: 1rem; }

/* Bouton rond lecture / pause */
.idv-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 .idv-lecture { display: grid; }
.idv-lecture svg { width: 20px; height: 20px; fill: currentColor; }
.idv-lecture__pause { display: none; }
.est-en-lecture .idv-lecture__pause { display: block; }
.est-en-lecture .idv-lecture__lire { display: none; }
.idv-lecture:hover { background: var(--petrole); }
.idv-lecture:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Marque du cabinet fictif (logo de l'étape 3) */
.idv-marque { display: grid; justify-items: center; gap: 0.15rem; margin: 0; text-align: center; }
.idv-marque__nom { font: 500 clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem) / 1.2 var(--f-texte); letter-spacing: 0.32em; text-transform: uppercase; color: var(--cl-nuit); padding-left: 0.32em; }
.idv-marque__activite { font: italic 500 clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem) / 1.2 var(--f-titre); color: var(--cl-olive); }

/* Cartes de visite et profil sur téléphone (étape 4) */

/* Texte du haut de page (H1 ≈ 48 px au plus) */
.idv-haut__texte { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.idv-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); }
.idv-haut__titre { margin: 0; font: 500 clamp(2rem, 1.45rem + 1.75vw, 3rem) / 1.08 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.idv-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; }
.idv-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.idv-haut .idv-actions { margin-top: var(--e-5); gap: 12px 18px; }
.idv-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); }
.idv-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.idv-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); }
.idv-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; }
.idv-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.idv-professions a:hover, .idv-professions a:focus-visible { color: var(--petrole); }

/* En bref */
.idv-bref { margin-top: clamp(1.5rem, 3vw, 2rem); padding: var(--e-5) clamp(1.25rem, 3vw, 2rem); border-left: 3px solid var(--bronze); background: var(--creme); }
.idv-bref__titre { margin: 0 0 var(--e-3); font: 500 0.875rem / 1.4 var(--f-texte); letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-texte); }
.idv-bref__liste { display: grid; gap: var(--e-3); margin: 0; }
.idv-bref__liste div { display: grid; gap: 0.15rem 1.25rem; }
@media (min-width: 48em) { .idv-bref__liste div { grid-template-columns: 6.5rem minmax(0, 1fr); } }
.idv-bref dt { font: 600 1rem / 1.6 var(--f-texte); color: var(--petrole); }
.idv-bref dd { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }

/* --------------------------------------------------------------------------
   2. Situations
   -------------------------------------------------------------------------- */
.idv-situations__liste { display: grid; gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 52em) { .idv-situations__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idv-situation { display: grid; align-content: start; padding: 0 0 var(--e-6); border-top: 2px solid var(--bronze); background: var(--papier); box-shadow: 0 1.5rem 2.5rem -2rem rgba(2, 24, 24, 0.35); }
.idv-situation__visuel { position: relative; display: grid; place-items: center; height: 10.5rem; margin-bottom: var(--e-5); overflow: hidden; background: linear-gradient(180deg, #FBF8F2, var(--papier)); border-bottom: 1px solid var(--lin); }
.idv-situation__titre, .idv-situation__texte { padding-inline: clamp(1.25rem, 2.5vw, 1.75rem); }
.idv-situation__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.idv-situation__texte { margin-top: var(--e-3); font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }

/* « Vous vous installez » : un cadre vide qui reçoit son logo */
.idv-sit-installe__cadre { position: absolute; width: 11rem; height: 6.5rem; border: 1.5px dashed rgba(31, 43, 68, 0.35); border-radius: 4px; }
.idv-sit-installe__logo { position: relative; display: grid; justify-items: center; gap: 0.25rem; color: var(--cl-nuit); }
.idv-sit-installe__logo svg { width: 3rem; height: 3rem; }
.idv-sit-installe__logo b { font: 500 0.75rem / 1 var(--f-texte); letter-spacing: 0.3em; text-transform: uppercase; padding-left: 0.3em; }
.idv-sit-installe__jour { position: absolute; top: 0.85rem; right: 0.85rem; padding: 0.2rem 0.6rem; border-radius: var(--rayon-pilule); background: var(--petrole); font: 500 0.75rem / 1.4 var(--f-texte); color: var(--creme); }
.js .idv-situation.est-visible .idv-sit-installe__logo { animation: idv-pose 0.7s 0.35s var(--ease-sortie) both; }
.js .idv-situation.est-visible .idv-sit-installe__cadre { animation: idv-apparait 0.5s both; }

/* « Vous évoluez » : deux initiales qui se rejoignent */
.idv-sit-evolue { grid-auto-flow: column; gap: 0.35rem; }
.idv-sit-evolue__rond { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; font: 500 2rem / 1 var(--f-titre); }
.idv-sit-evolue__rond--a { background: var(--cl-nuit); color: var(--cl-pierre); }
.idv-sit-evolue__rond--b { background: var(--cl-pierre); color: var(--cl-nuit); box-shadow: inset 0 0 0 1.5px var(--cl-nuit); }
.idv-sit-evolue__et { font: italic 500 2rem / 1 var(--f-titre); color: var(--or-texte); }
@keyframes idv-gauche { from { translate: -3.5rem 0; } to { translate: 0 0; } }
@keyframes idv-droite { from { translate: 3.5rem 0; } to { translate: 0 0; } }
.js .idv-situation.est-visible .idv-sit-evolue__rond--a { animation: idv-gauche 0.9s 0.2s var(--ease-sortie) both; }
.js .idv-situation.est-visible .idv-sit-evolue__rond--b { animation: idv-droite 0.9s 0.2s var(--ease-sortie) both; }
.js .idv-situation.est-visible .idv-sit-evolue__et { animation: idv-pose 0.5s 0.9s var(--ease-sortie) both; }

/* « Votre image s'est dispersée » : trois versions qui se remettent d'accord */
.idv-sit-disperse { grid-auto-flow: column; gap: 0.9rem; }
.idv-sit-disperse__puce { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 6px; background: var(--cl-nuit); color: var(--cl-pierre); }
.idv-sit-disperse__puce svg { width: 70%; height: 70%; }
@keyframes idv-reunit-1 { from { rotate: -14deg; translate: 0 -0.9rem; background: #7A3E5B; color: #F7E9EF; } to { rotate: 0deg; translate: 0 0; background: var(--cl-nuit); color: var(--cl-pierre); } }
@keyframes idv-reunit-2 { from { rotate: 9deg; translate: 0 0.8rem; background: #E9E5DE; color: #6B6B6B; scale: 0.8; } to { rotate: 0deg; translate: 0 0; background: var(--cl-nuit); color: var(--cl-pierre); scale: 1; } }
@keyframes idv-reunit-3 { from { rotate: -6deg; translate: 0 -0.4rem; background: #3D7EA6; color: #FFFFFF; scale: 1.12; } to { rotate: 0deg; translate: 0 0; background: var(--cl-nuit); color: var(--cl-pierre); scale: 1; } }
.js .idv-situation.est-visible .idv-sit-disperse__puce--1 { animation: idv-reunit-1 1.1s 0.5s var(--ease-douce) both; }
.js .idv-situation.est-visible .idv-sit-disperse__puce--2 { animation: idv-reunit-2 1.1s 0.65s var(--ease-douce) both; }
.js .idv-situation.est-visible .idv-sit-disperse__puce--3 { animation: idv-reunit-3 1.1s 0.8s var(--ease-douce) both; }

/* --------------------------------------------------------------------------
   3. Ce que nous créons
   -------------------------------------------------------------------------- */
.idv-livrables { display: grid; gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 44em) { .idv-livrables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .idv-livrables { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.idv-livrable { display: flex; flex-direction: column; padding: 0 0 var(--e-6); border: 1px solid var(--lin); background: #FFFDF9; }
.idv-livrable--complete { border-color: rgba(156, 121, 82, 0.45); }
.idv-livrable__visuel { position: relative; display: grid; place-items: center; height: 11rem; margin-bottom: var(--e-5); overflow: hidden; background: var(--creme); }
.idv-livrable--complete .idv-livrable__visuel { background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); }
.idv-pastille { align-self: flex-start; margin: 0 clamp(1.25rem, 2.5vw, 1.75rem) var(--e-3); padding: 0.25rem 0.75rem; border: 1px solid var(--bronze); border-radius: var(--rayon-pilule); font: 500 0.8125rem / 1.4 var(--f-texte); letter-spacing: 0.04em; color: var(--or-texte); }
.idv-livrable__titre { margin: 0; padding-inline: clamp(1.25rem, 2.5vw, 1.75rem); font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.idv-livrable__texte { margin-top: var(--e-3); padding-inline: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }
.idv-note { margin: var(--e-6) 0 0; text-align: center; font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.4 var(--f-titre); color: var(--petrole); }

/* Visuel : trois versions du logo */
.idv-v-logo { grid-auto-flow: column; gap: 1rem; }
.idv-v-logo__version { display: grid; justify-items: center; gap: 0.45rem; }
.idv-v-logo__version svg, .idv-v-logo__version b { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: 4px; }
.idv-v-logo__version--couleur svg { padding: 0.45rem; background: var(--cl-pierre); color: var(--cl-nuit); }
.idv-v-logo__version--une svg { padding: 0.45rem; background: #FFFFFF; color: #111111; box-shadow: inset 0 0 0 1px var(--lin); }
.idv-v-logo__version--petit b { width: 2.25rem; height: 2.25rem; margin-block: 1rem; border-radius: 7px; background: var(--cl-nuit); font: 600 1.375rem / 1 var(--f-titre); color: var(--cl-pierre); }
.idv-v-logo small { font: 500 0.75rem / 1.2 var(--f-texte); color: var(--taupe); }

/* Visuel : couleurs et typographies */
.idv-v-couleurs { grid-template-columns: repeat(3, auto) auto auto; gap: 0.6rem; align-items: center; justify-content: center; }
.idv-v-couleurs__pastille { width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.idv-v-couleurs__pastille--nuit { background: var(--cl-nuit); }
.idv-v-couleurs__pastille--pierre { background: var(--cl-pierre); box-shadow: inset 0 0 0 1px rgba(31, 43, 68, 0.18); }
.idv-v-couleurs__pastille--olive { background: var(--cl-olive); }
.idv-v-couleurs__typo { margin-left: 0.6rem; color: var(--cl-nuit); }
.idv-v-couleurs__typo--titre { font: 500 2.75rem / 1 var(--f-titre); }
.idv-v-couleurs__typo--texte { margin-left: 0.2rem; font: 400 2.1rem / 1 var(--f-texte); }
.js .idv-livrable.est-visible .idv-v-couleurs__pastille { animation: idv-pose 0.5s var(--ease-sortie) both; }
.js .idv-livrable.est-visible .idv-v-couleurs__pastille--pierre { animation-delay: 0.12s; }
.js .idv-livrable.est-visible .idv-v-couleurs__pastille--olive { animation-delay: 0.24s; }

/* Visuel : une page de charte (à faire, à éviter) */
.idv-v-charte__page { display: grid; gap: 0.45rem; width: 11rem; padding: 0.75rem; background: #FFFFFF; box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(2, 24, 24, 0.35); }
.idv-v-charte__ligne { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.5rem; border-radius: 3px; background: var(--cl-pierre); color: var(--cl-nuit); }
.idv-v-charte__ligne--fond { background: var(--cl-nuit); color: var(--cl-pierre); }
.idv-v-charte__ligne--non { background: #F3EFE8; color: var(--cl-nuit); }
.idv-v-charte__mono { width: 1.6rem; height: 1.6rem; }
.idv-v-charte__ligne--non .idv-v-charte__mono { transform: scaleX(1.6); transform-origin: left center; opacity: 0.55; }
.idv-v-charte__signe { width: 1rem; height: 1rem; color: var(--succes); }
.idv-v-charte__ligne--fond .idv-v-charte__signe { color: #9BD3AE; }
.idv-v-charte__croix { font: 600 1.125rem / 1 var(--f-texte); color: var(--erreur); }

/* Visuel : la boussole de la plateforme de marque */
.idv-v-boussole__dessin { width: 7.5rem; height: 7.5rem; overflow: visible; }
.idv-v-boussole__dessin circle { fill: none; stroke: rgba(224, 189, 142, 0.55); stroke-width: 1.2; }
.idv-v-boussole__dessin .idv-v-boussole__centre { fill: var(--or); stroke: none; }
.idv-v-boussole__aiguille { fill: var(--or); transform-origin: 60px 60px; }
@keyframes idv-aiguille { 0% { rotate: -70deg; } 60% { rotate: 18deg; } 100% { rotate: 0deg; } }
.js .idv-livrable.est-visible .idv-v-boussole__aiguille { animation: idv-aiguille 1.4s 0.3s var(--ease-sortie) both; }
.idv-v-boussole__mot { position: absolute; font: 500 0.75rem / 1 var(--f-texte); letter-spacing: 0.08em; color: var(--creme); }
.idv-v-boussole__mot--haut { top: 0.55rem; left: 50%; translate: -50% 0; }
.idv-v-boussole__mot--bas { bottom: 0.55rem; left: 50%; translate: -50% 0; }
.idv-v-boussole__mot--gauche { left: calc(50% - 7.6rem); top: 50%; translate: 0 -50%; }
.idv-v-boussole__mot--droite { right: calc(50% - 6.6rem); top: 50%; translate: 0 -50%; }

/* Visuel : modèles de publications */
.idv-v-post { grid-auto-flow: column; gap: 0.6rem; }
.idv-v-post__carre { display: grid; align-content: center; justify-items: start; gap: 0.35rem; width: 5.25rem; height: 5.25rem; padding: 0.6rem; border-radius: 4px; background: var(--cl-pierre); color: var(--cl-nuit); }
.idv-v-post__carre svg { width: 1.6rem; height: 1.6rem; }
.idv-v-post__carre i { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(31, 43, 68, 0.5); }
.idv-v-post__carre i:last-child { width: 60%; }
.idv-v-post__carre--2 { background: var(--cl-nuit); }
.idv-v-post__carre--2 i { background: rgba(232, 225, 213, 0.6); }
.idv-v-post__carre--2 i:last-child { background: var(--cl-olive); }
.idv-v-post__carre--3 { place-items: center; justify-items: center; background: var(--cl-olive); color: #F4F1E8; }
.idv-v-post__carre--3 svg { width: 2.5rem; height: 2.5rem; }
.js .idv-livrable.est-visible .idv-v-post__carre { animation: idv-monte 0.6s var(--ease-sortie) both; }
.js .idv-livrable.est-visible .idv-v-post__carre--2 { animation-delay: 0.15s; }
.js .idv-livrable.est-visible .idv-v-post__carre--3 { animation-delay: 0.3s; }

/* Visuel : le viseur du brief photo */
.idv-v-photo { grid-auto-flow: row; gap: 0.6rem; }
.idv-v-photo__viseur { position: relative; display: block; width: 9.5rem; height: 6.5rem; overflow: hidden; border-radius: 2px; background: linear-gradient(180deg, #2C4A4A, #183232); }
.idv-v-photo__personne { position: absolute; left: 50%; bottom: 0; width: 7rem; translate: -50% 0; fill: rgba(224, 189, 142, 0.55); }
.idv-v-photo__grille { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
  linear-gradient(180deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.idv-v-photo__coins { position: absolute; inset: 6px; border: 2px solid var(--or); -webkit-mask: conic-gradient(at 14px 14px, transparent 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px); mask: conic-gradient(at 14px 14px, transparent 75%, #000 0) 0 0 / calc(100% - 14px) calc(100% - 14px); }
.idv-v-photo__accord { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: var(--rayon-pilule); background: rgba(224, 189, 142, 0.16); font: 500 0.75rem / 1.4 var(--f-texte); color: var(--or-clair); }
.idv-v-photo__accord svg { width: 0.875rem; height: 0.875rem; }
.js .idv-livrable.est-visible .idv-v-photo__coins { animation: idv-pose 0.6s 0.3s var(--ease-sortie) both; }

/* --------------------------------------------------------------------------
   4. Deux offres (tableau comparatif)
   -------------------------------------------------------------------------- */
.idv-comparatif { overflow-x: auto; }
.idv-comparatif__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-corps); color: var(--creme); }
.idv-comparatif__table th, .idv-comparatif__table td { padding: 0.95rem clamp(0.6rem, 2vw, 1.5rem); border-bottom: 1px solid rgba(224, 189, 142, 0.2); text-align: center; vertical-align: middle; }
.idv-comparatif__table tbody th { text-align: left; font-weight: 400; color: var(--creme); }
.idv-comparatif__table thead th { padding-block: 1.25rem; border-bottom-color: rgba(224, 189, 142, 0.45); }
.idv-comparatif__vide { border-bottom-color: rgba(224, 189, 142, 0.45) !important; }
.idv-comparatif__offre { display: block; font: 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--creme); }
.idv-comparatif__prix { display: block; margin-top: 0.35rem; font: 400 0.9375rem / 1.4 var(--f-texte); color: var(--creme-doux); }
.idv-comparatif__prix b { display: block; font: 500 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.2 var(--f-titre); color: var(--or-clair); }
.idv-comparatif__table .idv-comparatif__complete { background: rgba(224, 189, 142, 0.07); }
.idv-comparatif__table thead .idv-comparatif__complete { border-top: 2px solid var(--or); }
.idv-oui { width: 1.25rem; height: 1.25rem; color: var(--or); vertical-align: middle; }
.idv-non { color: rgba(192, 199, 192, 0.7); }
.idv-offres__pour { display: grid; gap: var(--e-4) var(--gouttiere); margin-top: var(--e-6); }
@media (min-width: 52em) { .idv-offres__pour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idv-offres__pour p { margin: 0; padding: var(--e-4) var(--e-5); border-left: 2px solid var(--or); background: rgba(2, 24, 24, 0.35); font-size: 1.0625rem; line-height: 1.6; color: var(--creme); }
.idv-offres__pour strong { color: var(--or-clair); font-weight: 500; }
.idv-offres__suite { margin-top: var(--e-6); }
.idv-offres__suite p { max-width: none; font-size: var(--t-corps); line-height: 1.65; color: var(--creme-doux); }
.idv-offres__suite p + p { margin-top: var(--e-3); }
.idv-offres__suite strong { font-weight: 500; color: var(--creme); }
.idv-offres__suite a { color: var(--or-clair); text-underline-offset: 3px; }
@media (max-width: 39.99em) {
  .idv-comparatif__table { font-size: 0.9375rem; }
  .idv-comparatif__table th, .idv-comparatif__table td { padding: 0.75rem 0.4rem; }
  .idv-comparatif__offre { font-size: 1.0625rem; }
  .idv-comparatif__prix { font-size: 0.75rem; }
  .idv-comparatif__prix b { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   5. Profession : trois points, l'exemple du syndic (signature e-mail)
   -------------------------------------------------------------------------- */
.idv-metiers__grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60em) { .idv-metiers__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.idv-points { display: grid; gap: var(--e-5); margin: 0; padding: 0; list-style: none; }
.idv-point { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.idv-point__icone { width: 3rem; height: 3rem; padding: 0.55rem; border-radius: 50%; background: var(--petrole); fill: none; stroke: var(--or); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.idv-point p { margin: 0.35rem 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--encre); }
.idv-point strong { font-weight: 600; color: var(--petrole); }
.idv-exemple__texte { margin: 0 0 var(--e-5); font-size: var(--t-corps); line-height: 1.65; color: var(--encre); }
.idv-mail { border: 1px solid var(--lin); border-radius: 6px; background: #FFFFFF; box-shadow: 0 1.5rem 2.5rem -1.75rem rgba(2, 24, 24, 0.45); overflow: hidden; }
.idv-mail__entete { display: flex; gap: 0.75rem; margin: 0; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--lin); background: #F7F5F1; font: 500 0.9375rem / 1.4 var(--f-texte); color: #1F2937; }
.idv-mail__entete span { color: #5B6170; font-weight: 400; }
.idv-mail__corps { display: grid; gap: 0.5rem; margin: 0; padding: 1.1rem 1.25rem 0.5rem; }
.idv-mail__corps i { display: block; height: 6px; border-radius: 3px; background: #E5E2DC; }
.idv-mail__corps i:nth-child(2) { width: 88%; }
.idv-mail__corps i:nth-child(3) { width: 52%; }
.idv-mail__signature { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0.9rem 1.25rem 1.25rem; padding-top: 0.9rem; border-top: 2px solid #2D4A3E; }
.idv-mail__logo { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 4px; background: #2D4A3E; color: #EDEBE3; }
.idv-mail__logo svg { width: 76%; height: 76%; }
.idv-mail__nom { margin: 0; font: 600 1rem / 1.3 var(--f-texte); letter-spacing: 0.04em; color: #2D4A3E; }
.idv-mail__ligne { margin: 0.2rem 0 0; font: 400 0.875rem / 1.45 var(--f-texte); color: #374151; }
.idv-surligne { padding: 0.05rem 0.25rem; border-radius: 2px; background: linear-gradient(rgba(224, 189, 142, 0.55), rgba(224, 189, 142, 0.55)) no-repeat 0 0 / 100% 100%; color: #1F2937; }
.js .idv-exemple.est-visible .idv-surligne { animation: idv-surligne 0.8s 0.5s var(--ease-douce) both; }
.js .idv-exemple.est-visible .idv-surligne--2 { animation-delay: 1.1s; }
.idv-metiers__liens { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.idv-metiers__intro { margin: 0 0 var(--e-4); font-size: var(--t-corps); color: var(--encre); }
.idv-metiers__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.idv-metiers__liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1.1rem; border: 1px solid var(--bronze); border-radius: var(--rayon-pilule); background: var(--papier); font-size: 1rem; color: var(--petrole); text-decoration: none; transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.idv-metiers__liste a:hover, .idv-metiers__liste a:focus-visible { background: var(--petrole); color: var(--creme); }

/* --------------------------------------------------------------------------
   6. Notre propre identité
   -------------------------------------------------------------------------- */
.idv-vitrine { display: grid; gap: var(--gouttiere); }
@media (min-width: 48em) { .idv-vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .idv-vitrine { grid-template-columns: 1.15fr 1fr 1fr 0.8fr; } }
.idv-vitrine__case { display: grid; place-items: center; min-height: 15rem; padding: var(--e-5); background: var(--creme); }
.idv-vitrine__case--logo { gap: var(--e-5); align-content: center; background: #FFFDF9; border: 1px solid var(--lin); }
.idv-vitrine__logo { width: min(100%, 15rem); height: auto; }
.idv-vitrine__symboles { display: flex; align-items: center; gap: var(--e-4); width: 100%; max-width: 16rem; }
.idv-vitrine__icone { flex: none; width: 3rem; height: 3rem; }
.idv-vitrine__nuancier { display: grid; flex: 1; gap: 0.4rem; }
.idv-vitrine__repartition { font: 500 0.75rem / 1.3 var(--f-texte); color: var(--taupe); }
.idv-vitrine__proportions { display: flex; height: 2rem; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--lin); }
.idv-vitrine__proportions i { display: grid; place-items: center; font: 500 0.6875rem / 1 var(--f-texte); font-style: normal; white-space: nowrap; overflow: hidden; }
.idv-vitrine__creme { flex: 60; background: var(--creme); color: var(--petrole); }
.idv-vitrine__petrole { flex: 30; background: var(--petrole); color: var(--creme); }
.idv-vitrine__or { flex: 10; background: var(--or); color: var(--petrole-profond); }
.idv-vitrine__case--carte { background: linear-gradient(160deg, var(--creme), #E4DED2); }
.idv-vitrine__carte { display: grid; place-items: center; gap: 0.6rem; width: min(100%, 16rem); aspect-ratio: 85 / 55; padding: 1rem; border-radius: 4px; background: radial-gradient(ellipse 80% 90% at 30% 20%, #11403F, var(--petrole-profond)); box-shadow: 0 1.5rem 2.5rem -1rem rgba(2, 24, 24, 0.55); rotate: -3deg; }
.idv-vitrine__carte img { width: 72%; height: auto; }
.idv-vitrine__slogan { font: italic 500 0.9375rem / 1.2 var(--f-titre); color: var(--or); }
.idv-vitrine__mail { display: grid; gap: 0.75rem; width: 100%; padding: 1rem; border-radius: 6px; background: #FFFFFF; box-shadow: 0 1rem 2rem -1.25rem rgba(2, 24, 24, 0.45); }
.idv-vitrine__mail-corps { display: grid; gap: 0.45rem; }
.idv-vitrine__mail-corps i { display: block; height: 6px; border-radius: 3px; background: #E7E2D8; }
.idv-vitrine__mail-corps i:last-child { width: 62%; }
.idv-vitrine__mail-signature { display: grid; gap: 0.45rem; padding-top: 0.75rem; border-top: 1px solid var(--or); font: 400 0.75rem / 1.45 var(--f-texte); color: #3A4646; }
.idv-vitrine__mail-signature img { width: 8rem; height: auto; }
.idv-vitrine__case--profil { background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); }
.idv-vitrine__tel { display: grid; justify-items: start; width: min(100%, 11.5rem); padding-bottom: 1rem; border: 5px solid #0B1414; border-radius: 22px; background: var(--papier); overflow: hidden; }
.idv-vitrine__tel-banniere { display: block; width: 100%; height: 3.5rem; background: radial-gradient(ellipse 70% 120% at 70% 0%, rgba(224, 189, 142, 0.35), transparent 70%), var(--petrole); }
.idv-vitrine__tel-avatar { width: 2.9rem; height: 2.9rem; margin: -1.45rem 0 0 0.75rem; border: 3px solid var(--papier); border-radius: 50%; }
.idv-vitrine__tel-nom { margin: 0.35rem 0.75rem 0; font: 600 0.875rem / 1.3 var(--f-texte); color: var(--encre); }
.idv-vitrine__tel-info { margin: 0 0.75rem; font: 400 0.75rem / 1.3 var(--f-texte); color: var(--taupe); }
.idv-vitrine__tel-bio { margin: 0.45rem 0.75rem 0; font: italic 500 0.875rem / 1.3 var(--f-titre); color: var(--petrole); }
.js .idv-vitrine.est-visible .idv-vitrine__case { animation: idv-monte 0.7s var(--ease-sortie) both; }
.js .idv-vitrine.est-visible .idv-vitrine__case:nth-child(2) { animation-delay: 0.12s; }
.js .idv-vitrine.est-visible .idv-vitrine__case:nth-child(3) { animation-delay: 0.24s; }
.js .idv-vitrine.est-visible .idv-vitrine__case:nth-child(4) { animation-delay: 0.36s; }
.idv-legende { margin: var(--e-4) 0 0; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--taupe); }

/* --------------------------------------------------------------------------
   7. Étapes
   -------------------------------------------------------------------------- */
.idv-etapes__liste { display: grid; gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; counter-reset: none; }
@media (min-width: 44em) { .idv-etapes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .idv-etapes__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.idv-etape { position: relative; padding: var(--e-6) clamp(1.25rem, 2.5vw, 1.75rem); border-top: 2px solid var(--bronze); background: var(--papier); }
.idv-etape__num { display: block; margin-bottom: var(--e-3); font: 500 clamp(2.5rem, 2rem + 1.5vw, 3.5rem) / 1 var(--f-titre); color: var(--bronze); }
.idv-etape__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.idv-etape__texte { margin-top: var(--e-3); font-size: 1.0625rem; line-height: 1.6; color: var(--encre); }

/* --------------------------------------------------------------------------
   8. Une même identité : quatre écrans reliés
   -------------------------------------------------------------------------- */
.idv-ecrans { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); margin: 0 0 var(--e-6); padding: 0; list-style: none; }
@media (min-width: 56em) {
  .idv-ecrans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .idv-ecrans::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 1px; background: var(--or); transform-origin: left; translate: 0 -1.2rem; }
  .js .idv-ecrans.est-visible::before { animation: idv-trait 1.6s 0.2s var(--ease-douce) both; }
}
.idv-ecran { position: relative; display: grid; justify-items: center; gap: var(--e-3); }
.idv-ecran__cadre { position: relative; display: grid; align-content: start; gap: 0.5rem; width: 100%; aspect-ratio: 4 / 3; padding: 0.85rem; border: 1px solid var(--lin); border-radius: 8px; background: #FFFFFF; box-shadow: 0 1.25rem 2rem -1.5rem rgba(2, 24, 24, 0.4); overflow: hidden; }
.idv-ecran__nom { font: 500 0.875rem / 1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); }
.idv-ecran__mono { width: 1.6rem; height: 1.6rem; flex: none; color: var(--cl-nuit); }
.idv-ecran__lignes { display: grid; gap: 0.4rem; }
.idv-ecran__lignes i { display: block; height: 5px; border-radius: 3px; background: #E7E2D8; }
.idv-ecran__lignes i:last-child { width: 65%; }
.idv-ecran__barre { display: block; height: 1.3rem; border-radius: var(--rayon-pilule); border: 1px solid #D9D4CA; }
.idv-ecran__resultat, .idv-ecran__signature { display: flex; align-items: center; gap: 0.45rem; font: 600 0.8125rem / 1.2 var(--f-texte); color: var(--cl-nuit); }
.idv-ecran__banniere { display: block; height: 2.6rem; margin: -0.85rem -0.85rem 0; background: var(--cl-nuit); }
.idv-ecran__avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-top: -1.6rem; border: 2px solid #FFF; border-radius: 50%; background: var(--cl-pierre); }
.idv-ecran__nav { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.45rem; border-bottom: 1px solid #ECE8E0; }
.idv-ecran__nav i { display: block; width: 1.6rem; height: 4px; border-radius: 2px; background: #DCD6CB; }
.idv-ecran__nav i:first-of-type { margin-left: auto; }
.idv-ecran__titre { display: block; height: 0.9rem; width: 75%; border-radius: 2px; background: var(--cl-nuit); }
.idv-ecran__signature { margin-top: auto; padding-top: 0.45rem; border-top: 2px solid var(--cl-nuit); }
.idv-ecran__signature b { letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.js .idv-ecrans.est-visible .idv-ecran { animation: idv-monte 0.6s var(--ease-sortie) both; }
.js .idv-ecrans.est-visible .idv-ecran:nth-child(2) { animation-delay: 0.35s; }
.js .idv-ecrans.est-visible .idv-ecran:nth-child(3) { animation-delay: 0.7s; }
.js .idv-ecrans.est-visible .idv-ecran:nth-child(4) { animation-delay: 1.05s; }
.idv-liens { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.idv-liens .lien-suite { margin-top: 0; }

/* --------------------------------------------------------------------------
   9. FAQ (composant commun faq5) et appel final
   -------------------------------------------------------------------------- */
.idv.faq5 .faq5__titre { max-width: none; }

.idv-final { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 7rem); background: radial-gradient(ellipse 55% 70% at 80% 50%, rgba(224, 189, 142, 0.12), transparent 70%), var(--petrole-profond); }
.idv-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 82% 50%, transparent 0 56px, rgba(224, 189, 142, 0.08) 57px 58px);
  -webkit-mask-image: radial-gradient(ellipse 45% 70% at 82% 50%, #000 0, transparent 100%);
  mask-image: radial-gradient(ellipse 45% 70% at 82% 50%, #000 0, transparent 100%);
}
.idv-final__contenu { position: relative; }
.idv-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); }
.idv-final .titre-section { color: var(--creme); }
.idv-final__texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.idv-final__qui { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid rgba(224, 189, 142, 0.25); font: italic 500 clamp(1.0625rem, 1rem + 0.25vw, 1.25rem) / 1.45 var(--f-titre); color: var(--or-clair); }

/* --------------------------------------------------------------------------
   10. Téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 39.99em) {
  .idv-actions .btn--grand, .idv-actions .btn-cartouche { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .idv-liens li, .idv-liens .lien-suite { width: 100%; }
  .idv-v-boussole__mot--gauche { left: calc(50% - 7.2rem); }
  .idv-v-logo { gap: 0.6rem; }
  .idv-v-logo__version svg { width: 3.6rem; height: 3.6rem; }
  .idv-ecrans { gap: 1rem; }
  .idv-ecran__cadre { padding: 0.6rem; gap: 0.35rem; }
  .idv-ecran__banniere { height: 2rem; margin: -0.6rem -0.6rem 0; }
  .idv-ecran__avatar { width: 2rem; height: 2rem; margin-top: -1.3rem; }
  .idv-ecran__resultat, .idv-ecran__signature { font-size: 0.6875rem; }
  .idv-ecran__mono { width: 1.25rem; height: 1.25rem; }
  .idv-mail__signature { grid-template-columns: 1fr; }
}

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

/* Chiffres alignés (le Cormorant dessine « 01 » comme « OI » en chiffres elzéviriens) */
.idv-etape__num, .idv-comparatif__prix b { font-variant-numeric: lining-nums; }

/* ==========================================================================
   v2 (23/10/2026, Raoudha : « très artistique, très vivante », « du mood board au logo »)
   Vidéo Remotion en haut de page ; section « Du mood board à votre logo » en quatre tableaux ;
   grain de papier, croquis au crayon, grille de construction, collage de mood board.
   ========================================================================== */
.idv-voyage, .idv-nous {
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.idv-voyage__etapes { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); margin: 0; padding: 0; list-style: none; }
.idv-voyage__etape { position: relative; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 56em) {
  .idv-voyage__etape { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .idv-voyage__etape:nth-child(even) { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
  .idv-voyage__etape:nth-child(even) .idv-voyage__visuel { order: 2; }
  /* trait de crayon qui mène au tableau suivant */
  .idv-voyage__etape:not(:last-child)::after {
    content: ""; position: absolute; left: 50%; bottom: calc(-1 * clamp(3.5rem, 8vw, 6.5rem)); width: 120px; height: clamp(3.5rem, 8vw, 6.5rem); translate: -50% 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M20 6c50 6 80 22 70 48s-40 22-34 40' fill='none' stroke='%239C7952' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='4 6'/%3E%3Cpath d='M50 86l6 9 8-8' fill='none' stroke='%239C7952' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .idv-voyage__etape:nth-child(even):not(:last-child)::after { scale: -1 1; }
}
.idv-voyage__visuel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; box-shadow: 0 2.5rem 4rem -2rem rgba(2, 24, 24, 0.45); }
.idv-voyage__photo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.idv-voyage__num { display: block; font: italic 500 clamp(2.75rem, 2.2rem + 1.6vw, 4rem) / 1 var(--f-titre); color: var(--bronze); font-variant-numeric: lining-nums; }
.idv-voyage__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem) / 1.15 var(--f-titre); color: var(--petrole); }
.idv-voyage__texte p { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.idv-voyage__texte::after { content: ""; display: block; width: 56px; height: 1px; margin-top: var(--e-5); background: var(--or); }

/* 01 · Le mood board : collage de photos, matières, couleurs, typographies */

/* 02 · Les croquis : calque et crayon sur une table en bois */

/* 03 · Le logo, sur sa grille de construction */
.idv-construction { display: grid; place-items: center; background: linear-gradient(160deg, var(--petrole), var(--petrole-profond)); }
.idv-construction__planche { position: relative; display: grid; justify-items: center; align-content: center; gap: 0.5rem; width: min(52%, 17rem); aspect-ratio: 1; background: var(--cl-pierre); box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.6); }
.idv-construction__grille { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(156, 121, 82, 0.45); stroke-width: 0.6; }
.idv-construction__mono { position: relative; width: 46%; aspect-ratio: 1; color: var(--cl-nuit); }
.idv-construction .idv-marque { position: relative; }
.idv-construction__nuancier { position: absolute; right: 6%; bottom: 9%; display: grid; gap: 0.5rem; }
.idv-construction__nuancier i { display: block; width: clamp(2rem, 4vw, 3rem); height: clamp(2rem, 4vw, 3rem); border-radius: 50%; box-shadow: 0 0.75rem 1.25rem -0.5rem rgba(0, 0, 0, 0.6); }
.idv-construction__nuit { background: var(--cl-nuit); box-shadow: inset 0 0 0 1px rgba(232, 225, 213, 0.3), 0 0.75rem 1.25rem -0.5rem rgba(0, 0, 0, 0.6) !important; }
.idv-construction__pierre { background: var(--cl-pierre); }
.idv-construction__olive { background: var(--cl-olive); }
.js .idv-voyage__etape.est-visible .idv-construction__grille { animation: idv-apparait 1s both; }
.js .idv-voyage__etape.est-visible .idv-construction__mono { animation: idv-pose 0.8s 0.4s var(--ease-sortie) both; }
.js .idv-voyage__etape.est-visible .idv-construction .idv-marque { animation: idv-apparait 0.6s 0.9s both; }
.js .idv-voyage__etape.est-visible .idv-construction__nuancier i { animation: idv-pose 0.5s 1.1s var(--ease-sortie) both; }
.js .idv-voyage__etape.est-visible .idv-construction__nuancier i:nth-child(2) { animation-delay: 1.22s; }
.js .idv-voyage__etape.est-visible .idv-construction__nuancier i:nth-child(3) { animation-delay: 1.34s; }

/* 04 · Les déclinaisons : carte de visite et profil, sur la pierre */

@media (max-width: 55.99em) {
  .idv-voyage__visuel { aspect-ratio: 4 / 3; }
  
  
}
@media (max-width: 39.99em) {
  
  
  
  
  
  
  
  
  
  
  
  .idv-construction .idv-marque__nom { font-size: 0.75rem; }
  .idv-construction .idv-marque__activite { font-size: 0.75rem; }
  
}
@media (prefers-reduced-motion: reduce) {
  .idv-voyage *, .idv-voyage *::before, .idv-voyage *::after { animation: none !important; }
}

/* v3 (23/10/2026) : les photos de Raoudha (ChatGPT) remplacent les dessins des tableaux 01, 02 et 04 ; appel final sur la photo de l'atelier */
.idv-voyage__visuel--photo { background: var(--creme); }
.idv-voyage__photo { transition: scale 1.6s var(--ease-sortie); }
.idv-voyage__visuel--croquis .idv-voyage__photo { object-position: 50% 58%; }
@keyframes idv-recul { from { scale: 1.08; } to { scale: 1; } }
.js .idv-voyage__etape.est-visible .idv-voyage__photo { animation: idv-recul 1.8s var(--ease-sortie) both; }
@media (hover: hover) { .idv-voyage__visuel--photo:hover .idv-voyage__photo { scale: 1.03; } }
@media (min-width: 56em) {
  /* les croquis en portrait : le tableau 02 prend la hauteur de la photo, mieux cadrée */
  .idv-voyage__etape:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .idv-voyage__visuel--croquis { aspect-ratio: 4 / 5; max-height: 38rem; }
  .idv-voyage__visuel--croquis .idv-voyage__photo { object-position: 50% 50%; }
}

.idv-final__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.idv-final:has(.idv-final__fond)::before { z-index: 1; background: linear-gradient(90deg, rgba(2, 24, 24, 0.92) 0%, rgba(2, 24, 24, 0.72) 42%, rgba(2, 24, 24, 0.1) 72%, transparent 100%); -webkit-mask-image: none; mask-image: none; }
.idv-final:has(.idv-final__fond) .idv-final__contenu { z-index: 2; max-width: 44rem; margin-left: 0; }
@media (min-width: 80em) { .idv-final:has(.idv-final__fond) .idv-final__contenu { margin-left: max(0px, calc((100% - var(--conteneur)) / 2 - var(--marge))); } }
@media (max-width: 79.99em) { .idv-final:has(.idv-final__fond)::before { background: rgba(2, 24, 24, 0.82); } }   /* voile uniforme jusqu'à 80em : le texte ne passe plus sur la lampe (Pauline, 2e contrôle) */

/* ==========================================================================
   v4 (23/10/2026) : corrections du contrôle des sept agents, acceptées par Raoudha
   ========================================================================== */
/* Barre du haut avec son fond dès le départ, comme les pages modèles (Octave 1) */
body:has(.idv-haut) .entete__fond { opacity: 1; }

/* Tableau 03 sur papier chaud, comme les trois photos (Octave 5) */
.idv-construction { background: linear-gradient(160deg, var(--cl-pierre), #D9D0C1); }
.idv-construction__planche { background: var(--cl-papier); }

/* « Comment se déroule… » sur fond nuit : une page plus vivante (Octave 8) */
.idv-etapes .idv-etape { background: rgba(2, 24, 24, 0.35); border-top-color: var(--or); }
.idv-etapes .idv-etape__num { color: var(--or); }
.idv-etapes .idv-etape__titre { color: var(--creme); }
.idv-etapes .idv-etape__texte { color: var(--creme-doux); }
.idv-etapes .idv-encadre { background: radial-gradient(ellipse 60% 120% at 50% 0%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole); }

/* Écrans « Une même identité » : moins vides (Octave 9) */
.idv-ecran__cadre { aspect-ratio: 16 / 10; }
.idv-ecran__vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-top: 0.2rem; }
.idv-ecran__vignettes i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--cl-nuit); }
.idv-ecran__vignettes i:nth-child(2) { background: var(--cl-pierre); }
.idv-ecran__vignettes i:nth-child(3) { background: var(--cl-olive); }
.idv-ecran__bandeau { display: grid; place-items: center; height: 2.6rem; border-radius: 3px; background: var(--cl-pierre); }

/* Noms fictifs plus longs (« Attendu Que ») : espacement réduit */
.idv-sit-installe__cadre { width: 12.5rem; }
.idv-sit-installe__logo b { letter-spacing: 0.18em; padding-left: 0.18em; }
.idv-ecran__signature b { letter-spacing: 0.12em; }
.idv-marque__nom { letter-spacing: 0.24em; padding-left: 0.24em; }

/* Signature du syndic : sa propre initiale (Octave 6) */
.idv-mail__logo b { font: 600 1.6rem / 1 var(--f-titre); }

/* Petits points (Octave 10, Pauline 1) */
.idv-vitrine__symboles { max-width: 18rem; }
.idv-vitrine__repartition { white-space: nowrap; }
.idv-offres__pour p + p { margin-top: 0; }
.idv-final:has(.idv-final__fond) .idv-final__contenu { max-width: 48rem; }
.idv-voyage__titre { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem); }
.idv-pastille { font-size: 0.875rem; }
@media (max-width: 39.99em) { .idv-comparatif__prix { font-size: 0.875rem; } }

/* v5 (23/10/2026, Raoudha : « le 1 et le 2 ») : éléments graphiques (identité complète) et logo animé (option sur devis) */
@media (min-width: 80em) { .idv-livrables { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.idv-v-elements { grid-auto-flow: column; gap: 1.1rem; }
.idv-v-elements__motif { display: block; width: 5.5rem; height: 5.5rem; border-radius: 4px; background:
  repeating-linear-gradient(45deg, transparent 0 9px, rgba(232, 225, 213, 0.9) 9px 11px),
  repeating-linear-gradient(-45deg, transparent 0 9px, rgba(95, 107, 59, 0.9) 9px 11px), var(--cl-nuit);
  box-shadow: 0 0.75rem 1.25rem -0.5rem rgba(0, 0, 0, 0.5); }
.idv-v-elements__icones { display: grid; gap: 0.45rem; }
.idv-v-elements__icones svg { width: 1.9rem; height: 1.9rem; padding: 0.3rem; border-radius: 50%; background: var(--cl-pierre); fill: none; stroke: var(--cl-nuit); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.js .idv-livrable.est-visible .idv-v-elements__icones svg { animation: idv-pose 0.5s var(--ease-sortie) both; }
.js .idv-livrable.est-visible .idv-v-elements__icones svg:nth-child(2) { animation-delay: 0.12s; }
.js .idv-livrable.est-visible .idv-v-elements__icones svg:nth-child(3) { animation-delay: 0.24s; }
.idv-livrable--option { border-color: rgba(176, 99, 57, 0.4); }
.idv-livrable--option .idv-pastille { border-color: var(--cuivre); color: #8A4A28; }
.idv-v-anime { background: radial-gradient(ellipse 70% 90% at 50% 40%, #2A3858, var(--cl-nuit)); }
.idv-v-anime__mono { width: 6.5rem; height: 6.5rem; overflow: visible; }
.idv-v-anime__trait { fill: none; stroke: var(--cl-pierre); stroke-width: 3; }
.idv-v-anime__trait--or { stroke: var(--or); }
.idv-v-anime__lettre { font: 500 88px var(--f-titre); fill: var(--cl-pierre); }
.js .idv-livrable.est-visible .idv-v-anime__trait { stroke-dasharray: 1; animation: idv-trace 0.7s 0.2s var(--ease-douce) both; }
.js .idv-livrable.est-visible .idv-v-anime__trait--or { animation-delay: 0.8s; animation-duration: 0.4s; }
.js .idv-livrable.est-visible .idv-v-anime__mono { animation: idv-pose 0.7s 0.1s var(--ease-sortie) both; }   /* sur le svg, pas sur le <text> (plantage de Chromium 157) */

/* v6 (23/10/2026) : second contrôle de Pauline */
@keyframes idv-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }   /* retirée par erreur au nettoyage, utilisée par le logo animé */
.idv-oui { display: block; margin-inline: auto; }   /* coches centrées dans le tableau (le thème met les svg en bloc) */
@media (max-width: 55.99em) { .idv-ecran__cadre { aspect-ratio: auto; } }   /* écrans de « Une même identité » : plus de bas coupé au téléphone */