.elementor-kit-5{--e-global-color-primary:#00A8C4;--e-global-color-secondary:#0D6E82;--e-global-color-text:#E8ECF4;--e-global-color-951176f:#0A0C10;--e-global-color-6c4c30f:#11141B;--e-global-color-3616d70:#A6B0C2;--e-global-color-278965b:#232936;--e-global-color-b65699d:#E88B2A;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-size:42px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:0.02em;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-size:21px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.4em;background-color:#0A0C10;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════════
   OPUS — CSS DU SITE
   opus-authoring.com

   À coller dans : Elementor → Paramètres du site → CSS personnalisé
   Remplace intégralement le contenu actuel.

   ── CE QUI A ÉTÉ CORRIGÉ PAR RAPPORT À TA VERSION ─────────────────

   · Le bloc .opus-visuel-picto a été SUPPRIMÉ. C'est lui qui posait
     le rectangle sombre au survol des pictogrammes. Tu avais réglé
     le symptôme en retirant la classe des widgets ; la règle, elle,
     était toujours là et serait revenue au premier oubli.

   · @keyframes opusTrace était déclaré deux fois.

   · .opus-souligne::after était annulé par la règle de mouvement
     réduit alors qu'il n'existait plus : le trait sous le mot des
     titres ne se dessinait pas sur les pages intérieures. Il est
     rétabli.

   · Les trois blocs @media(prefers-reduced-motion) sont fusionnés.

   ── CE QUI A ÉTÉ AJOUTÉ ───────────────────────────────────────────

   · Le héros des pages intérieures — voile, étiquette, soulignement.
   · Le fond de la bande de preuve.
   · .opus-details et .opus-contact, pour les pages Configuration
     requise et Support.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ CORRECTIF ELEMENTOR ═════════════════════════════════════════
   Elementor pose .elementor-invisible sur tout élément portant une
   animation d'entrée, et son script doit la retirer au défilement.
   Sur ce site il ne le fait pas : sans ces trois lignes, aucun titre
   ni texte ne s'affiche.

   C'est un contournement, pas une correction. La cause reste à
   trouver — mais tant qu'elle l'est, ces lignes doivent rester. */
.elementor-invisible{
  opacity:1 !important;
  animation:none !important;
  visibility:visible !important;
}


/* ═══ VARIABLES ═══════════════════════════════════════════════════ */
:root{
  --noir:#0A0C10; --noir-2:#11141B; --noir-3:#171B24;
  --teal:#00A8C4; --teal-2:#0D6E82; --orange:#E88B2A;
  --texte:#E8ECF4; --texte-2:#A6B0C2; --texte-3:#7A8598;
  --trait:#232936;
}
body{ background:var(--noir); color:var(--texte); }


/* ═══ TIMELINE LATÉRALE ═══════════════════════════════════════════
   La signature visuelle : le curseur suit la progression de lecture,
   comme la tête de lecture d'une timeline d'authoring. */
.opus-spine{
  position:fixed; left:34px; top:0; bottom:0; width:1px; z-index:40;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--trait) 12%,
                             var(--trait) 88%,transparent);
}
.opus-spine::before{
  content:''; position:absolute; left:-3px; width:7px; height:7px;
  border-radius:50%; background:var(--teal); top:var(--pos,0%);
  transition:top .35s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 0 4px rgba(0,168,196,.16), 0 0 18px rgba(0,168,196,.7);
}
@media(max-width:1080px){ .opus-spine{ display:none; } }


/* ═══ EN-TÊTE ═════════════════════════════════════════════════════
   Elementor n'a pas d'état « collant » dans ses réglages de style :
   il pose en revanche cette classe dès que le conteneur se fige. */
.opus-tete{
  background-color:rgba(10,12,16,0);
  border-bottom:1px solid transparent;
  transition:background-color .4s cubic-bezier(.4,0,.2,1),
             border-color .4s, padding .4s, backdrop-filter .4s;
}
.opus-tete.elementor-sticky--effects{
  background-color:rgba(10,12,16,.85);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--trait);
  padding-top:11px; padding-bottom:11px;
}

