/* Feuille de la page Studio.
   ---------------------------------------------------------------------------
   Reprise telle quelle de wp-content/fronteditor/3/style/style.css, qui est le
   fichier qui habillait réellement /studio/ : sytech-fronteditor le mettait en
   file d'attente quand la page portait un page_custom_meta. La migration
   sortant du greffon, la feuille rejoint le thème et se charge par header.php,
   comme image.css, film.css et vr.css.

   Reprise VERBATIM, à dessein : le contrat de cette migration est « la page ne
   bouge pas d'un pixel ». Le préfixe générique qu'elle contient — :root
   --title_color, la remise à zéro *, .content — reprend mot pour mot les
   valeurs du thème (style.css:15 et :20, global.css:52) : le redéclarer n'a
   aucun effet.

   CE FICHIER REMPLACE une version de 4 217 octets qui n'était chargée NULLE
   PART — ni header.php, ni footer.php, ni functions.php. Elle portait cinq
   règles absentes d'ici, qui n'ont donc jamais rien fait :
     .ir-methode h2[id]                        scroll-margin-top: 6rem
     .stud_confiance li a  et  :hover          couleur et survol des liens
     .studio_main .items + .content            padding: 0
     .studio_main .items .item:nth-child(even) transform: translateY(36.3%)
   Les deux dernières déplaceraient la mise en page. Les appliquer serait un
   changement d'apparence déguisé en migration : à décider séparément, une fois
   celle-ci vérifiée. L'ancienne version reste dans l'historique git.
*/

 
:root {
  --title_color: #000;
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.studio_main {
  padding: 5rem 0px 42px;
}

/* ── Premier écran : hero asymétrique (revue du 28/08) ─────────────────────
   Texte à gauche (surtitre, H1, intro), une image de projet à droite — celle
   du module 1, déplacée, pas dupliquée. Sur téléphone : une colonne, ordre
   titre → texte → image → légende. */
.ir-hero-studio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 4.5vw, 64px);
  align-items: center;
  max-width: 1180px;
  margin: 0 0 5rem;
}
.ir-hero-sur {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
}
@media (min-width: 787px) {
  /* 64px tenait sur toute la page ; dans une colonne de 5/12 il déborde.
     Le clamp suit la fenêtre ; en dessous de 787px, mobile.css reprend. */
  .ir-hero-studio .head h1 {
    /* 38-52 → 30-36, puis calé sur LE titre de page unique (29/08/2026) :
       32/300, espacement 2px — le dessin du H1 de l'accueil, partout. */
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.2;
  }
}
.ir-hero-img {
  margin: 0;
}
.ir-hero-img a {
  display: block;
  color: inherit;
}
.ir-hero-img img {
  display: block;
  width: 100%;
  height: auto;
}
.ir-hero-img figcaption {
  margin-top: 0.55rem;
  font-size: 12px;
  line-height: 1.4;
  color: #707070;
}
@media (max-width: 786px) {
  .ir-hero-studio {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }
}

/* Les trois sections « méthode » en modules texte + image (texte 4 colonnes,
   image 7 — l'image mène, revue du 28/08), en alternance : hero image à
   droite, module 2 image à gauche, module 3 à droite. Les images gardent leur
   proportion d'origine (une verticale reste verticale — c'est ce qui évite de
   recadrer Étoile Voltaire). Le module 1, dont l'image est montée dans le
   hero, est en texte seul. Sur téléphone : une colonne. */
.ir-methode .ir-module {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(48px, 4.5vw, 64px);
  align-items: center;
  margin: 0 0 5.5rem;
}
.ir-methode .ir-module--texte {
  grid-template-columns: minmax(0, 1fr);
}
.ir-methode .ir-module--texte .ir-module-texte {
  max-width: 46rem;
}
.ir-methode .ir-module-texte h2 {
  margin-top: 0;
}
.ir-methode .ir-module-img {
  margin: 0;
}
.ir-methode .ir-module-img img {
  display: block;
  width: 100%;
  height: auto;
}
.ir-methode .ir-module-img figcaption {
  margin-top: 0.55rem;
  font-size: 12px;
  line-height: 1.4;
  /* #707070 et non #8e8e8e : à 12px, il faut au moins 4,5:1 de contraste
     (WCAG AA) — #8e8e8e n'en donne que ~3,3. */
  color: #707070;
}
/* L'en-tête est sticky (global.css) : sans marge d'ancrage, /studio/#recherche
   ouvre la page avec le titre caché sous l'en-tête. */
