/* Souplesse Studio — socle commun à toutes les pages (polices, couleurs, base, images allégées).
   Les effets de survol sont réservés à (hover: hover) and (pointer: fine). */

/* IBM Plex Mono hébergée sur le site (licence OFL) : 400 et 500, latin + latin étendu, affichage immédiat (swap) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Police de secours calibrée sur Owners XWide (largeur et hauteur de ligne) : pendant le chargement du kit Adobe,
   le texte occupe déjà la même place, donc la page ne « saute » pas quand la vraie police arrive. Aucun effet une fois chargée. */
@font-face{font-family:'owners-fallback';font-weight:300;src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto');size-adjust:115.7%;ascent-override:80.4%;descent-override:19.9%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'owners-fallback';font-weight:400;src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto');size-adjust:122.4%;ascent-override:76.0%;descent-override:19.6%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'owners-fallback';font-weight:500;src:local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto');size-adjust:131.6%;ascent-override:71.4%;descent-override:20.5%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'owners-fallback';font-weight:700;src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Roboto Bold');size-adjust:137.8%;ascent-override:68.9%;descent-override:21.8%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'owners-fallback';font-weight:800;src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Roboto Bold');size-adjust:151.2%;ascent-override:62.8%;descent-override:21.2%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'owners-fallback';font-weight:900;src:local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Roboto Bold');size-adjust:162.4%;ascent-override:57.9%;descent-override:20.3%;line-gap-override:0%;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2122}

:root{
  --bg:#0a0a09;--fg:#f2f1ec;--mute:#a9a8a2;--mute2:#c9c8c2;
  --ff:'owners-xwide','owners-fallback',sans-serif; /* kit Adobe Fonts iel1wwj, chargé dans le <head> de chaque page */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --px:clamp(20px,3.33cqw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --line:1px solid rgba(242,241,236,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;text-decoration:none}
@media (hover:hover){a:hover{opacity:.7}}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.w300{font-weight:300}
.nw{white-space:nowrap}
.sec{position:relative;background:var(--bg);color:var(--fg);font-family:var(--ff);container-type:inline-size}

/* Images : version allégée sur téléphones et tablettes */
.img-cc{background-image:url('../assets/img/capitaine-charlie-devanture.webp')}
.img-hh{background-image:url('../assets/img/helly-hansen-les-givres.webp')}
.img-design{background-image:url('../assets/img/expertise-design-graphique.webp')}
.img-hugo{background-image:url('../assets/img/hugo-portrait.webp')}
.img-cc-site{background-image:url('../assets/img/capitaine-charlie-site.webp')}
.img-premices-site{background-image:url('../assets/img/premices-site.webp')}
.img-nautilus{background-image:url('../assets/img/nautilus-food-couverture.webp')}
.img-docks{background-image:url('../assets/img/docks-76-couverture.webp')}
.img-souplesse-site{background-image:url('../assets/img/souplesse-studio-site.webp');background-position:0% 50%!important}
.img-souplesse-apercu{background-image:url('../assets/img/souplesse-studio-apercu.webp');background-position:0% 50%!important}
.img-premices{background-image:url('../assets/img/premices-couverture.webp');background-position:62% 26%!important}
@media (max-width:1023px),(pointer:coarse){
  .img-cc{background-image:url('../assets/img/capitaine-charlie-devanture-m.webp')}
  .img-hh{background-image:url('../assets/img/helly-hansen-les-givres-m.webp')}
  .img-design{background-image:url('../assets/img/expertise-design-graphique-m.webp')}
  .img-hugo{background-image:url('../assets/img/hugo-portrait-m.webp')}
  .img-cc-site{background-image:url('../assets/img/capitaine-charlie-site-m.webp')}
  .img-premices{background-image:url('../assets/img/premices-couverture-m.webp')}
  .img-premices-site{background-image:url('../assets/img/premices-site-m.webp')}
  .img-nautilus{background-image:url('../assets/img/nautilus-food-couverture-m.webp')}
  .img-docks{background-image:url('../assets/img/docks-76-couverture-m.webp')}
  .img-souplesse-site{background-image:url('../assets/img/souplesse-studio-site-m.webp')}
  .img-souplesse-apercu{background-image:url('../assets/img/souplesse-studio-apercu-m.webp')}
}

/* Cadre « Intelligence artificielle » : accueil (#outils) et filtre Création IA de Tous les projets */
/* ───────────── Intelligence artificielle ───────────── */
.ia{overflow:hidden;background:#b4b4b2;color:var(--bg);padding:clamp(24px,3cqw,44px) var(--px)}
.ia-vid{position:absolute;top:0;right:0;bottom:0;width:55%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.ia-vid video{width:100%;height:100%;object-fit:cover;display:block}
.ia-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(10px,1.2cqw,18px);min-width:0;max-width:55%}
.ia-tag{color:#1f1f1e}
.ia-phrase{margin:0;font-size:clamp(22px,3cqw,46px);font-weight:800;text-transform:uppercase;line-height:1;min-height:2em}
.ia-word{display:inline-block;white-space:nowrap;vertical-align:bottom;border-right:.07em solid transparent;margin-right:-.07em;min-width:.1em}
.ia-btn{align-self:flex-start;margin-top:clamp(6px,1cqw,14px);display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.1cqw,16px);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:14px 24px;border:1px solid var(--bg);border-radius:999px;background:var(--bg);color:var(--fg);transition:background .3s,color .3s}
@media (hover:hover) and (pointer:fine){.ia-btn:hover{background:var(--fg);color:var(--bg);opacity:1}}
@media (min-width:760px) and (max-width:1023px){
  .ia-txt{max-width:60%}
  .ia-phrase{font-size:2.9cqw}
}
/* Mobile : la vidéo passe sous le texte et se fond dans le gris par le haut (texte lisible). */
@media (max-width:759px){
  .ia{display:flex;flex-direction:column;padding-bottom:0}
  .ia-vid{order:2;position:relative;top:auto;right:auto;bottom:auto;width:auto;aspect-ratio:16/9;margin:-6cqw calc(-1 * var(--px)) 0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%)}
  .ia-txt{max-width:100%}
  .ia-phrase{font-size:5.2cqw}
  .ia-btn{font-size:12px;padding:12px 18px;white-space:nowrap}
}
/* Icônes réseaux sociaux du pied de page (Instagram, LinkedIn, Pexels), entre « © » et le lien de droite */
.socials{display:flex;align-items:center;gap:clamp(14px,1.4cqw,20px)}
.socials a{display:flex;color:var(--mute);transition:color .25s}
.socials svg{width:18px;height:18px;display:block}
@media (hover:hover) and (pointer:fine){.socials a:hover{color:var(--fg)}}
/* Ordinateur / tablette : icônes pile au centre de la page, quelle que soit la longueur des textes de chaque côté */
@media (min-width:760px){
  .ct-foot:has(.socials),.foot:has(.socials){display:grid;grid-template-columns:1fr auto 1fr}
  .ct-foot:has(.socials)>:last-child,.foot:has(.socials)>:last-child{justify-self:end}
}
/* Mobile : les icônes sur leur propre ligne, centrées, au-dessus de « © » et du lien de droite */
@media (max-width:759px){
  .ct-foot .socials,.foot .socials{order:-1;flex:0 0 100%;justify-content:center;gap:28px;padding-bottom:4px}
  .socials svg{width:20px;height:20px}
  .ct-foot,.foot{column-gap:12px;font-size:10.5px;letter-spacing:.06em} /* « © » et « Mentions légales » tiennent sur une ligne */
}