/* CRÉATION DE SITE INTERNET — blocs propres à la page (24/10/2026). Histoire : voir naître son site.
   Couleur du pôle Création (violet) via var(--pole) ; mercure en plis. */

/* ---------- Le constat : trois signaux d'alerte, comme des messages d'erreur ---------- */
.c-alertes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.c-alerte{position:relative;padding:28px 28px 32px;border-radius:20px;border:1px solid var(--w-filet);background:rgba(10,11,14,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;isolation:isolate}
.c-alerte::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--pole),transparent);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--w-ease)}
.c-alerte.est-vue::before{transform:none}
.c-alerte__code{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pole)}
.c-alerte__code::after{content:"Signal d’alerte";color:var(--w-gris)}
.c-alerte h3{margin:22px 0 12px;font-size:clamp(22px,1.8vw,28px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.c-alerte p{margin:0;font-size:15.5px;line-height:1.6;color:var(--w-gris)}

/* ---------- Quel site pour quel objectif : onglets + aperçu d'un mini-site qui change de forme ---------- */
.c-choix__grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,4vw,72px);align-items:stretch}
.c-choix__onglets{display:flex;flex-direction:column;border-top:1px solid var(--w-filet)}
.c-choix__onglets button{display:flex;align-items:baseline;gap:20px;padding:26px 0;border:0;border-bottom:1px solid var(--w-filet);background:none;text-align:left;cursor:pointer;
  font:inherit;font-size:clamp(20px,1.7vw,28px);font-weight:500;letter-spacing:-.015em;color:var(--w-gris-doux);transition:color .4s,padding .5s var(--w-ease)}
.c-choix__onglets button span{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.c-choix__onglets button:hover,.c-choix__onglets button:focus-visible{color:var(--w-blanc)}
.c-choix__onglets button[aria-selected="true"]{color:var(--w-blanc);padding-left:14px}
.c-choix__onglets button[aria-selected="true"] span{color:var(--pole)}
.c-choix__apercu{display:grid;grid-template-rows:1fr auto;gap:24px}
.c-choix__texte p{margin:0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--w-gris)}
.c-choix__texte .w-bouton{margin-top:20px}

