/* ===========================================================================
   Fondation SOLID'AIR : système de mouvement
   ---------------------------------------------------------------------------
   Un seul mécanisme d'apparition, quelques variantes, une courbe commune.
   Tout est animé en `transform` et `opacity` : ce sont les deux seules
   propriétés que le navigateur sait composer sans refaire la mise en page,
   donc les seules qui tiennent 60 images par seconde sur un téléphone.

   Rien ici n'est indispensable à la lecture : sans JavaScript, ou si le
   visiteur a demandé moins d'animation, tout s'affiche immédiatement.
   =========================================================================== */

:root{
  /* Départ vif, arrivée longue et douce : la courbe qui donne l'impression
     que l'élément se pose plutôt qu'il n'arrive. */
  --sortie:cubic-bezier(.16,1,.3,1);
  --sortie-douce:cubic-bezier(.33,1,.68,1);
  --duree:.78s;
  --duree-courte:.42s;
}

/* ------------------------------------------------- Apparition au défilement
   `data-anim` porte la variante, `--d` le retard. Les deux sont posés par
   le HTML ou calculés par le script pour les cascades. */
.js [data-anim]{opacity:0;will-change:transform,opacity}
.js [data-anim="monte"]{transform:translate3d(0,30px,0)}
.js [data-anim="gauche"]{transform:translate3d(-34px,0,0)}
.js [data-anim="droite"]{transform:translate3d(34px,0,0)}
.js [data-anim="zoom"]{transform:scale(.94)}
.js [data-anim="fondu"]{transform:none}

/* Le volet : l'image se découvre du bas vers le haut, elle ne glisse pas.
   Utilisé pour les grandes photographies, où un glissement ferait vulgaire. */
.js [data-anim="volet"]{opacity:1;clip-path:inset(0 0 100% 0)}
.js [data-anim="volet"] > *{transform:scale(1.08);transition:transform 1.3s var(--sortie) var(--d,0s)}

.js [data-anim].vu{
  opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity var(--duree) var(--sortie) var(--d,0s),
             transform var(--duree) var(--sortie) var(--d,0s),
             clip-path 1.1s var(--sortie) var(--d,0s);
}
.js [data-anim="volet"].vu > *{transform:none}
.js [data-anim].vu{will-change:auto}

/* Cascade : chaque enfant part un cran après le précédent. Le script pose
   --d ; la valeur ci-dessous ne sert que si elle manque. */
[data-cascade] > *{--d:0s}

/* ------------------------------------------------------------- Titre du hero
   Le titre se découvre ligne par ligne. Chaque ligne est enveloppée par le
   script dans un conteneur qui masque son débordement. */
.js .ligne-titre{display:block;overflow:hidden}
.js .ligne-titre > span{
  display:block;transform:translate3d(0,105%,0);
  transition:transform 1s var(--sortie) var(--d,0s);
}
.js .hero--pret .ligne-titre > span{transform:none}

.js .hero__chapo,.js .hero__actions,.js .hero .fil,.js .hero .surtitre{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .8s var(--sortie) var(--d,0s),
             transform .8s var(--sortie) var(--d,0s);
}
.js .hero--pret .hero__chapo,.js .hero--pret .hero__actions,
.js .hero--pret .fil,.js .hero--pret .surtitre{opacity:1;transform:none}

/* ------------------------------------------------------- Respiration du fond
   Un lent agrandissement de la photographie derrière le titre. L'amplitude
   est volontairement faible : au-delà, l'œil suit le mouvement au lieu de
   lire. */
@keyframes respire{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.js .hero__diapo img.actif,.js .hero__fond img{
  animation:respire 18s ease-out forwards;
}

/* --------------------------------------------------------- Barre de lecture
   Rendue par le navigateur lui-même là où les animations liées au
   défilement existent ; le script prend le relais ailleurs. */
.progression{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--vert-profond),var(--ambre));
  transform:scaleX(var(--avancee,0));transform-origin:0 50%;
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .progression{
    animation:lire linear;animation-timeline:scroll(root block);
    transform:scaleX(0);
  }
  @keyframes lire{to{transform:scaleX(1)}}
}

/* ------------------------------------------------------------ En-tête dense
   Passé le premier écran, l'en-tête se resserre et se détache du contenu. */