.ir-methode h2[id] {
  scroll-margin-top: 6rem;
}
@media (min-width: 787px) {
  /* Alternance : le module pair passe l'image à gauche — on inverse les
     largeurs de colonnes avec l'ordre, sinon l'image tomberait dans la
     colonne étroite. */
  .ir-methode .ir-module:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .ir-methode .ir-module:nth-child(even) .ir-module-texte {
    order: 2;
  }
}
@media (max-width: 786px) {
  .ir-methode .ir-module {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
  }
}

/* Fin de page : l'invitation à parler du projet, sobre, après les clients. */
.ir-cta-fin {
  margin-top: 4rem;
  border-top: 1px solid #e6e6e6;
}
.ir-cta-fin .ir-cta-projet {
  margin-top: 1.4rem;
}

body>section {
  position: relative;
}

body>section:hover {}

@media screen and (min-width: 1513px) {
  .studio_main {
    padding-bottom: 116px;
  }
}

.content {
  max-width: 1352px;
  margin: 0px auto;
  position: relative;
}

@media screen and (min-width: 1513px) {
  .content {
    max-width: 1710px;
  }
}

@media screen and (min-width: 786px) and (max-width: 1440px) {
  .content {
    padding: 0px 1.2rem;
  }
}

@media screen and (min-width: 786px) and (max-width: 1220px) {
  .content {
    max-width: 1000px;
  }
}

@media screen and (min-width: 786px) and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}

.studio_main .head {
  margin: 0px auto 65px;
  max-width: 1113px;
}

@media screen and (min-width: 1513px) {
  .studio_main .head {
    max-width: unset;
    margin-bottom: 87px;
  }
}

.studio_main .head h1 {
  /* C'est CETTE règle qui habille le titre du Studio (le balisage rend
     .studio_main .head, pas .ir-hero-studio .head). Calée sur LE titre de
     page unique le 29/08/2026 : 32/300, interligne 1,3, espacement 2px —
     l'ancien interligne de 75px (hérité du 64px d'origine) écartelait les
     trois lignes. */
  font-size: 32px;
  font-weight: 300;
  line-height: 1.3;
  color: rgb(0, 0, 0);
  letter-spacing: 2px;
}

.fadeIn {
  animation-name: fadeIn;
}

.studio_main .head h1 span {
  font-size: 32px;
  line-height: 1.3;
}

.studio_main p strong {
  /* même règle que les autres corps : les gras de paragraphe en 500. */
  font-weight: 500;
}
.studio_main p {
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: rgb(0, 0, 0);
  margin: 0px auto 26px;
  max-width: 1094px;
}

@media screen and (min-width: 1513px) {
  .studio_main p {
    max-width: 1502px;
    /* 20 → 16px (29/08/2026) : ce 20px de grand écran était la cause des
       « noms de clients tantôt grands tantôt petits » — les liens, cloués à
       1rem (16px) par la remise à zéro globale, restaient petits pendant que
       le paragraphe et les noms sans lien passaient à 20. À 16 partout,
       une seule taille — et le plafond du corps de la charte est respecté. */
    font-size: 16px;
    line-height: 1.7;
  }
}

.studio_main .items {
  max-width: 1100px;
  margin: 40px auto 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 130px 6.91%;
}

@media screen and (min-width: 1513px) {
  .studio_main .items {
    margin-top: 120px;
    max-width: unset;
    gap: 302px 6.43275%;
  }
}

.studio_main .items .item .con {
  position: relative;
  z-index: 2;
}

.fadeInUp {
  animation-name: fadeInUp;
}

.studio_main .items .item .img {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.studio_main .items .item .con:hover img {
  transform: scale(1.03);
}

.studio_main .items .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease 0s;
}

.studio_main .items .item .con:hover .info {
  opacity: 1;
  pointer-events: all;
}

.studio_main .items .item .info {
  aspect-ratio: 512 / 716;
  transition: all 0.3s ease 0s;
  color: rgb(255, 255, 255);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
}

.studio_main .items .item .btn {
  display: none;
}

.studio_main .items .item .info .name {
  font-size: 40px;
  font-weight: 500;
  line-height: 47px;
}

.studio_main .items .item .info .desc {
  font-size: 18px;
  font-weight: 300;
  line-height: 50px;
}

a {
  color: var(--title_color);
  text-decoration: none;
  font-size: 1rem;
}

.studio_main .items .item .info a {
  font-size: 1rem;
  font-weight: 300;
  line-height: 26px;
  color: rgb(255, 255, 255);
  transition: all 0.3s ease 0s;
}

.studio_main .items .item .info a:hover {
  opacity: 0.8;
}

