.elementor-688 .elementor-element.elementor-element-45b7aed{--display:flex;--min-height:100px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:27px 27px 27px 27px;box-shadow:0px 0px 0px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-688 .elementor-element.elementor-element-0f49aff{margin:clamp(30px, 10vh, 50px) 0 calc(var(--kit-widget-spacing, 0px) + clamp(10px, 10vh, 20px)) 0;padding:0px 0px 0px 0px;border-style:none;border-radius:0px 0px 0px 0px;}.elementor-688 .elementor-element.elementor-element-0f49aff .elementor-wrapper{--video-aspect-ratio:2.33333;}.elementor-688 .elementor-element.elementor-element-57332c0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-688 .elementor-element.elementor-element-46e69ee .elementor-wrapper{--video-aspect-ratio:1.5;}.elementor-688 .elementor-element.elementor-element-88eac29{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-688 .elementor-element.elementor-element-48ce99f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-688 .elementor-element.elementor-element-b45f273{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-688 .elementor-element.elementor-element-e793679{--e-image-carousel-slides-to-show:5;margin:clamp(64px, 10vh, 140px) 0 calc(var(--kit-widget-spacing, 0px) + clamp(64px, 10vh, 140px)) 0;padding:0px 0px 0px 0px;}body.elementor-page-688:not(.elementor-motion-effects-element-type-background), body.elementor-page-688 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F8F8;}@media(min-width:768px){.elementor-688 .elementor-element.elementor-element-45b7aed{--content-width:1000px;}.elementor-688 .elementor-element.elementor-element-88eac29{--content-width:1000px;}}@media(max-width:1024px) and (min-width:768px){.elementor-688 .elementor-element.elementor-element-45b7aed{--content-width:559px;}.elementor-688 .elementor-element.elementor-element-88eac29{--content-width:559px;}}@media(max-width:1024px){.elementor-688 .elementor-element.elementor-element-45b7aed{--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-688 .elementor-element.elementor-element-0f49aff{margin:0 0 calc(var(--kit-widget-spacing, 0px) + clamp(15px, 10vh, 25px)) 0;}.elementor-688 .elementor-element.elementor-element-e793679{--e-image-carousel-slides-to-show:3;margin:clamp(90px, 10vh, 110px) 0 calc(var(--kit-widget-spacing, 0px) + clamp(60px, 10vh, 80px)) 0;}}@media(max-width:767px){.elementor-688 .elementor-element.elementor-element-57332c0{--content-width:500px;--margin-top:1px;--margin-bottom:1px;--margin-left:1px;--margin-right:1px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-688 .elementor-element.elementor-element-46e69ee{width:var( --container-widget-width, 69vw );max-width:69vw;margin:60px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:0px 0px 0px 0px;--container-widget-width:69vw;--container-widget-flex-grow:0;}.elementor-688 .elementor-element.elementor-element-46e69ee.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-688 .elementor-element.elementor-element-88eac29{--content-width:260px;}.elementor-688 .elementor-element.elementor-element-48ce99f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 5px;}.elementor-688 .elementor-element.elementor-element-48ce99f p{margin-block-end:0px;}.elementor-688 .elementor-element.elementor-element-b45f273{--width:100%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-688 .elementor-element.elementor-element-e793679{--e-image-carousel-slides-to-show:3;margin:0 0 calc(var(--kit-widget-spacing, 0px) + 0) 0;padding:138px 0px 40px 0px;}}/* Start custom CSS for text-editor, class: .elementor-element-48ce99f *//* =========================================================
   ARMANDO — HOME INTRO CARTOUCHE (FINAL CLEAN)
   - Nom : Aktiv Grotesk BLACK
   - Rôle : Ratio Display (cliquable)
   - Tags : Garamond italique
   - Hover doux, contrôlé localement
   ========================================================= */


/* =========================
   CONTENEUR GÉNÉRAL
   ========================= */
.ag-intro{
  width: 100%;
  max-width: 1000px; /* aligné avec la vidéo */
  margin: 0 auto;
  padding: 0;
}


/* =========================
   BLOC NOM + RÔLE
   ========================= */
.ag-intro__top{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  width: fit-content;
  max-width: 100%;
}


/* ---------- NOM ---------- */
.ag-intro__name{
  font-family: "aktiv-grotesk", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;

  font-size: clamp(18px, 2.15vw, 20px);
  line-height: 1.02;
  letter-spacing: 0.0em;

  color: #111;
  text-decoration: none;
}

/* NOM — effet contour au hover (sans casser le reste) */
.ag-intro__name{
  /* on garde la couleur normale */
  color: #111 !important;
  text-decoration: none !important;

  /* transition douce (contour + remplissage) */
  transition: -webkit-text-stroke-color 0.30s ease,
              -webkit-text-stroke-width 0.30s ease,
              color 0.30s ease;
}

/* Hover : contour + intérieur transparent */
.ag-intro__name:hover{
  color: transparent !important;                 /* intérieur vide */
  -webkit-text-stroke: 1px rgba(0,0,0,0.70);     /* contour */
  text-decoration: none !important;
}

/* Fallback si stroke pas supporté : simple gris (Firefox parfois) */
@supports not (-webkit-text-stroke: 1px black){
  .ag-intro__name:hover{
    color: rgba(0,0,0,0.30) !important;
  }
}


/* ---------- SÉPARATEUR (LOGO = POINT) ---------- */
.ag-intro__sep{
  width: 1.1em;
  aspect-ratio: 1 / 1;
  display: inline-block;
  margin-left: 0.70em;
  transform: translateY(0.02em);

  background-image: url("https://armandogarcia.fr/wp-content/uploads/2026/01/cropped-LOGO-WEB-OFF-WHITE-RETINA.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  filter: brightness(0);
  opacity: 1;
  flex: 0 0 auto;
}


/* ---------- RÔLE (LIEN) ---------- */
.ag-intro__role{
  flex: 0 0 100%;
  margin-top: 0.1em;

  font-family: "ratio-display", Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;

  font-size: clamp(12px, 1.15vw, 15px);
  line-height: 1.1;
  letter-spacing: 0.37em;
}

/* si le rôle est directement un <a> */
a.ag-intro__role{
  color: #111 !important;
  text-decoration: none !important;
  transition: color 0.20s ease !important;
  display: inline-block;
}

a.ag-intro__role:hover{
  color: rgba(0,0,0,1) !important;
}

/* si le rôle contient un <a> */
.ag-intro__role a{
  color: #111 !important;
  text-decoration: none !important;
  transition: color 0.20s ease !important;
  display: inline-block;
}

.ag-intro__role a:hover{
  color: rgba(0,0,0,0.4) !important;
}


/* =========================
   TAGS / THÉMATIQUES
   ========================= */
.ag-intro__tags{
  margin-top: 0.3em;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: clamp(13px, 2.2vw, 20px);

  width: fit-content;
  max-width: 100%;
}


/* ---------- TAG ---------- */
.ag-intro__tag{
  display: inline-block;
  position: relative;

  font-family: "Cormorant Garamond","Times New Roman", serif;
  font-style: italic;
  font-weight: 400;

  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1;
  letter-spacing: 0.04em;

  color: rgba(0,0,0,0.40);
  text-decoration: none;

  border-bottom: 1px solid rgba(0,0,0,0.20);
  padding-bottom: 1px;

  white-space: nowrap;
  transition: color 0.20s ease, border-color 0.20s ease;
}

.ag-intro__tag:hover{
  color: rgba(0,0,0,1);
  border-bottom-color: rgba(0,0,0,0.80);
}



/* =========================
   TABLET RÉEL (≈ 600 → 1024)
   ========================= */
@media (min-width: 600px) and (max-width: 1024px){

  /* NOM */
  .ag-intro__name{
    font-size: clamp(20px, 3vw, 40px);
    letter-spacing: 0em;
  }

  /* SÉPARATEUR */
  .ag-intro__sep{
    width: 0.95em;
    margin-left: 0.30em;
  }

  /* RÔLE */
  .ag-intro__role{
    margin-top: 0.3em;
    font-size: clamp(21px, 1.6vw, 30px);
    letter-spacing: 0.2em;
  }

  /* TAGS — UNE LIGNE, OBLIGATOIRE */
  .ag-intro__tags{
    display: flex;
    flex-wrap: nowrap;              /* ← clé */
    align-items: baseline;

    gap: clamp(14px, 2vw, 24px);
    margin-top: 0.6em;

    width: fit-content;
    max-width: 100%;
  }

  /* TAG */
  .ag-intro__tag{
    font-size: clamp(15px, 1.35vw, 16px);
    letter-spacing: 0.03em;
    line-height: 1.05;

    border-bottom: none;
    position: relative;
  }

  /* SOULIGNAGE PRÉCIS */
  .ag-intro__tag::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: rgba(0,0,0,0.18);
    transition: background 0.2s ease;
  }

  .ag-intro__tag:hover::after{
    background: rgba(0,0,0,0.7);
  }
}

/* =========================
   MOBILE (≤ 599px)
   ========================= */
@media (max-width: 599px){

  /* Cartouche global : on garde la logique inline */
  .ag-intro__top{
    width: 100%;
  }

  /* NOM */
  .ag-intro__name{
    font-size: clamp(12px, 6vw, 15px);
    letter-spacing: 0em;
    line-height: 1.05;
  }

  /* Séparateur */
  .ag-intro__sep{
    width: 0.7em;
    margin-left: 0.25em;
  }

  /* RÔLE */
  .ag-intro__role{
    margin-top: 0.3em;
    font-size: clamp(12px, 3.8vw, 12px);
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  .ag-intro__role--link{
    color: rgba(0,0,0,0.55); /* anthracite */
  }

  .ag-intro__role--link:hover{
    color: rgba(0,0,0,1);
  }

  /* TAGS : UNE SEULE LIGNE + SCROLL HORIZONTAL */
  .ag-intro__tags{
    margin-top: 0.6em;

    display: flex;
    flex-wrap: nowrap;
    gap: 15px;

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ag-intro__tags::-webkit-scrollbar{
    display: none;
  }

  .ag-intro__tag{
    font-size: clamp(10px, 3.4vw, 11px);
    padding-bottom: 1px; /* underline bien collé */
    border-bottom-width: 1px;
  }
}

/* Par défaut (ordi + tablette) : on cache le CTA mobile */
.ag-intro__explore{
  display: none;
}

/* MOBILE : on cache les 4 tags et on affiche "Explorer les projets" */
@media (max-width: 599px){
  .ag-intro__tags{
    display: none !important;
  }

  .ag-intro__explore{
    display: inline-block;
    margin-top: 0.4em;

    font-family: "Cormorant Garamond","Times New Roman", serif;
    font-style: italic;
    font-weight: 400;

    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.1;

    color: rgba(0,0,0,0.55);
    text-decoration: none;

    border-bottom: 1px solid rgba(0,0,0,0.25);
    padding-bottom: 1px;

    transition: color 0.25s ease, border-color 0.25s ease;
  }

  .ag-intro__explore:hover{
    color: rgba(0,0,0,1);
    border-bottom-color: rgba(0,0,0,0.75);
  }
}/* End custom CSS */