/* ip-accueil.css — le nouvel accueil (lot ACCUEIL, 24/09/2026).
   Transposé de design/ACCUEIL-prototype-2026-09-23.html. Tout est préfixé
   .ip-acc- et vit sous .ip-acc : rien ne sort de l accueil.
   Polices : celles du thème (auto-hébergées), jamais Google Fonts.
   Couleurs : jetons du thème quand ils existent ; sinon les valeurs de la
   charte, déclarées ICI une seule fois. Aucune ombre portée (charte). */

.ip-acc{
  --a-papier:var(--ip-papier,#F6F3EC); --a-papier-fonce:#EFEBDF; --a-carte:#FFFDF8;
  --a-encre:var(--ip-encre,#16150F); --a-encre-douce:#3A3830;
  --a-bleu:var(--ip-bleu,#2440C8); --a-bleu-hover:#1E37AE; --a-bleu-wash:var(--ip-bleu-wash,#ECEEFB); --a-voile:rgba(36,64,200,.16);
  --a-graphite:var(--ip-graphite,#6F6B61); --a-filigrane:var(--ip-filigrane,#E5DFD2); --a-contour:#CFC8B8; --a-contour-fort:#8A8477;
  --a-c:#00AEEF; --a-m:#EC008C; --a-j:#FFD400;
  --a-serif:'Fraunces',Georgia,serif; --a-sans:'Archivo',Helvetica,Arial,sans-serif; --a-mono:'IBM Plex Mono','Courier New',monospace;
  background:var(--a-papier); color:var(--a-encre); font-family:var(--a-sans);
}
.ip-acc *,.ip-acc *::before,.ip-acc *::after{box-sizing:border-box}
.ip-acc a{text-decoration:none;color:inherit}
.ip-acc a:hover{color:var(--a-bleu-hover)}
.ip-acc :focus-visible{outline:2px solid var(--a-bleu);outline-offset:2px}
.ip-acc h1,.ip-acc h2,.ip-acc h3{margin:0;text-wrap:balance}
.ip-acc-wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(16px,4vw,56px)}
.ip-acc-eyebrow{display:inline-block;font:500 12px/1 var(--a-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a-graphite)}
.ip-acc-eyebrow--repere{display:flex;align-items:center;gap:10px}
.ip-acc-eyebrow--repere svg{fill:none;stroke:var(--a-bleu);stroke-width:1.5}
.ip-acc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:2px;font:600 16px/1 var(--a-sans);cursor:pointer;border:1.5px solid transparent}
.ip-acc a.ip-acc-btn--plein{background:var(--a-bleu);color:var(--a-carte)}
.ip-acc a.ip-acc-btn--plein:hover{background:var(--a-bleu-hover);color:var(--a-carte)}
.ip-acc a.ip-acc-btn--trait{border-color:var(--a-encre);background:transparent;color:var(--a-encre)}
.ip-acc a.ip-acc-btn--trait:hover{border-color:var(--a-bleu);color:var(--a-bleu)}
.ip-acc a.ip-acc-btn--papier{align-self:flex-start;background:var(--a-papier);color:var(--a-encre)}
.ip-acc-h2{font:560 clamp(30px,3.4vw,46px)/1.05 var(--a-serif);font-variation-settings:"opsz" 100;letter-spacing:-.01em;margin-top:10px!important}
.ip-acc-lien-fort{color:var(--a-bleu)!important;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px}

/* pictos bicolores */
.ip-acc-picto{width:56px;height:56px;flex:none;border-radius:2px;background:var(--a-bleu-wash);display:grid;place-items:center}
.ip-acc-picto svg{width:34px;height:34px}
.ip-acc-ic{fill:none;stroke:var(--a-encre);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ip-acc-ic .v{fill:var(--a-voile);stroke:none}
.ip-acc-ic .p{fill:var(--a-bleu);stroke:none}
.ip-acc-ic .b{stroke:var(--a-bleu)}
.ip-acc-ic .w{fill:var(--a-carte)}

/* la recherche, sous l en-tête */
.ip-acc-bandeau-recherche{border-bottom:1px solid var(--a-filigrane);padding-block:14px}
.ip-acc-recherche{display:flex;align-items:center;max-width:720px;margin:0 auto;border:1.5px solid var(--a-encre);border-radius:2px;background:var(--a-carte);min-height:48px;min-width:0}
.ip-acc-recherche svg{flex:none;margin-left:14px}
.ip-acc-recherche input[type=search]{flex:1;min-width:0;width:0;border:0;background:transparent;font:16px var(--a-sans);color:var(--a-encre);padding:0 12px;min-height:44px;-webkit-appearance:none;appearance:none;box-shadow:none}
.ip-acc-recherche input::placeholder{color:var(--a-graphite)}
.ip-acc-recherche input:focus{outline:none}
.ip-acc-recherche:focus-within{outline:2px solid var(--a-bleu);outline-offset:2px}
.ip-acc-recherche button{align-self:stretch;border:0;background:var(--a-bleu);color:var(--a-carte);font:600 15px var(--a-sans);padding:0 20px;cursor:pointer;border-radius:0}
.ip-acc-recherche button:hover{background:var(--a-bleu-hover)}

/* héros */
.ip-acc-heros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(32px,5vw,64px) clamp(28px,4vw,48px)}
.ip-acc .ip-acc-h1{font:560 clamp(46px,6.4vw,88px)/1 var(--a-serif);font-variation-settings:"opsz" 100;letter-spacing:-.025em;margin-top:18px;max-width:none}
.ip-acc-h1 span{color:var(--a-bleu)}
.ip-acc-intro{font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--a-encre-douce);max-width:30em;margin:22px 0 28px}
.ip-acc-actions{display:flex;flex-wrap:wrap;gap:12px}
.ip-acc-acces{margin-top:34px}
.ip-acc-acces>.ip-acc-eyebrow{display:block;margin-bottom:12px}
.ip-acc-puces{display:flex;flex-wrap:wrap;gap:8px}
.ip-acc-puce{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;background:var(--a-carte);border:1px solid var(--a-contour-fort);border-radius:2px;font-size:14.5px}
.ip-acc-puce:hover{border-color:var(--a-bleu)}
.ip-acc-puce i{width:8px;height:8px;background:var(--a-bleu);display:block}
.ip-acc-scene{position:relative;min-width:0}
.ip-acc-compo{width:100%;height:auto;display:block}
.ip-acc-anim .ip-acc-compo{visibility:hidden}
.ip-acc-rejouer{position:absolute;right:0;bottom:-6px;font:12px var(--a-mono);letter-spacing:.06em;background:none;border:0;color:var(--a-graphite);cursor:pointer;min-height:36px;padding:0 4px}
.ip-acc-rejouer:hover{color:var(--a-bleu)}
.ip-acc-rejouer[hidden]{display:none}

/* blocs */
.ip-acc-bloc{padding-block:clamp(44px,6vw,80px);overflow-x:clip}
/* ⛔ overflow-x:clip et non hidden : le ::after des univers (traits de coupe,
   inset -15px, départ scale 1.045) élargissait la page de 7 px à 390 px et de
   5 px à 320 px, SANS qu aucune boîte ne dépasse (mesuré le 24/09). clip ne
   crée pas de conteneur de défilement : rien de collant n est cassé. */
.ip-acc-bloc--fonce{background:var(--a-papier-fonce);border-block:1px solid var(--a-filigrane)}
.ip-acc-titre-bloc{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;flex-wrap:wrap}

/* univers */
.ip-acc-univers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ip-acc-u{position:relative;background:var(--a-carte);border:1px solid var(--a-contour);border-radius:2px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s}
.ip-acc-u-haut{display:flex;align-items:center;gap:16px}
.ip-acc-u h3{font:560 26px/1.1 var(--a-serif);font-variation-settings:"opsz" 100}
.ip-acc-n{font:11.5px var(--a-mono);letter-spacing:.05em;color:var(--a-graphite);margin-top:5px;text-transform:uppercase}
.ip-acc-u ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.ip-acc-u li{margin:0}
.ip-acc-u li a{display:flex;align-items:center;min-height:36px;border-bottom:1px solid var(--a-filigrane);font-size:15px;background:linear-gradient(var(--a-bleu),var(--a-bleu)) 0 100%/0 1.5px no-repeat;transition:background-size .3s cubic-bezier(.2,.8,.2,1),color .2s}
.ip-acc-u li a:hover,.ip-acc-u li a:focus-visible{background-size:100% 1.5px}
.ip-acc-tout{margin-top:auto;font-weight:600;font-size:14.5px;color:var(--a-bleu)!important}
.ip-acc-fl{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
/* au survol ET au focus clavier, la carte devient une planche */
.ip-acc-u::before{content:"";position:absolute;inset:7px;border:1px dashed #D8D1C0;opacity:0;transition:opacity .3s;pointer-events:none}
.ip-acc-u::after{content:"";position:absolute;inset:-15px;pointer-events:none;opacity:0;transform:scale(1.045);transition:opacity .2s,transform .45s cubic-bezier(.2,.8,.2,1);
  background:
    linear-gradient(var(--a-encre),var(--a-encre)) 0 15px/10px 1px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) 15px 0/1px 10px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) 100% 15px/10px 1px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) calc(100% - 15px) 0/1px 10px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) 0 calc(100% - 15px)/10px 1px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) 15px 100%/1px 10px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) 100% calc(100% - 15px)/10px 1px no-repeat,
    linear-gradient(var(--a-encre),var(--a-encre)) calc(100% - 15px) 100%/1px 10px no-repeat}