.opus-nav .elementor-item{ position:relative; }
.opus-nav .elementor-item::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--teal); transition:width .3s cubic-bezier(.4,0,.2,1);
}
.opus-nav .elementor-item:hover::after{ width:100%; }


/* ═══ BOUTONS ═════════════════════════════════════════════════════
   Le remplissage monte depuis le bas. inset:-1px et translateZ(0)
   évitent le liseré d'arrondi que laissait un calcul au pixel près. */
.opus-btn .elementor-button{
  position:relative; overflow:hidden;
  transform:translateZ(0); backface-visibility:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s, border-color .3s;
}
.opus-btn .elementor-button-content-wrapper{ position:relative; z-index:2; }
.opus-btn .elementor-button::before{
  content:''; position:absolute; inset:-1px; z-index:1; border-radius:inherit;
  transform:translate3d(0,101%,0);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.opus-btn .elementor-button:hover{ transform:translateY(-2px) translateZ(0); }
.opus-btn .elementor-button:hover::before{ transform:translate3d(0,0,0); }
.opus-btn.btn-1 .elementor-button::before{ background:#4DDCF2; }
.opus-btn.btn-1 .elementor-button:hover{ box-shadow:0 12px 34px -10px rgba(0,168,196,.65); }
.opus-btn.btn-2 .elementor-button::before{ background:var(--noir-3); }
.opus-btn.btn-2 .elementor-button:hover{ border-color:var(--teal)!important; }
.opus-btn.btn-3 .elementor-button{ backdrop-filter:blur(8px); }
.opus-btn.btn-3 .elementor-button::before{ background:rgba(255,255,255,.14); }
.opus-btn.btn-3 .elementor-button:hover{ border-color:#fff!important; }


/* ═══════════════════════════════════════════════════════════════════
   HÉROS DE L'ACCUEIL — TROIS VUES
   ═══════════════════════════════════════════════════════════════════ */

.opus-hero{
  position:relative; width:100%;
  height:min(100svh, 880px); min-height:560px;
  overflow:hidden; background:var(--noir);
  /* Le conteneur Elementor ajoute ses marges : on les annule ici pour
     que le héros touche vraiment les bords de l'écran. */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw;
}

.oh-vue{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s cubic-bezier(.22,1,.36,1), visibility 0s .9s;
}
.oh-vue.on{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .9s cubic-bezier(.22,1,.36,1), visibility 0s 0s;
}

/* ─── L'image, dévoilée par un volet vertical ─────────────────────
   Elle ne glisse pas : elle se découvre du haut vers le bas, comme un
   rideau qui se lève. Puis elle dérive très lentement pendant les
   sept secondes d'affichage — un mouvement qu'on ne voit pas mais qui
   empêche l'image de paraître morte. */
.oh-fond{
  position:absolute; inset:0;
  background-size:cover;

  /* CADRAGE — piloté par une variable, réglée plus bas selon la
     largeur de l'écran.

     Sur un téléphone en portrait, « cover » agrandit l'image jusqu'à
     remplir la hauteur et coupe tout ce qui dépasse à gauche et à
     droite. Avec un cadrage au centre, un sujet placé à droite — ce
     qui est le cas de nos visuels — disparaît purement et simplement.

     D'où un cadrage décalé vers la droite en portrait. */
  background-position: var(--cadrage, center);
  background-color:#0D1218;
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
}
.oh-vue.on .oh-fond{
  animation:ohVolet 1.15s cubic-bezier(.65,0,.35,1) forwards,
            ohDerive 9s linear .8s forwards;
}
@keyframes ohVolet{ to{ clip-path:inset(0 0 0 0); } }
@keyframes ohDerive{ from{ transform:scale(1.08); } to{ transform:scale(1.005); } }

/* Grain : une trame très fine qui casse le lisse du dégradé et donne
   à l'image une matière de pellicule. */
.oh-grain{
  position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

.oh-voile{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,12,16,.95) 0%, rgba(10,12,16,.80) 42%,
                    rgba(10,12,16,.30) 72%, rgba(10,12,16,.55) 100%),
    linear-gradient(180deg, rgba(10,12,16,.55) 0%, transparent 22%,
                    transparent 72%, rgba(10,12,16,.92) 100%);
}
.oh-voile::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--teal), rgba(0,168,196,0) 65%);
}

