/* ══════════════════════════════════════════════════════════════════════
   FINITION VISUELLE  ·  15/08/2026
   ══════════════════════════════════════════════════════════════════════
   Ajoutée après le constat que le site, conforme sur toute la ligne,
   « ne ressemblait à rien » : une photo par page, des piles de cartes,
   aucun mouvement. Registre retenu : éditorial chaud. Grande serif,
   photos traitées comme des illustrations de magazine, grain léger,
   entrées au défilement.

   Fichier séparé, chargé après style.css, pour pouvoir être retiré d'un
   bloc si la cliente préfère le rendu sobre.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Une seule courbe pour tout le site : départ franc, arrivée posée.
     Les courbes par défaut du navigateur donnent un mouvement mécanique. */
  --rv-courbe:cubic-bezier(.22,.9,.28,1);
  --rv-courbe-douce:cubic-bezier(.32,.72,0,1);
  --rv-ombre-douce:0 1px 2px rgba(46,53,56,.04), 0 10px 30px -12px rgba(46,53,56,.14);
  --rv-ombre-levee:0 2px 6px rgba(46,53,56,.06), 0 26px 52px -18px rgba(46,53,56,.24);
  /* ⚠️ Troisième terracotta, et il a une raison d'être.
     #C97C4B est celui de la charte, il ne porte aucun texte (3,25:1).
     #A55E31 le remplace dès qu'il y a du texte sur fond plein (4,95:1).
     Mais dans la pastille de surtitre, le fond n'est pas plein : c'est un
     voile de terracotta à 9 % qui ASSOMBRIT le fond, et le rapport
     retombe à 4,42:1 sur blanc, 4,21:1 sur ivoire. Mesuré par la recette,
     invisible à l'œil. D'où cette variante, à teinte égale : 5,05:1. */
  --rv-terracotta-surtitre:#96522A;
}

/* ────────── 1. Entrées au défilement ──────────
   L'élément monte de 26 px en se démasquant. Le flou d'entrée donne le
   poids : sans lui, l'apparition paraît plate.
   ⚠️ La classe n'est posée QUE par le JavaScript. Sans JavaScript, rien
   n'est masqué et la page reste entièrement lisible. */
.rv-anim{
  opacity:0;
  transform:translate3d(0,26px,0);
  filter:blur(5px);
  transition:opacity .75s var(--rv-courbe-douce),
             transform .75s var(--rv-courbe-douce),
             filter .6s var(--rv-courbe-douce);
  transition-delay:var(--rv-retard,0ms);
  will-change:opacity, transform;
}
.rv-anim.rv-vu{ opacity:1; transform:none; filter:none; will-change:auto; }

@media (prefers-reduced-motion:reduce){
  /* Rien ne bouge, mais surtout rien ne reste caché. */
  .rv-anim,
  .rv-anim.rv-vu{
    opacity:1 !important; transform:none !important;
    filter:none !important; transition:none !important;
  }
}

/* ────────── 2. Grain ──────────
   Posé une fois, en position fixe, hors du flux et sans événement de
   pointeur : jamais sur un conteneur qui défile, sinon le processeur
   graphique le recalcule à chaque image. */
body::after{
  content:'';
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ────────── 3. Bandeau de tête : lent rapprochement ──────────
   La photo de fond est peinte par Divi sur la section. On la reprend dans
   un calque « ::after » qui hérite de la même image et grandit très
   lentement. Comme l'échelle ne descend jamais sous 1, le calque couvre
   toujours la peinture d'origine et le doublon ne se voit pas.
   L'échelle est une transformation : aucun recalcul de mise en page. */
.rv-hero-photo::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:inherit;
  background-size:cover;
  background-position:center;
  transform:scale(1.008);
  animation:rv-approche 26s var(--rv-courbe-douce) forwards;
}
/* Le voile repasse AU-DESSUS du calque, sinon le texte redevient
   illisible : « ::after » se peint après « ::before » à z-index égal. */
.rv-hero-photo::before{ z-index:1; }
.rv-hero-photo > .et_pb_row{ z-index:2; }

