/* NewTouch · V9 (01/11/2026) : la Bibliothèque NewTouch (page à part) et la rubrique Sites & accompagnement. */

/* ===================== BIBLIOTHÈQUE (noir : on regarde) ===================== */
.page-biblio{background:var(--noir)}
.biblio{background:var(--noir);color:var(--ivoire);padding-top:var(--entete)}
.bi-tete{padding:clamp(40px,6vw,90px) 0 clamp(24px,3vw,40px);background:radial-gradient(90% 120% at 50% 0%,#2a0f0b 0%,var(--noir) 60%)}
.bi-retour{display:inline-block;margin-bottom:26px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--texte-sombre);border-bottom:1px solid rgba(247,240,232,.25);padding-bottom:2px}
.bi-retour:hover{color:var(--ivoire);border-color:var(--rouge-l)}
.bi-tete h1{font-size:clamp(48px,7vw,120px);margin-top:12px}
.bi-l{max-width:520px;margin-top:16px;font-size:16px;color:var(--texte-sombre)}
.bi-corps{padding:0 0 clamp(50px,7vw,100px)}
.bi-filtres{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid rgba(247,240,232,.12);border-bottom:1px solid rgba(247,240,232,.12);margin-bottom:22px}
.bi-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bi-ligne span{width:92px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-m)}
.bi-ligne button{min-height:40px;padding:0 15px;border-radius:999px;border:1px solid rgba(247,240,232,.2);font-size:14px;color:var(--texte-sombre);transition:all .2s}
.bi-ligne button:hover{color:var(--ivoire);border-color:rgba(247,240,232,.45)}
.bi-ligne button[aria-pressed="true"]{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.bi-sel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:22px;padding:14px 18px;border:1px solid rgba(217,80,59,.45);border-radius:8px;font-size:15px;color:var(--texte-sombre)}
.bi-sel b{color:var(--ivoire);font-weight:500}
.bi-sel .btn{min-height:40px;font-size:14px}
.bi-aide{font-family:var(--mono);font-size:11.5px;color:var(--gris-m);margin-bottom:18px}
.bi-grille{grid-template-columns:repeat(4,minmax(0,1fr))}
.bi-fin{padding:clamp(50px,7vw,100px) 0;border-top:1px solid rgba(247,240,232,.1);text-align:center}
.bi-fin h2{font-size:clamp(38px,4.6vw,72px)}
.bi-fin p{max-width:520px;margin:14px auto 0;color:var(--texte-sombre)}
.bi-acts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.page-biblio .entete nav a[aria-current="page"]{color:var(--rouge-l)}
.page-biblio .pied{border-top:1px solid rgba(247,240,232,.08)}
@media (max-width:900px){
  .bi-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bi-ligne{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .bi-ligne::-webkit-scrollbar{display:none}
  .bi-ligne span{width:auto;flex:none;margin-right:4px}
  .bi-ligne button{flex:none;white-space:nowrap}
}

/* ===================== SITES & ACCOMPAGNEMENT (ivoire : on propose) ===================== */
.digital{background:var(--blanc-2);padding:clamp(56px,7vw,110px) 0 clamp(40px,5vw,70px)}
.di-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.di-tete h2{font-size:clamp(38px,4.6vw,72px);margin-top:10px;max-width:900px}
.di-l{max-width:380px;font-size:15.5px;color:var(--texte-2)}
.di-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--gris-2)}
.di-c{display:flex;flex-direction:column;gap:10px;padding:24px 22px 24px 0}
.di-c+.di-c{padding-left:22px;border-left:1px solid var(--gris-2)}
.di-n{font-family:var(--mono);font-size:11.5px;color:var(--rouge)}
.di-c h3{font-size:clamp(28px,2.4vw,38px)}
.di-c p{font-size:14.5px;color:var(--texte-2);flex:1}
.di-lien{align-self:flex-start;font-size:14px;font-weight:500;color:var(--rouge);border-bottom:1px solid currentColor;padding-bottom:1px}
.di-projets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,40px)}
.di-p{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:220px;padding:22px;border-radius:8px;overflow:hidden;background:var(--noir);color:var(--ivoire)}
.di-p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .3s,transform .6s var(--ease)}
.di-p:hover img{opacity:.7;transform:scale(1.03)}
.di-p>*:not(img){position:relative}
.di-p span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--rouge-l)}
.di-p b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.05}
.di-p small{font-size:14px;color:var(--texte-sombre)}
.di-p.vide{background:transparent;color:var(--texte-2);border:1px dashed #C9BCAA;justify-content:center;align-items:center;text-align:center}
.di-p.vide span{color:var(--gris-m)}
.di-p.vide b{font-size:24px;color:var(--encre)}
.di-p.vide small{color:var(--gris-m)}
.di-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:26px;padding-top:20px;border-top:1px solid var(--gris-2);font-size:14px;color:var(--texte-2)}
@media (max-width:900px){
  .di-grille{grid-template-columns:1fr 1fr}
  .di-c:nth-child(3){padding-left:0;border-left:0}
  .di-c:nth-child(n+3){border-top:1px solid var(--gris-2)}
}
@media (max-width:560px){
  .di-grille{grid-template-columns:1fr}
  .di-c,.di-c+.di-c{padding:20px 0;border-left:0}
  .di-c+.di-c{border-top:1px solid var(--gris-2)}
  .di-projets{grid-template-columns:1fr}
  .di-p{min-height:170px}
}

