/* Effets du site YLEVIO Conseil (10/11/2026, PROPOSITION : posés seulement avec --effets / --reseaux / --tout).
   Icônes des réseaux, cartes en relief, titres qui arrivent mot à mot, photos avec profondeur, quartier en 3D du héros.
   Tout est coupé si l'appareil demande « réduire les animations ». Aucune bibliothèque. */

/* ---------- icônes des réseaux ---------- */
.reseaux{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.reseaux__titre{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#7a776f; margin-right:4px;}
.reseau{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  color:#d8d4cb; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.03);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.reseau svg{width:19px; height:19px; display:block;}
.reseau:hover{transform:translateY(-3px); background:var(--gold-bright,#dab67e); border-color:var(--gold-bright,#dab67e); color:#14110d; box-shadow:0 12px 24px -12px rgba(218,182,126,.6);}
.reseau:focus-visible{outline:2px solid var(--gold-bright,#dab67e); outline-offset:3px;}
/* sur fond clair (page Contact, sous le portrait) */
.reseaux--clair .reseaux__titre{color:var(--ink-soft,#6b665c);}
.reseaux--clair .reseau{color:var(--ink,#14110d); border-color:rgba(20,17,13,.18); background:transparent;}
.reseaux--clair .reseau:hover{background:var(--ink,#14110d); border-color:var(--ink,#14110d); color:var(--gold-bright,#dab67e); box-shadow:0 12px 24px -14px rgba(20,17,13,.5);}
.reseaux--contact{margin-top:26px; padding-top:22px; border-top:1px solid var(--line,rgba(20,17,13,.1));}
.reseau--mini{width:34px; height:34px;}
.reseau--mini svg{width:16px; height:16px;}
.promesse__reseau{display:flex; justify-content:center; margin-top:2px;}
.footer__claude{color:#7a776f; font-size:12px; width:100%; text-align:center; margin:0;}
.footer__claude a{color:#a9a498; border-bottom:1px solid rgba(218,182,126,.45); padding-bottom:1px; transition:color .2s;}
.footer__claude a:hover{color:var(--gold-bright,#dab67e);}
/* 10/11 : le lien vers « Comment ce site est fait », sous le module 10 de la page Formation IA (carte sombre) */
.ia-card .ia-exemple{margin:14px 0 0; padding:12px 14px; border-left:2px solid var(--gold,#c9a063); background:rgba(218,182,126,.08); border-radius:0 8px 8px 0; font-size:15px; line-height:1.5;}
.ia-card .ia-exemple a{color:var(--gold-bright,#dab67e); border-bottom:1px solid rgba(218,182,126,.55); padding-bottom:1px; white-space:nowrap; transition:color .2s, border-color .2s;}
.ia-card .ia-exemple a:hover{color:#faf7f1; border-bottom-color:#faf7f1;}

/* ---------- cartes en relief (posé par effets.js, souris seulement) ---------- */
:where(.fx-relief){position:relative;}
.fx-relief.is-relief{will-change:transform;}
.fx-relief.is-relief{transition:transform .14s ease-out, box-shadow .3s ease, border-color .3s ease, opacity .4s ease !important; box-shadow:0 30px 50px -28px rgba(20,17,13,.38);}
.fx-reflet{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(460px circle at var(--fx-x,50%) var(--fx-y,50%), rgba(218,182,126,.17), rgba(218,182,126,0) 55%);   /* sur une carte claire : une lueur dorée qui suit la souris */
}
.fx-relief--sombre .fx-reflet{background:radial-gradient(520px circle at var(--fx-x,50%) var(--fx-y,50%), rgba(218,182,126,.28), rgba(218,182,126,0) 48%); mix-blend-mode:screen;}
.fx-relief.is-relief .fx-reflet{opacity:1;}

/* ---------- titres : les mots montent l'un après l'autre ---------- */
.fx-mot{display:inline-block; overflow:hidden; vertical-align:top; padding:.1em .03em .22em; margin:-.1em -.03em -.22em;}
.fx-mot > span{display:inline-block; transform:translateY(112%); transition:transform .75s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 55ms);}
.fx-vu .fx-mot > span{transform:none;}
.fx-titre.reveal{opacity:1; transform:none;}            /* le titre n'a plus besoin du fondu : ce sont ses mots qui arrivent */

/* ---------- photos : légère profondeur au défilement ---------- */
.fx-profondeur{will-change:transform;}

/* ---------- quartier en 3D ---------- */
.q3d{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 1.2s ease;}
.q3d.is-pret{opacity:1;}
.q3d canvas{display:block; width:100%; height:100%;}
.hero3__q3d{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 40%, rgba(0,0,0,.6) 56%, #000 70%);
  mask-image:linear-gradient(90deg, transparent 0, transparent 40%, rgba(0,0,0,.6) 56%, #000 70%);
}
.hero3--q3d .hero3__city{display:none;}
@media (max-width:1180px){                               /* écran moyen : le texte va plus loin à droite, le quartier s'efface plus tôt */
  .hero3__q3d{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 50%, rgba(0,0,0,.6) 66%, #000 80%);
    mask-image:linear-gradient(90deg, transparent 0, transparent 50%, rgba(0,0,0,.6) 66%, #000 80%);
  }
}
@media (max-width:860px){                                /* téléphone et tablette : le quartier a sa bande à lui, sous les chiffres, jamais derrière le texte */
  .hero3.hero3--q3d{padding-bottom:236px;}
  .hero3__q3d{-webkit-mask-image:none; mask-image:none;}
  .hero3__q3d.is-pret{opacity:.92;}
}
/* le même quartier, en démonstration sur la page « Comment ce site est fait » */
.q3d-demo{position:relative; height:clamp(300px,46vw,440px); margin:8px 0 14px; border-radius:18px; overflow:hidden; background:#14110d; isolation:isolate;}
.q3d-demo::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(250,247,241,.09) 1px, transparent 1.2px); background-size:30px 30px; background-position:15px 15px;}
.q3d-demo__note{font-size:14px !important; color:var(--ink-soft,#6b665c); text-align:center; margin:0 0 30px !important;}

@media (prefers-reduced-motion: reduce){
  .fx-mot > span{transform:none; transition:none;}
  .reseau,.fx-reflet,.q3d{transition:none;}
}

/* --pied-leger (10/11) : les mentions du bas sur UNE ligne (ordinateur), en lignes équilibrées sur téléphone ; les liens légaux restent sur une ligne */
.footer__bottom--leger{max-width:none; text-wrap:balance; line-height:1.7; margin:0;}
.footer:has(.footer__bottom--leger) .footer__inner{gap:22px;}
.footer:has(.footer__bottom--leger) .footer__bottom-row{max-width:none;}
/* --pied-leger, téléphone : les 4 liens passent sur deux lignes ; sans les traits, aucun trait ne reste seul en bout de ligne. */
@media (max-width:480px){
  .footer:has(.footer__bottom--leger) .footer__legal-col{column-gap:20px;}
  .footer:has(.footer__bottom--leger) .footer__legal-col a{border-right:0; padding:0;}
}