.entete{transition:box-shadow .3s,backdrop-filter .3s}
.entete__barre{transition:padding-block .32s var(--sortie-douce)}
.marque img{transition:width .32s var(--sortie-douce),height .32s var(--sortie-douce)}
.entete.dense{box-shadow:0 10px 30px -22px rgba(8,44,26,.55)}
.entete.dense .entete__barre{padding-block:7px}

/* -------------------------------------------------------------- Photographie
   Le fond flouté tient la place et évite l'écran blanc ; il disparaît dès
   que la photographie est décodée. */
.photo{display:block;position:relative;overflow:hidden;background:#e9ece9}
.photo::before{
  content:"";position:absolute;inset:0;
  background-image:var(--flou);background-size:cover;background-position:center;
  transform:scale(1.06);filter:blur(6px);
  transition:opacity .5s ease-out;
}
.photo.chargee::before{opacity:0}
.photo img{display:block;width:100%;height:100%;object-fit:cover;position:relative}

/* --------------------------------------------------------- Cartes et liens
   L'image avance légèrement au survol, la carte se soulève. Les deux
   durées diffèrent : l'image traîne un peu, ce qui donne de la matière. */
.carte__media .photo img,.carte__media img{transition:transform .9s var(--sortie)}
.carte:hover .carte__media .photo img,
.carte:hover .carte__media img{transform:scale(1.055)}

.figure{margin:0}
.figure .photo{border-radius:18px}
.figure figcaption{
  margin-top:.8rem;font-size:.86rem;color:var(--gris);line-height:1.45;
}

/* --------------------------------------------------------------- Galerie
   Une trame éditoriale : deux vues larges, le reste en colonnes égales. */
.galerie{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .galerie{grid-template-columns:repeat(3,1fr)}
  .galerie__vue--large{grid-column:span 2}
}
.galerie__vue{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  aspect-ratio:4/3;background:var(--vert-pale);
  transition:transform .5s var(--sortie),box-shadow .5s var(--sortie);
}
.galerie__vue--large{aspect-ratio:16/9}
.galerie__vue .photo{position:absolute;inset:0}
.galerie__vue .photo img{transition:transform 1s var(--sortie)}
.galerie__vue:hover{transform:translateY(-4px);box-shadow:0 26px 48px -28px rgba(8,44,26,.6)}
.galerie__vue:hover .photo img{transform:scale(1.07)}
.galerie__vue:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}
.galerie__lib{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 16px 14px;color:#fff;
  font-family:var(--titre);font-weight:700;font-size:.93rem;line-height:1.3;
  background:linear-gradient(0deg,rgba(8,44,26,.82),rgba(8,44,26,0));
  transform:translateY(0);transition:transform .4s var(--sortie);
}

/* ------------------------------------------------------------- Vue agrandie */
.loupe{
  border:0;padding:0;max-width:100vw;max-height:100vh;width:100%;height:100%;
  background:rgba(7,26,16,.94);color:#fff;
}
.loupe::backdrop{background:rgba(7,26,16,.8)}
.loupe__cadre{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:clamp(16px,4vw,54px);
}
.loupe img{
  max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.loupe__texte{
  position:absolute;left:0;right:0;bottom:0;padding:18px clamp(16px,4vw,54px) 26px;
  text-align:center;font-size:.92rem;color:rgba(255,255,255,.86);
}
.loupe__fermer,.loupe__pas{
  position:absolute;z-index:3;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  color:#fff;transition:background-color .2s,transform .2s;
}
.loupe__fermer:hover,.loupe__pas:hover{background:rgba(255,255,255,.26)}
.loupe__fermer{top:16px;right:16px}
.loupe__pas--avant{right:16px;top:50%;transform:translateY(-50%)}
.loupe__pas--arriere{left:16px;top:50%;transform:translateY(-50%)}
.loupe__pas--avant:hover,.loupe__pas--arriere:hover{transform:translateY(-50%) scale(1.07)}
@media (max-width:600px){
  .loupe__pas{top:auto;bottom:70px;transform:none}
  .loupe__pas--avant:hover,.loupe__pas--arriere:hover{transform:scale(1.07)}
}

/* ------------------------------------------------- Chiffres qui se comptent */
.repere__val{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Parallaxe
   Très légère : la photographie dérive de quelques dizaines de pixels sur la
   hauteur de l'écran. Au-delà, le décalage se voit et gêne. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-parallaxe] .photo img{
      animation:derive linear;animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes derive{from{transform:translate3d(0,-3.5%,0) scale(1.1)}
                        to{transform:translate3d(0,3.5%,0) scale(1.1)}}
  }
}

