/* ===========================================================================
   SMART SCHOOL — la couche d'identité
   ---------------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE

   Verdict du client : « trop générique et trop simple ». Il a raison, et la
   cause est identifiable. Le site était :

     · blanc à 90 %, avec du bleu en accent        → leurs flyers sont des APLATS saturés
     · aéré, 8 210 px pour 5 989 caractères        → leurs flyers sont DENSES et pleins
     · des cartes arrondies à bord fin et ombre douce → c'est le look par défaut
       de tous les cadres du marché, celui qu'on reconnaît au premier coup d'œil
     · le losange du logo utilisé timidement        → c'est TOUTE leur identité

   Cette couche reprend l'énergie de leurs propres supports : des sections en
   couleur pleine, des découpes en biais qui font écho au losange, des images
   coupées en diagonale, une typographie beaucoup plus affirmée, et le motif
   wax employé comme une matière, pas comme un filet.

   Elle vient APRÈS les autres feuilles et les surcharge. On peut la retirer
   d'une ligne pour revenir à la version sobre.
   =========================================================================== */

/* ======================================================================
   1. LA DENSITÉ
   On resserre d'environ un tiers. Mesuré : la citation occupait 407 px
   pour 87 caractères.
   ====================================================================== */
.sect { padding: clamp(40px, 5.2vw, 70px) 0; }
.sect-tete { margin-bottom: clamp(22px, 3vw, 38px); }
.citation { padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 48px); }
.appel { padding: clamp(28px, 4vw, 46px); }
.hero { padding-top: clamp(38px, 5.5vw, 72px); }
.hero-grille { padding-bottom: clamp(38px, 5.5vw, 66px); gap: clamp(28px, 4vw, 44px); }
.hero p.chapo { margin-bottom: 22px; }
.hero-actions { margin-bottom: 24px; }

/* ======================================================================
   2. LA TYPOGRAPHIE AFFIRMÉE
   Des titres nettement plus gros, un interlettrage resserré, et le
   sur-titre qui devient un vrai élément graphique au lieu d'un petit
   texte gris.
   ====================================================================== */
h1 { font-size: clamp(2.3rem, 7.2vw, 4.6rem); letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 4.6vw, 3.05rem); letter-spacing: -.03em; line-height: 1.08; }

.oeil {
  position: relative;
  font-size: .74rem !important; font-weight: 800; letter-spacing: .19em;
  padding-left: 30px;
}
/* Un losange plein remplace le simple texte : le sur-titre devient une marque */
.oeil::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; background: currentColor; transform: rotate(45deg);
}
.sect-tete .oeil { padding-left: 0; }
.sect-tete .oeil::before { display: none; }

/* ======================================================================
   3. LES CARTES — on quitte le look par défaut
   Un coin coupé en biais plutôt qu'un arrondi uniforme, une barre de
   couleur pleine sur le flanc, et une ombre franche au lieu du flou doux.
   ====================================================================== */
.carte {
  border-radius: 0;
  border: 2px solid var(--bleu-nuit);
  box-shadow: 6px 6px 0 rgba(10, 76, 124, .1);
  /* Le coin supérieur droit coupé : la diagonale du losange */
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  padding: 26px 22px 22px;
}
.carte:hover {
  box-shadow: 10px 10px 0 var(--jaune);
  border-color: var(--bleu-nuit);
  transform: translateY(-5px);
}
.carte::before { height: 6px; }

/* ---------------------------------------------------------------------
   LE CONFLIT DES DEUX DÉCOUPES

   Une carte porte deux choses qui veulent la même propriété CSS :
     · .carte  → un coin coupé en biais (clip-path: polygon)   = l'identité
     · .dev    → un masque de révélation (clip-path: inset)    = l'animation

   Une seule des deux peut gagner, et c'était la révélation : le coin coupé
   n'apparaissait jamais. Mesuré en production locale avant correction.

   On révèle donc les cartes PAR LE DÉPLACEMENT seul. Et on passe par la
   variable --ty plutôt que par « transform », sinon on écraserait aussi
   l'inclinaison 3D qui suit la souris (elle utilise la même propriété).
   --------------------------------------------------------------------- */