@keyframes rv-approche{ to{ transform:scale(1.075); } }
@media (prefers-reduced-motion:reduce){
  .rv-hero-photo::after{ animation:none; transform:none; }
}

/* Bandeau plus haut et plus tenu : c'est la première impression. */
.rv-hero-photo{ min-height:clamp(26rem,58vh,38rem); }
.rv-hero-photo h1,
.rv-hero-photo .et_pb_text_inner h1{
  font-size:clamp(2.1rem,1.4rem + 2.9vw,3.5rem);
  letter-spacing:-.018em;
  line-height:1.08;
}
.rv-hero-photo .rv-chapo,
.rv-hero-photo .et_pb_text_inner p.rv-chapo{
  font-size:clamp(1rem,.94rem + .35vw,1.16rem);
  max-width:34rem;
}

/* ────────── 4. Surtitre en pastille ──────────
   Annonce le sujet avant le titre et donne un point d'appui à l'œil. */
.rv-surtitre{
  display:inline-block;
  margin:0 0 .85rem;
  padding:.32rem .85rem;
  border-radius:999px;
  background:rgba(201,124,75,.09);
  color:var(--rv-terracotta-surtitre);
  font-family:var(--rv-sans);
  font-size:.68rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
}
.rv-sombre .rv-surtitre{ background:rgba(255,255,255,.13); color:#E9C9A6; }

/* ────────── 5. Photo et texte en vis-à-vis ──────────
   Le bloc qui manquait. Sans lui, une page n'était qu'une pile de
   paragraphes et de cartes sous une unique photo de bandeau. */
.rv-split{ display:grid; gap:2.6rem; align-items:center; }
.rv-split-texte > :first-child{ margin-top:0; }
.rv-split-texte h2{ margin-top:0; }
.rv-split-liens{ margin-top:1.5rem; }
.rv-split-liens .rv-lien-fort + .rv-lien-fort{ margin-left:1.6rem; }

@media (min-width:900px){
  .rv-split{ grid-template-columns:1fr 1fr; gap:4rem; }
  /* La photo est écrite après le texte dans le HTML : la grille la ramène
     à gauche quand il le faut, sans nuire à l'ordre de lecture. */
  .rv-split .rv-split-texte{ grid-column:2; }
  .rv-split .rv-split-media{ grid-column:1; grid-row:1; }
  .rv-split-droite .rv-split-texte{ grid-column:1; }
  .rv-split-droite .rv-split-media{ grid-column:2; }
  .rv-split-large{ grid-template-columns:.86fr 1.14fr; }
  .rv-split-large.rv-split-droite{ grid-template-columns:1.14fr .86fr; }
}
.rv-split-seul{ grid-template-columns:1fr !important; max-width:44rem; }

/* Cadre gigogne : la photo n'est pas posée à plat sur le fond, elle est
   sertie dans une monture qui reprend la couleur de la page. */
.rv-split-media{
  margin:0;
  position:relative;
  padding:.55rem;
  border-radius:1.6rem;
  background:rgba(11,85,99,.055);
  box-shadow:inset 0 0 0 1px rgba(11,85,99,.09);
}
.rv-split-media img,
.rv-photo{
  display:block; width:100%; height:auto;
  border-radius:1.15rem;
  box-shadow:var(--rv-ombre-douce);
}
.rv-split-media img{ aspect-ratio:4 / 3; object-fit:cover; }
.rv-split-large .rv-split-media img{ aspect-ratio:3 / 2; }
.rv-fond-neutre .rv-split-media{ background:rgba(11,85,99,.07); }

/* Un filet terracotta décalé, qui signe le bloc sans l'alourdir. */
.rv-split-media::after{
  content:'';
  position:absolute; left:1.8rem; right:1.8rem; bottom:-.55rem; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--rv-terracotta), rgba(201,124,75,0));
}

/* Liste à puces des blocs en vis-à-vis.
   ⚠️ Quatrième occurrence du piège : Divi impose « list-style » avec une
   spécificité supérieure au thème enfant. */
