/* SOCLE — système de design commun (accueil, tunnel, mise en ligne, espace client, administration).
   Clair, net, chaleureux ; l'accent est le dégradé de la marque Socle (violet → bleu → cyan). */

@import url('/polices/polices.css');

:root {
  --fond: #f6f7fb;
  --fond-2: #eef0f7;
  --carte: #ffffff;
  --encre: #0c0f1d;
  --texte: #2a2f42;
  --doux: #5d6276;
  --faible: #8c91a5;
  --ligne: #e5e7f0;
  --ligne-forte: #d5d8e6;
  --violet: #8b5cf6;
  --bleu: #3b82f6;
  --cyan: #22d3ee;
  --indigo: #4f46e5;
  --indigo-fonce: #4338ca;
  --degrade: linear-gradient(120deg, #8b5cf6 0%, #3b82f6 55%, #22d3ee 100%);
  --degrade-bouton: linear-gradient(120deg, #7c3aed 0%, #4f46e5 45%, #2563eb 100%);
  --vert: #0ea371;
  --vert-pale: #e6f7f0;
  --orange: #e8840c;
  --orange-pale: #fdf3e4;
  --rouge: #dc3545;
  --rouge-pale: #fdecee;
  --rayon: 14px;
  --rayon-carte: 20px;
  --rayon-grand: 28px;
  --ombre-1: 0 1px 2px rgba(16, 20, 45, 0.05);
  --ombre-2: 0 1px 2px rgba(16, 20, 45, 0.04), 0 8px 24px rgba(16, 20, 45, 0.07);
  --ombre-3: 0 2px 6px rgba(16, 20, 45, 0.05), 0 24px 60px rgba(16, 20, 45, 0.12);
  --anneau: 0 0 0 4px rgba(99, 102, 241, 0.22);
  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --largeur: 1180px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--indigo); text-underline-offset: 3px; }
[hidden] { display: none !important; }
::selection { background: rgba(124, 58, 237, 0.18); }
:focus-visible { outline: none; box-shadow: var(--anneau); border-radius: 8px; }

h1, h2, h3, h4 { font-family: var(--police-titre); color: var(--encre); letter-spacing: -0.03em; line-height: 1.08; font-weight: 750; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.75rem); letter-spacing: -0.04em; }
h1 .degrade { white-space: nowrap; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.015em; line-height: 1.25; }
.degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.06em; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--doux); letter-spacing: 0.01em; }
.centre { text-align: center; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ barre du haut et pied de page */

.barre {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px max(20px, calc((100vw - var(--largeur)) / 2));
  background: rgba(246, 247, 251, 0.78);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.barre.ombre { border-bottom-color: var(--ligne); }
.marque { display: inline-flex; align-items: center; gap: 10px; font-family: var(--police-titre); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.035em; color: var(--encre); text-decoration: none; }
.marque img { width: 30px; height: 30px; }
.barre-actions { display: flex; align-items: center; gap: 10px; }
.lien-discret { color: var(--texte); font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 9px 14px; border-radius: 12px; }
.lien-discret:hover { background: var(--fond-2); }
.pastille-demo {
  font-size: 0.78rem; font-weight: 600; color: #8a5a00; background: #fff6e0; border: 1px solid #f6dfa8;
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
}

.pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px;
  padding: 36px 20px 44px; color: var(--faible); font-size: 0.88rem; border-top: 1px solid var(--ligne); margin-top: 40px;
}
.pied a { color: var(--doux); text-decoration: none; }
.pied a:hover { color: var(--encre); }

/* ------------------------------------------------------------------ boutons, champs, pastilles */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: var(--rayon); border: 1px solid transparent;
  font-weight: 650; font-size: 1rem; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s, opacity 0.2s;
}
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton-principal { color: #fff; background: var(--degrade-bouton); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.bouton-principal:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(79, 70, 229, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.bouton-principal:active:not(:disabled) { transform: translateY(0); }
.bouton-secondaire { color: var(--encre); background: var(--carte); border-color: var(--ligne-forte); box-shadow: var(--ombre-1); }
.bouton-secondaire:hover:not(:disabled) { border-color: #b9bdd3; background: #fbfbfe; }
.bouton-danger { color: var(--rouge); background: var(--carte); border-color: #f2c5ca; }
.bouton-danger:hover:not(:disabled) { background: var(--rouge-pale); }
.bouton-grand { min-height: 56px; padding: 0 26px; font-size: 1.06rem; border-radius: 16px; }
.bouton-plein { width: 100%; }
.bouton:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.bouton.charge { pointer-events: none; }
.bouton.charge::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: tour 0.7s linear infinite; }
.bouton-lien { border: 0; background: none; color: var(--doux); font-weight: 600; padding: 8px 6px; text-decoration: underline; text-decoration-color: var(--ligne-forte); text-underline-offset: 4px; }
.bouton-lien:hover { color: var(--encre); text-decoration-color: currentColor; }

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label, .etiquette { font-weight: 600; font-size: 0.92rem; color: var(--encre); }
.champ .aide, .aide { font-size: 0.86rem; color: var(--doux); }
.saisie-texte, .champ input, .champ textarea, .champ select {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ligne-forte); border-radius: 12px; background: #fff;
  font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.champ textarea { min-height: 96px; resize: vertical; }
.saisie-texte:focus, .champ input:focus, .champ textarea:focus { border-color: #8b85f0; box-shadow: var(--anneau); }
.champ input::placeholder, .champ textarea::placeholder, textarea::placeholder, input::placeholder { color: #a2a6b8; }

.pastille { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 650; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.pastille::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pastille-verte { color: var(--vert); background: var(--vert-pale); }
.pastille-orange { color: #b26100; background: var(--orange-pale); }
.pastille-rouge { color: var(--rouge); background: var(--rouge-pale); }
.pastille-grise { color: var(--doux); background: var(--fond-2); }
.pastille-violette { color: #6d28d9; background: #f1ebff; }
.pastille-violette::before { display: none; }

.erreur { color: var(--rouge); font-weight: 550; font-size: 0.95rem; min-height: 1.3em; }
.erreur:empty { min-height: 0; }
.roue { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--ligne-forte); border-top-color: var(--indigo); animation: tour 0.8s linear infinite; flex: none; }
.roue.fini { animation: none; border-color: var(--vert); background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes tour { to { transform: rotate(360deg); } }
@keyframes apparition { from { opacity: 0; transform: translateY(10px); } }
@keyframes reflet { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); box-shadow: var(--ombre-2); }

/* ------------------------------------------------------------------ écrans du tunnel */

.ecran { display: none; animation: apparition 0.4s ease both; }
.ecran.actif { display: block; }
.conteneur { width: min(var(--largeur), calc(100vw - 40px)); margin: 0 auto; }

/* Accueil : en-tête héroïque */
.heros { position: relative; text-align: center; padding: 64px 20px 40px; isolation: isolate; }
.heros-fond { position: absolute; inset: -80px 0 0; z-index: -1; overflow: hidden; pointer-events: none; }
.heros-fond::before, .heros-fond::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
}
.heros-fond::before { width: 560px; height: 420px; left: calc(50% - 560px); top: 40px; background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 65%); }
.heros-fond::after { width: 620px; height: 460px; left: calc(50% - 40px); top: 10px; background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 62%); }
.heros .surtitre { background: rgba(255, 255, 255, 0.75); border: 1px solid var(--ligne); padding: 7px 14px; border-radius: 99px; box-shadow: var(--ombre-1); margin-bottom: 26px; }
.point-vert { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
.heros h1 { max-width: 15ch; margin: 0 auto; }
.sous-titre { font-size: clamp(1.08rem, 1.8vw, 1.25rem); color: var(--doux); max-width: 34em; margin: 22px auto 34px; }

.saisie {
  max-width: 760px; margin: 0 auto; text-align: left;
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--ligne); border-radius: var(--rayon-grand);
  padding: 10px; box-shadow: var(--ombre-3);
}
.onglets { display: inline-flex; gap: 4px; background: var(--fond-2); border-radius: 13px; padding: 4px; margin: 6px 6px 4px; }
.onglet { border: 0; background: none; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 0.93rem; color: var(--doux); transition: background 0.2s, color 0.2s; }
.onglet[aria-selected='true'] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(16, 20, 45, 0.1); }
.saisie textarea, .saisie input[type='text'] {
  width: 100%; border: 0; outline: none; background: none; resize: none;
  font-size: clamp(1.08rem, 1.6vw, 1.2rem); line-height: 1.5; padding: 14px 16px 10px; color: var(--encre);
}
.saisie input[type='text'] { padding-top: 16px; padding-bottom: 6px; }
.saisie .aide { padding: 0 16px 6px; }
.saisie #prompt-url { font-size: 1rem; border-top: 1px solid var(--ligne); margin-top: 8px; }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 12px; }
.exemple { border: 1px solid var(--ligne); background: #fff; border-radius: 99px; padding: 7px 13px; font-size: 0.86rem; color: var(--doux); transition: border-color 0.15s, color 0.15s, transform 0.15s; }
.exemple:hover { border-color: #b4b0f3; color: var(--encre); transform: translateY(-1px); }
.saisie-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-top: 1px solid var(--ligne); }
.saisie-pied .aide { padding: 0 6px; display: inline-flex; align-items: center; gap: 7px; }
.saisie-pied .aide svg { width: 16px; height: 16px; color: var(--vert); }
.saisie .erreur { padding: 0 16px; }
.saisie .erreur:not(:empty) { padding-bottom: 10px; }

.garanties { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; color: var(--doux); font-size: 0.95rem; font-weight: 500; }
.garanties li { display: inline-flex; align-items: center; gap: 8px; }
.garanties svg { width: 18px; height: 18px; color: var(--indigo); }

/* Sections de l'accueil */
.section { padding: 84px 20px 20px; }
.section > h2, .section > .surtitre, .section > .section-intro { text-align: center; }
.section > .surtitre { display: flex; justify-content: center; margin-bottom: 12px; color: var(--indigo); }
.section-intro { color: var(--doux); font-size: 1.08rem; max-width: 40em; margin: 14px auto 0; }

.eventail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 44px auto 0; perspective: 1400px; }
.eventail figure { margin: 0; transition: transform 0.4s ease; }
.eventail figure:nth-child(1), .eventail figure:nth-child(3) { transform: translateY(14px); }
.eventail figure:nth-child(1) .cadre-image { transform: rotate(-3deg); }
.eventail figure:nth-child(3) .cadre-image { transform: rotate(3deg); }
.eventail .cadre-image { transition: transform 0.4s ease; }
.eventail figure:hover { transform: translateY(-6px); }
.eventail figure:hover .cadre-image { transform: none; }
.eventail .cadre-image { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre-3); aspect-ratio: 2 / 3; }
.eventail img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.eventail figcaption { text-align: center; margin-top: 14px; font-weight: 650; color: var(--encre); }
.eventail figcaption span { display: block; font-weight: 500; color: var(--doux); font-size: 0.9rem; }

.etapes-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1060px; margin: 44px auto 0; counter-reset: etape; }
.etapes-liste li { padding: 26px; counter-increment: etape; position: relative; }
.etapes-liste li::before {
  content: counter(etape); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--degrade); color: #fff; font-weight: 800; font-family: var(--police-titre); margin-bottom: 18px; font-size: 1.1rem;
}
.etapes-liste p { color: var(--doux); margin-top: 8px; }

.atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1060px; margin: 44px auto 0; }
.atout { padding: 24px; }
.atout .icone { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #f1eefe; color: var(--indigo); margin-bottom: 16px; }
.atout .icone svg { width: 22px; height: 22px; }
.atout p { color: var(--doux); margin-top: 6px; font-size: 0.97rem; }

.discussion-section { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1060px; margin: 0 auto; }
.discussion-section h2 { text-align: left; }
.discussion-texte p { color: var(--doux); font-size: 1.08rem; margin-top: 16px; }
.discussion-demo { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bulle { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: 0.97rem; line-height: 1.45; }
.bulle-client { align-self: flex-end; background: var(--indigo); color: #fff; border-bottom-right-radius: 6px; }
.bulle-socle { align-self: flex-start; background: var(--fond-2); color: var(--encre); border-bottom-left-radius: 6px; }
.bulle-socle strong { color: var(--vert); }

.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--carte); border: 1px solid var(--ligne); border-radius: 16px; margin-top: 12px; box-shadow: var(--ombre-1); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 650; color: var(--encre); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--doux); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--doux); }
.faq > h2 { margin-bottom: 30px; }

.appel-final { text-align: center; max-width: 820px; margin: 30px auto 0; padding: 64px 28px; border-radius: var(--rayon-grand); background: radial-gradient(120% 140% at 0% 0%, #ede7ff 0%, #e6efff 45%, #e3f9fd 100%); border: 1px solid #e3e3f6; }
.appel-final p { color: var(--doux); font-size: 1.1rem; margin: 14px 0 28px; }

/* ------------------------------------------------------------------ étapes du parcours (fil d'Ariane) */

.fil-etapes { display: flex; justify-content: center; gap: 6px; padding: 26px 20px 0; flex-wrap: wrap; }
.fil-etapes span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: var(--faible); padding: 6px 12px; border-radius: 99px; }
.fil-etapes span::before { content: attr(data-n); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fond-2); color: var(--doux); font-size: 0.78rem; }
.fil-etapes .fait { color: var(--vert); }
.fil-etapes .fait::before { content: '✓'; background: var(--vert-pale); color: var(--vert); }
.fil-etapes .actuel { color: var(--encre); background: #fff; box-shadow: var(--ombre-1); border: 1px solid var(--ligne); }
.fil-etapes .actuel::before { background: var(--degrade); color: #fff; }

.entete-ecran { text-align: center; max-width: 780px; margin: 22px auto 30px; padding: 0 20px; }
.entete-ecran p { color: var(--doux); }
.etat-direct { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 550; }
.chrono { font-variant-numeric: tabular-nums; font-size: 0.85rem; padding: 3px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--ligne); color: var(--doux); }
.bandeau-demo { display: inline-block; margin-top: 16px; font-size: 0.9rem; color: #8a5a00; background: #fff8e6; border: 1px solid #f4e1b2; border-radius: 12px; padding: 9px 14px; }

/* Les 3 maquettes */
.maquettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: min(var(--largeur), calc(100vw - 40px)); margin: 0 auto; }
.maquette { display: flex; flex-direction: column; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; animation: apparition 0.5s ease both; }
.maquette:nth-child(2) { animation-delay: 0.08s; }
.maquette:nth-child(3) { animation-delay: 0.16s; }
.maquette:hover { box-shadow: var(--ombre-3); }
.vignette { position: relative; aspect-ratio: 2 / 3; padding: 0; border: 0; background: var(--fond-2); overflow: hidden; display: block; width: 100%; }
.vignette img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 0.6s ease, transform 6s ease; }
.vignette img.chargee { opacity: 1; }
.vignette:hover img.chargee { transform: translateY(-14%); }
.vignette .loupe { position: absolute; right: 12px; bottom: 12px; background: rgba(12, 15, 29, 0.78); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 7px 12px; border-radius: 99px; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(6px); }
.vignette:hover .loupe { opacity: 1; }
.attente {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--doux); font-size: 0.92rem; font-weight: 550;
  background: linear-gradient(100deg, var(--fond-2) 30%, #f8f9fd 50%, var(--fond-2) 70%); background-size: 300% 100%; animation: reflet 1.6s ease infinite;
}
.attente .pinceau { width: 34px; height: 34px; color: var(--indigo); animation: pinceau 1.4s ease-in-out infinite; }
@keyframes pinceau { 50% { transform: rotate(-12deg) translateY(-3px); } }
.echec-maquette { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--rouge); background: var(--rouge-pale); font-weight: 550; }
.infos { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.infos .univers { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--indigo); }
.infos p { color: var(--doux); font-size: 0.95rem; flex: 1; }
.infos .bouton { margin-top: 12px; }