.oh-txt{
  position:relative; z-index:3; height:100%;
  display:flex; align-items:center; padding:0 24px;
}
.oh-inner{ max-width:1180px; margin:0 auto; width:100%; }

/* Chaque ligne entre par le bas, l'une après l'autre. Le décalage est
   ce qui fait qu'on lit au lieu de tout voir d'un coup. */
.oh-inner > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),
             transform .85s cubic-bezier(.22,1,.36,1);
}
.oh-vue.on .oh-inner > *{ opacity:1; transform:none; }
.oh-vue.on .oh-inner > *:nth-child(1){ transition-delay:.45s; }
.oh-vue.on .oh-inner > *:nth-child(2){ transition-delay:.58s; }
.oh-vue.on .oh-inner > *:nth-child(3){ transition-delay:.71s; }
.oh-vue.on .oh-inner > *:nth-child(4){ transition-delay:.84s; }
.oh-vue.on .oh-inner > *:nth-child(5){ transition-delay:.95s; }

.oh-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(0,168,196,.34); border-radius:100px;
  padding:7px 15px; background:rgba(0,168,196,.09);
  margin-bottom:26px; backdrop-filter:blur(6px);
}
.oh-tag i{
  width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:opusPulse 2.4s ease-in-out infinite;
}

.opus-hero h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(2.1rem, 5.1vw, 4.25rem); line-height:1.04;
  letter-spacing:-.032em; color:var(--texte);
  max-width:17ch; margin:0 0 22px;
}
.opus-hero h1 em{
  font-style:normal; color:var(--teal); position:relative; white-space:nowrap;
}
.opus-hero h1 em::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:3px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
}
.oh-vue.on h1 em::after{
  animation:opusTrait .85s cubic-bezier(.4,0,.2,1) 1.25s forwards;
}

.opus-hero .oh-inner > p{
  font-size:clamp(15.5px, 1.5vw, 19px); line-height:1.62;
  color:var(--texte-2); max-width:53ch; margin:0 0 32px;
}
.opus-hero .oh-sous{
  font-size:13.5px; color:var(--texte-3); margin:18px 0 0;
}

.oh-btns{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.oh-b{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Inter,sans-serif; font-size:15px; font-weight:600;
  padding:15px 28px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; position:relative; overflow:hidden;
  transform:translateZ(0); backface-visibility:hidden;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),
             box-shadow .25s, border-color .3s;
}
.oh-b span{ position:relative; z-index:2; }
.oh-b::before{
  content:''; position:absolute; inset:-1px; z-index:1; border-radius:inherit;
  transform:translate3d(0,101%,0);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.oh-b:hover{ transform:translateY(-2px) translateZ(0); }
.oh-b:hover::before{ transform:translate3d(0,0,0); }
.oh-b:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.oh-b1{ background:var(--teal); color:#05161A; }
.oh-b1::before{ background:#4DDCF2; }
.oh-b1:hover{ box-shadow:0 12px 34px -10px rgba(0,168,196,.65); }
.oh-b2{
  background:rgba(10,12,16,.4); color:#fff;
  border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px);
}
.oh-b2::before{ background:rgba(255,255,255,.14); }
.oh-b2:hover{ border-color:#fff; }

/* ─── Puces avec jauge de progression ────────────────────────────
   La barre se remplit pendant l'affichage : on sait où on en est au
   lieu d'attendre sans repère. Au survol du héros, elle se fige. */
.oh-puces{
  position:absolute; left:0; right:0; bottom:30px; z-index:5;
  display:flex; gap:11px; justify-content:center; padding:0 24px;
}
.oh-puces button{
  width:44px; height:4px; border-radius:4px; border:0; padding:0;
  background:rgba(255,255,255,.22); cursor:pointer;
  position:relative; overflow:hidden; transition:width .4s, background .3s;
}
.oh-puces button:hover{ background:rgba(255,255,255,.42); }
.oh-puces button.on{ width:74px; background:rgba(255,255,255,.18); }
.oh-puces button.on::after{
  content:''; position:absolute; inset:0; transform-origin:left;
  background:var(--teal); animation:ohJauge var(--duree,7s) linear forwards;
}
.opus-hero.pause .oh-puces button.on::after{ animation-play-state:paused; }
@keyframes ohJauge{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.oh-puces button:focus-visible{ outline:2px solid var(--teal); outline-offset:4px; }


/* ═══════════════════════════════════════════════════════════════════
   HÉROS DES PAGES INTÉRIEURES
   Une seule image de fond, posée en arrière-plan du conteneur. Même
   voile et même étiquette que l'accueil, sans l'enchaînement.
   ═══════════════════════════════════════════════════════════════════ */

.opus-heros{ position:relative; overflow:hidden; }
.opus-heros .opus-voile{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,12,16,.94) 0%,
                             rgba(10,12,16,.80) 46%, rgba(10,12,16,.38) 100%);
}
@media(max-width:760px){
  .opus-heros .opus-voile{
    background:linear-gradient(180deg, rgba(10,12,16,.70), rgba(10,12,16,.95));
  }
}

.opus-etiquette{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--teal);
  border:1px solid rgba(0,168,196,.34); border-radius:100px;
  padding:7px 15px; background:rgba(0,168,196,.09);
}
.opus-pt{
  width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:opusPulse 2.4s ease-in-out infinite;
}
@keyframes opusPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(1.5); }
}

