/* ==========================================================================
   MISE EN PAGE RITOVEX - copie de l'architecture réelle de l'accueil

   Ce fichier ne redéfinit aucune couleur ni aucune police : tout vient de
   `base.css`. Il ne décrit que la disposition, pour qu'une comparaison avec
   l'autre gabarit ne porte que sur elle.

   Relevé sur ritovex.webflow.io en 1440 px de large :
   - conteneur 1320, gouttière intérieure 15
   - bandeau en deux colonnes 600 / 631
   - à propos en deux colonnes 584 / 630
   - méthode en deux colonnes 405 / 610, soit environ 2 pour 3
   - métiers en RANGÉES pleine largeur de 137 px, pas en grille de cartes
   - journal en trois colonnes de 410
   - deux bandeaux qui défilent, réalisations et avis
   - trois rayons d'angle seulement : 5 px, 14 px, 20 px
   ========================================================================== */

:root {
  --r-bouton: 5px;
  --r-bloc: 14px;
  --r-image: 20px;
  --r-conteneur: 1320px;
}

.wrap { max-width: var(--r-conteneur); }
.r-sect { padding-block: clamp(64px, 7vw, 118px); }
.btn, .burger { border-radius: var(--r-bouton); }

/* Le cadre cranté ne fait pas partie de ce gabarit : les images y sont de
   simples rectangles à angles doux. */
.photo-cadre { clip-path: none; border-radius: var(--r-image); overflow: hidden; background: var(--creme); }

/* ------------------------------------------------------------- 01 bandeau */

.r-bandeau { padding-top: clamp(40px, 5vw, 84px); }
.r-bandeau-inner {
  display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 631fr);
  gap: clamp(32px, 4vw, 68px); align-items: center;
}
.r-bandeau h1 { margin-top: 4px; max-width: 13ch; }
.r-chapo { margin-top: 22px; max-width: 46ch; }
.r-boutons { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; }
.r-boutons--centre { justify-content: center; }
@media (max-width: 940px) { .r-bandeau-inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- en-têtes */

/* Centré pour les sections de fond, fendu titre / bouton pour les listes.
   Les deux cohabitent dans le gabarit : c'est voulu, pas une inconstance. */
.r-tete { text-align: center; max-width: 630px; margin: 0 auto clamp(36px, 4vw, 62px); }
.r-tete .pastille { margin-bottom: 18px; }
.r-tete p { margin: 14px auto 0; max-width: 56ch; }

.r-tete-fendue {
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px);
}
.r-tete-fendue .pastille { margin-bottom: 14px; }
.r-tete-fendue h2 { max-width: 18ch; }

/* --------------------------------------------------- 02 qui nous sommes */

.r-duo {
  display: grid; grid-template-columns: minmax(0, 584fr) minmax(0, 630fr);
  gap: clamp(32px, 4vw, 74px); align-items: center;
}
.r-duo-texte { display: grid; gap: clamp(28px, 3vw, 44px); }
.r-duo-texte h3 { margin-bottom: 14px; }
.r-duo-texte p { margin-bottom: 18px; }
.r-reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--filet);
}
.r-reperes li { padding: 20px 16px 0 0; }
.r-reperes b {
  display: block; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--accent-texte);
}
.r-reperes span { display: block; margin-top: 6px; font-size: var(--t-petit); font-weight: 600; }
@media (max-width: 940px) { .r-duo { grid-template-columns: 1fr; } }

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

/* La rangée pleine largeur : le trait le plus reconnaissable du gabarit.
   Chaque métier occupe toute la mesure, séparé du suivant par un filet.
   Rien n'est posé, rien ne flotte, rien ne porte d'ombre. */
.r-metiers .r-tete p { color: var(--blanc); }
.r-rangs { border-top: 1px solid rgba(255, 255, 255, .3); }
.r-rang {
  display: grid; grid-template-columns: 84px minmax(0, 22ch) minmax(0, 1fr) 48px;
  gap: clamp(16px, 2.4vw, 40px); align-items: center;
  padding-block: clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: padding-inline .3s var(--ease);
}
.r-rang:hover { padding-inline: 14px; }
.r-rang-num { font-size: var(--t-petit); font-weight: 700; letter-spacing: .08em; }
.r-rang h3 { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }
.r-rang p { font-size: 1rem; max-width: 52ch; }
.r-rang-fleche { justify-self: end; font-size: 1.3rem; }
@media (max-width: 860px) {
  .r-rang { grid-template-columns: 56px minmax(0, 1fr) 32px; }
  .r-rang p { grid-column: 2 / 4; }
}