/* projets de l'écosystème NewTouch (captures réelles) */
.di-eco{margin-top:clamp(28px,3.4vw,44px);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-m)}
.di-eco+.di-projets{margin-top:12px}
.di-p{min-height:clamp(260px,26vw,380px);padding:26px}
.di-p img{opacity:.62}
.di-p::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(12,11,10,.88));pointer-events:none}
.di-p>*:not(img){z-index:1}
.di-p small{max-width:440px}
.di-voir{margin-top:8px;font-style:normal;font-size:14px;font-weight:500;color:var(--ivoire);border-bottom:1px solid var(--rouge-l);align-self:flex-start;padding-bottom:1px}
.di-p:hover .di-voir{color:var(--rouge-l)}
.di-p img{object-position:78% 30%}

/* ===================== Formulaire (livraison) : consentement, antispam, statut réel ===================== */
.piege{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.accord{display:grid!important;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:13.5px!important;color:var(--texte-2);line-height:1.45}
.accord input{width:18px!important;height:18px;margin-top:2px;accent-color:var(--rouge);padding:0!important;min-height:0!important}
.accord a{color:var(--rouge);text-decoration:underline;text-underline-offset:2px}
.f-statut{font-size:14px;padding:10px 12px;border-radius:6px;background:var(--gris-1);color:var(--texte-2)}
.f-statut.ok{background:#E6F2E8;color:#1E5A2C}
.f-statut.erreur{background:#FBE9E6;color:#8A241A}
#fEnvoyer:disabled{opacity:.6;cursor:wait}

/* ===================== Pages légales (ivoire, lisibles) ===================== */
.page-legale{background:var(--blanc-2)}
.legale{padding:calc(var(--entete) + clamp(30px,5vw,70px)) 0 clamp(50px,7vw,90px)}
.legale .wrap{max-width:820px}
.legale .bi-retour{color:var(--texte-2);border-color:var(--gris-2)}
.legale h1{font-size:clamp(40px,5vw,72px);margin-top:10px}
.legale .maj{font-family:var(--mono);font-size:12px;color:var(--gris-m);margin-top:10px}
.legale h2{font-size:clamp(26px,2.6vw,36px);margin:42px 0 12px}
.legale p,.legale li{font-size:16px;line-height:1.65;color:#2f2b27}
.legale p+p{margin-top:10px}
.legale ul{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:6px}
.legale a{color:var(--rouge);text-decoration:underline;text-underline-offset:2px}
.pied-liens a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pied-liens a[aria-current="page"]{color:var(--rouge-l);text-decoration:none}

/* ===================== Corrections téléphone (test iPhone, 01/11/2026) ===================== */
/* Le cylindre suit la hauteur réellement visible (barre de Safari comprise) : plus de grande zone noire en fin de passage. */
.seuil-scene{height:100vh;height:100svh}
@media (max-width:900px){
  .seuil{height:145vh;height:145svh}
  .seuil .c-monde{top:50%}
  .seuil-bas{bottom:calc(env(safe-area-inset-bottom, 0px) + 7svh)}
}
@media (max-width:900px){
  .seuil{height:135vh;height:135svh}
  .seuil .c-monde{top:44%}
  .seuil-bas{top:calc(44% + 140px);bottom:auto}
}
@media (max-width:900px){
  .seuil{height:120vh;height:120svh}
  .seuil-scene{height:76vh;height:76svh;min-height:560px}
  .seuil .c-monde{top:51%}
  .seuil-bas{top:calc(51% + 128px)}
}
@media (max-width:900px){
  /* la scène raccourcie est centrée dans l'écran visible : ni grand vide noir au-dessous, ni animation trop rapide */
  .seuil{height:150vh;height:150svh}
  .seuil-scene{top:12vh;top:12svh}
  .seuil-tete{top:2svh}
}

/* ---------- Pictogrammes de contact (02/11/2026) ---------- */
@media (max-width:900px){.entete .wa-i{display:grid;width:38px;height:38px}.entete .wa-i svg{width:17px;height:17px}}
.direct a{justify-content:flex-start;gap:12px}
.direct a > span:last-child{margin-left:auto;text-align:right}
.direct .ci{width:18px;height:18px;flex:none;opacity:.75}
.direct a:hover .ci{opacity:1}

/* ---------- Safari : la scène du cylindre reste fixée jusqu'au bout (02/11/2026) ---------- */
/* overflow-x sur body désactivait position:sticky dans Safari et laissait un grand vide noir après le cylindre */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:visible}