.ip-acc-gamme{position:absolute;top:14px;right:14px;display:flex;gap:2px;pointer-events:none}
.ip-acc-gamme i{width:7px;height:7px;display:block;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.ip-acc-gamme i:nth-child(1){background:var(--a-c)}
.ip-acc-gamme i:nth-child(2){background:var(--a-m);transition-delay:.04s}
.ip-acc-gamme i:nth-child(3){background:var(--a-j);transition-delay:.08s}
.ip-acc-gamme i:nth-child(4){background:var(--a-encre);transition-delay:.12s}
@keyframes ip-acc-calage{
  0%,30%{filter:drop-shadow(-5px -3px 0 rgba(0,174,239,.95)) drop-shadow(5px -3px 0 rgba(236,0,140,.9)) drop-shadow(-1px 5px 0 rgba(255,212,0,1))}
  100%{filter:drop-shadow(0 0 0 rgba(0,174,239,0)) drop-shadow(0 0 0 rgba(236,0,140,0)) drop-shadow(0 0 0 rgba(255,212,0,0))}}
.ip-acc-u:hover,.ip-acc-u:focus-within,.ip-acc-u.vu{border-color:var(--a-encre)}
.ip-acc-u:hover::before,.ip-acc-u:focus-within::before,.ip-acc-u.vu::before{opacity:1}
.ip-acc-u:hover::after,.ip-acc-u:focus-within::after,.ip-acc-u.vu::after{opacity:1;transform:scale(1)}
.ip-acc-u:hover .ip-acc-gamme i,.ip-acc-u:focus-within .ip-acc-gamme i,.ip-acc-u.vu .ip-acc-gamme i{opacity:1;transform:none}
.ip-acc-u:hover .ip-acc-picto svg,.ip-acc-u:focus-within .ip-acc-picto svg,.ip-acc-u.vu .ip-acc-picto svg{animation:ip-acc-calage .85s cubic-bezier(.2,.8,.2,1) both}
.ip-acc-u:hover .ip-acc-fl,.ip-acc-u:focus-within .ip-acc-fl{transform:translateX(5px)}
.ip-acc-echantillons{margin-top:18px;display:flex;align-items:center;gap:18px;padding:18px 22px;border:1.5px dashed var(--a-contour-fort);border-radius:2px;flex-wrap:wrap}
.ip-acc-echantillons p{margin:0;flex:1;min-width:220px;color:var(--a-encre-douce)}
.ip-acc-echantillons b{color:var(--a-encre)}

/* projets */
.ip-acc-projets{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:start}
.ip-acc-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ip-acc-choix button{display:flex;align-items:center;gap:14px;text-align:left;min-height:84px;padding:14px 16px;background:var(--a-carte);border:1.5px solid var(--a-contour-fort);border-radius:2px;font:500 16.5px/1.25 var(--a-sans);color:var(--a-encre);cursor:pointer}
.ip-acc-choix button .ip-acc-picto{width:48px;height:48px}
.ip-acc-choix button .ip-acc-picto svg{width:30px;height:30px}
.ip-acc-choix button[aria-pressed="true"]{background:var(--a-bleu);border-color:var(--a-bleu);color:var(--a-carte)}
.ip-acc-choix button[aria-pressed="true"] .ip-acc-picto{background:var(--a-carte)}
.ip-acc-selection{background:var(--a-carte);border:1.5px solid var(--a-encre);border-radius:2px;padding:26px 28px;min-width:0}
.ip-acc-sel h3{font:560 30px/1.1 var(--a-serif);font-variation-settings:"opsz" 100;margin:8px 0 18px}
.ip-acc-sel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--a-encre)}
.ip-acc-sel li{margin:0}
.ip-acc-sel li a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid var(--a-contour)}
.ip-acc-sel li small{display:block;font:11.5px var(--a-mono);letter-spacing:.05em;color:var(--a-graphite);text-transform:uppercase;margin-top:2px}
.ip-acc-f{color:var(--a-bleu);font-size:19px}
/* sans JavaScript : pas de boutons, les six sélections sont toutes visibles */
html:not(.ip-acc-js) .ip-acc-choix{display:none}
html:not(.ip-acc-js) .ip-acc-projets{grid-template-columns:1fr}
html:not(.ip-acc-js) .ip-acc-sel+.ip-acc-sel{margin-top:22px}
.ip-acc-js .ip-acc-sel:not(.est-actif){display:none}