.studio_main .items .item .info .btc {
  margin: 8px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.studio_main .items .item .info .btc .cv {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  padding: 4px;
  font-size: 14px;
  font-weight: 300;
  gap: 8px;
}

.studio_main .items .item .info .btc .cv::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("https://www.imaginray.fr/wp-content/plugins/sytech-fronteditor/sytpl/studio_main/assets/img/FileText.svg") center center / contain no-repeat;
}

.studio_main .items .item:nth-child(2n) {
  transform: translateY(36.3128%);
}

@media screen and (min-width: 1513px) {
  .studio_main .items .item:nth-child(2n) {
    transform: translateY(49.609%);
  }
}

button,
input,
textarea {
  outline: none;
  border: none;
  font-family: unset;
}

input[type="submit"],
button {
  cursor: pointer;
}
 
@media screen and (max-width: 786px) {

    .studio_main {
        padding-bottom: 0px;
        padding-top: 42px;
    }

    .content {
        padding: 0px 1.2rem;
    }

    .studio_main .head {
        margin-bottom: 2rem;
    }

    .head h1 {
        font-size: 25px;
        line-height: 1.5;
    }

    /* Aligné sur le titre de page invariant (32/300/2px) — mobile.css porte
       la même valeur et gagnait déjà la cascade ; on cesse de le contredire. */
    .studio_main .head h1 {
        font-size: 32px;
        font-weight: 300;
        letter-spacing: 2px;
        line-height: 1.35;
    }

    .studio_main .head h1 span {
        font-size: 32px;
        line-height: 1.35;
    }

    .studio_main p {
        font-size: 16px;
        line-height: 30px;
    }

    .studio_main .items {
        grid-template-columns: 1fr;
        margin-top: 92px;
        row-gap: 36px;
        margin-bottom: 60px;
    }

    .studio_main .items .item .con {
        pointer-events: none;
    }

    .studio_main .items .item .img {
        aspect-ratio: 396 / 553;
        pointer-events: none;
    }

    .studio_main .items .item .con:hover img {
        transform: scale(1);
    }

    .studio_main .items .item .con:hover .info {
        opacity: 0;
        pointer-events: none;
    }

    .studio_main .items .item .info .btn {
        width: 24px;
        max-width: 24px;
        height: 24px;
        margin: 0px;
        background: url("https://www.imaginray.fr/wp-content/plugins/sytech-fronteditor/sytpl/studio_main/assets/img/x.svg") center center / contain no-repeat;
        filter: contrast(0) brightness(2);
        position: absolute;
        right: 14px;
        top: 14px;
    }

    .studio_main .items .item .info .btn::before {
        display: none;
    }

    .studio_main .items .item .btn {
        margin-top: 24px;
        height: 42px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: rgb(0, 0, 0);
        text-transform: uppercase;
        max-width: max-content;
    }

    .studio_main .items .item .btn::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background: url("https://www.imaginray.fr/wp-content/plugins/sytech-fronteditor/sytpl/studio_main/assets/img/chevron-right.svg") center center / contain no-repeat;
        transform: translateY(-1px);
    }

    .studio_main .items .item .info .name {
        font-size: 24px;
        line-height: 28px;
    }

    .studio_main .items .item .info .desc {
        font-size: 20px;
        line-height: 24px;
        margin: 8px 0px;
    }

    .studio_main .items .item .info .btc .cv {
        padding: 4px 0px;
        width: 92px;
    }

    .studio_main .items .item:nth-child(2n) {
        transform: unset;
    }
}
 
:root {}

@media screen and (min-width: 1513px) {
  .content {
    max-width: 1710px;
  }
}

@media screen and (min-width: 786px) and (max-width: 1440px) {
  .content {
    padding: 0px 1.2rem;
  }
}

@media screen and (min-width: 786px) and (max-width: 1220px) {
  .content {
    max-width: 1000px;
  }
}

@media screen and (min-width: 786px) and (max-width: 1000px) {
  .content {
    max-width: 786px;
  }
}

.stud_content p {
  font-size: 16px;
  font-weight: 300;
  line-height: 26px;
  color: rgb(0, 0, 0);
  margin: 26px auto;
  max-width: 1144px;
}

@media screen and (min-width: 1513px) {
  .stud_content p {
    max-width: unset;
    font-size: 20px;
    line-height: 1.5;
    margin: 30px 0px;
  }
}
 
@media screen and (max-width: 786px) {

    .content {
        padding: 0px 1.2rem;
    }

    .stud_content p {
        font-size: 16px;
        line-height: 30px;
        margin: 30px 0px;
    }
}
* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 }
.stud_confiance {
 padding: 10px 0px 120px;
 }
body > section {
 position: relative;
 }
body > section:hover {
  }