/* Le trait sous le mot mis en avant des titres. */
.opus-souligne{ position:relative; white-space:nowrap; color:var(--teal); }
.opus-souligne::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:3px;
  background:var(--teal); transform:scaleX(0); transform-origin:left;
  animation:opusTrait .85s cubic-bezier(.4,0,.2,1) .8s forwards;
}
@keyframes opusTrait{ to{ transform:scaleX(1); } }


/* ═══ BANDE DE PREUVE ═════════════════════════════════════════════ */
.opus-preuve{
  border-top:1px solid var(--trait);
  border-bottom:1px solid var(--trait);
  background:var(--noir-2);
}
.opus-pv b{
  font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700;
  display:block; color:var(--texte); line-height:1.2;
}
.opus-pv span{ font-size:13px; color:var(--texte-3); letter-spacing:.03em; }


/* ═══ CARTES ══════════════════════════════════════════════════════
   Le filet teal se déploie en haut au survol, la carte se soulève.
   Le fond ne change PAS : c'est le pictogramme qui réagit. */
.opus-carte{
  position:relative; overflow:hidden;
  transition:transform .45s cubic-bezier(.4,0,.2,1), border-color .45s,
             background .45s, box-shadow .45s;
}
.opus-carte::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:4;
  background:linear-gradient(90deg,var(--teal),rgba(0,168,196,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.opus-carte:hover{
  transform:translateY(-7px); border-color:#2F3A4B!important;
  box-shadow:0 26px 52px -30px rgba(0,0,0,.95);
}
.opus-carte:hover::before{ transform:scaleX(1); }

.opus-carte .opus-visuel img{
  transition:transform .8s cubic-bezier(.4,0,.2,1);
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
}
.opus-carte:hover .opus-visuel img{ transform:scale(1.06); }
.opus-tuto .opus-visuel img{ aspect-ratio:16/10; }

.opus-fleche a{
  display:inline-flex; align-items:center; gap:7px;
  transition:gap .3s; color:var(--teal); text-decoration:none;
}
.opus-fleche a:hover{ gap:13px; }


/* ═══ PICTOGRAMMES ════════════════════════════════════════════════
   line-height n'est PAS posé sur le conteneur : cette propriété
   s'hérite, et tout texte placé dans un élément à line-height:0
   devient invisible. Elle ne s'applique qu'au SVG. */
.opus-picto{ color:var(--teal); }
.opus-picto svg{ display:block; overflow:visible; line-height:0; }

/* Le tracé se dessine au survol : chaque trait devient un pointillé
   dont le vide fait toute sa longueur, puis le décalage revient à
   zéro. 240 correspond à l'échelle réelle des tracés. */
.opus-picto svg *{ stroke-dasharray:240; stroke-dashoffset:0; }

.opus-picto-seul{
  display:flex; align-items:center; justify-content:center;
  padding:26px 0 4px;
}

/* Bande de preuve — petit, au-dessus du chiffre */
.opus-picto-pv{ padding:0 0 2px; transition:color .35s; }
.opus-picto-pv svg{ width:30px; height:30px; stroke-width:1.55;
                    transition:filter .35s; }
.opus-picto-pv:hover{ color:#4DDCF2; }
.opus-picto-pv:hover svg{ filter:drop-shadow(0 0 9px rgba(0,168,196,.75)); }

/* Cartes de supports — grand */
.opus-picto-carte{ padding:34px 0 6px; }
.opus-picto-carte svg{
  width:78px; height:78px; stroke-width:.58;
  transition:transform .6s cubic-bezier(.4,0,.2,1), filter .45s;
}
/* Cartes de tutoriels — intermédiaire */
.opus-picto-tuto{ padding:28px 0 4px; }
.opus-picto-tuto svg{
  width:62px; height:62px; stroke-width:.74;
  transition:transform .6s cubic-bezier(.4,0,.2,1), filter .45s;
}

/* Au survol de la CARTE, pas du pictogramme : la zone sensible est
   ainsi bien plus large. */
.opus-carte:hover .opus-picto-carte,
.opus-carte:hover .opus-picto-tuto{ color:#5FE6F8; }

.opus-carte:hover .opus-picto-carte svg,
.opus-carte:hover .opus-picto-tuto svg{
  transform:scale(1.07);
  filter:drop-shadow(0 0 10px rgba(0,168,196,.6));
}
.opus-carte:hover .opus-picto-carte svg *,
.opus-carte:hover .opus-picto-tuto svg *{
  animation:opusTrace 1.15s cubic-bezier(.55,0,.25,1) forwards;
}
@keyframes opusTrace{
  from{ stroke-dashoffset:240; }
  to  { stroke-dashoffset:0; }
}


/* ═══ ATELIER ET CAPTURES ═════════════════════════════════════════ */
.opus-puce{
  width:34px; height:34px; flex-shrink:0; border-radius:8px;
  background:rgba(0,168,196,.1); border:1px solid rgba(0,168,196,.3);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700;
  transition:.35s;
}
.opus-capture img{
  border-radius:13px; border:1px solid var(--trait);
  box-shadow:0 34px 70px -40px rgba(0,0,0,.95);
  width:100%; aspect-ratio:16/9; object-fit:cover;
}


/* ═══ COMPARATIF ENCORE ═══════════════════════════════════════════ */
.opus-duo-liste{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.opus-duo-liste li{ display:flex; gap:12px; align-items:flex-start; }
.opus-duo-liste i{ font-style:normal; flex-shrink:0; }


/* ═══ TABLEAUX ════════════════════════════════════════════════════
   Sur téléphone ils défilent horizontalement plutôt que de se tasser :
   un tableau de comparaison illisible ne compare plus rien. */
.opus-tableau{
  overflow-x:auto; border:1px solid var(--trait); border-radius:12px;
  background:var(--noir);
}
.opus-tableau table{
  width:100%; border-collapse:collapse; min-width:600px; font-size:15px;
}
.opus-tableau th, .opus-tableau td{
  padding:15px 20px; text-align:left;
  border-bottom:1px solid var(--trait);
}
.opus-tableau thead th{
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texte-3);
  background:var(--noir-3); border-bottom:1px solid var(--trait);
}
.opus-tableau thead th:last-child{ color:var(--teal); }
.opus-tableau tbody th{ font-weight:500; color:var(--texte); font-size:15px; }
.opus-tableau .opus-avant{ color:var(--texte-3); }
.opus-tableau .opus-apres{ color:var(--texte-2); }
.opus-tableau .opus-gagne .opus-apres{ color:var(--teal); font-weight:600; }
.opus-tableau tbody tr:last-child th,
.opus-tableau tbody tr:last-child td{ border-bottom:0; }
.opus-tableau tbody tr{ transition:background .3s; }
.opus-tableau tbody tr:hover{ background:rgba(255,255,255,.02); }

/* Légende lue par les lecteurs d'écran, invisible à l'affichage. */
.opus-invisible{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}


/* ═══ BLOCS DE DÉTAIL ═════════════════════════════════════════════
   Page Configuration requise : le commentaire de chaque ligne du
   tableau. Le filet turquoise à gauche les relie visuellement aux
   questions fréquentes, qui portent le même. */
.opus-details{ display:flex; flex-direction:column; gap:22px; }
.opus-detail{
  border-left:2px solid var(--trait); padding-left:22px;
  transition:border-color .35s;
}
.opus-detail:hover{ border-left-color:var(--teal); }
.opus-detail-t{
  font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700;
  color:var(--texte); margin:0 0 6px;
}
.opus-detail-p{
  font-size:15px; color:var(--texte-2); line-height:1.62; margin:0;
  max-width:70ch;
}


/* ═══ BLOC DE CONTACT ═════════════════════════════════════════════ */
.opus-contact{
  border:1px solid var(--trait); border-left:3px solid var(--teal);
  border-radius:12px; padding:34px 32px;
  background:linear-gradient(160deg, rgba(0,168,196,.06), transparent);
  text-align:center;
}
.opus-contact-t{
  font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal);
  margin:0 0 14px;
}
.opus-contact-mail{ margin:0 0 16px; }
.opus-contact-mail a{
  font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:700;
  color:var(--texte); text-decoration:none;
  border-bottom:1px solid transparent; transition:.3s;
}
.opus-contact-mail a:hover{ color:var(--teal); border-bottom-color:var(--teal); }
.opus-contact-p{
  font-size:14.5px; color:var(--texte-3); line-height:1.6; margin:0;
  max-width:52ch; margin-left:auto; margin-right:auto;
}
@media(max-width:520px){
  .opus-contact-mail a{ font-size:18px; word-break:break-all; }
}


/* ═══ TARIFS ══════════════════════════════════════════════════════
   Le montant doit se lire d'un coup d'œil : c'est la seule
   information que le visiteur cherche en arrivant sur cette page. */
.opus-prix{
  display:flex; align-items:baseline; justify-content:center;
  gap:8px; flex-wrap:wrap;
}
.opus-montant{
  font-family:'Space Grotesk',sans-serif; font-size:58px; font-weight:700;
  color:var(--texte); line-height:1; letter-spacing:-.03em;
}
.opus-devise{
  font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:500;
  color:var(--texte-3); letter-spacing:.04em;
}
.opus-barre{
  font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:500;
  color:var(--texte-3); text-decoration:line-through;
  text-decoration-color:var(--orange); margin-right:4px;
}
.opus-tarif{ transition:transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s; }
.opus-tarif:hover{ transform:translateY(-6px); }

.opus-inclus{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;
}
@media(max-width:680px){ .opus-inclus{ grid-template-columns:1fr; } }
.opus-inclus li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:15.5px; color:var(--texte-2); line-height:1.55;
}
.opus-inclus i{ font-style:normal; color:var(--teal); flex-shrink:0; font-weight:700; }

.opus-compar{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--trait); border-radius:14px; overflow:hidden;
}
@media(max-width:680px){ .opus-compar{ grid-template-columns:1fr; } }
.opus-compar-col{ padding:36px 32px; text-align:center; background:var(--noir); }
.opus-compar-col:first-child{ border-right:1px solid var(--trait); }
@media(max-width:680px){
  .opus-compar-col:first-child{
    border-right:0; border-bottom:1px solid var(--trait);
  }
}
.opus-compar-on{
  background:linear-gradient(160deg, rgba(0,168,196,.08), transparent);
}
.opus-compar-t{
  font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texte-3);
  margin:0 0 14px;
}
.opus-compar-on .opus-compar-t{ color:var(--teal); }
.opus-compar-p{
  font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700;
  color:var(--texte); margin:0 0 12px; letter-spacing:-.02em; line-height:1.1;
}
.opus-compar-on .opus-compar-p{ color:var(--teal); }
.opus-compar-s{
  font-size:14px; color:var(--texte-3); line-height:1.6; margin:0;
  max-width:34ch; margin-left:auto; margin-right:auto;
}


