/* =========================================================================
   SecurPDF — feuille de style du site
   Charte « cabinet » identique à celle du logiciel :
   ivoire, marine, laiton, rouge tampon.

   POLICES : aucune requête vers Google Fonts (un appel au CDN de Google
   transmet l'adresse IP du visiteur aux États-Unis, ce que la CNIL
   sanctionne). Deux possibilités :
     1. laisser la pile système ci-dessous (rendu correct partout) ;
     2. déposer Lora et Carlito en .woff2 dans /polices et décommenter
        les blocs @font-face — c'est ce que fait déjà la plaquette.
   ========================================================================= */

/*
@font-face{ font-family:"Lora"; font-style:normal; font-weight:400;
  font-display:swap; src:url(polices/lora-400.woff2) format("woff2"); }
@font-face{ font-family:"Lora"; font-style:normal; font-weight:700;
  font-display:swap; src:url(polices/lora-700.woff2) format("woff2"); }
@font-face{ font-family:"Carlito"; font-style:normal; font-weight:400;
  font-display:swap; src:url(polices/carlito-400.woff2) format("woff2"); }
@font-face{ font-family:"Carlito"; font-style:normal; font-weight:700;
  font-display:swap; src:url(polices/carlito-700.woff2) format("woff2"); }
*/

:root{
  /* Palette verrouillée — identique aux constantes en tête de TonioPDF.py */
  --ivoire:#F1EDE3;
  --marine:#1B2A44;
  --marine-clair:#2A3D5F;
  --laiton:#B99F52;
  --laiton-vif:#A88A3E;
  --encre:#221F18;
  --rouge:#C1272D;
  --or-vif:#EFA783;   /* accroche du héros : terre cuite claire, 7,2:1 sur le marine */

  /* Neutres dérivés */
  --papier:#FFFFFF;
  --graphite:#6B6353;
  --trait:#D8D2C2;
  --ivoire-pale:#F7F4EA;

  --titre:"Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --texte:"Carlito", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;

  --marge:clamp(1.25rem, 5vw, 4rem);
  --largeur:1160px;
  --rayon:6px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (max-width:900px){ html{ scroll-padding-top:1rem; } }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  font-family:var(--texte);
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--encre);
  background:var(--ivoire);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--titre); font-weight:700; line-height:1.15; margin:0; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:var(--marine); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--laiton-vif); }

:focus-visible{ outline:3px solid var(--laiton-vif); outline-offset:2px; }

.saut-contenu{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--papier); color:var(--marine);
  padding:.75rem 1.25rem; border-radius:0 0 var(--rayon) 0; font-weight:700;
}
.saut-contenu:focus{ left:0; }

.contenu{ width:min(100% - 2*var(--marge), var(--largeur)); margin-left:auto; margin-right:auto; }