html.pret .carte.dev,
html.pret .carte.dev-g,
html.pret .carte.dev-d {
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  --ty: 30px;
  /* « html.pret .dev » est plus spécifique que « .carte » : sans cette
     ligne, son translateY écraserait l'inclinaison 3D qui suit la souris.
     On réécrit donc la transformation complète ici, où les deux cohabitent
     par la variable --ty. */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
}
html.pret .carte.dev.vu,
html.pret .carte.dev-g.vu,
html.pret .carte.dev-d.vu { --ty: 0px; }
.carte { transition: transform var(--t-ample), box-shadow var(--t-moyen), border-color var(--t-moyen); }

/* La pastille d'icône : carrée, pleine, pas une bulle pâle */
.carte .ic {
  width: 54px; height: 54px; border-radius: 0;
  background: var(--bleu-nuit); border: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.carte .ic .ic-sv { color: #fff; width: 28px; height: 28px; }
.carte:hover .ic { background: var(--jaune); }
.carte:hover .ic .ic-sv { color: var(--bleu-nuit); }
.carte .ic::before { display: none; }

/* Les faits : des étiquettes carrées, contrastées */
.fait {
  border-radius: 0; font-size: .78rem; letter-spacing: .02em;
  background: var(--bleu-nuit); color: #fff; padding: 5px 11px;
}
.fait.or { background: var(--jaune); color: var(--bleu-nuit); }

/* ======================================================================
   4. LES SECTIONS EN COULEUR PLEINE
   Leurs flyers n'ont pas peur de la couleur. Le site alternait
   blanc / gris très pâle / blanc. On met de vrais aplats.
   ====================================================================== */
.sect-pale { background: var(--bleu-pale); }

/* Une section jaune, comme le bas de leurs affiches */
.sect-or {
  background: linear-gradient(135deg, var(--jaune) 0%, var(--jaune-chaud) 100%);
  color: var(--bleu-nuit);
}
.sect-or h2, .sect-or h3 { color: var(--bleu-nuit); }
.sect-or .oeil { color: var(--bleu-fonce); }
.sect-or .sect-tete p { color: rgba(4, 40, 63, .8); }
.sect-or .trait { background: var(--bleu-nuit); }

/* ======================================================================
   5. LES DÉCOUPES EN BIAIS
   Les sections ne se touchent plus par un bord droit : elles se
   coupent en diagonale, à l'angle du losange. C'est ce qui donne au
   défilement une identité au lieu d'un empilement de rectangles.
   ====================================================================== */
.biais-haut { clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%); margin-top: -46px; position: relative; }
.biais-bas  { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); margin-bottom: -46px; position: relative; }
.biais-deux { clip-path: polygon(0 46px, 100% 0, 100% calc(100% - 46px), 0 100%); margin-block: -46px; position: relative; }
.biais-haut, .biais-bas, .biais-deux { z-index: 1; }
.biais-haut > .wrap, .biais-bas > .wrap, .biais-deux > .wrap { padding-top: 46px; }

/* ======================================================================
   6. LES IMAGES EN LOSANGE TRONQUÉ
   La forme de la marque appliquée aux photos : un coin coupé, pas un
   rectangle arrondi de plus.
   ====================================================================== */
.hero-photo { border-radius: 0; }
.hero-photo img {
  clip-path: polygon(0 0, calc(100% - 54px) 0, 100% 54px, 100% 100%, 54px 100%, 0 calc(100% - 54px));
}
.edito-img img {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 46px 100%, 0 calc(100% - 46px));
}
.edito-pastille { border-radius: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.lieu, .lieu-img img, .filiere { border-radius: 0; }
.filiere { border: 2px solid var(--bleu-nuit); box-shadow: 5px 5px 0 rgba(10,76,124,.1); }
.filiere:hover { box-shadow: 9px 9px 0 var(--jaune); }
.filiere h3 { border-radius: 0; }

/* ======================================================================
   7. LE MOTIF WAX COMME MATIÈRE
   Plus un filet : un vrai bandeau, et une texture de fond.
   ====================================================================== */
.wax { height: 30px; }
.chevrons { height: 44px; }

/* Une section entière sur fond de chevrons très atténués */
.texture-wax { position: relative; }
.texture-wax::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,206,33,.1) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(45deg, rgba(10,76,124,.07) 0 16px, transparent 16px 32px);
}
.texture-wax > * { position: relative; z-index: 1; }