/* ═══ LIENS DE BAS DE PAGE ════════════════════════════════════════ */
.opus-liens-bas a{
  color:var(--texte-2); text-decoration:none;
  border-bottom:1px solid transparent; transition:.3s;
}
.opus-liens-bas a:hover{ color:var(--teal); border-bottom-color:var(--teal); }

.opus-pied a:hover{ color:var(--teal); }


/* ═══ RESPONSIVE DU HÉROS ═════════════════════════════════════════ */

/* Tablette : le voile s'assombrit, le cadrage glisse vers le sujet. */
@media(max-width:1024px){
  .opus-hero{ height:min(84svh, 720px); }
  .oh-fond{ --cadrage: 62% center; }
  .oh-voile{
    background:
      linear-gradient(90deg, rgba(10,12,16,.95) 0%, rgba(10,12,16,.86) 55%,
                      rgba(10,12,16,.48) 100%),
      linear-gradient(180deg, rgba(10,12,16,.5) 0%, transparent 25%,
                      transparent 70%, rgba(10,12,16,.94) 100%);
  }
}

/* Téléphone paysage : très peu de hauteur. Le héros se resserre au
   lieu de couper le texte. */
@media(max-height:540px) and (orientation:landscape){
  .opus-hero{ height:auto; min-height:0; padding:96px 0 74px; }
  .oh-fond{ --cadrage: center; }
  .oh-vue{ position:absolute; }
  .oh-vue.on{ position:relative; }
  .opus-hero h1{ font-size:clamp(1.6rem,4.2vw,2.3rem); margin-bottom:14px; }
  .opus-hero .oh-inner > p{ font-size:15px; margin-bottom:20px; }
  .oh-tag{ margin-bottom:15px; }
  .oh-sous{ display:none; }
  .oh-puces{ position:relative; bottom:auto; margin-top:26px; }
}