/* produits */
.ip-acc-produits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ip-acc-prod{display:flex;flex-direction:column;background:var(--a-carte);border:1px solid var(--a-contour);border-radius:2px;overflow:hidden}
.ip-acc-vis{aspect-ratio:4/3;background:var(--a-papier-fonce);display:grid;place-items:center;border-bottom:1px solid var(--a-contour)}
.ip-acc-vis svg{width:78%;height:auto}
.ip-acc-corps{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.ip-acc-prod h3{font:560 21px/1.15 var(--a-serif);font-variation-settings:"opsz" 100}
.ip-acc-conf{font:12.5px/1.5 var(--a-mono);color:var(--a-encre-douce)}
.ip-acc-prix{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ip-acc-prix b{font:500 20px var(--a-mono)}
.ip-acc-prix span{font:12px var(--a-mono);color:var(--a-graphite)}
.ip-acc-option{font:12px var(--a-mono);color:var(--a-bleu)!important;text-decoration:underline!important;text-underline-offset:3px}
.ip-acc-corps .ip-acc-btn{margin-top:8px;min-height:44px;font-size:15px}
.ip-acc-corps>.ip-acc-btn:only-of-type{margin-top:auto}

/* étapes + contact */
.ip-acc-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ip-acc-etape{display:flex;gap:16px;align-items:flex-start}
.ip-acc-etape h3{font:560 22px/1.2 var(--a-serif);font-variation-settings:"opsz" 100;margin-bottom:6px!important}
.ip-acc-etape p{margin:0;color:var(--a-encre-douce);font-size:15px}
.ip-acc-contact{margin-top:34px;background:var(--a-encre);color:var(--a-papier);border-radius:2px;padding:26px;display:flex;flex-direction:column;gap:12px;max-width:640px}
.ip-acc-contact .ip-acc-eyebrow{color:#B9B2A3}
.ip-acc-contact h3{font:560 26px/1.1 var(--a-serif);font-variation-settings:"opsz" 100;color:var(--a-carte)}
.ip-acc-contact p{margin:0;color:#D9D3C4;font-size:15px}
.ip-acc-mail{font:500 16px var(--a-mono);color:var(--a-carte);user-select:all;overflow-wrap:anywhere}

@media (max-width:1000px){
  .ip-acc-univers,.ip-acc-produits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-acc-projets{grid-template-columns:1fr}
}
@media (max-width:820px){
  .ip-acc-heros{grid-template-columns:1fr}
  .ip-acc-scene{order:-1;max-width:520px;margin:0 auto;width:100%}
  .ip-acc-etapes{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ip-acc-univers,.ip-acc-produits{grid-template-columns:1fr}
  .ip-acc-u ul{grid-template-columns:1fr}
  .ip-acc-choix{grid-template-columns:1fr}
  .ip-acc-choix button{min-height:64px}
  .ip-acc-scene{order:0}
  .ip-acc-selection{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){
  .ip-acc-u::after,.ip-acc-gamme i,.ip-acc-u li a,.ip-acc-fl{transition:none}
  .ip-acc-u:hover .ip-acc-picto svg,.ip-acc-u:focus-within .ip-acc-picto svg,.ip-acc-u.vu .ip-acc-picto svg{animation:none}
  .ip-acc-anim .ip-acc-compo{visibility:visible}
}