@media screen and (min-width: 1513px){
.stud_confiance {
 padding-top: 40px;
 }}
.content {
 max-width: 1352px;
 margin: 0px auto;
 position: relative;
 }
@media screen and (min-width: 1513px){
.content {
 max-width: 1710px;
 }}
@media screen and (min-width: 786px) and (max-width: 1440px){
.content {
 padding: 0px 1.2rem;
 }}
@media screen and (min-width: 786px) and (max-width: 1220px){
.content {
 max-width: 1000px;
 }}
@media screen and (min-width: 786px) and (max-width: 1000px){
.content {
 max-width: 786px;
 }}
.stud_confiance h2 {
 font-size: 40px;
 font-weight: 500;
 color: rgb(0, 0, 0);
 }
.fadeInLeft {
 animation-name: fadeInLeft;
 }
.stud_confiance .conf-box {
 margin-top: 40px;
 }
@media screen and (min-width: 1513px){
.stud_confiance .conf-box {
 margin-top: 70px;
 }}
ul {
 list-style: none;
 }
.stud_confiance .conf-box ul {
 display: flex;
 justify-content: space-between;
 column-gap: 15px;
 }
.stud_confiance li {
 font-size: 16px;
 font-weight: 300;
 line-height: 26px;
 color: rgb(0, 0, 0);
 }
@media screen and (min-width: 1513px){
.stud_confiance li {
 font-size: 20px;
 line-height: 1.5;
 }}
button, input, textarea {
 outline: none;
 border: none;
 font-family: unset;
 }
input[type="submit"], button {
 cursor: pointer;
 }
 
@media screen and (max-width: 786px){

.stud_confiance {
 padding: 3px 0px 5rem;
 }
.content {
 padding: 0px 1.2rem;
 }
.head h2 {
 font-size: 22px;
 line-height: 1.5;
 }
.stud_confiance .head h2 {
 font-size: 22px;
 line-height: 26px;
 }
.stud_confiance .conf-box {
 margin-top: 31px;
 }
.stud_confiance .conf-box ul {
 flex-direction: column;
 }
.stud_confiance .conf-box p {
 font-size: 14px;
 line-height: 30px;
 }
}

/* ── Bloc clients refondu (28/08/2026) ─────────────────────────────────────
   Le h2 « Ils nous font confiance… » doublonnait avec « Des collaborations
   inscrites dans la durée » juste au-dessus : il devient un h3 « Sélection de
   clients », et la liste passe de 3 <li> fourre-tout (33 <p> dont 6 vides,
   héritage fronteditor) à un <li> par client, en 2 groupes. Colonnes CSS et
   non flex : elles se remplissent quel que soit le nombre de noms — c'est ce
   qui évite la 3e colonne orpheline à 1440px. Le sélecteur ul.ir-clients prime
   sur le « display:flex » hérité de la feuille d'origine. */
.stud_confiance .head h3 {
  font-size: 20px;
  font-weight: 500;
}
.stud_confiance .conf-box .ir-clients-groupe + .ir-clients-groupe {
  margin-top: 2.25rem;
}
/* « Sélection de clients » : un h3 nu retombait sur le gras du navigateur —
   il rejoint LE H2 unique (22/400) : même rang visuel que les autres sections. */
.stud_confiance .head h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}
/* Les noms : une liste se lit au corps du texte (16/300) — sans règle ils
   retombaient sur les défauts, plus gros que le corps du site. */
.stud_confiance .conf-box .ir-clients li {
  font-size: 16px;
  font-weight: 300;
  line-height: 2;
}
/* L'appel final : le h2 nu criait en gras de navigateur au-dessus du bouton.
   LE H2 unique, et la ligne d'accompagnement au corps 16/300. */
.ir-cta-fin h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 10px;
}
.ir-cta-fin > p {
  font-size: 16px;
  font-weight: 300;
}

.stud_confiance .conf-box .ir-clients-groupe h4 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #707070;
  margin-bottom: 0.9rem;
}
.stud_confiance .conf-box ul.ir-clients {
  display: block;
  columns: 3;
  column-gap: 32px;
}
.stud_confiance .conf-box ul.ir-clients li {
  break-inside: avoid;
  margin-bottom: 0.5rem;
  /* Annule le « padding-top: 30px » que .blog_details li (global.css) pose sur
     tout <li> de page : avec un client par <li>, il écartelait la liste. */
  padding-top: 0;
}
@media (max-width: 1024px) {
  .stud_confiance .conf-box ul.ir-clients { columns: 2; }
}
@media (max-width: 560px) {
  .stud_confiance .conf-box ul.ir-clients { columns: 1; }
}