/* ------------------------------------------------- Hero sur photographie
   Une seule image de fond, pas un diaporama : la page d'un projet montre
   ce projet. Le voile reprend celui de l'accueil, calé pour que le titre
   garde son contraste par-dessus une photographie claire. */
.hero--photo{padding-block:clamp(74px,10vw,142px);isolation:isolate}
.hero--photo > .enveloppe{position:relative;z-index:2}
.hero__fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__fond .photo{position:absolute;inset:0;height:100%}
.hero__fond .photo img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.hero--photo .hero__voile{z-index:1}
.hero--photo .hero__voile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,44,26,.82) 0%,
    rgba(8,44,26,.72) 46%,
    rgba(8,44,26,.86) 100%);
}
@media (min-width:900px){
  .hero--photo .hero__voile::before{
    background:linear-gradient(100deg,
      rgba(8,44,26,.88) 0%,
      rgba(8,44,26,.72) 42%,
      rgba(8,44,26,.30) 74%,
      rgba(8,44,26,.14) 100%);
  }
}
.hero--photo h1{font-size:clamp(2.3rem,5.4vw,4rem);text-transform:none;line-height:1.04}
.hero--photo .hero__chapo{margin-bottom:1.8rem}

/* ------------------------------------------------------------ Bande citée
   Une photographie pleine largeur, une phrase par-dessus. Le voile est
   dense là où le texte se pose, transparent ailleurs. */
.bande{position:relative;isolation:isolate;min-height:clamp(320px,46vw,520px);
  display:grid;align-items:end;overflow:hidden}
.bande .photo{position:absolute;inset:0;z-index:0}
.bande::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,44,26,.92) 0%,rgba(8,44,26,.52) 46%,
             rgba(8,44,26,.18) 100%);
}
.bande__texte{
  position:relative;z-index:2;color:#fff;
  padding:clamp(28px,5vw,60px);max-width:min(72ch,100%);
  margin-inline:auto;width:100%;
}
.bande__texte p{
  font-family:var(--titre);font-weight:700;
  font-size:clamp(1.2rem,2.5vw,1.9rem);line-height:1.32;
  letter-spacing:-.015em;color:#fff;margin:0;
}
.bande__source{
  font-family:var(--texte)!important;font-weight:400!important;
  font-size:.86rem!important;color:rgba(255,255,255,.76)!important;
  margin-top:1rem!important;letter-spacing:0!important;
}

/* -------------------------------------------------------- Duo texte + image */
.duo{display:grid;gap:clamp(26px,4vw,56px);align-items:center}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}
  .duo--large-droite{grid-template-columns:5fr 7fr}
  .duo--large-gauche{grid-template-columns:7fr 5fr}}

/* --------------------------------------------------------------- Le respect
   Une seule règle, mais elle prime sur tout ce qui précède : si le système
   annonce une préférence pour moins de mouvement, il n'y a plus de
   mouvement, et surtout, plus rien d'invisible. */
@media (prefers-reduced-motion:reduce){
  .js [data-anim],.js [data-anim].vu{
    opacity:1!important;transform:none!important;clip-path:none!important;
    transition:none!important;
  }
  .js [data-anim="volet"] > *{transform:none!important}
  .js .ligne-titre > span{transform:none!important;transition:none!important}
  .js .hero__chapo,.js .hero__actions,.js .hero .fil,.js .hero .surtitre{
    opacity:1!important;transform:none!important;transition:none!important}
  .js .hero__diapo img.actif,.js .hero__fond img{animation:none!important}
  .progression{display:none}
  [data-parallaxe] .photo img{animation:none!important}
  .galerie__vue:hover,.carte:hover .carte__media img{transform:none!important}
}

/* ===========================================================================
   Second temps : les détails qui donnent de la vie
   ---------------------------------------------------------------------------
   Tout ce qui suit est du mouvement d'accompagnement. Rien n'y porte
   d'information : la règle `prefers-reduced-motion` de ce fichier annule
   l'ensemble sans rien rendre illisible.
   =========================================================================== */

/* ------------------------------------------------- Transition entre pages
   Les navigateurs qui savent le faire enchaînent les pages par un fondu au
   lieu d'un clignotement blanc. Les autres ne voient aucune différence. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:sortirPage .28s ease-in both}
  ::view-transition-new(root){animation:entrerPage .42s var(--sortie) both}
  @keyframes sortirPage{to{opacity:0;transform:translateY(-8px)}}
  @keyframes entrerPage{from{opacity:0;transform:translateY(12px)}}
}

/* ------------------------------------------------------------- Le filet
   Le trait sous les surtitres se trace de gauche à droite à l'apparition. */