/* Mini-site : la même maquette, réarrangée selon le type (vitrine, landing, boutique, institution) */
.c-mini{border:1px solid var(--w-filet-fort);border-radius:18px;overflow:hidden;background:#0E1016;min-height:340px}
.c-mini__barre{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--w-filet);font-size:12px;color:var(--w-gris)}
.c-mini__barre i{width:8px;height:8px;border-radius:50%;background:rgba(220,229,242,.18)}
.c-mini__barre span{margin-left:12px}
.c-mini__corps{display:grid;gap:12px;padding:18px}
.c-mini__corps > *{transition:all .7s var(--w-ease)}
.c-mini__hero{height:120px;border-radius:12px;background:linear-gradient(120deg,color-mix(in srgb,var(--pole) 70%,#0A0B0E),#1A1D26 70%)}
.c-mini__ligne{height:10px;border-radius:5px;background:rgba(220,229,242,.16);width:72%}
.c-mini__ligne--courte{width:44%}
.c-mini__cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.c-mini__cartes span{height:64px;border-radius:10px;background:rgba(220,229,242,.07);border:1px solid var(--w-filet)}
.c-mini__formulaire{display:none;gap:8px}
.c-mini__formulaire span{height:28px;border-radius:8px;background:rgba(220,229,242,.07);border:1px solid var(--w-filet)}
.c-mini__formulaire b{height:32px;width:40%;border-radius:999px;background:var(--pole)}
/* Landing : un grand hero, un formulaire, pas de cartes */
[data-apercu="landing"] .c-mini__hero{height:150px}
[data-apercu="landing"] .c-mini__cartes{display:none}
[data-apercu="landing"] .c-mini__formulaire{display:grid}
/* Boutique : petit hero, grille de produits */
[data-apercu="boutique"] .c-mini__hero{height:60px}
[data-apercu="boutique"] .c-mini__cartes{grid-template-columns:repeat(4,1fr)}
[data-apercu="boutique"] .c-mini__cartes span{height:110px;background:linear-gradient(180deg,rgba(220,229,242,.1),rgba(220,229,242,.04) 60%,color-mix(in srgb,var(--pole) 30%,transparent))}
/* Institution : bandeau d'actualités en colonnes */
[data-apercu="institution"] .c-mini__hero{height:80px;background:linear-gradient(90deg,#1A1D26,color-mix(in srgb,var(--pole) 45%,#0A0B0E))}
[data-apercu="institution"] .c-mini__cartes{grid-template-columns:2fr 1fr 1fr}
[data-apercu="institution"] .c-mini__cartes span:nth-child(4){display:none}
[data-apercu="institution"] .c-mini__cartes span{height:120px}

/* ---------- Structures : trois largeurs, de l'institution à l'indépendant ---------- */
.c-structures{list-style:none;margin:0 0 40px;padding:0;display:grid;gap:12px}
.c-structures li{position:relative;width:var(--l);padding:28px 32px;box-sizing:border-box;border-radius:18px;border:1px solid var(--w-filet);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;overflow:hidden;isolation:isolate}
.c-structures li::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--pole-doux),transparent 80%);transform-origin:left;transform:scaleX(.08);transition:transform 1.1s var(--w-ease)}
.c-structures li.est-vue::before{transform:none}
.c-structures h3{margin:0;font-size:clamp(20px,1.6vw,26px);font-weight:500;letter-spacing:-.015em}
.c-structures p{margin:0;font-size:15.5px;line-height:1.6;color:var(--w-gris)}

/* ---------- Secteurs : un nuage de hashtags qui dérive, six secteurs ---------- */
.c-secteurs{overflow:hidden}
.c-secteurs__nuage{position:absolute;left:0;right:0;top:clamp(40px,5vw,72px);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.c-secteurs__piste{display:flex;gap:40px;width:max-content;animation:c-derive 60s linear infinite;font-size:clamp(40px,4.6vw,80px);font-weight:300;letter-spacing:-.02em;color:rgba(220,229,242,.06);white-space:nowrap}
.c-secteurs__piste span:nth-child(3n+1){color:color-mix(in srgb,var(--pole) 30%,transparent)}
@keyframes c-derive{to{transform:translateX(-50%)}}
.c-secteurs .enveloppe{position:relative}
.c-secteurs .w-entete{padding-top:clamp(40px,5vw,80px)}
.c-secteurs__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--w-filet)}
.c-secteurs__liste li{padding:32px 28px 36px 0;border-bottom:1px solid var(--w-filet);transition:padding .5s var(--w-ease)}
.c-secteurs__liste li:hover{padding-left:12px}
.c-secteurs__liste h3{margin:0 0 10px;font-size:22px;font-weight:500;letter-spacing:-.015em}
.c-secteurs__liste p{margin:0;max-width:34ch;font-size:15.5px;line-height:1.6;color:var(--w-gris)}
.c-secteurs__appel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:48px}
.c-secteurs__appel p{margin:0;max-width:60ch;font-size:17px;line-height:1.6;color:var(--w-gris)}
.c-secteurs__appel strong{color:var(--w-blanc);font-weight:600}
.c-secteurs__appel .w-bouton{margin-top:0}

/* ---------- Le chantier : un écran qui se construit (plan → maquette → design → en ligne) ----------
   data-phase sur la section : 0 rien · 1 plan en pointillés · 2 maquette grise · 3 design et mise en ligne */