/* ---------------------------------------------------------------- BANDEAU */
.bandeau{
  position:sticky; top:0; z-index:50;
  background:var(--marine);
  border-bottom:3px solid var(--laiton);
}
.bandeau > .contenu{
  display:flex; align-items:center; gap:1.5rem;
  min-height:4.25rem; padding-block:.55rem;
}
.marque{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.marque img{ width:34px; height:34px; border-radius:8px; }
.marque .nom{
  font-family:var(--titre); font-weight:700; font-size:1.4rem;
  color:#fff; letter-spacing:-.01em;
}
.marque .nom span{ color:#E4D5A8; }
.marque:hover .nom{ color:#fff; }

.navigation{ display:flex; align-items:center; gap:1.35rem; }
.navigation a{
  color:rgba(255,255,255,.86); text-decoration:none;
  font-size:.9rem; letter-spacing:.02em; padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.navigation a:hover{ color:#fff; border-bottom-color:var(--laiton); }

/* Sur petit écran, la navigation passe sur une deuxième ligne défilante
   plutôt que de disparaître, et le bandeau cesse d'être collant :
   deux lignes fixes mangeraient trop de hauteur sur un téléphone. */
@media (max-width:900px){
  .bandeau{ position:static; }
  .bandeau > .contenu{ flex-wrap:wrap; gap:.6rem 1rem; }
  .navigation{
    order:3; width:100%; gap:1.15rem;
    overflow-x:auto; padding-bottom:.2rem;
    scrollbar-width:none;
  }
  .navigation::-webkit-scrollbar{ display:none; }
  .navigation a{ white-space:nowrap; }
}

/* ---------------------------------------------------------------- BOUTONS */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--texte); font-size:.95rem; font-weight:700;
  padding:.7rem 1.35rem; border-radius:var(--rayon);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Texte encre et non marine : sur le laiton, le marine tombe à 4,36:1,
   sous le seuil AA. Avec l'encre on est à 4,99:1. */
.bouton-plein{ background:var(--laiton-vif); color:var(--encre); }
.bouton-plein:hover{ background:#C4A24C; color:var(--encre); }
.bouton-clair{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.bouton-clair:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }
.bouton-sombre{ background:var(--marine); color:#fff; }
.bouton-sombre:hover{ background:var(--marine-clair); color:#fff; }
.bouton-fin{ background:transparent; color:var(--marine); border-color:var(--trait); }
.bouton-fin:hover{ background:var(--papier); color:var(--marine); border-color:var(--marine); }

/* ================================================================ OUVERTURE
   Première page, entièrement centrée, qui doit tenir dans la fenêtre sans
   défilement : logo, marque, sous-titre, trois atouts, flèche.

   Les tailles sont en vmin et non en vw : sur un portable 1366 × 768, très
   répandu en cabinet, une taille réglée sur la largeur déborderait en hauteur.
   Le vmin suit la plus petite des deux dimensions.

   Chaque clamp() est précédé d'une valeur simple, pour les moteurs qui
   l'ignorent. Ne pas supprimer ces lignes en double.
   ======================================================================== */
.ouverture{
  position:relative;
  background:var(--marine); color:#fff;
  text-align:center;
  min-height:calc(100vh - 4.5rem);
  min-height:calc(100svh - 4.5rem);
  display:flex; flex-direction:column; align-items:center;
  justify-content:space-between;
  padding-block:2.5rem;
  padding-block:clamp(1.5rem,4vh,3rem);
}
@media (max-width:900px){
  /* sous 900px le bandeau n'est plus collant et occupe deux lignes */
  .ouverture{ min-height:calc(100vh - 7.5rem); min-height:calc(100svh - 7.5rem); }
}
/* Le contenu occupe toute la hauteur disponible et répartit ses deux blocs —
   identité et atouts — au lieu de se tasser au centre. La flèche reste en bas
   du flux : aucun recouvrement possible quelle que soit la hauteur. */
.ouverture > .contenu{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  justify-content:space-around;   /* repli pour les moteurs anciens */
  justify-content:space-evenly;
  gap:.9rem; gap:clamp(.5rem,1.8vh,1.4rem);
  margin-top:0; margin-bottom:0;
}

.logo-ouverture{
  width:6.5rem; height:6.5rem;
  width:clamp(4rem,12vmin,9rem); height:auto;
  margin:0 auto 1.2rem; border-radius:22%;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}

.marque-titre{
  font-family:var(--titre); font-weight:700; letter-spacing:-.02em; line-height:1;
  color:#fff;
  font-size:3.2rem;
  font-size:clamp(2.1rem,8.6vmin,5.2rem);
}
.marque-titre span{ color:var(--or-vif); }

.marque-sous{
  margin-top:.7rem;
  font-size:1.15rem;
  font-size:clamp(.9rem,2.75vmin,1.7rem);
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--laiton);
}

.atouts{
  list-style:none; padding:0;
  /* Marge de sécurité : les moteurs sans flex gap ni space-evenly (Safari
     antérieur à 14.1) colleraient sinon les atouts au sous-titre. */
  margin:.7rem auto 0;
  margin:clamp(.4rem,1.2vh,.9rem) auto 0;
  /* Pas de largeur maximale ici : elle serait calculée sur la police de la
     liste, bien plus petite que celle des atouts, et les couperait en deux
     lignes. C'est le conteneur central qui borne la largeur. Chaque atout
     doit tenir sur une seule ligne. */
}
.atouts li{
  font-family:var(--titre); font-weight:700; line-height:1.25;
  color:var(--or-vif);
  font-size:1.85rem;
  font-size:clamp(1.2rem,4vmin,2.7rem);
  padding-top:1.4rem;
  padding-top:clamp(.85rem,2.8vh,1.9rem);
  margin-top:1.4rem;
  margin-top:clamp(.85rem,2.8vh,1.9rem);
  border-top:2px solid rgba(185,159,82,.45);
}
.atouts li:first-child{ margin-top:0; padding-top:0; border-top:none; }
.identite{ flex:none; }

/* Fenêtres basses — portables 1280 × 620, tablettes en paysage, téléphones
   couchés : on resserre tout, sinon la flèche passe sous la ligne de flottaison
   et la page n'est plus « d'un seul écran ». */
@media (max-height:700px){
  .logo-ouverture{ width:3.5rem; width:clamp(3rem,9vmin,5.5rem); margin-bottom:.7rem; }
  .marque-titre{ font-size:2.1rem; font-size:clamp(1.75rem,6.8vmin,3.1rem); }
  .marque-sous{ margin-top:.45rem; font-size:.85rem; font-size:clamp(.75rem,2.1vmin,1.1rem); }
  .atouts{ margin-top:.8rem; }
  .atouts li{
    font-size:1.2rem; font-size:clamp(1rem,3.1vmin,1.85rem);
    padding-top:.7rem; margin-top:.7rem;
  }
  .fleche{ margin-top:.7rem; }
}

.fleche{
  flex:none; margin-top:1.25rem;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:rgba(255,255,255,.6); text-decoration:none;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
.fleche:hover{ color:#fff; }
.fleche svg{ display:block; }

@media (prefers-reduced-motion:no-preference){
  .fleche svg{ animation:descendre 2.2s ease-in-out infinite; }
}
@keyframes descendre{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(6px); }
}

/* ------------------------------------------------------------------- HÉROS */
.heros{ background:var(--marine); color:#fff; padding-block:clamp(3rem,7vw,5.5rem); }
.heros .contenu{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:860px){ .heros .contenu{ grid-template-columns:1fr; } }

.surtitre{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:1.1rem;
}
/* L'accroche doit porter à elle seule : deux phrases, une hiérarchie de
   taille et de couleur, pas de fioriture. */
/* Colonne gauche du héros : l'offre d'essai, seule et en grand. */
.heros .offre{
  font-family:var(--titre); font-weight:700; letter-spacing:-.02em; line-height:1.05;
  color:#fff;
  font-size:2.6rem;
  font-size:clamp(1.9rem,4.8vw,3.5rem);
  margin-top:.9rem;
}
.heros .offre em{ font-style:normal; color:var(--or-vif); }

.heros .chapo{
  margin-top:1.25rem; font-size:1.1rem; line-height:1.55;
  color:rgba(255,255,255,.85); max-width:34em;
}
.heros .actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.heros .precision{
  margin-top:1rem; font-size:.85rem; color:rgba(255,255,255,.6);
}

.visuel-heros{ position:relative; }
.visuel-heros svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.35)); }

/* ==================================================================
   PLANCHE ANIMÉE DU HÉROS
   Six vignettes fixes, trois cycles de tampons qui s'y posent l'un après
   l'autre puis s'effacent, en boucle de 15s :

     cycle 1 (0 – 5 s)    numérotation continue      1 à 6
     cycle 2 (5 – 10 s)   une pièce en feuillets     3/1 à 3/6
     cycle 3 (10 – 15 s)  intitulés personnalisés    A/1 à A/3, puis ANNEXE

   Aucun élément animé ne porte d'attribut transform : une transformation
   CSS écraserait l'attribut SVG.

   L'état de repos est écrit en dur : sans animation, seuls les six tampons
   du premier cycle restent visibles. Le visuel n'est jamais vide, et les
   trois séries ne se superposent jamais.
   ================================================================== */
.visuel-heros{ position:relative; }
/* transform-box:fill-box est indispensable : sans lui, transform-origin:center
   se calcule sur la zone de dessin entière et non sur le tampon, qui part alors
   en vrille au lieu de se poser. Safari ne le gère que depuis la version 14
   (iPadOS 14, septembre 2020). Sur un iPad plus ancien, mieux vaut aucune
   animation qu'une animation fausse : d'où le @supports ci-dessous. */
.visuel-heros .anime{ transform-box:fill-box; transform-origin:center; }

.t1-1, .t1-2, .t1-3, .t1-4, .t1-5, .t1-6{ opacity:1; transform:rotate(-4deg); }
.t2-1, .t2-2, .t2-3, .t2-4, .t2-5, .t2-6,
.t3-1, .t3-2, .t3-3, .t3-4, .t3-5, .t3-6{ opacity:0; }

@supports (transform-box: fill-box){
@media (prefers-reduced-motion:no-preference){
  .t1-1{ animation:pose-1-1 15s ease-out infinite; }
  .t1-2{ animation:pose-1-2 15s ease-out infinite; }
  .t1-3{ animation:pose-1-3 15s ease-out infinite; }
  .t1-4{ animation:pose-1-4 15s ease-out infinite; }
  .t1-5{ animation:pose-1-5 15s ease-out infinite; }
  .t1-6{ animation:pose-1-6 15s ease-out infinite; }
  .t2-1{ animation:pose-2-1 15s ease-out infinite; }
  .t2-2{ animation:pose-2-2 15s ease-out infinite; }
  .t2-3{ animation:pose-2-3 15s ease-out infinite; }
  .t2-4{ animation:pose-2-4 15s ease-out infinite; }
  .t2-5{ animation:pose-2-5 15s ease-out infinite; }
  .t2-6{ animation:pose-2-6 15s ease-out infinite; }
  .t3-1{ animation:pose-3-1 15s ease-out infinite; }
  .t3-2{ animation:pose-3-2 15s ease-out infinite; }
  .t3-3{ animation:pose-3-3 15s ease-out infinite; }
  .t3-4{ animation:pose-3-4 15s ease-out infinite; }
  .t3-5{ animation:pose-3-5 15s ease-out infinite; }
  .t3-6{ animation:pose-3-6 15s ease-out infinite; }
}
}

@keyframes pose-1-1{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  1.33% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  4.0% { opacity:1; transform:scale(1) rotate(-4deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-4deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-1-2{
  0% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  4.0% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  6.67% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-6.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-6.5deg); }
}
@keyframes pose-1-3{
  0% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  6.67% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  9.33% { opacity:1; transform:scale(1) rotate(-3deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-3deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-3deg); }
  100% { opacity:0; transform:scale(1) rotate(-3deg); }
}
@keyframes pose-1-4{
  0% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  9.33% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  12.0% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-5.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-5.5deg); }
}
@keyframes pose-1-5{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  12.0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  14.67% { opacity:1; transform:scale(1) rotate(-4deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-4deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-1-6{
  0% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  14.67% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  17.33% { opacity:1; transform:scale(1) rotate(-7deg); }
  29.33% { opacity:1; transform:scale(1) rotate(-7deg); }
  32.0% { opacity:0; transform:scale(1) rotate(-7deg); }
  100% { opacity:0; transform:scale(1) rotate(-7deg); }
}
@keyframes pose-2-1{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  34.67% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  37.33% { opacity:1; transform:scale(1) rotate(-4deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-4deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-2-2{
  0% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  37.33% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  40.0% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-6.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-6.5deg); }
}
@keyframes pose-2-3{
  0% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  40.0% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  42.67% { opacity:1; transform:scale(1) rotate(-3deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-3deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-3deg); }
  100% { opacity:0; transform:scale(1) rotate(-3deg); }
}
@keyframes pose-2-4{
  0% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  42.67% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  45.33% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-5.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-5.5deg); }
}
@keyframes pose-2-5{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  45.33% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  48.0% { opacity:1; transform:scale(1) rotate(-4deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-4deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-2-6{
  0% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  48.0% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  50.67% { opacity:1; transform:scale(1) rotate(-7deg); }
  62.67% { opacity:1; transform:scale(1) rotate(-7deg); }
  65.33% { opacity:0; transform:scale(1) rotate(-7deg); }
  100% { opacity:0; transform:scale(1) rotate(-7deg); }
}
@keyframes pose-3-1{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  68.0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  70.67% { opacity:1; transform:scale(1) rotate(-4deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-4deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-3-2{
  0% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  70.67% { opacity:0; transform:scale(1.5) rotate(-13.5deg); }
  73.33% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-6.5deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-6.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-6.5deg); }
}
@keyframes pose-3-3{
  0% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  73.33% { opacity:0; transform:scale(1.5) rotate(-10deg); }
  76.0% { opacity:1; transform:scale(1) rotate(-3deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-3deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-3deg); }
  100% { opacity:0; transform:scale(1) rotate(-3deg); }
}
@keyframes pose-3-4{
  0% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  76.0% { opacity:0; transform:scale(1.5) rotate(-12.5deg); }
  78.67% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-5.5deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-5.5deg); }
  100% { opacity:0; transform:scale(1) rotate(-5.5deg); }
}
@keyframes pose-3-5{
  0% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  78.67% { opacity:0; transform:scale(1.5) rotate(-11deg); }
  81.33% { opacity:1; transform:scale(1) rotate(-4deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-4deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-4deg); }
  100% { opacity:0; transform:scale(1) rotate(-4deg); }
}
@keyframes pose-3-6{
  0% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  81.33% { opacity:0; transform:scale(1.5) rotate(-14deg); }
  84.0% { opacity:1; transform:scale(1) rotate(-7deg); }
  96.0% { opacity:1; transform:scale(1) rotate(-7deg); }
  98.67% { opacity:0; transform:scale(1) rotate(-7deg); }
  100% { opacity:0; transform:scale(1) rotate(-7deg); }
}

/* ------------------------------------------------- BOUTON DE PAUSE
   Réduit à son pictogramme, en bas à droite du visuel. L'intitulé reste
   dans le code, masqué à l'écran mais lu par les lecteurs d'écran.

   Une animation qui tourne en boucle plus de cinq secondes doit pouvoir
   être arrêtée : critère 2.2.2 des WCAG. Réalisé sans script, par une
   case à cocher masquée mais accessible au clavier. */
.pause-case{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  -webkit-appearance:none; appearance:none; opacity:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* Le bouton mesure 44 px, taille minimale d'une cible tactile ; le disque
   visible n'en fait que 28 et est porté par le pictogramme lui-même. Un
   pseudo-élément aurait été plus court mais casse certains moteurs anciens. */
.pause-btn{
  position:absolute; right:0; bottom:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem;
  color:rgba(255,255,255,.55);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  /* Supprime le délai de 300 ms et le voile gris du tap sur iOS. */
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.pause-btn:hover{ color:#fff; }
.pause-btn:hover .icone-pause,
.pause-btn:hover .icone-lecture{ border-color:rgba(255,255,255,.55); }
.pause-case:focus ~ .pause-btn{ outline:3px solid var(--laiton-vif); outline-offset:2px; }
.pause-case:focus:not(:focus-visible) ~ .pause-btn{ outline:none; }
.pause-case:focus-visible ~ .pause-btn{ outline:3px solid var(--laiton-vif); outline-offset:2px; }

.mot-pause, .mot-lecture{
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
/* Les pictogrammes sont enveloppés dans un span : masquer un élément SVG
   par display n'est pas fiable sur tous les moteurs, masquer un span l'est. */
.icone-pause, .icone-lecture{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
}
.icone-lecture{ display:none; }
.pause-case:checked ~ .pause-btn .icone-pause{ display:none; }
.pause-case:checked ~ .pause-btn .icone-lecture{ display:inline-flex; }

.pause-case:checked ~ svg .anime{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  .pause-case, .pause-btn{ display:none; }
}

.bande-faits{ background:var(--marine-clair); border-top:1px solid rgba(255,255,255,.12); }
.bande-faits .contenu{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
@media (max-width:760px){ .bande-faits .contenu{ grid-template-columns:1fr; } }
.fait{
  padding:1.5rem 1.6rem; color:rgba(255,255,255,.78); font-size:.93rem; line-height:1.5;
  border-right:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--laiton);
}
.fait:last-child{ border-right:none; }
.fait b{
  display:flex; align-items:center; gap:.6rem;
  color:#E4D5A8; font-size:1.06rem; line-height:1.25; margin-bottom:.45rem;
}
.fait b svg{ flex:none; width:20px; height:20px; color:var(--laiton); }
.fait span{ display:block; }
@media (max-width:760px){
  .fait{ border-right:none; border-bottom:1px solid rgba(255,255,255,.12); }
  .fait:last-child{ border-bottom:none; }
}

/* ----------------------------------------------------------------- SECTIONS */
.section{ padding-block:clamp(3rem,6vw,5rem); }
.section-pale{ background:var(--ivoire-pale); }
.section-marine{ background:var(--marine); color:#fff; }
.section-marine h2{ color:#fff; }
.section-marine p{ color:rgba(255,255,255,.85); }

.entete-section{ margin-bottom:2.25rem; max-width:44em; }
.entete-section h2{ font-size:clamp(1.6rem,3vw,2.15rem); letter-spacing:-.01em; }
.entete-section .intro{ margin-top:.9rem; color:var(--graphite); font-size:1.05rem; }
.section-marine .entete-section .intro{ color:rgba(255,255,255,.8); }

/* Repère de section : le tampon de pièce, signature de la maison. */
.repere{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rouge); margin-bottom:.9rem;
}
.repere::before{
  content:""; width:1.4rem; height:1.4rem; flex:none; border-radius:50%;
  border:2px solid var(--rouge);
  box-shadow:inset 0 0 0 2px var(--papier), inset 0 0 0 3.5px var(--rouge);
}
.section-marine .repere{ color:#E4A9AC; }
.section-marine .repere::before{ border-color:#E4A9AC;
  box-shadow:inset 0 0 0 2px var(--marine), inset 0 0 0 3.5px #E4A9AC; }

/* -------------------------------------------------------------------- CARTES */
.grille{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); }

.carte{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  border-top:4px solid var(--marine);
  padding:1.6rem 1.5rem 1.7rem;
}
.carte.accent{ border-top-color:var(--rouge); }
.carte h3{
  font-family:var(--texte); font-size:1.02rem; font-weight:700;
  color:var(--marine); margin-bottom:.9rem;
  display:flex; align-items:center; gap:.6rem;
}
.carte.accent h3{ color:var(--rouge); }
.carte h3 svg{ flex:none; }
.carte ul{ margin:0; padding:0; list-style:none; }
.carte li{
  position:relative; padding-left:1.1rem; margin-bottom:.55rem;
  font-size:.94rem; line-height:1.45; color:var(--graphite);
}
.carte li:last-child{ margin-bottom:0; }
.carte li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--marine);
}
.carte.accent li::before{ background:var(--rouge); }
.carte li b{ color:var(--encre); }
.carte p{ font-size:.94rem; color:var(--graphite); }

/* ---------------------------------------------------------------- TAMPONS */
.modeles{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.modele{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  border-top:4px solid var(--rouge); padding:1.8rem 1.4rem 1.5rem; text-align:center;
}
.modele svg{ width:120px; height:120px; margin:0 auto 1rem; }
.modele b{ display:block; color:var(--marine); font-size:1rem; margin-bottom:.4rem; }
.modele span{ display:block; font-size:.9rem; line-height:1.45; color:var(--graphite); }

/* ---------------------------------------------------------------- CAPTURES */
.capture{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  overflow:hidden; box-shadow:0 10px 30px rgba(27,42,68,.10);
}
.capture img{ width:100%; }
.capture figcaption{
  padding:.9rem 1.2rem; font-size:.88rem; color:var(--graphite);
  border-top:1px solid var(--trait); background:var(--ivoire-pale);
}
/* Emplacement en attendant les copies d'écran refaites à la charte. */
.capture-vide{
  aspect-ratio:16/10; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem; text-align:center;
  background:repeating-linear-gradient(45deg,#fff,#fff 12px,var(--ivoire-pale) 12px,var(--ivoire-pale) 24px);
  border:2px dashed var(--trait); border-radius:var(--rayon);
  color:var(--graphite); font-size:.9rem; padding:1.5rem;
}
.capture-vide b{ color:var(--marine); font-size:1rem; }
.captures{ display:grid; gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

/* ------------------------------------------------------------------ ÉTAPES */
.etapes{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.etape{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  border-top:4px solid var(--marine); padding:1.6rem 1.5rem;
}
.etape .rang{
  font-family:var(--titre); font-size:1.6rem; font-weight:700; color:var(--rouge);
  line-height:1; margin-bottom:.6rem;
}
.etape h3{ font-family:var(--texte); font-size:1.02rem; color:var(--marine); margin-bottom:.5rem; }
.etape p{ font-size:.94rem; color:var(--graphite); }

/* ------------------------------------------------------------------ TARIFS */
.tarifs{ display:grid; gap:2rem; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
@media (max-width:860px){ .tarifs{ grid-template-columns:1fr; } }

.prix-vedette{
  background:var(--marine); color:#fff; border-radius:var(--rayon);
  padding:2rem 1.9rem; border-top:4px solid var(--laiton);
}
.prix-vedette .montant{
  font-family:var(--titre); font-weight:700; font-size:3rem; line-height:1;
}
.prix-vedette .montant small{ font-size:1rem; font-weight:700; letter-spacing:.02em; }
.prix-vedette .ttc{ margin-top:.4rem; font-size:.92rem; color:rgba(255,255,255,.7); }
.prix-vedette .quoi{ margin-top:1.2rem; font-size:.96rem; color:rgba(255,255,255,.85); }
.prix-vedette ul{ margin:1.2rem 0 0; padding:0; list-style:none; }
.prix-vedette li{
  position:relative; padding-left:1.4rem; margin-bottom:.5rem;
  font-size:.93rem; color:rgba(255,255,255,.85);
}
.prix-vedette li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--laiton);
}

.table-tarifs{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table-tarifs caption{
  text-align:left; font-family:var(--texte); font-weight:700; color:var(--marine);
  padding-bottom:.8rem; font-size:1.02rem;
}
.table-tarifs th, .table-tarifs td{
  text-align:left; padding:.75rem .5rem; border-bottom:1px solid var(--trait);
  vertical-align:top;
}
.table-tarifs thead th{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--graphite); font-weight:700; border-bottom:2px solid var(--marine);
}
.table-tarifs td:last-child, .table-tarifs th:last-child{ text-align:right; white-space:nowrap; }
.table-tarifs tbody th{ font-weight:400; color:var(--encre); }
.table-tarifs .ht{ font-weight:700; color:var(--marine); }
.table-tarifs .ttc{ display:block; font-size:.82rem; color:var(--graphite); font-weight:400; }

/* ----------------------------------------------------------------- CONTACT */
.contact{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.coordonnees{ font-size:1.02rem; line-height:1.9; }
.coordonnees dt{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6); font-weight:700; margin-top:1.1rem; line-height:1.4;
}
.coordonnees dt:first-child{ margin-top:0; }
.coordonnees dd{ margin:0; color:#fff; }
.coordonnees a{ color:#E4D5A8; }
.coordonnees a:hover{ color:#fff; }

/* -------------------------------------------------------------------- PIED */
.pied{ background:var(--encre); color:rgba(255,255,255,.7); padding-block:2.5rem 2rem; font-size:.9rem; }
.pied .haut{ display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pied h4{
  font-family:var(--texte); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; margin-bottom:.8rem;
}
.pied ul{ margin:0; padding:0; list-style:none; }
.pied li{ margin-bottom:.45rem; }
.pied a{ color:rgba(255,255,255,.75); text-decoration:none; }
.pied a:hover{ color:#E4D5A8; text-decoration:underline; }
.pied .bas{
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.55);
}

/* ------------------------------------------------------- PAGES DE TEXTE */
.page-texte{ padding-block:clamp(2.5rem,5vw,4rem); }
.page-texte .contenu{ width:min(100% - 2*var(--marge), 780px); }
.page-texte h1{ font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:.6rem; }
.page-texte .maj{ color:var(--graphite); font-size:.9rem; margin-bottom:2.5rem; }
.page-texte h2{
  font-size:1.25rem; margin-top:2.6rem; margin-bottom:.9rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--laiton);
}
.page-texte h3{ font-family:var(--texte); font-size:1rem; color:var(--marine); margin-top:1.6rem; margin-bottom:.5rem; }
.page-texte p{ margin-bottom:1rem; }
.page-texte ul{ margin:0 0 1rem; padding-left:1.2rem; }
.page-texte li{ margin-bottom:.45rem; }
.page-texte dl{ margin:0 0 1rem; }
.page-texte dt{ font-weight:700; color:var(--marine); margin-top:.9rem; }
.page-texte dd{ margin:0; }
.encadre{
  background:var(--papier); border:1px solid var(--trait); border-left:4px solid var(--laiton);
  border-radius:0 var(--rayon) var(--rayon) 0; padding:1.2rem 1.4rem; margin-bottom:1.4rem;
}
.encadre p:last-child{ margin-bottom:0; }
.a-completer{
  background:#FFF6D9; border:1px dashed var(--laiton-vif); border-radius:3px;
  padding:0 .3rem; font-weight:700; color:#7A5C10;
}

/* ==================================================================
   TUILES DE LA PAGE D'ACCUEIL
   Chaque tuile annonce une fonction en deux lignes et conduit à sa
   page détaillée. L'accueil ne détaille rien : il oriente.
   ================================================================== */
.tuiles{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }

.tuile{
  display:flex; flex-direction:column;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  border-top:4px solid var(--marine);
  padding:1.5rem 1.5rem 1.35rem;
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Sur écran tactile, l'état de survol reste collé après le tap et donne
   l'impression qu'une tuile est sélectionnée. On le réserve aux pointeurs
   fins : souris et trackpad. */
@media (hover:hover) and (pointer:fine){
  .tuile:hover{
    border-color:var(--laiton); box-shadow:0 8px 22px rgba(27,42,68,.13);
    transform:translateY(-2px); color:inherit;
  }
  .tuile:hover .aller{ color:var(--marine); }
  .tuile:hover .aller svg{ transform:translateX(3px); }
}
/* Règle à part et non imbriquée dans la précédente : les @media gigognes
   sont valides mais mal digérés par les moteurs anciens, qui perdent alors
   l'accolade fermante et font sauter toute la suite de la feuille. */
@media (prefers-reduced-motion:reduce){
  .tuile:hover{ transform:none; }
}
/* Retour visuel au doigt, à la place du survol. */
.tuile:active{ border-color:var(--laiton); }
.tuile.accent{ border-top-color:var(--rouge); }

.tuile .picto{
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--ivoire-pale); border:1px solid var(--trait);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.tuile.accent .picto{ border-color:#E9C3C4; background:#FBF0F0; }

.tuile h3{
  font-family:var(--texte); font-size:1.06rem; font-weight:700;
  color:var(--marine); margin-bottom:.5rem;
}
.tuile.accent h3{ color:var(--rouge); }
.tuile p{ font-size:.95rem; line-height:1.5; color:var(--graphite); margin-bottom:1.1rem; }

.tuile .aller{
  margin-top:auto; font-size:.88rem; font-weight:700; color:var(--laiton-vif);
  display:inline-flex; align-items:center; gap:.4rem;
}
.tuile .aller svg{ transition:transform .18s ease; }

/* --------------------------------------------------------- BANDE DE PRIX */
.ruban-prix{
  background:var(--marine); color:#fff; border-radius:var(--rayon);
  border-top:4px solid var(--laiton);
  display:grid; grid-template-columns:auto 1px minmax(0,1fr) auto;
  align-items:center; gap:2rem; padding:1.9rem 2rem;
}
@media (max-width:820px){
  .ruban-prix{ grid-template-columns:1fr; gap:1.25rem; text-align:left; }
  .ruban-prix .separateur{ display:none; }
}
.ruban-prix .montant{ font-family:var(--titre); font-weight:700; font-size:2.6rem; line-height:1; white-space:nowrap; }
.ruban-prix .montant small{ display:block; font-size:.9rem; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.7); margin-top:.4rem; }
.ruban-prix .separateur{ width:1px; align-self:stretch; background:rgba(255,255,255,.25); }
.ruban-prix .detail{ font-size:.97rem; line-height:1.55; color:rgba(255,255,255,.85); }
.ruban-prix .detail b{ color:#fff; }

/* ==================================================================
   PAGES DE FONCTIONS
   ================================================================== */
.fil{
  font-size:.85rem; color:rgba(255,255,255,.65);
  padding-block:1.4rem .2rem;
}
.fil a{ color:rgba(255,255,255,.8); text-decoration:none; }
.fil a:hover{ color:#E4D5A8; text-decoration:underline; }
.fil span{ color:rgba(255,255,255,.45); margin-inline:.45rem; }

.entete-fonction{ background:var(--marine); color:#fff; padding-bottom:clamp(2rem,4vw,3rem); }
.entete-fonction h1{ font-size:clamp(1.8rem,3.6vw,2.6rem); letter-spacing:-.015em; margin-top:.8rem; }
.entete-fonction .chapo{
  margin-top:1.1rem; font-size:1.08rem; line-height:1.55;
  color:rgba(255,255,255,.85); max-width:46em;
}

/* --------------------------------------------------------- VIDÉO DE DÉMO */
.demo{ margin:0 0 2.5rem; }
.demo .cadre{
  background:var(--marine); border-radius:var(--rayon);
  border:1px solid var(--trait); overflow:hidden;
  box-shadow:0 14px 34px rgba(27,42,68,.16);
}
.demo video{ width:100%; height:auto; display:block; }
.demo figcaption{
  margin-top:.85rem; font-size:.92rem; line-height:1.5; color:var(--graphite);
}
.demo figcaption b{ display:block; color:var(--marine); font-size:1rem; margin-bottom:.2rem; }

.sans-video{
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  border-left:4px solid var(--laiton); padding:1.4rem 1.5rem; margin-bottom:2.5rem;
}
.sans-video p{ font-size:.95rem; color:var(--graphite); }
.sans-video b{ color:var(--marine); }

/* ------------------------------------------------- NAVIGATION ENTRE PAGES */
.paire-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  border-top:1px solid var(--trait); padding-top:1.75rem; margin-top:1rem;
}
@media (max-width:640px){ .paire-nav{ grid-template-columns:1fr; } }
.paire-nav a{
  display:block; padding:1.1rem 1.3rem; text-decoration:none;
  background:var(--papier); border:1px solid var(--trait); border-radius:var(--rayon);
  transition:border-color .18s ease;
}
.paire-nav a:hover{ border-color:var(--laiton); }
.paire-nav .sens{
  display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite); font-weight:700; margin-bottom:.3rem;
}
.paire-nav .titre{ color:var(--marine); font-weight:700; font-size:1rem; }
.paire-nav .suivant{ text-align:right; }
.paire-nav .vide{ border:none; background:none; }

/* ------------------------------------------------------ APPEL FINAL */
.appel{
  background:var(--marine); color:#fff; border-radius:var(--rayon);
  border-top:4px solid var(--laiton); padding:1.9rem 2rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:center;
}
@media (max-width:760px){ .appel{ grid-template-columns:1fr; } }
.appel p{ color:rgba(255,255,255,.85); font-size:.98rem; line-height:1.55; }
.appel b{ color:#fff; }



/* ==================================================================
   PAGE EXPLICATIVE
   Titre à gauche, développement à droite. Sur écran étroit, le titre
   repasse au-dessus de son texte.
   ================================================================== */
.detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.35fr);
  gap:1.5rem 2.5rem;
  padding-top:2.25rem; margin-top:2.25rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.detail:first-of-type{ padding-top:0; margin-top:0; border-top:none; }
@media (max-width:820px){
  .detail{ grid-template-columns:1fr; gap:.9rem; }
}

.detail h3{
  font-family:var(--titre); font-weight:700; line-height:1.15;
  font-size:1.5rem;
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  color:var(--or-vif); letter-spacing:-.01em;
}
.detail > div > p{
  color:rgba(255,255,255,.82); font-size:1rem; line-height:1.62;
  margin-bottom:1rem;
}
.detail > div > p:last-child{ margin-bottom:0; }
.detail b{ color:#fff; }
.detail ul{ margin:0 0 1rem; padding:0; list-style:none; }
.detail li{
  position:relative; padding-left:1.15rem; margin-bottom:.6rem;
  color:rgba(255,255,255,.82); font-size:1rem; line-height:1.55;
}
.detail li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--laiton);
}

/* Trois modèles de tampon, en lignes, dans la page explicative. */
.modeles-ligne{ list-style:none; margin:.35rem 0 0; padding:0; }
.modeles-ligne li{
  display:flex; align-items:center; gap:1.1rem;
  padding:.85rem 0;
}
/* Aucune puce ni filet ici : le tampon tient lieu de marque de liste. */
.modeles-ligne li::before{ content:none; }
.modeles-ligne svg{ flex:none; width:3.6rem; height:3.6rem; }
.modeles-ligne span{ color:rgba(255,255,255,.78); font-size:.95rem; line-height:1.5; }
.modeles-ligne b{ display:block; color:#fff; font-size:1.02rem; }

/* ==================================================================
   CAPTURES D'ÉCRAN DE L'APPLICATION
   ================================================================== */
.duo{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:2rem clamp(2rem,4vw,3.5rem); align-items:center;
}
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } }
.duo h2{ font-size:clamp(1.6rem,3vw,2.15rem); letter-spacing:-.01em; margin-bottom:1.1rem; }
.duo-texte{ color:var(--graphite); font-size:1.05rem; line-height:1.6; margin-bottom:1rem; }
.duo-texte b{ color:var(--marine); }

.capture-appli{
  margin:0;
  border:1px solid var(--trait); border-radius:var(--rayon);
  overflow:hidden; background:var(--papier);
  box-shadow:0 14px 34px rgba(27,42,68,.16);
}
.capture-appli img{ width:100%; height:auto; display:block; }
.capture-appli.large{ margin-bottom:2rem; }

/* Liste des capacités de l'Éditeur : deux colonnes sur grand écran. */
.capacites{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:.1rem 2.5rem;
}
.capacites li{
  position:relative; border-top:1px solid var(--trait);
  padding:.85rem 0 .85rem 1.2rem;
  color:var(--encre); font-size:1rem; line-height:1.45;
}
.capacites li::before{
  content:""; position:absolute; left:0; top:1.32em;
  width:6px; height:6px; border-radius:50%; background:var(--laiton);
}

.renvoi-fonctions{ font-size:.95rem; color:var(--graphite); }
.renvoi-fonctions a{ color:var(--marine); }

/* Flèche de liaison entre deux sections : elle indique la suite du parcours
   et sert de lien vers la section suivante. */
.fleche-suite{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:1.6rem;
  color:var(--laiton-vif); text-decoration:none;
  font-size:.98rem; font-weight:700; line-height:1.35;
}
.fleche-suite span{ color:var(--marine); }
.fleche-suite:hover span{ color:var(--laiton-vif); }
.fleche-suite svg{ flex:none; }
@media (prefers-reduced-motion:no-preference){
  .fleche-suite svg{ animation:descendre 2.2s ease-in-out infinite; }
}

/* ==================================================================
   SCÈNE ANIMÉE — conversion à l'importation
   Un fichier image glisse dans la fenêtre de SecurPDF et en ressort
   sous forme de page. Boucle de 6 s.

   Même précaution que la planche du héros : aucun élément animé ne
   porte d'attribut transform, et l'animation n'est activée que si
   transform-box est géré, sinon le fichier partirait en vrille.
   ================================================================== */
.scene{
  position:relative;
  background:var(--ivoire-pale); border:1px solid var(--trait);
  border-radius:var(--rayon);
  padding:1.25rem 1.5rem 1.75rem;
  margin-top:2.5rem;
}
.scene svg{ display:block; width:100%; height:auto; max-width:620px; margin:0 auto; }
.scene .anime{ transform-box:fill-box; transform-origin:center; }

/* État de repos : le fichier est à gauche, la page convertie n'existe
   pas encore. Sans animation, la scène reste lisible. */
.fichier-glisse{ opacity:1; }
.page-convertie{ opacity:0; }

@supports (transform-box: fill-box){
@media (prefers-reduced-motion:no-preference){
  .fichier-glisse{ animation:glisser 6s ease-in-out infinite; }
  .page-convertie{ animation:apparaitre 6s ease-in-out infinite; }
}
}

@keyframes glisser{
  0%, 8%    { opacity:1; transform:translate(0,0) scale(1); }
  46%       { opacity:1; transform:translate(300px,0) scale(.82); }
  56%       { opacity:0; transform:translate(300px,0) scale(.72); }
  92%       { opacity:0; transform:translate(300px,0) scale(.72); }
  100%      { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes apparaitre{
  0%, 50%   { opacity:0; transform:scale(.9); }
  60%, 88%  { opacity:1; transform:scale(1); }
  96%, 100% { opacity:0; transform:scale(.9); }
}

.legende-scene{
  margin-top:.9rem; text-align:center;
  font-size:.92rem; color:var(--graphite);
}

/* ==================================================================
   BOUTONS VIDÉO DE LA SECTION ÉDITEUR
   Même ordre que la navigation « précédent / suivant » des pages de
   fonctions, pour que le parcours reste cohérent.
   ================================================================== */
.titre-videos{
  font-family:var(--texte); font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--graphite);
  margin-bottom:.9rem;
}
.boutons-videos{ display:flex; flex-wrap:wrap; gap:.6rem; }
.bouton-video{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem; border-radius:var(--rayon);
  background:var(--papier); border:2px solid var(--marine);
  color:var(--marine); text-decoration:none;
  font-size:.92rem; font-weight:700; line-height:1;
  transition:background-color .18s ease, color .18s ease;
}
.bouton-video svg{ flex:none; color:var(--rouge); }
.bouton-video:hover{ background:var(--marine); color:#fff; }
.bouton-video:hover svg{ color:#E4D5A8; }

/* Navigation à trois colonnes : précédent, retour à l'Éditeur, suivant. */
.paire-nav{ grid-template-columns:1fr auto 1fr; }
@media (max-width:640px){ .paire-nav{ grid-template-columns:1fr; } }
.paire-nav .retour{ text-align:center; }