/* ======================================================================
   8. LES BOUTONS — carrés, francs
   ====================================================================== */
.btn { border-radius: 0; letter-spacing: .01em; }
.btn-or {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: none;
}
.btn-or:hover { box-shadow: none; transform: translateY(-3px); }
.btn-bleu, .btn-wa, .btn-blanc {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: none;
}
.btn-vide { border-width: 2px; border-color: currentColor; }
.hero-sur, .socle, .puce, .tranche, .faq details, .form-carte { border-radius: 0; }
.faq summary::after { color: var(--jaune-chaud); }

/* ======================================================================
   9. LE HÉROS — plus dense, plus net
   ====================================================================== */
.hero { background: linear-gradient(142deg, var(--bleu-nuit) 0%, var(--bleu) 56%, var(--bleu-clair) 100%); }
.hero-sur {
  background: var(--jaune); border-color: var(--jaune); color: var(--bleu-nuit);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}
.hero-sur .pastille { background: var(--bleu-nuit); }
.socle { border-radius: 0; border-width: 1.5px; }

/* La vague molle devient une diagonale franche */
.vague { display: none; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px; z-index: 2;
  background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ======================================================================
   10. LES GRANDS CHIFFRES — en jaune plein
   ====================================================================== */
.gros-chiffres { border-radius: 0; gap: 3px; background: var(--jaune); }
.gros-chiffre { background: var(--bleu-nuit); }
.gros-chiffre:hover { background: var(--bleu); }

/* ======================================================================
   11. LA FRISE — jalons carrés
   ====================================================================== */
.jalon .pastille { border-radius: 0; border-width: 3px; }

/* ======================================================================
   12. LA PERFORMANCE
   Mesuré : SEPT animations infinies tournaient en permanence, dont une
   sur « background-position » — un repaint à chaque image, jamais
   composité, le pire cas pour un téléphone d'entrée de gamme.

   On remplace cette animation, et le script met en pause tout le décor
   du héros dès qu'il sort de l'écran (classe « hors-vue »).
   ====================================================================== */
.hero-trame {
  animation: none;                       /* plus de background-position animé */
  background-size: 48px 48px;
}
/* Le mouvement passe par une transformation, qui elle est composée par le GPU */
.hero-trame { animation: trameGlisse 50s linear infinite; }
@keyframes trameGlisse { to { transform: translate3d(48px, 48px, 0); } }

.hero.hors-vue .hero-trame,
.hero.hors-vue .hero-eclat,
.hero.hors-vue .hero-deco i,
.hero.hors-vue .hero-sur .pastille { animation-play-state: paused; }
.ruban.hors-vue .ruban-piste { animation-play-state: paused; }

/* ON N'UTILISE PAS « content-visibility: auto » SUR LES SECTIONS.
   Essayé le 09/11 pour gagner du temps de calcul, puis retiré : une section
   non rendue ne déclenche pas l'IntersectionObserver qui pose la classe
   « .vu ». Mesuré sur entreprises.html à 360 px — le bloc restait figé à
   24 px sur la gauche, dans son état d'avant-révélation, et comme la
   révélation masque aussi par clip-path, du contenu pouvait rester coupé.
   Le vrai gain de performance venait de la mise en pause des animations
   hors écran, pas de ça. La justesse passe avant la micro-optimisation. */

/* ======================================================================
   13. ADAPTATION
   ====================================================================== */
@media (max-width: 760px) {
  .biais-haut, .biais-bas, .biais-deux { clip-path: none; margin-block: 0; }
  .biais-haut > .wrap, .biais-bas > .wrap, .biais-deux > .wrap { padding-top: 0; }
  .hero::after { height: 30px; }
  .hero-photo img { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
  .edito-img img { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px)); }
  .carte { box-shadow: 4px 4px 0 rgba(10,76,124,.1); }
  .carte:hover { box-shadow: 6px 6px 0 var(--jaune); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trame { animation: none !important; }
}

/* ======================================================================
   14. LES CIBLES TACTILES
   Mesuré sur un écran de 360 px : vingt-trois liens faisaient moins de
   38 px de haut — le fil d'Ariane, les liens « Voir la formation », ceux
   du pied de page. Au doigt, on les rate une fois sur deux, et on tape
   sur le lien d'à côté.

   On ne grossit pas le texte : on élargit la zone sensible par du
   remplissage, et on compense par une marge négative pour que la mise en
   page ne bouge pas d'un pixel.
   ====================================================================== */
@media (max-width: 760px) {
  /* Les mentions legales alignent des numeros de telephone en ligne,
     dans un paragraphe : ce sont des liens qu on tape vraiment. */
  .fil a, .carte-lien, .liste-dia a, .pied a, .form-note a, .faq .rep a,
  main p a, main li a, .tranches-note a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
  /* Le pied de page aligne ses liens en colonne : on y gagne de l'air
     plutôt que de superposer des zones sensibles. */
  .pied li { margin-bottom: 14px; }
  .pied a { padding-block: 8px; margin-block: -4px; }
  .reseaux a { width: 46px; height: 46px; }
  /* Les liens du menu déplié et les boutons sont déjà au-dessus de 38 px ;
     on sécurise les petits boutons de filtre. */
  .puce { padding-block: 12px; }
}

/* ======================================================================
   15. LES CARTES DE LOCALISATION
   OpenStreetMap plutôt que Google Maps : pas de clé à gérer, aucun
   cookie déposé, aucun traceur — et notre politique de sécurité reste
   serrée. Le cadre ne charge rien tant qu'on ne descend pas jusqu'à lui.
   ====================================================================== */
.carte-geo {
  position: relative; border: 2px solid var(--bleu-nuit);
  background: var(--bleu-pale); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.carte-geo iframe { display: block; width: 100%; height: 300px; border: 0; }
.carte-geo figcaption {
  padding: 14px 18px; background: var(--bleu-nuit); color: #fff; font-size: .9rem;
}
.carte-geo figcaption b { color: var(--jaune); display: block; margin-bottom: 3px; }
.carte-geo figcaption .precision { color: rgba(255,255,255,.62); font-size: .82rem; }

/* ======================================================================
   16. LE COMPARATEUR
   ====================================================================== */
.comparo { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
.comparo th, .comparo td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ligne); }
.comparo thead th {
  background: var(--bleu-nuit); color: #fff; font-size: .82rem; letter-spacing: .05em;
  text-transform: uppercase; position: sticky; top: 72px; z-index: 2;
}
.comparo thead th:first-child { background: var(--bleu); }
.comparo tbody th {
  font-weight: 800; color: var(--bleu-nuit); font-family: var(--police-titre);
  font-size: .95rem; background: var(--bleu-brume); white-space: nowrap;
}
.comparo td { font-size: .93rem; color: var(--encre-douce); }
.comparo tbody tr:hover td { background: var(--jaune-pale); }
.comparo .prix { font-weight: 800; color: var(--bleu); font-size: 1.02rem; white-space: nowrap; }
.comparo .inconnu { color: var(--ardoise); font-style: italic; }
.comparo .oui { color: #15803D; font-weight: 700; }
.comparo-boite { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--bleu-nuit); }
@media (max-width: 860px) { .comparo { min-width: 780px; } .comparo thead th { position: static; } }

/* ======================================================================
   17. LE SÉLECTEUR DE LANGUE
   ====================================================================== */
.langue {
  display: inline-flex; gap: 2px; margin-left: 10px; border: 1.5px solid var(--ligne);
  padding: 3px; flex: none;
}
.langue a {
  padding: 5px 10px; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ardoise); text-decoration: none; line-height: 1;
}
.langue a[aria-current] { background: var(--bleu-nuit); color: #fff; }
.langue a:hover { color: var(--bleu); text-decoration: none; }
.langue a[aria-current]:hover { color: #fff; }
@media (max-width: 880px) { .langue { margin: 10px 0 0; } }

/* ======================================================================
   18. LES EN-TÊTES DE PAGE DEVIENNENT DE VRAIS HÉROS
   Neuf pages ouvraient sur exactement la même bande bleue plate : un
   fil d'Ariane, un titre, un paragraphe. C'est ce qui donnait au site
   son air de gabarit, même après avoir refait l'accueil.

   On leur donne la même matière qu'au héros d'accueil : la trame de
   losanges, un grand losange qui tourne lentement, une diagonale
   franche en bas, et un titre à l'échelle.
   ====================================================================== */
.tete-page {
  background: linear-gradient(142deg, var(--bleu-nuit) 0%, var(--bleu) 58%, var(--bleu-clair) 100%);
  padding: clamp(42px, 6.5vw, 86px) 0 clamp(56px, 7vw, 96px);
  isolation: isolate;
}
.tete-page > .wrap { position: relative; z-index: 2; max-width: var(--wrap); }

/* La trame de losanges, comme sur l'accueil */
.tete-page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(ellipse 80% 90% at 30% 50%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 30% 50%, #000 10%, transparent 76%);
}

/* Le grand losange qui tourne, repris du héros */
.tete-page::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(44vw, 440px); aspect-ratio: 1;
  border: 2px solid rgba(255, 206, 33, .2);
  transform: rotate(45deg);
  top: 50%; right: -8%; margin-top: -22vw;
  animation: tournerLent 72s linear infinite;
}

/* La diagonale franche qui ferme la bande */
.tete-page .ferme {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 1;
  background: #fff; clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* Quand la section suivante est colorée, la diagonale doit prendre sa couleur */
.tete-page + .sect-pale .biais, .tete-page .ferme.pale { background: var(--bleu-brume); }

.tete-page h1 { font-size: clamp(2.2rem, 6.4vw, 4.1rem); margin-bottom: 14px; }
.tete-page p { font-size: clamp(1rem, 1.7vw, 1.16rem); }

/* Le fil d'Ariane devient une ligne de pastilles */
.fil {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .17);
  padding: 7px 14px; margin-bottom: 18px; font-size: .82rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.fil .sep { margin: 0 8px; color: var(--jaune); }

/* ======================================================================
   19. LA FORMATION MISE EN AVANT
   Une grille de six cartes identiques, c'est un catalogue. On sort la
   première du rang : deux colonnes, son visuel dessiné en fond, et le
   tarif en grand.
   ====================================================================== */
@media (min-width: 880px) {
  .cartes .carte.vedette { grid-column: span 2; }
}
.carte.vedette {
  background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: rgba(255,255,255,.84);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
  position: relative; overflow: hidden; padding: 32px 28px 28px;
}
.carte.vedette h3 { color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.75rem); }
.carte.vedette p { color: rgba(255,255,255,.8); }
.carte.vedette:hover { box-shadow: 12px 12px 0 var(--jaune); transform: translateY(-6px); }
/* Le visuel dessiné, en fond, discret */
.carte.vedette::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--fond-vedette) center/cover no-repeat;
  opacity: 1;
  mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
  transform: none;
}
.carte.vedette > * { position: relative; z-index: 1; }
.carte.vedette .ic { background: var(--jaune); }
.carte.vedette .ic .ic-sv { color: var(--bleu-nuit); }
.carte.vedette .fait { background: rgba(255,255,255,.14); }
.carte.vedette .fait.or { background: var(--jaune); color: var(--bleu-nuit); }
.carte.vedette .carte-lien { color: var(--jaune); }
/* Le prix, en très grand, dans l'angle */
.vedette-prix {
  font-family: var(--police-titre); font-weight: 800; line-height: 1;
  font-size: clamp(1.8rem, 4vw, 2.7rem); color: var(--jaune);
  margin: 4px 0 12px; font-variant-numeric: tabular-nums;
}
.vedette-prix small { display: block; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.64); letter-spacing: .04em; margin-top: 5px; }

@media (prefers-reduced-motion: reduce) { .tete-page::after { animation: none; } }
@media (max-width: 760px) { .tete-page .ferme { height: 26px; } .tete-page::after { right: -34%; margin-top: -46vw; } }

/* La vedette veut un coin plus large (40 px) que les cartes ordinaires
   (26 px). Mais « html.pret .carte.dev » est plus spécifique que
   « .carte.vedette » : sans cette règle, la vedette héritait du petit coin.
   On remonte donc la spécificité au même niveau. */
html.pret .carte.vedette.dev,
html.pret .carte.vedette.dev-g,
html.pret .carte.vedette.dev-d,
.carte.vedette {
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}