/* Téléphone portrait : le sujet est à droite de l'image, on cadre
   dessus. 75 % plutôt que 100 % : collé à droite, on perdrait la
   respiration autour du sujet et l'image paraîtrait amputée. */
@media(max-width:640px){
  .opus-hero{
    height:auto; min-height:0; padding:120px 0 92px;
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }
  .oh-fond{ --cadrage: 75% center; }
  .oh-vue{ position:absolute; }
  .oh-vue.on{ position:relative; }
  .oh-txt{ padding:0 20px; }
  .oh-voile{
    background:
      linear-gradient(180deg, rgba(10,12,16,.62) 0%, rgba(10,12,16,.80) 45%,
                      rgba(10,12,16,.95) 100%);
  }
  .opus-hero h1{ max-width:100%; }
  .opus-hero .oh-inner > p{ max-width:100%; }
  .oh-btns{ flex-direction:column; align-items:stretch; width:100%; }
  .oh-b{ width:100%; }
  .oh-puces{ position:relative; bottom:auto; margin-top:34px; }
  .oh-puces button{ width:36px; }
  .oh-puces button.on{ width:60px; }
}

@media(max-width:400px){
  .opus-hero{ padding:104px 0 78px; }
  .opus-hero h1{ font-size:1.78rem; }
  .oh-b{ padding:14px 20px; font-size:14.5px; }
}


/* ═══ MOUVEMENT RÉDUIT ════════════════════════════════════════════
   Respecte le réglage système de ceux que les animations gênent.
   Un seul bloc, à la fin : les trois précédents faisaient double
   emploi. */
@media(prefers-reduced-motion:reduce){
  .oh-fond, .oh-vue.on .oh-fond{
    animation:none; clip-path:none; transform:none;
  }
  .oh-inner > *{ opacity:1; transform:none; transition:none; }
  .opus-hero h1 em::after,
  .opus-souligne::after{ animation:none; transform:scaleX(1); }
  .oh-tag i, .opus-pt{ animation:none; }
  .oh-puces button.on::after{ animation:none; transform:scaleX(1); }
  .oh-b, .opus-btn .elementor-button, .opus-carte,
  .opus-carte .opus-visuel img, .opus-puce{ transition:none!important; }
  .opus-picto svg, .opus-picto svg *{
    transition:none!important; animation:none!important;
  }
}/* End custom CSS */