/* Construction */
.construction { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 54px; align-items: center; max-width: 920px; margin: 30px auto 0; padding: 0 20px; }
.construction .maquette-choisie { border-radius: 18px; overflow: hidden; box-shadow: var(--ombre-3); border: 1px solid var(--ligne); position: relative; }
.construction .maquette-choisie::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(124, 58, 237, 0.12) 50%, transparent 100%); background-size: 100% 300%; animation: balayage 2.4s linear infinite; }
@keyframes balayage { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
.liste-taches { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.liste-taches li { display: flex; align-items: center; gap: 12px; color: var(--faible); font-weight: 550; transition: color 0.3s; }
.liste-taches li .roue { visibility: hidden; }
.liste-taches li.en-cours { color: var(--encre); }
.liste-taches li.en-cours .roue, .liste-taches li.fait .roue { visibility: visible; }
.liste-taches li.fait { color: var(--doux); }
.jauge { height: 8px; background: var(--fond-2); border-radius: 99px; overflow: hidden; margin: 28px 0 12px; }
.jauge > div { height: 100%; width: 4%; background: var(--degrade); border-radius: 99px; transition: width 0.6s ease; }

/* Site prêt : aperçu */
.apercu-barre { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.bascule { display: inline-flex; gap: 4px; background: var(--fond-2); border-radius: 13px; padding: 4px; }
.bascule button { border: 0; background: none; padding: 8px 16px; border-radius: 10px; font-weight: 600; font-size: 0.92rem; color: var(--doux); display: inline-flex; align-items: center; gap: 7px; }
.bascule button svg { width: 16px; height: 16px; }
.bascule button[aria-pressed='true'] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(16, 20, 45, 0.1); }
.navigateur { width: min(1240px, calc(100vw - 40px)); margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre-3); transition: width 0.45s ease, border-radius 0.45s ease; }
.navigateur-barre { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f3f4f9; border-bottom: 1px solid var(--ligne); }
.navigateur-barre .points { display: flex; gap: 6px; }
.navigateur-barre .points i { width: 11px; height: 11px; border-radius: 50%; background: #dcdfe9; }
.navigateur-barre .url { flex: 1; text-align: center; font-size: 0.85rem; color: var(--doux); background: #fff; border-radius: 8px; padding: 5px 12px; border: 1px solid var(--ligne); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navigateur iframe { display: block; width: 100%; height: 70vh; min-height: 460px; border: 0; background: #fff; }
.navigateur.mobile { width: 392px; border-radius: 40px; border: 10px solid #121524; }
.navigateur.mobile .navigateur-barre { display: none; }
.navigateur.mobile iframe { height: 760px; max-height: 76vh; }
.barre-action { position: sticky; bottom: 0; z-index: 30; margin-top: 26px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(246, 247, 251, 0), rgba(246, 247, 251, 0.94) 30%); }
.barre-action .conteneur { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Zoom sur une maquette */
dialog { border: 0; padding: 0; border-radius: 20px; max-width: min(920px, 94vw); max-height: 92vh; overflow: auto; box-shadow: 0 40px 100px rgba(10, 12, 30, 0.4); }
dialog::backdrop { background: rgba(12, 15, 29, 0.62); backdrop-filter: blur(4px); }
dialog img { width: 100%; }
.fermer { position: sticky; top: 12px; float: right; margin: 12px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; font-size: 1.5rem; line-height: 1; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); z-index: 2; }
.zoom-actions { position: sticky; bottom: 0; padding: 16px; display: flex; justify-content: center; background: linear-gradient(transparent, rgba(255, 255, 255, 0.96) 40%); }

/* ------------------------------------------------------------------ mise en ligne */

.mel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; width: min(var(--largeur), calc(100vw - 40px)); margin: 24px auto 0; align-items: start; }
.mel-panneau { padding: 34px; animation: apparition 0.35s ease both; }
.mel-panneau h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.mel-panneau > p.intro { color: var(--doux); margin: 10px 0 26px; font-size: 1.04rem; }
.mel-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grille-champs .large { grid-column: 1 / -1; }

.mel-cote { position: sticky; top: 88px; display: grid; gap: 16px; }
.mel-cote .navigateur { width: 100%; border-radius: 16px; box-shadow: var(--ombre-2); }
.mel-cote .navigateur iframe { height: 300px; min-height: 0; pointer-events: none; }
.vignette-site, .ecran-echelle { position: relative; overflow: hidden; height: 300px; background: #fff; }
.vignette-site iframe, .ecran-echelle iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.vignette-site iframe { pointer-events: none; }
.recap { padding: 20px; }
.recap h3 { font-size: 1rem; margin-bottom: 12px; }
.recap dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 0.93rem; }
.recap dt { color: var(--doux); }
.recap dd { margin: 0; text-align: right; font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.recap .total { border-top: 1px solid var(--ligne); margin-top: 12px; padding-top: 12px; display: flex; justify-content: space-between; font-weight: 750; color: var(--encre); font-size: 1.05rem; }
.recap .total small { display: block; font-weight: 500; color: var(--doux); font-size: 0.8rem; text-align: right; }

.choix { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--ligne); border-radius: 16px; background: #fff; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; position: relative;
}
.option:hover { border-color: #c7c4f5; }
.option input[type='radio'] { appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ligne-forte); flex: none; display: grid; place-items: center; transition: border-color 0.15s; margin: 0; }
.option input[type='radio']::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--indigo); transform: scale(0); transition: transform 0.15s; }
.option:has(input:checked) { border-color: var(--indigo); box-shadow: var(--anneau); background: #fbfaff; }
.option input:checked { border-color: var(--indigo); }
.option input:checked::after { transform: scale(1); }
.option input:disabled ~ * { opacity: 0.5; }
.option:has(input:disabled) { cursor: default; background: #fafbfd; }
.option .option-texte { flex: 1; min-width: 0; }
.option .option-titre { display: block; font-weight: 650; color: var(--encre); overflow-wrap: anywhere; }
.option .option-sous { display: block; font-size: 0.88rem; color: var(--doux); margin-top: 2px; }
.option .option-fin { text-align: right; font-size: 0.88rem; }
.adresse-gratuite { display: flex; align-items: center; gap: 0; border: 1px solid var(--ligne-forte); border-radius: 10px; overflow: hidden; background: #fff; margin-top: 8px; max-width: 100%; }
.adresse-gratuite input { border: 0; outline: none; padding: 8px 10px; min-width: 0; flex: 1; font-weight: 600; color: var(--encre); background: none; }
.adresse-gratuite span { padding: 8px 10px; background: var(--fond-2); color: var(--doux); font-size: 0.9rem; white-space: nowrap; }
.sous-option { display: grid; gap: 8px; margin-top: 12px; }

.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.formule { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; border: 1.5px solid var(--ligne); border-radius: 18px; background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.formule:hover { transform: translateY(-2px); border-color: #c7c4f5; }
.formule:has(input:checked) { border-color: var(--indigo); box-shadow: var(--anneau), var(--ombre-2); }
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule .nom { font-family: var(--police-titre); font-weight: 750; font-size: 1.2rem; color: var(--encre); }
.formule .accroche { font-size: 0.88rem; color: var(--doux); margin-top: 2px; min-height: 2.7em; }
.formule .prix { margin: 14px 0 12px; font-family: var(--police-titre); font-size: 2.1rem; font-weight: 800; color: var(--encre); letter-spacing: -0.04em; }
.formule .prix small { font-family: var(--police); font-size: 0.9rem; font-weight: 500; color: var(--doux); letter-spacing: 0; }
.formule ul { list-style: none; padding: 0; display: grid; gap: 7px; font-size: 0.89rem; color: var(--texte); }
.formule li { display: flex; gap: 8px; align-items: flex-start; }
.formule li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.formule .ruban { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 0.74rem; font-weight: 700; color: #fff; background: var(--degrade-bouton); padding: 4px 11px; border-radius: 99px; white-space: nowrap; letter-spacing: 0.02em; }
.formule .note-domaine { margin-top: 12px; font-size: 0.82rem; font-weight: 600; color: var(--vert); }

.case { display: flex; gap: 12px; align-items: flex-start; font-size: 0.93rem; color: var(--texte); cursor: pointer; }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--indigo); flex: none; }
.securite { display: flex; align-items: center; gap: 8px; color: var(--doux); font-size: 0.86rem; }
.securite svg { width: 16px; height: 16px; color: var(--vert); }

.encart { border-radius: 14px; padding: 14px 16px; font-size: 0.93rem; }
.encart-info { background: #f1f0ff; color: #3b347d; border: 1px solid #e0ddff; }
.encart-ok { background: var(--vert-pale); color: #0b6b4c; border: 1px solid #c4ecdc; }
.encart-alerte { background: var(--orange-pale); color: #8a4b00; border: 1px solid #f5ddb5; }

/* ------------------------------------------------------------------ pages simples (connexion, paiement, légal) */

.page-centree { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 40px 20px 80px; }
.boite { width: min(460px, 100%); padding: 38px 34px; }
.boite h1 { font-size: 1.9rem; letter-spacing: -0.035em; }
.boite > p { color: var(--doux); margin: 10px 0 24px; }
.boite form { display: grid; gap: 16px; }
.code-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-6 input { width: 100%; aspect-ratio: 1 / 1.15; text-align: center; font-size: 1.6rem; font-weight: 700; border: 1.5px solid var(--ligne-forte); border-radius: 12px; outline: none; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.code-6 input:focus { border-color: var(--indigo); box-shadow: var(--anneau); }

.paiement { width: min(980px, calc(100vw - 40px)); margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.paiement .carte { padding: 30px; }
.ligne-prix { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.ligne-prix:last-of-type { border-bottom: 0; }
.ligne-prix span:last-child { font-weight: 650; color: var(--encre); white-space: nowrap; }
.total-paiement { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--police-titre); font-size: 1.5rem; font-weight: 800; color: var(--encre); padding-top: 16px; border-top: 2px solid var(--encre); margin-top: 6px; }
.total-paiement small { font-family: var(--police); font-size: 0.85rem; font-weight: 500; color: var(--doux); }

.legal { width: min(780px, calc(100vw - 40px)); margin: 30px auto 0; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--rayon-carte); padding: 44px clamp(22px, 5vw, 56px); box-shadow: var(--ombre-2); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 26px; }
.legal h2 { font-size: 1.25rem; margin: 30px 0 10px; letter-spacing: -0.02em; }
.legal p, .legal li { color: var(--texte); margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.note-juriste { font-size: 0.9rem; color: #8a4b00 !important; background: var(--orange-pale); border: 1px solid #f5ddb5; border-radius: 12px; padding: 10px 14px; }
.email-test { border-top: 1px solid var(--ligne); padding-top: 22px; margin-top: 22px; }
.email-test iframe { width: 100%; height: 560px; border: 1px solid var(--ligne); border-radius: 12px; background: #f4f5f9; }
.email-meta { font-size: 0.88rem; color: var(--doux) !important; }

/* ------------------------------------------------------------------ espace client */

.espace { width: min(var(--largeur), calc(100vw - 40px)); margin: 0 auto; padding: 26px 0 60px; }
.onglets-espace { display: flex; gap: 4px; }
.onglets-espace a { padding: 9px 14px; border-radius: 11px; text-decoration: none; color: var(--doux); font-weight: 600; font-size: 0.95rem; }
.onglets-espace a:hover { background: var(--fond-2); color: var(--encre); }
.onglets-espace a[aria-current='page'] { background: #fff; color: var(--encre); box-shadow: var(--ombre-1); border: 1px solid var(--ligne); }
.menu-compte { position: relative; }
.menu-compte > button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ligne); background: #fff; border-radius: 99px; padding: 5px 12px 5px 5px; font-weight: 600; font-size: 0.9rem; color: var(--encre); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--degrade); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; }
.menu-compte .menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 8px; display: grid; gap: 2px; z-index: 50; }
.menu-compte .menu a, .menu-compte .menu button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; color: var(--texte); text-decoration: none; font-weight: 550; font-size: 0.94rem; }
.menu-compte .menu a:hover, .menu-compte .menu button:hover { background: var(--fond-2); }
.menu-compte .menu .email { font-size: 0.84rem; color: var(--doux); padding: 8px 12px 10px; border-bottom: 1px solid var(--ligne); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }

.entete-espace { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin: 10px 0 24px; }
.entete-espace h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); }
.entete-espace p { color: var(--doux); margin-top: 6px; }

.quotas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.quota { padding: 18px 20px; }
.quota .quota-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.88rem; color: var(--doux); font-weight: 600; }
.quota .quota-valeur { font-family: var(--police-titre); font-size: 1.6rem; font-weight: 800; color: var(--encre); letter-spacing: -0.03em; margin: 6px 0 10px; }
.quota .quota-valeur small { font-family: var(--police); font-size: 0.9rem; color: var(--faible); font-weight: 500; letter-spacing: 0; }
.barre-quota { height: 7px; border-radius: 99px; background: var(--fond-2); overflow: hidden; }
.barre-quota > div { height: 100%; border-radius: 99px; background: var(--degrade); }
.barre-quota.presque > div { background: linear-gradient(90deg, #f5a524, #e8840c); }
.barre-quota.plein > div { background: var(--rouge); }

.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.carte-site { overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.carte-site:hover { transform: translateY(-3px); box-shadow: var(--ombre-3); }
.carte-site .vignette-site { height: 220px; background: var(--fond-2); border-bottom: 1px solid var(--ligne); }

.carte-site .corps { padding: 18px 20px 20px; display: grid; gap: 8px; }
.carte-site .ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.carte-site a.adresse { color: var(--doux); font-size: 0.9rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-site a.adresse:hover { color: var(--indigo); }
.carte-site .stats { display: flex; gap: 16px; color: var(--doux); font-size: 0.85rem; }
.carte-site .stats b { color: var(--encre); }
.carte-nouveau { display: grid; place-items: center; align-content: center; gap: 12px; min-height: 320px; border: 2px dashed var(--ligne-forte); border-radius: var(--rayon-carte); background: transparent; color: var(--doux); font-weight: 650; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; text-align: center; padding: 20px; }
.carte-nouveau:hover { border-color: var(--indigo); color: var(--indigo); background: #fbfaff; }
.carte-nouveau .plus { width: 52px; height: 52px; border-radius: 16px; background: var(--degrade); color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-weight: 400; }

/* Un site : discussion + aperçu */
.site-entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 20px; }
.site-entete h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.site-entete .adresse-site { display: inline-flex; align-items: center; gap: 8px; color: var(--doux); text-decoration: none; font-weight: 550; margin-top: 4px; }
.site-entete .adresse-site:hover { color: var(--indigo); }
.retour { display: inline-flex; align-items: center; gap: 6px; color: var(--doux); text-decoration: none; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.retour:hover { color: var(--encre); }

.atelier { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; align-items: start; }
.discussion { display: flex; flex-direction: column; height: min(78vh, 780px); position: sticky; top: 84px; }
.discussion-tete { padding: 16px 18px; border-bottom: 1px solid var(--ligne); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.discussion-tete h2 { font-size: 1.05rem; letter-spacing: -0.015em; }
.discussion-fil { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.discussion-fil .bulle { animation: apparition 0.3s ease both; white-space: pre-wrap; }
.bulle-socle.attente-bulle { display: inline-flex; align-items: center; gap: 10px; color: var(--doux); }
.bulle .version { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--doux); }
.bulle-socle.refus { background: var(--orange-pale); color: #7a4300; }
.discussion-vide { margin: auto 0; text-align: center; color: var(--doux); padding: 10px; }
.discussion-vide h3 { margin-bottom: 6px; }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.discussion-saisie { border-top: 1px solid var(--ligne); padding: 12px; display: flex; gap: 10px; align-items: flex-end; }
.discussion-saisie textarea { flex: 1; resize: none; border: 1px solid var(--ligne-forte); border-radius: 14px; padding: 12px 14px; min-height: 48px; max-height: 160px; outline: none; font-size: 0.98rem; line-height: 1.45; }
.discussion-saisie textarea:focus { border-color: #8b85f0; box-shadow: var(--anneau); }
.discussion-saisie .bouton { min-height: 48px; width: 48px; padding: 0; border-radius: 14px; }
.discussion-pied { padding: 0 16px 12px; font-size: 0.8rem; color: var(--faible); display: flex; justify-content: space-between; gap: 8px; }

.panneaux { display: grid; gap: 20px; }
.onglets-site { display: flex; gap: 4px; flex-wrap: wrap; background: var(--fond-2); padding: 4px; border-radius: 14px; width: fit-content; max-width: 100%; }
.onglets-site button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; color: var(--doux); display: inline-flex; align-items: center; gap: 7px; }
.onglets-site button[aria-selected='true'] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(16, 20, 45, 0.1); }
.onglets-site .compte { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--indigo); color: #fff; font-size: 0.74rem; display: grid; place-items: center; }
.panneau { padding: 24px; }
.panneau h3 { margin-bottom: 4px; }
.panneau > p.aide { margin-bottom: 18px; }
.atelier .navigateur { width: 100%; }
.atelier .navigateur iframe { height: min(70vh, 720px); }
.atelier .ecran-echelle { height: min(70vh, 720px); }
.atelier .navigateur.mobile { width: 392px; margin: 0 auto; }

.liste { display: grid; }
.liste > * { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.liste > *:last-child { border-bottom: 0; }
.liste .titre { font-weight: 600; color: var(--encre); }
.liste .sous { font-size: 0.86rem; color: var(--doux); }
.message-contact { display: block !important; }
.message-contact .tete { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.message-contact p { white-space: pre-wrap; color: var(--texte); }
.message-contact.non-lu { border-left: 3px solid var(--indigo); padding-left: 14px; }
.dns { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.9rem; }
.dns th, .dns td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ligne); }
.dns th { color: var(--doux); font-weight: 600; font-size: 0.82rem; }
.dns code { background: var(--fond-2); padding: 2px 7px; border-radius: 6px; font-size: 0.86rem; }

.graphique { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 10px; }
.graphique div { flex: 1; background: linear-gradient(180deg, #8b5cf6, #3b82f6); border-radius: 5px 5px 2px 2px; min-height: 3px; opacity: 0.85; position: relative; }
.graphique div:hover { opacity: 1; }
.graphique div[data-v='0'] { background: var(--ligne); }
.total-visites { font-family: var(--police-titre); font-size: 2rem; font-weight: 800; color: var(--encre); letter-spacing: -0.03em; }

.abonnement-actuel { padding: 26px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.abonnement-actuel .prix { font-family: var(--police-titre); font-size: 2rem; font-weight: 800; color: var(--encre); letter-spacing: -0.04em; }

.bienvenue {
  position: relative; overflow: hidden; padding: 30px 32px; margin-bottom: 24px; border-radius: var(--rayon-grand); color: #fff;
  background: radial-gradient(120% 160% at 0% 0%, #7c3aed 0%, #4f46e5 45%, #0ea5e9 100%); box-shadow: var(--ombre-3);
}
.bienvenue h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.bienvenue p { opacity: 0.92; margin: 8px 0 18px; max-width: 46em; }
.bienvenue .bouton-secondaire { border-color: transparent; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: confetti 2.8s ease-out forwards; }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, -20px) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), 220px) rotate(var(--r)); } }

.vide { text-align: center; padding: 50px 20px; color: var(--doux); }
.vide h2 { margin-bottom: 8px; }

/* Messages éphémères */
.toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--encre); color: #fff; padding: 13px 18px; border-radius: 14px; font-weight: 550; font-size: 0.94rem; box-shadow: var(--ombre-3); animation: apparition 0.3s ease both; }
.toast.erreur-toast { background: var(--rouge); }

/* Administration */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.chiffre { padding: 20px; }
.chiffre .valeur { font-family: var(--police-titre); font-size: 1.9rem; font-weight: 800; color: var(--encre); letter-spacing: -0.03em; }
.chiffre .libelle { color: var(--doux); font-size: 0.88rem; font-weight: 600; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau th { color: var(--doux); font-size: 0.82rem; font-weight: 600; }

/* ------------------------------------------------------------------ téléphone et tablette */

@media (max-width: 1080px) {
  .atelier { grid-template-columns: 1fr; }
  .discussion { position: static; height: 560px; }
  .mel { grid-template-columns: 1fr; }
  .mel-cote { position: static; order: -1; }
  .mel-cote .navigateur { display: none; }
  .quotas, .chiffres { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .maquettes, .etapes-liste, .atouts, .eventail { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .eventail figure:nth-child(n) { transform: none; }
  .discussion-section { grid-template-columns: 1fr; gap: 28px; }
  .construction { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .construction .maquette-choisie { max-width: 230px; margin: 0 auto; }
  .liste-taches { justify-items: center; }
  .formules { grid-template-columns: 1fr; }
  .paiement { grid-template-columns: 1fr; }
  .navigateur.mobile { width: min(392px, 100%); }
}
@media (max-width: 620px) {
  .heros { padding-top: 40px; }
  .onglet { font-size: 0.84rem; padding: 8px 11px; white-space: nowrap; }
  .saisie-pied { flex-direction: column; align-items: stretch; }
  .saisie-pied .aide { justify-content: center; }
  .saisie-pied .bouton { width: 100%; }
  .grille-champs { grid-template-columns: 1fr; }
  .mel-panneau { padding: 24px 20px; }
  .quotas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quota { padding: 14px; }
  .onglets-espace a { padding: 8px 10px; }
  .barre { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 64px; }
  .boite { padding: 30px 22px; }
  .navigateur iframe { height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- préversion : liste d'attente */
.etape-attente { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; text-align: left; }
.etape-attente label { font-weight: 650; font-size: 0.95rem; color: var(--encre); }
.etape-attente input[type="email"] {
  width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--ligne-forte); border-radius: 14px; background: #fff;
  font: inherit; font-size: 1.05rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.etape-attente input[type="email"]:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16); }
.attente-ok { text-align: center; padding: 34px 26px 30px; }
.attente-ok h2 { margin: 14px 0 8px; font-size: 1.6rem; }
.attente-ok p { margin: 0 auto; max-width: 30rem; color: var(--doux); line-height: 1.55; }
.attente-ok-icone { width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--violet), var(--bleu) 60%, var(--cyan)); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35); }
.attente-ok-icone svg { width: 28px; height: 28px; }