.rv-points{ list-style:none !important; padding:0 !important; margin:1.4rem 0 0; }
.rv-points li{
  position:relative; padding-left:1.75rem; margin-bottom:.62rem;
  list-style:none !important;
}
.rv-points li::marker{ content:none; }
.rv-points li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--rv-vert);
  box-shadow:0 0 0 3px rgba(92,122,63,.16);
}

/* ────────── 6. Mosaïque ──────────
   Trois photos de tailles inégales : la régularité d'une grille de trois
   carrés est exactement ce qui fait « gabarit gratuit ». */
/* ⚠️ « align-items:start » n'est pas cosmétique. Par défaut la grille
   étire les cellules, la figure reçoit alors une hauteur définie, et un
   « height:100% » sur l'image rend le rapport de forme inopérant : les
   trois photos revenaient à la même hauteur, exactement la régularité
   qu'on cherchait à éviter. La hauteur reste donc libre. */
.rv-mosaique{
  display:grid; gap:1.1rem; grid-template-columns:1fr;
  align-items:start; margin:2.2rem 0 0;
}
.rv-mosaique-c{ margin:0; }
.rv-mosaique-c img{
  width:100%; height:auto; object-fit:cover;
  border-radius:1.1rem; box-shadow:var(--rv-ombre-douce);
}
.rv-mosaique figcaption{
  margin-top:.6rem; font-size:.83rem; color:var(--rv-gris); line-height:1.45;
}
@media (min-width:820px){
  /* Trois colonnes de même hauteur, c'est un gabarit. Trois colonnes de
     hauteurs libres laissaient 290 px de blanc sous les deux petites, ce
     qui se lit comme un oubli. Deux colonnes, la grande à cheval sur les
     deux rangées : le bloc se referme et l'asymétrie reste. */
  .rv-mosaique{ grid-template-columns:1.22fr 1fr; }
  .rv-mosaique-c:first-child{ grid-row:span 2; }
  .rv-mosaique-c:first-child img{ aspect-ratio:4 / 5; }
  .rv-mosaique-c:not(:first-child) img{ aspect-ratio:5 / 4; }
}

/* ────────── 7. Citation détachée ────────── */
.rv-citation{
  margin:2.6rem 0 0;
  position:relative;
  padding:2.2rem 2.4rem 1.9rem;
  border-radius:1.4rem;
  background:var(--rv-neutre);
  box-shadow:inset 0 0 0 1px rgba(11,85,99,.08);
}
.rv-citation::before{
  content:'\201C';
  position:absolute; top:-.35rem; left:1.3rem;
  font-family:var(--rv-serif); font-size:5.4rem; line-height:1;
  color:rgba(201,124,75,.28);
}
.rv-citation blockquote{ margin:0; border:0; padding:0; }
.rv-citation blockquote p{
  font-family:var(--rv-serif);
  font-size:clamp(1.12rem,1rem + .5vw,1.42rem);
  line-height:1.5; color:var(--rv-teal-nuit); margin:0;
}
.rv-citation figcaption{ margin-top:1.2rem; font-size:.9rem; }
.rv-citation figcaption b{ color:var(--rv-encre); }
.rv-citation figcaption span{ display:block; color:var(--rv-gris); font-size:.85rem; }
.rv-citation-photo{ display:grid; gap:1.8rem; align-items:center; }
@media (min-width:760px){
  .rv-citation-photo{ grid-template-columns:13rem 1fr; }
  .rv-citation-photo .rv-citation-media{ grid-row:span 2; }
}
.rv-citation-media img{ border-radius:1.1rem; box-shadow:var(--rv-ombre-douce); }

/* ────────── 8. Cartes : accent qui se déploie et relief au survol ──────
   Les cartes existaient déjà mais restaient plates. */