.c-chantier__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start;margin-bottom:48px}
.c-chantier__scene{position:sticky;top:clamp(80px,12vh,140px)}
.c-chantier__compteur{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.c-chantier__compteur span{font-size:clamp(56px,5vw,88px);font-weight:300;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#F7FAFF 30%,var(--pole) 140%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.c-chantier__compteur em{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--w-gris)}
.c-chantier__compteur b{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pole)}
.c-ecran{border:1px solid var(--w-filet-fort);border-radius:20px;overflow:hidden;background:#0E1016;transition:box-shadow 1s var(--w-ease)}
[data-phase="3"] .c-ecran{box-shadow:0 0 0 1px var(--pole-filet),0 40px 100px -40px var(--pole)}
.c-ecran__statut{margin-left:auto;padding:3px 10px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--w-nuit);background:var(--pole);opacity:0;transform:scale(.8);transition:opacity .6s,transform .6s var(--w-ease)}
[data-phase="3"] .c-ecran__statut{opacity:1;transform:none}
.c-ecran__corps{display:grid;gap:14px;padding:20px}
.c-ecran__nav{display:flex;gap:10px;justify-content:flex-end}
.c-ecran__nav span{width:54px;height:8px;border-radius:4px}
.c-ecran__hero{position:relative;height:clamp(180px,15vw,250px);border-radius:14px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 28px}
.c-ecran__hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s var(--w-ease)}
.c-ecran__titre{display:block;height:16px;width:58%;border-radius:8px}
.c-ecran__titre--court{width:36%}
.c-ecran__bouton{display:block;width:110px;height:30px;border-radius:999px;margin-top:6px}
.c-ecran__cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.c-ecran__cartes span{height:90px;border-radius:12px}
/* Tous les blocs de l'écran : leur aspect suit la phase */
.c-ecran__nav span,.c-ecran__hero,.c-ecran__titre,.c-ecran__bouton,.c-ecran__cartes span{transition:background .8s var(--w-ease),border-color .8s,outline-color .8s;outline:1px dashed transparent;outline-offset:-1px}
[data-phase="1"] .c-ecran__nav span,[data-phase="1"] .c-ecran__hero,[data-phase="1"] .c-ecran__titre,[data-phase="1"] .c-ecran__bouton,[data-phase="1"] .c-ecran__cartes span{outline-color:var(--w-filet-fort);background:transparent}
[data-phase="2"] .c-ecran__nav span,[data-phase="2"] .c-ecran__titre,[data-phase="2"] .c-ecran__cartes span{background:rgba(220,229,242,.12)}
[data-phase="2"] .c-ecran__hero{background:rgba(220,229,242,.06)}
[data-phase="2"] .c-ecran__bouton{background:rgba(220,229,242,.22)}
[data-phase="3"] .c-ecran__nav span{background:rgba(220,229,242,.3)}
[data-phase="3"] .c-ecran__hero canvas{opacity:1}
[data-phase="3"] .c-ecran__titre{background:#F7FAFF}
[data-phase="3"] .c-ecran__titre--court{background:rgba(247,250,255,.6)}
[data-phase="3"] .c-ecran__bouton{background:var(--pole)}
[data-phase="3"] .c-ecran__cartes span{background:linear-gradient(160deg,rgba(220,229,242,.12),color-mix(in srgb,var(--pole) 22%,transparent))}
.c-chantier__etapes{list-style:none;margin:0;padding:0}
.c-phase{padding:0 0 clamp(48px,8vh,96px)}
.c-phase h3{margin:0 0 18px;font-size:clamp(24px,2vw,32px);font-weight:500;letter-spacing:-.02em}
.c-phase ol{list-style:none;margin:0;padding:0;display:grid}
.c-phase li[data-etape]{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:16px 0;border-top:1px solid var(--w-filet);font-size:17px;line-height:1.45;color:var(--w-gris);transition:color .4s}
.c-phase li[data-etape]::before{content:attr(data-etape) ".";font-size:13px;font-weight:600;color:var(--w-gris-doux);transition:color .4s}
.c-phase li[data-etape].est-faite{color:var(--w-blanc)}
.c-phase li[data-etape].est-faite::before{color:var(--pole)}

@media (max-width:1100px){
  .c-alertes,.c-secteurs__liste{grid-template-columns:1fr 1fr}
  .c-choix__grille,.c-chantier__grille{grid-template-columns:1fr}
  .c-chantier__scene{position:relative;top:0}
  .c-structures li{width:100%}
}
@media (max-width:640px){.c-alertes,.c-secteurs__liste{grid-template-columns:1fr}.c-structures li{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.c-secteurs__piste{animation:none}}