.trait{transform-origin:0 50%}
.js [data-anim] .trait,.js [data-anim].entete-section .trait{
  transform:scaleX(0);transition:transform .9s var(--sortie) calc(var(--d,0s) + .18s);
}
.js [data-anim].vu .trait{transform:scaleX(1)}

/* ----------------------------------------------------------- Les pastilles
   L'icône d'un axe arrive un peu après son cadre, avec un léger rebond. */
.js [data-anim] .axe__icone{
  transform:scale(.6) rotate(-8deg);opacity:0;
  transition:transform .66s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .14s),
             opacity .4s ease-out calc(var(--d,0s) + .14s);
}
.js [data-anim].vu .axe__icone{transform:none;opacity:1}

/* --------------------------------------------------------- Les listes nettes
   Chaque point de la liste suit le précédent. Les retards sont posés en CSS
   plutôt qu'en JavaScript : la liste est connue, son ordre aussi. */
.js [data-anim] .liste-nette li,.js [data-anim] .liste-simple li{
  opacity:0;transform:translateX(-10px);
}
.js [data-anim].vu .liste-nette li,.js [data-anim].vu .liste-simple li{
  opacity:1;transform:none;
  transition:opacity .5s var(--sortie),transform .5s var(--sortie);
}
.js [data-anim].vu .liste-nette li:nth-child(1),
.js [data-anim].vu .liste-simple li:nth-child(1){transition-delay:calc(var(--d,0s) + .10s)}
.js [data-anim].vu .liste-nette li:nth-child(2),
.js [data-anim].vu .liste-simple li:nth-child(2){transition-delay:calc(var(--d,0s) + .17s)}
.js [data-anim].vu .liste-nette li:nth-child(3),
.js [data-anim].vu .liste-simple li:nth-child(3){transition-delay:calc(var(--d,0s) + .24s)}
.js [data-anim].vu .liste-nette li:nth-child(4),
.js [data-anim].vu .liste-simple li:nth-child(4){transition-delay:calc(var(--d,0s) + .31s)}
.js [data-anim].vu .liste-nette li:nth-child(5),
.js [data-anim].vu .liste-simple li:nth-child(5){transition-delay:calc(var(--d,0s) + .38s)}
.js [data-anim].vu .liste-nette li:nth-child(n+6),
.js [data-anim].vu .liste-simple li:nth-child(n+6){transition-delay:calc(var(--d,0s) + .45s)}

/* ------------------------------------------------------------- Les boutons
   Un voile de couleur traverse le bouton au survol, de gauche à droite.
   Le texte reste au-dessus, donc toujours lisible. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transform:translateX(-101%);
  transition:transform .5s var(--sortie),opacity .5s;
}
.btn:hover::after{transform:none;opacity:.12}
.btn--ambre:hover,.btn--don:hover,.btn--plein:hover{transform:translateY(-2px)}
.btn{transition:background-color .2s,color .2s,border-color .2s,
                transform .24s var(--sortie),box-shadow .24s}

/* --------------------------------------------------------- La barre du menu
   Le soulignement de l'entrée survolée se déploie depuis son centre. */
.nav__lien{position:relative}
.nav__lien::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--ambre);border-radius:2px;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .32s var(--sortie);
}
.nav__item:hover > .nav__lien::after,
.nav__lien:focus-visible::after{transform:scaleX(1)}
.nav__lien[aria-current="page"]::after{transform:scaleX(1)}

/* -------------------------------------------------------- Les liens fléchés */
.lien-fleche{position:relative}
.lien-fleche::before{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:currentColor;opacity:.3;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--sortie);
}
.lien-fleche:hover::before{transform:scaleX(1)}
.lien-fleche:hover svg{transform:translateX(5px)}

/* ----------------------------------------------------------- Les repères
   La barre de chiffres monte d'un bloc quand elle entre dans l'écran. */
.js .reperes-cles{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--sortie),transform .7s var(--sortie)}
.js .reperes-cles.vu{opacity:1;transform:none}
.repere{transition:transform .4s var(--sortie)}
.repere:hover{transform:translateY(-3px)}

/* ------------------------------------------------------------ Les cartes
   Au survol, l'ombre s'étend et le titre avance. Le mouvement est contenu :
   une carte de fondation n'est pas une vignette de boutique. */