.rv-c{
  position:relative;
  transition:transform .5s var(--rv-courbe), box-shadow .5s var(--rv-courbe);
}
.rv-c::before{
  content:'';
  position:absolute; left:0; top:0; height:3px; width:2.2rem;
  border-radius:0 0 3px 0;
  background:var(--rv-terracotta);
  transition:width .55s var(--rv-courbe);
}
.rv-c:hover{ transform:translate3d(0,-5px,0); box-shadow:var(--rv-ombre-levee); }
.rv-c:hover::before{ width:100%; }
.rv-c svg{ transition:transform .5s var(--rv-courbe); }
.rv-c:hover svg{ transform:scale(1.09) rotate(-2deg); }
@media (prefers-reduced-motion:reduce){
  .rv-c, .rv-c::before, .rv-c svg{ transition:none; }
  .rv-c:hover{ transform:none; }
}

/* ────────── 9. Boutons : pastille et appui ────────── */
.rv-bouton-1.et_pb_button,
.rv-bouton-secondaire.et_pb_button{
  border-radius:999px !important;
  padding:.82rem 1.7rem !important;
  transition:transform .35s var(--rv-courbe), background-color .35s var(--rv-courbe),
             box-shadow .35s var(--rv-courbe) !important;
}
.rv-bouton-1.et_pb_button:hover{ box-shadow:0 14px 30px -12px rgba(11,85,99,.55); }
.rv-bouton-1.et_pb_button:active,
.rv-bouton-secondaire.et_pb_button:active{ transform:scale(.975); }

/* La flèche des liens forts glisse au survol. */
.rv-lien-fort::after{ transition:transform .4s var(--rv-courbe); }
.rv-lien-fort:hover::after{ transform:translateX(.3rem); }

/* ────────── 10. Bandeau de chiffres sur photo ────────── */
.rv-bandeau-chiffres{ position:relative; overflow:hidden; }
.rv-bandeau-chiffres::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(8,63,74,.94), rgba(8,63,74,.88));
}
.rv-bandeau-chiffres > .et_pb_row{ position:relative; z-index:1; }
/* ⚠️ Vu en capture, invisible pour tout contrôle automatique : la fiche
   d'un compteur porte un fond clair hérité du bloc de base. Repeindre le
   seul chiffre en blanc donnait du BLANC SUR BLANC, et les quatre
   chiffres avaient purement disparu. La fiche doit redevenir
   transparente avant qu'on touche à la couleur du texte. */
.rv-bandeau-chiffres .rv-compteur{
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important;
  border:0 !important;
}
.rv-bandeau-chiffres .rv-chiffre{ color:#FFFFFF; }
.rv-bandeau-chiffres .rv-libelle{ color:#C6D6D3; }
/* La légende sous les compteurs se posait à gauche du bloc, pas au
   centre de la page : elle hérite d'une largeur de contenu, pas de la
   largeur de la rangée. */
.rv-bandeau-chiffres .rv-legende{
  color:#A9BDBA; display:block; width:100%; text-align:center; margin-top:1.4rem;
}

/* ────────── 11. Rythme vertical ──────────
   ⚠️ Défaut mesuré : deux sections consécutives de même fond additionnent
   leurs marges et creusent 200 px de blanc, qu'on lit comme une panne.
   Quand les fonds se suivent à l'identique, la seconde perd sa marge haute. */
.rv-fond-neutre + .rv-fond-neutre,
.rv-bloc-split + .rv-bloc-split{ padding-top:0 !important; }

/* ────────── 12. Impression et capture ──────────
   ⚠️ Défaut vu en capture le 15/08/2026 : la page en ligne ressortait
   PRESQUE VIDE. Les blocs à révéler restent à opacité nulle tant qu'on
   n'a pas défilé jusqu'à eux ; toute capture pleine hauteur, et toute
   impression, les prenait donc transparents. Le visiteur qui fait
   défiler ne voyait rien d'anormal, mais une copie d'écran envoyée au
   client donnait un site cassé.
   À l'impression, rien ne doit dépendre d'un défilement. */
@media print{
  .rv-anim,
  .rv-anim.rv-vu{
    opacity:1 !important; transform:none !important;
    filter:none !important; transition:none !important;
  }
  body::after{ display:none; }
}