@import url("gabarit-ritovex.css?v=5");

/* ==========================================================================
   STRUCTURE RITOVEX + CARTES DIGIGROWTH

   L'import ci-dessus n'est pas un raccourci d'écriture : c'est la thèse de la
   page. Toute la mise en page vient de Ritovex, telle quelle. Ce fichier
   n'ajoute qu'une chose, la carte de Digigrowth, et seulement là où elle se
   justifie.

   ---- où va une carte, et où elle ne va pas ----

   Une carte dit « ceci est un objet séparé, tu peux le comparer aux autres et
   cliquer dessus ». Elle est donc à sa place sur les métiers, les
   réalisations, les avis, les articles.

   Elle n'est PAS à sa place sur :
   - les repères chiffrés, qu'on lit d'un coup et qui ne mènent nulle part ;
   - les trois temps de la méthode, qui se suivent au lieu de se comparer ;
   - le bloc d'appel, qui est déjà l'objet.

   C'est ce tri qui préserve l'air de Ritovex. Des cartes partout, et la page
   redevient une grille de boîtes.
   ========================================================================== */

:root {
  --m-r-carte: 22px;
  --m-ombre:   0 1px 2px rgba(20,20,20,.05), 0 8px 20px rgba(20,20,20,.07);
  --m-ombre-h: 0 3px 6px rgba(20,20,20,.07), 0 18px 34px rgba(20,20,20,.12);
}

/* --------------------------------------------------------------- la carte */

.m-carte {
  background: var(--blanc); color: var(--encre);
  border-radius: var(--m-r-carte);
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: var(--m-ombre);
  display: grid; gap: 12px; align-content: start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.m-carte:hover { transform: translateY(-3px); box-shadow: var(--m-ombre-h); }
.m-carte p { font-size: 1rem; }

/* La pastille pêche, l'accent de Digigrowth que vous vouliez garder. Elle ne
   vit que sur du blanc, donc uniquement à l'intérieur des cartes. */
.m-icone {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; background: var(--accent-doux);
  color: var(--encre); font-size: 1.15rem; font-weight: 700;
  margin-bottom: 2px;
}

/* ------------------------------------------------------- 03 métiers */

/* Les cartes blanches se posent sur une bande crème. C'est le crème qui les
   détache : l'ombre n'a plus qu'à les ancrer, pas à les faire exister. */
.m-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

/* Une carte blanche reste une surface blanche, même posée sur du crème :
   l'accent y reprend ses droits. La règle porte sur la surface qui touche
   le texte, pas sur la bande qui l'entoure. */
.bande--creme .m-carte {
  --accent:       var(--accent-sur-blanc);
  --accent-texte: var(--accent-texte-sur-blanc);
  --accent-doux:  var(--accent-doux-sur-blanc);
  --accent-bord:  var(--accent-sur-blanc);
}

/* Cette carte-là est crème, donc votre règle s'y applique : elle redéfinit ses
   jetons et l'orange y disparaît. Aujourd'hui elle n'en contient pas, mais
   c'est un hasard de contenu ; là, c'est garanti par la structure. */
/* Sélecteur aussi spécifique que la règle « carte blanche » juste au-dessus,
   sinon celle-ci l'emporterait et rendrait l'orange à une surface crème. */
/* Elle est crème sur une bande crème : sans contour, elle disparaîtrait. Un
   filet plutôt qu'un fond, ce qui la distingue au passage des cinq autres.
   Et comme sa surface est crème, l'orange n'y a pas droit de cité. */
.bande--creme .m-carte--appel,
.m-carte--appel {
  background: transparent; box-shadow: none;
  border: 1px solid var(--filet-fort);
  --accent: var(--encre); --accent-texte: var(--encre);
  --accent-doux: var(--creme-2); --accent-bord: var(--filet-fort);
}
.m-carte--appel:hover { transform: none; box-shadow: none; border-color: var(--encre); }
.m-metiers .m-carte--appel:hover { box-shadow: none; }
.m-carte--appel .btn { justify-self: start; margin-top: 6px; }

/* ------------------------------------------- 04 réalisations et 06 avis */

/* Les projets et les avis deviennent des cartes, mais gardent la largeur et
   le défilement du gabarit Ritovex. */
.r-projet.m-carte { padding: clamp(16px, 1.6vw, 20px); gap: 10px; }
.r-projet .r-projet-photo { border-radius: 14px; margin-bottom: 6px; }
.r-projet h3 { margin: 6px 0 0; }

.r-avis-carte.m-carte {
  border: 0; align-content: space-between; gap: 22px;
  padding: clamp(26px, 2.6vw, 34px);
}

/* Une carte qui monte au survol a besoin d'air autour d'elle, sinon l'ombre
   est rognée par le débordement caché du bandeau. */
.r-defile { padding-block: 14px; }

/* ------------------------------------------------------------ 08 journal */

/* Le filet supérieur épais de Ritovex disparaît : la carte le remplace. */
.r-journal article { border-top: 0; padding-top: 0; }
.r-journal h3 { font-size: var(--t-moyen); }

/* ------------------------------------------------------------ les lignes */

/* Les deux filets verticaux qui bornent le conteneur. C'est le trait de
   Ritovex qu'on garde partout où il n'y a pas de cartes contre le bord. */
.regle { position: relative; }
.regle::before, .regle::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--filet); pointer-events: none;
}
.regle::before { left: var(--gouttiere); }
.regle::after  { right: var(--gouttiere); }
@media (max-width: 1100px) { .regle::before, .regle::after { display: none; } }