/* -------------------------------------------------------- 04 réalisations */

/* Un bandeau qui déborde de la page et défile sans fin. Le contenu est
   dupliqué pour que la boucle se referme sans à-coup ; la copie est masquée
   aux lecteurs d'écran. */
.r-defile { overflow: hidden; padding-block: 4px; }
.r-defile-piste {
  display: flex; gap: clamp(20px, 2.4vw, 32px); width: max-content;
  padding-inline: var(--gouttiere);
  animation: r-defiler 46s linear infinite;
}
.r-defile:hover .r-defile-piste,
.r-defile:focus-within .r-defile-piste { animation-play-state: paused; }
.r-defile--inverse .r-defile-piste { animation-direction: reverse; animation-duration: 54s; }
@keyframes r-defiler { to { transform: translateX(calc(-50% - clamp(10px, 1.2vw, 16px))); } }

.r-projet { width: clamp(280px, 30vw, 420px); flex: none; }
.r-projet-photo { overflow: hidden; border-radius: var(--r-image); background: var(--creme); }
.r-projet-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.r-projet:hover .r-projet-photo img { transform: scale(1.04); }
.r-projet h3 { margin: 18px 0 6px; font-size: var(--t-moyen); }

/* --------------------------------------------------------- 05 méthode */

.r-methode {
  display: grid; grid-template-columns: minmax(0, 405fr) minmax(0, 610fr);
  gap: clamp(36px, 5vw, 90px); align-items: start;
}
.r-methode-texte { position: sticky; top: 108px; }
.r-methode-texte .pastille { margin-bottom: 18px; }
.r-methode-texte p { margin: 14px 0 30px; }
.r-etapes { display: grid; gap: clamp(20px, 2.2vw, 30px); }
.r-etape {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 20px;
  padding-block: clamp(22px, 2.4vw, 32px); border-top: 1px solid var(--filet-fort);
}
/* Trois enfants pour deux colonnes : sans cette ligne le paragraphe repart à
   la ligne suivante dans la colonne étroite du numéro, et se casse mot à mot. */
.r-etape > h3, .r-etape > p { grid-column: 2; }
.r-etape-num { font-size: var(--t-petit); font-weight: 700; letter-spacing: .08em; }
.r-etape h3 { margin-bottom: 10px; }
@media (max-width: 940px) {
  .r-methode { grid-template-columns: 1fr; }
  .r-methode-texte { position: static; }
}

/* ------------------------------------------------------------- 06 avis */

.r-avis .r-tete { margin-bottom: clamp(28px, 3vw, 44px); }
.r-avis-carte {
  width: clamp(290px, 32vw, 430px); flex: none;
  border: 1px solid var(--filet-fort); border-radius: var(--r-bloc);
  padding: clamp(24px, 2.6vw, 34px);
  display: grid; align-content: space-between; gap: 22px;
}
.r-avis-carte blockquote { font-size: var(--t-moyen); font-weight: 500; line-height: 1.32; }
.r-avis-qui b { display: block; font-weight: 700; }
.r-avis-qui span { display: block; font-size: var(--t-petit); font-weight: 600; }

/* ------------------------------------------------------------- 07 appel */

.r-appel {
  border-radius: var(--r-bloc); text-align: center;
  padding: clamp(44px, 5.5vw, 86px) clamp(24px, 4vw, 64px);
}
.r-appel h2 { max-width: 17ch; margin: 18px auto 0; }
.r-appel p { max-width: 48ch; margin: 16px auto 0; }
.r-appel .r-boutons { margin-top: 32px; }

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

.r-journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 2.6vw, 34px); }
.r-journal article { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--encre); }
.r-journal h3 { font-size: var(--t-moyen); }
.r-journal .lien-fleche { margin-top: 6px; }

/* --------------------------------------------------------------- divers */

/* Le sur-titre du gabarit : minuscule, cerné d'un filet, avec un point en
   tête. Relevé à 22 px de haut sur le site d'origine, soit à peine plus que
   la ligne de texte qu'il contient. */
.pastille {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border: 1px solid var(--filet-fort); border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: -.005em;
}
.pastille::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-bord); flex: none;
}
.pastille--sombre { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: var(--blanc); }
.pastille--sombre::before { background: var(--blanc); }

@media (prefers-reduced-motion: reduce) {
  .r-defile-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}