.carte,.carte--lien{transition:transform .34s var(--sortie),
  box-shadow .34s var(--sortie),border-color .34s}
.carte--lien:hover{transform:translateY(-5px)}
.axe{transition:transform .34s var(--sortie),box-shadow .34s var(--sortie),
  border-color .34s}
.axe:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(19,90,51,.4)}

/* ------------------------------------------------- Soulignement du manifeste
   Les mots mis en avant dans la phrase-manifeste reçoivent leur trait ambre
   au moment où le bloc apparaît. */
.manifeste .sur{position:relative;white-space:nowrap}
.manifeste .sur::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em;
  background:var(--ambre);opacity:.34;z-index:-1;border-radius:3px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--sortie) .35s;
}
.js [data-anim].vu .manifeste .sur::after,
.js .manifeste[data-anim].vu .sur::after{transform:scaleX(1)}
.manifeste{position:relative;z-index:0}

/* ------------------------------------------------- Respect, deuxième passe */
@media (prefers-reduced-motion:reduce){
  .js [data-anim] .trait,.js [data-anim] .axe__icone,
  .js [data-anim] .liste-nette li,.js [data-anim] .liste-simple li,
  .js .reperes-cles,.manifeste .sur::after{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .btn::after,.nav__lien::after,.lien-fleche::before{transition:none!important}
  .btn:hover,.carte--lien:hover,.axe:hover,.repere:hover{transform:none!important}
  @view-transition{navigation:none}
}

/* ===========================================================================
   Troisième temps : les chiffres et le rythme
   =========================================================================== */

/* ---------------------------------------------------------- Les compteurs
   Pendant qu'il compte, le chiffre est légèrement resserré ; il se pose en
   reprenant sa taille. Le mouvement est court : c'est une ponctuation, pas
   une animation. */
[data-compte]{display:inline-block;font-variant-numeric:tabular-nums}
.js [data-compte]{transform:scale(.94);transition:transform .5s var(--sortie)}
.js [data-compte].compte-fini{transform:none}
.repere__val{position:relative}
.js .repere__val[data-compte]::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;
  background:var(--ambre);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--sortie) .15s;
}
.js .repere__val[data-compte].compte-fini::after{transform:scaleX(1)}

/* --------------------------------------------------- Le temps du diaporama
   Chaque puce se remplit pendant que sa photographie est affichée : on voit
   venir le changement au lieu de le subir. */
.hero__puce{position:relative;overflow:hidden}
.hero__puce::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:#fff;transform:scaleX(0);transform-origin:0 50%;
}
.hero__puce[aria-current="true"]::after{
  animation:remplirPuce 6s linear forwards;
}
@keyframes remplirPuce{to{transform:scaleX(1)}}

/* --------------------------------------------------- Les années de la frise
   Le millésime arrive avec un léger retard sur sa colonne, et grossit d'un
   cheveu en se posant. */
.js [data-anim] .tunnel__num{
  transform:scale(.7);opacity:0;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .2s),
             opacity .35s ease-out calc(var(--d,0s) + .2s);
}
.js [data-anim].vu .tunnel__num{transform:none;opacity:1}

/* ------------------------------------------------- La photographie au survol
   Dans une carte cliquable, l'image avance et s'éclaircit très légèrement. */
.carte--lien .carte__media,.galerie__vue{overflow:hidden}
.carte--lien .carte__media img{transition:transform 1s var(--sortie),filter .6s}
.carte--lien:hover .carte__media img{transform:scale(1.07)}

/* ------------------------------------------------------ Les sections sombres
   Un liseré ambre se trace en haut des blocs verts quand ils entrent. */
.section--vert{position:relative}
.section--vert::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ambre),rgba(246,172,51,0));
  transform:scaleX(0);transform-origin:0 50%;
}
.js .section--vert.bordee::before{
  transform:scaleX(1);transition:transform 1.2s var(--sortie);
}

/* ------------------------------------------------- Respect, troisième passe */
@media (prefers-reduced-motion:reduce){
  .js [data-compte],.js [data-anim] .tunnel__num{
    transform:none!important;opacity:1!important;transition:none!important}
  .js .repere__val[data-compte]::after,.section--vert::before{
    transform:scaleX(1)!important;transition:none!important}
  .hero__puce[aria-current="true"]::after{animation:none!important;transform:scaleX(1)}
  .carte--lien:hover .carte__media img{transform:none!important}
}